1 files changed, 90 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/notification/pipeline_notification.vue b/app/assets/javascripts/pipelines/components/notification/pipeline_notification.vue
new file mode 100644
index 00000000000..6982586ab12
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/notification/pipeline_notification.vue
@@ -0,0 +1,90 @@
+<script>
+import { GlBanner, GlLink, GlSprintf } from '@gitlab/ui';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+import DismissPipelineNotification 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: DismissPipelineNotification,
+          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>