Merge branch '332656-remove-pipeline-callout' into 'master'

Remove new graph callout

See merge request gitlab-org/gitlab!63295

app/assets/javascripts/pipelines/components/notification/pipeline_notification.vue

-<script>
-import { GlBanner, GlLink, GlSprintf } from '@gitlab/ui';
-import createFlash from '~/flash';
-import { __ } from '~/locale';
-import DismissPipelineGraphCallout from '../../graphql/mutations/dismiss_pipeline_notification.graphql';
-import getUserCallouts from '../../graphql/queries/get_user_callouts.query.graphql';
-
-const featureName = 'pipeline_needs_banner';
-const enumFeatureName = featureName.toUpperCase();
-
-export default {
-  i18n: {
-    title: __('View job dependencies in the pipeline graph!'),
-    description: __(
-      'You can now group jobs in the pipeline graph based on which jobs are configured to run first, if you use the %{codeStart}needs:%{codeEnd} keyword to establish job dependencies in your CI/CD pipelines. %{linkStart}Learn how to speed up your pipeline with needs.%{linkEnd}',
-    ),
-    buttonText: __('Provide feedback'),
-  },
-  components: {
-    GlBanner,
-    GlLink,
-    GlSprintf,
-  },
-  apollo: {
-    callouts: {
-      query: getUserCallouts,
-      update(data) {
-        return data?.currentUser?.callouts?.nodes.map((c) => c.featureName);
-      },
-      error() {
-        this.hasError = true;
-      },
-    },
-  },
-  inject: ['dagDocPath'],
-  data() {
-    return {
-      callouts: [],
-      dismissedAlert: false,
-      hasError: false,
-    };
-  },
-  computed: {
-    showBanner() {
-      return (
-        !this.$apollo.queries.callouts?.loading &&
-        !this.hasError &&
-        !this.dismissedAlert &&
-        !this.callouts.includes(enumFeatureName)
-      );
-    },
-  },
-  methods: {
-    handleClose() {
-      this.dismissedAlert = true;
-      try {
-        this.$apollo.mutate({
-          mutation: DismissPipelineGraphCallout,
-          variables: {
-            featureName,
-          },
-        });
-      } catch {
-        createFlash(__('There was a problem dismissing this notification.'));
-      }
-    },
-  },
-};
-</script>
-<template>
-  <gl-banner
-    v-if="showBanner"
-    :title="$options.i18n.title"
-    :button-text="$options.i18n.buttonText"
-    button-link="https://gitlab.com/gitlab-org/gitlab/-/issues/327688"
-    variant="introduction"
-    @close="handleClose"
-  >
-    <p>
-      <gl-sprintf :message="$options.i18n.description">
-        <template #link="{ content }">
-          <gl-link :href="dagDocPath" target="_blank"> {{ content }}</gl-link>
-        </template>
-        <template #code="{ content }">
-          <code>{{ content }}</code>
-        </template>
-      </gl-sprintf>
-    </p>
-  </gl-banner>
-</template>

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -9,7 +9,6 @@ import GraphBundleMixin from './mixins/graph_pipeline_bundle_mixin';
 import createDagApp from './pipeline_details_dag';
 import { createPipelinesDetailApp } from './pipeline_details_graph';
 import { createPipelineHeaderApp } from './pipeline_details_header';
-import { createPipelineNotificationApp } from './pipeline_details_notification';
 import { apolloProvider } from './pipeline_shared_client';
 import createTestReportsStore from './stores/test_reports';
 import { reportToSentry } from './utils';
@@ -20,7 +19,6 @@ const SELECTORS = {
   PIPELINE_DETAILS: '.js-pipeline-details-vue',
   PIPELINE_GRAPH: '#js-pipeline-graph-vue',
   PIPELINE_HEADER: '#js-pipeline-header-vue',
-  PIPELINE_NOTIFICATION: '#js-pipeline-notification',
   PIPELINE_TESTS: '#js-pipeline-tests-detail',
 };
 
@@ -101,14 +99,6 @@ export default async function initPipelineDetailsBundle() {
     Flash(__('An error occurred while loading a section of this page.'));
   }
 
-  if (gon.features.pipelineGraphLayersView) {
-    try {
-      createPipelineNotificationApp(SELECTORS.PIPELINE_NOTIFICATION, apolloProvider);
-    } catch {
-      Flash(__('An error occurred while loading a section of this page.'));
-    }
-  }
-
   if (canShowNewPipelineDetails) {
     try {
       createPipelinesDetailApp(SELECTORS.PIPELINE_GRAPH, apolloProvider, dataset);

app/assets/javascripts/pipelines/pipeline_details_notification.js

-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import PipelineNotification from './components/notification/pipeline_notification.vue';
-
-Vue.use(VueApollo);
-
-export const createPipelineNotificationApp = (elSelector, apolloProvider) => {
-  const el = document.querySelector(elSelector);
-
-  if (!el) {
-    return;
-  }
-
-  const { dagDocPath } = el?.dataset;
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    components: {
-      PipelineNotification,
-    },
-    provide: {
-      dagDocPath,
-    },
-    apolloProvider,
-    render(createElement) {
-      return createElement('pipeline-notification');
-    },
-  });
-};

