Merge branch '336360-upsell-the-gitlab-terraform-features-iteration-2-fe' into 'master'

Upsell the GitLab Terraform features - iteration 2

See merge request gitlab-org/gitlab!68135

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

 <script>
 import { GlBanner } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { parseBoolean, setCookie, getCookie } from '~/lib/utils/common_utils';
+import { setCookie } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 
 export default {
@@ -16,50 +16,36 @@ export default {
   components: {
     GlBanner,
   },
-  props: {
-    projectId: {
-      type: Number,
-      required: true,
-    },
-  },
+  inject: ['terraformImagePath', 'bannerDismissedKey'],
   data() {
     return {
       isVisible: true,
     };
   },
   computed: {
-    bannerDissmisedKey() {
-      return `terraform_notification_dismissed_for_project_${this.projectId}`;
-    },
     docsUrl() {
       return helpPagePath('user/infrastructure/terraform_state');
     },
   },
-  created() {
-    if (parseBoolean(getCookie(this.bannerDissmisedKey))) {
-      this.isVisible = false;
-    }
-  },
   methods: {
     handleClose() {
-      setCookie(this.bannerDissmisedKey, true);
+      setCookie(this.bannerDismissedKey, true);
       this.isVisible = false;
     },
   },
 };
 </script>
 <template>
-  <div v-if="isVisible">
-    <div class="gl-py-5">
-      <gl-banner
-        :title="$options.i18n.title"
-        :button-text="$options.i18n.buttonText"
-        :button-link="docsUrl"
-        variant="introduction"
-        @close="handleClose"
-      >
-        <p>{{ $options.i18n.description }}</p>
-      </gl-banner>
-    </div>
+  <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>
 </template>

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

 import Vue from 'vue';
+import { parseBoolean, getCookie } from '~/lib/utils/common_utils';
 import TerraformNotification from './components/terraform_notification.vue';
 
 export default () => {
   const el = document.querySelector('.js-terraform-notification');
+  const bannerDismissedKey = 'terraform_notification_dismissed';
 
-  if (!el) {
+  if (!el || parseBoolean(getCookie(bannerDismissedKey))) {
     return false;
   }
 
-  const { projectId } = el.dataset;
+  const { terraformImagePath } = el.dataset;
 
   return new Vue({
     el,
-    render: (createElement) =>
-      createElement(TerraformNotification, { props: { projectId: Number(projectId) } }),
+    provide: {
+      terraformImagePath,
+      bannerDismissedKey,
+    },
+    render: (createElement) => createElement(TerraformNotification),
   });
 };

app/views/projects/_terraform_banner.html.haml

@@ -2,4 +2,4 @@
 
 - if show_terraform_banner?(project)
   .container-fluid{ class: @content_class }
-    .js-terraform-notification{ data: { project_id: project.id } }
+    .js-terraform-notification{ data: { terraform_image_path: image_path('illustrations/third-party-logos/ci_cd-template-logos/terraform.svg') } }

spec/frontend/projects/terraform_notification/terraform_notification_spec.js

@@ -5,19 +5,21 @@ import TerraformNotification from '~/projects/terraform_notification/components/
 
 jest.mock('~/lib/utils/common_utils');
 
-const bannerDissmisedKey = 'terraform_notification_dismissed_for_project_1';
+const terraformImagePath = '/path/to/image';
+const bannerDismissedKey = 'terraform_notification_dismissed';
 
 describe('TerraformNotificationBanner', () => {
   let wrapper;
 
-  const propsData = {
-    projectId: 1,
+  const provideData = {
+    terraformImagePath,
+    bannerDismissedKey,
   };
   const findBanner = () => wrapper.findComponent(GlBanner);
 
   beforeEach(() => {
     wrapper = shallowMount(TerraformNotification, {
-      propsData,
+      provide: provideData,
       stubs: { GlBanner },
     });
   });
@@ -27,19 +29,6 @@ describe('TerraformNotificationBanner', () => {
     parseBoolean.mockReturnValue(false);
   });
 
-  describe('when the dismiss cookie is set', () => {
-    beforeEach(() => {
-      parseBoolean.mockReturnValue(true);
-      wrapper = shallowMount(TerraformNotification, {
-        propsData,
-      });
-    });
-
-    it('should not render the banner', () => {
-      expect(findBanner().exists()).toBe(false);
-    });
-  });
-
   describe('when the dismiss cookie is not set', () => {
     it('should render the banner', () => {
       expect(findBanner().exists()).toBe(true);
@@ -51,8 +40,8 @@ describe('TerraformNotificationBanner', () => {
       await findBanner().vm.$emit('close');
     });
 
-    it('should set the cookie with the bannerDissmisedKey', () => {
-      expect(setCookie).toHaveBeenCalledWith(bannerDissmisedKey, true);
+    it('should set the cookie with the bannerDismissedKey', () => {
+      expect(setCookie).toHaveBeenCalledWith(bannerDismissedKey, true);
     });
 
     it('should remove the banner', () => {