Add latest changes from gitlab-org/gitlab@master

4 files changed, 53 insertions, 1 deletions

diff --git a/app/assets/javascripts/artifacts/components/feedback_banner.vue b/app/assets/javascripts/artifacts/components/feedback_banner.vue
new file mode 100644
index 00000000000..d2c96b1a201
--- /dev/null
+++ b/app/assets/javascripts/artifacts/components/feedback_banner.vue
@@ -0,0 +1,41 @@
+<script>
+import { GlBanner } from '@gitlab/ui';
+import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
+import {
+  I18N_FEEDBACK_BANNER_TITLE,
+  I18N_FEEDBACK_BANNER_BODY,
+  I18N_FEEDBACK_BANNER_BUTTON,
+  FEEDBACK_URL,
+} from '../constants';
+
+export default {
+  components: {
+    GlBanner,
+    UserCalloutDismisser,
+  },
+  inject: ['artifactsManagementFeedbackImagePath'],
+  FEEDBACK_URL,
+  i18n: {
+    title: I18N_FEEDBACK_BANNER_TITLE,
+    body: I18N_FEEDBACK_BANNER_BODY,
+    button: I18N_FEEDBACK_BANNER_BUTTON,
+  },
+};
+</script>
+<template>
+  <user-callout-dismisser feature-name="artifacts_management_page_feedback_banner">
+    <template #default="{ dismiss, shouldShowCallout }">
+      <gl-banner
+        v-if="shouldShowCallout"
+        class="gl-mb-6"
+        :title="$options.i18n.title"
+        :button-text="$options.i18n.button"
+        :button-link="$options.FEEDBACK_URL"
+        :svg-path="artifactsManagementFeedbackImagePath"
+        @close="dismiss"
+      >
+        <p>{{ $options.i18n.body }}</p>
+      </gl-banner>
+    </template>
+  </user-callout-dismisser>
+</template>
diff --git a/app/assets/javascripts/artifacts/components/job_artifacts_table.vue b/app/assets/javascripts/artifacts/components/job_artifacts_table.vue
index 34e443f4e58..3b5c5f54a82 100644
--- a/app/assets/javascripts/artifacts/components/job_artifacts_table.vue
+++ b/app/assets/javascripts/artifacts/components/job_artifacts_table.vue
@@ -35,6 +35,7 @@ import {
   INITIAL_LAST_PAGE_SIZE,
 } from '../constants';
 import ArtifactsTableRowDetails from './artifacts_table_row_details.vue';
+import FeedbackBanner from './feedback_banner.vue';
 
 const INITIAL_PAGINATION_STATE = {
   currentPage: INITIAL_CURRENT_PAGE,
@@ -58,6 +59,7 @@ export default {
     CiIcon,
     TimeAgo,
     ArtifactsTableRowDetails,
+    FeedbackBanner,
   },
   inject: ['projectPath'],
   apollo: {
@@ -214,6 +216,7 @@ export default {
 </script>
 <template>
   <div>
+    <feedback-banner />
     <gl-table
       :items="jobArtifacts"
       :fields="$options.fields"
diff --git a/app/assets/javascripts/artifacts/constants.js b/app/assets/javascripts/artifacts/constants.js
index 5fcc4f2b76e..28fd81fa641 100644
--- a/app/assets/javascripts/artifacts/constants.js
+++ b/app/assets/javascripts/artifacts/constants.js
@@ -43,6 +43,13 @@ export const I18N_MODAL_BODY = s__(
 export const I18N_MODAL_PRIMARY = s__('Artifacts|Delete artifact');
 export const I18N_MODAL_CANCEL = __('Cancel');
 
+export const I18N_FEEDBACK_BANNER_TITLE = s__('Artifacts|Help us improve this page');
+export const I18N_FEEDBACK_BANNER_BODY = s__(
+  'Artifacts|We want you to be able to use this page to easily manage your CI/CD job artifacts. We are working to improve this experience and would appreciate any feedback you have about the improvements we are making.',
+);
+export const I18N_FEEDBACK_BANNER_BUTTON = s__('Artifacts|Take a quick survey');
+export const FEEDBACK_URL = 'https://gitlab.fra1.qualtrics.com/jfe/form/SV_cI9rAUI20Vo2St8';
+
 export const INITIAL_CURRENT_PAGE = 1;
 export const INITIAL_PREVIOUS_PAGE_CURSOR = '';
 export const INITIAL_NEXT_PAGE_CURSOR = '';
diff --git a/app/assets/javascripts/artifacts/index.js b/app/assets/javascripts/artifacts/index.js
index b5146e0f0e9..a05fe640d31 100644
--- a/app/assets/javascripts/artifacts/index.js
+++ b/app/assets/javascripts/artifacts/index.js
@@ -16,13 +16,14 @@ export const initArtifactsTable = () => {
     return false;
   }
 
-  const { projectPath } = el.dataset;
+  const { projectPath, artifactsManagementFeedbackImagePath } = el.dataset;
 
   return new Vue({
     el,
     apolloProvider,
     provide: {
       projectPath,
+      artifactsManagementFeedbackImagePath,
     },
     render: (createElement) => createElement(JobArtifactsTable),
   });