app/views/projects/pipelines/show.html.haml

@@ -28,7 +28,6 @@
       - lint_link_start = '<a href="%{url}">'.html_safe % { url: lint_link_url }
       = s_('You can also test your %{gitlab_ci_yml} in %{lint_link_start}CI Lint%{lint_link_end}').html_safe % { gitlab_ci_yml: '.gitlab-ci.yml', lint_link_start: lint_link_start, lint_link_end: '</a>'.html_safe }
 
-  #js-pipeline-notification{ data: { dag_doc_path: help_page_path('ci/yaml/README.md', anchor: 'needs') } }
   = render "projects/pipelines/with_tabs", pipeline: @pipeline, stages: @stages, pipeline_has_errors: pipeline_has_errors
 
 .js-pipeline-details-vue{ data: { endpoint: project_pipeline_path(@project, @pipeline, format: :json), metrics_path: namespace_project_ci_prometheus_metrics_histograms_path(namespace_id: @project.namespace, project_id: @project, format: :json), pipeline_project_path: @project.full_path, pipeline_iid: @pipeline.iid, graphql_resource_etag: graphql_etag_pipeline_path(@pipeline) } }

locale/gitlab.pot

@@ -26792,9 +26792,6 @@ msgstr ""
 msgid "Protocol"
 msgstr ""
 
-msgid "Provide feedback"
-msgstr ""
-
 msgid "Provider"
 msgstr ""
 
@@ -33000,9 +32997,6 @@ msgstr ""
 msgid "There was a problem communicating with your device."
 msgstr ""
 
-msgid "There was a problem dismissing this notification."
-msgstr ""
-
 msgid "There was a problem fetching branches."
 msgstr ""
 
@@ -36139,9 +36133,6 @@ msgstr ""
 msgid "View job"
 msgstr ""
 
-msgid "View job dependencies in the pipeline graph!"
-msgstr ""
-
 msgid "View job log"
 msgstr ""
 
@@ -37401,9 +37392,6 @@ msgstr ""
 msgid "You can now export your security dashboard to a CSV report."
 msgstr ""
 
-msgid "You can now group jobs in the pipeline graph based on which jobs are configured to run first, if you use the %{codeStart}needs:%{codeEnd} keyword to establish job dependencies in your CI/CD pipelines. %{linkStart}Learn how to speed up your pipeline with needs.%{linkEnd}"
-msgstr ""
-
 msgid "You can now submit a merge request to get this change into the original branch."
 msgstr ""
 

spec/frontend/pipelines/notification/pipeline_notification_spec.js

-import { GlBanner } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import VueApollo from 'vue-apollo';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import PipelineNotification from '~/pipelines/components/notification/pipeline_notification.vue';
-import getUserCallouts from '~/pipelines/graphql/queries/get_user_callouts.query.graphql';
-
-describe('Pipeline notification', () => {
-  const localVue = createLocalVue();
-
-  let wrapper;
-  const dagDocPath = 'my/dag/path';
-
-  const createWrapper = (apolloProvider) => {
-    return shallowMount(PipelineNotification, {
-      localVue,
-      provide: {
-        dagDocPath,
-      },
-      apolloProvider,
-    });
-  };
-
-  const createWrapperWithApollo = async ({ callouts = [], isLoading = false } = {}) => {
-    localVue.use(VueApollo);
-
-    const mappedCallouts = callouts.map((callout) => {
-      return { featureName: callout, __typename: 'UserCallout' };
-    });
-
-    const mockCalloutsResponse = {
-      data: {
-        currentUser: {
-          id: 45,
-          __typename: 'User',
-          callouts: {
-            id: 5,
-            __typename: 'UserCalloutConnection',
-            nodes: mappedCallouts,
-          },
-        },
-      },
-    };
-    const getUserCalloutsHandler = jest.fn().mockResolvedValue(mockCalloutsResponse);
-    const requestHandlers = [[getUserCallouts, getUserCalloutsHandler]];
-
-    const apolloWrapper = createWrapper(createMockApollo(requestHandlers));
-    if (!isLoading) {
-      await nextTick();
-    }
-
-    return apolloWrapper;
-  };
-
-  const findBanner = () => wrapper.findComponent(GlBanner);
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('shows the banner if the user has never seen it', async () => {
-    wrapper = await createWrapperWithApollo({ callouts: ['random'] });
-
-    expect(findBanner().exists()).toBe(true);
-  });
-
-  it('does not show the banner while the user callout query is loading', async () => {
-    wrapper = await createWrapperWithApollo({ callouts: ['random'], isLoading: true });
-
-    expect(findBanner().exists()).toBe(false);
-  });
-
-  it('does not show the banner if the user has previously dismissed it', async () => {
-    wrapper = await createWrapperWithApollo({ callouts: ['pipeline_needs_banner'.toUpperCase()] });
-
-    expect(findBanner().exists()).toBe(false);
-  });
-});