Add latest changes from gitlab-org/gitlab@14-3-stable-eev14.3.0-rc42

3 files changed, 44 insertions, 26 deletions

diff --git a/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue b/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue
index 02e31d6fbb3..668cc10c454 100644
--- a/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue
+++ b/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue
@@ -1,8 +1,12 @@
 <script>
 import { GlBanner } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { setCookie } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
+import Tracking from '~/tracking';
+import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
+import { EVENT_LABEL, DISMISS_EVENT, CLICK_EVENT } from '../constants';
+
+const trackingMixin = Tracking.mixin({ label: EVENT_LABEL });
 
 export default {
   name: 'TerraformNotification',
@@ -15,37 +19,42 @@ export default {
   },
   components: {
     GlBanner,
+    UserCalloutDismisser,
   },
-  inject: ['terraformImagePath', 'bannerDismissedKey'],
-  data() {
-    return {
-      isVisible: true,
-    };
-  },
+  mixins: [trackingMixin],
+  inject: ['terraformImagePath'],
   computed: {
     docsUrl() {
-      return helpPagePath('user/infrastructure/terraform_state');
+      return helpPagePath('user/infrastructure/iac/terraform_state.md');
     },
   },
   methods: {
     handleClose() {
-      setCookie(this.bannerDismissedKey, true);
-      this.isVisible = false;
+      this.track(DISMISS_EVENT);
+      this.$refs.calloutDismisser.dismiss();
+    },
+    buttonClick() {
+      this.track(CLICK_EVENT);
     },
   },
 };
 </script>
 <template>
-  <div v-if="isVisible" class="gl-py-5">
-    <gl-banner
-      :title="$options.i18n.title"
-      :button-text="$options.i18n.buttonText"
-      :button-link="docsUrl"
-      :svg-path="terraformImagePath"
-      variant="promotion"
-      @close="handleClose"
-    >
-      <p>{{ $options.i18n.description }}</p>
-    </gl-banner>
-  </div>
+  <user-callout-dismisser ref="calloutDismisser" feature-name="terraform_notification_dismissed">
+    <template #default="{ shouldShowCallout }">
+      <div v-if="shouldShowCallout" class="gl-py-5">
+        <gl-banner
+          :title="$options.i18n.title"
+          :button-text="$options.i18n.buttonText"
+          :button-link="docsUrl"
+          :svg-path="terraformImagePath"
+          variant="promotion"
+          @primary="buttonClick"
+          @close="handleClose"
+        >
+          <p>{{ $options.i18n.description }}</p>
+        </gl-banner>
+      </div>
+    </template>
+  </user-callout-dismisser>
 </template>
diff --git a/app/assets/javascripts/projects/terraform_notification/constants.js b/app/assets/javascripts/projects/terraform_notification/constants.js
new file mode 100644
index 00000000000..029f40b2ab2
--- /dev/null
+++ b/app/assets/javascripts/projects/terraform_notification/constants.js
@@ -0,0 +1,3 @@
+export const EVENT_LABEL = 'terraform_banner';
+export const DISMISS_EVENT = 'dismiss_banner';
+export const CLICK_EVENT = 'click_button';
diff --git a/app/assets/javascripts/projects/terraform_notification/index.js b/app/assets/javascripts/projects/terraform_notification/index.js
index 0a273247930..362e71ed902 100644
--- a/app/assets/javascripts/projects/terraform_notification/index.js
+++ b/app/assets/javascripts/projects/terraform_notification/index.js
@@ -1,12 +1,18 @@
 import Vue from 'vue';
-import { parseBoolean, getCookie } from '~/lib/utils/common_utils';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 import TerraformNotification from './components/terraform_notification.vue';
 
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
+
 export default () => {
   const el = document.querySelector('.js-terraform-notification');
-  const bannerDismissedKey = 'terraform_notification_dismissed';
 
-  if (!el || parseBoolean(getCookie(bannerDismissedKey))) {
+  if (!el) {
     return false;
   }
 
@@ -14,9 +20,9 @@ export default () => {
 
   return new Vue({
     el,
+    apolloProvider,
     provide: {
       terraformImagePath,
-      bannerDismissedKey,
     },
     render: (createElement) => createElement(TerraformNotification),
   });