1 files changed, 31 insertions, 22 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>