Upsell the GitLab Terraform features - iteration 3 frontend

app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue

 <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 });
@@ -19,24 +19,19 @@ export default {
   },
   components: {
     GlBanner,
+    UserCalloutDismisser,
   },
   mixins: [trackingMixin],
-  inject: ['terraformImagePath', 'bannerDismissedKey'],
-  data() {
-    return {
-      isVisible: true,
-    };
-  },
+  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);
@@ -45,17 +40,21 @@ export default {
 };
 </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"
-      @primary="buttonClick"
-      @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>

app/assets/javascripts/projects/terraform_notification/index.js

 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),
   });

spec/frontend/projects/terraform_notification/terraform_notification_spec.js

 import { GlBanner } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
-import { setCookie, parseBoolean } from '~/lib/utils/common_utils';
+import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
+import { mockTracking } from 'helpers/tracking_helper';
 import TerraformNotification from '~/projects/terraform_notification/components/terraform_notification.vue';
 import {
   EVENT_LABEL,
@@ -9,64 +9,77 @@ import {
   CLICK_EVENT,
 } from '~/projects/terraform_notification/constants';
 
-jest.mock('~/lib/utils/common_utils');
-
 const terraformImagePath = '/path/to/image';
-const bannerDismissedKey = 'terraform_notification_dismissed';
 
 describe('TerraformNotificationBanner', () => {
   let wrapper;
   let trackingSpy;
+  let userCalloutDismissSpy;
 
   const provideData = {
     terraformImagePath,
-    bannerDismissedKey,
   };
   const findBanner = () => wrapper.findComponent(GlBanner);
 
-  beforeEach(() => {
+  const createComponent = ({ shouldShowCallout = true } = {}) => {
+    userCalloutDismissSpy = jest.fn();
+
     wrapper = shallowMount(TerraformNotification, {
       provide: provideData,
-      stubs: { GlBanner },
+      stubs: {
+        GlBanner,
+        UserCalloutDismisser: makeMockUserCalloutDismisser({
+          dismiss: userCalloutDismissSpy,
+          shouldShowCallout,
+        }),
+      },
     });
+  };
+
+  beforeEach(() => {
+    createComponent();
     trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
   });
 
   afterEach(() => {
     wrapper.destroy();
-    parseBoolean.mockReturnValue(false);
-    unmockTracking();
   });
 
-  describe('when the dismiss cookie is not set', () => {
+  describe('when user has already dismissed the banner', () => {
+    beforeEach(() => {
+      createComponent({
+        shouldShowCallout: false,
+      });
+    });
+    it('should not render the banner', () => {
+      expect(findBanner().exists()).toBe(false);
+    });
+  });
+
+  describe("when user hasn't yet dismissed the banner", () => {
     it('should render the banner', () => {
       expect(findBanner().exists()).toBe(true);
     });
   });
 
   describe('when close button is clicked', () => {
-    beforeEach(async () => {
-      await findBanner().vm.$emit('close');
-    });
-
-    it('should set the cookie with the bannerDismissedKey', () => {
-      expect(setCookie).toHaveBeenCalledWith(bannerDismissedKey, true);
+    beforeEach(() => {
+      wrapper.vm.$refs.calloutDismisser.dismiss = userCalloutDismissSpy;
+      findBanner().vm.$emit('close');
     });
-
     it('should send the dismiss event', () => {
       expect(trackingSpy).toHaveBeenCalledWith(undefined, DISMISS_EVENT, {
         label: EVENT_LABEL,
       });
     });
-
-    it('should remove the banner', () => {
-      expect(findBanner().exists()).toBe(false);
+    it('should call the dismiss callback', () => {
+      expect(userCalloutDismissSpy).toHaveBeenCalledTimes(1);
     });
   });
 
   describe('when docs link is clicked', () => {
-    beforeEach(async () => {
-      await findBanner().vm.$emit('primary');
+    beforeEach(() => {
+      findBanner().vm.$emit('primary');
     });
 
     it('should send button click event', () => {