1 files changed, 66 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue b/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue
new file mode 100644
index 00000000000..6b907f31a37
--- /dev/null
+++ b/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue
@@ -0,0 +1,66 @@
+<script>
+import { GlBanner } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import axios from '~/lib/utils/axios_utils';
+
+export default {
+  components: {
+    GlBanner,
+  },
+  inject: {
+    svgPath: {
+      default: '',
+    },
+    preferencesBehaviorPath: {
+      default: '',
+    },
+    calloutsPath: {
+      default: '',
+    },
+    calloutsFeatureId: {
+      default: '',
+    },
+  },
+  i18n: {
+    title: s__('CustomizeHomepageBanner|Do you want to customize this page?'),
+    body: s__(
+      'CustomizeHomepageBanner|This page shows a list of your projects by default but it can be changed to show projects\' activity, groups, your to-do list, assigned issues, assigned merge requests, and more. You can change this under "Homepage content" in your preferences',
+    ),
+    button_text: s__('CustomizeHomepageBanner|Go to preferences'),
+  },
+  data() {
+    return {
+      visible: true,
+    };
+  },
+  methods: {
+    handleClose() {
+      axios
+        .post(this.calloutsPath, {
+          feature_name: this.calloutsFeatureId,
+        })
+        .catch(e => {
+          // eslint-disable-next-line @gitlab/require-i18n-strings, no-console
+          console.error('Failed to dismiss banner.', e);
+        });
+
+      this.visible = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-banner
+    v-if="visible"
+    :title="$options.i18n.title"
+    :button-text="$options.i18n.button_text"
+    :button-link="preferencesBehaviorPath"
+    :svg-path="svgPath"
+    @close="handleClose"
+  >
+    <p>
+      {{ $options.i18n.body }}
+    </p>
+  </gl-banner>
+</template>