Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

2 files changed, 23 insertions, 32 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 0b398eddc9c..02e31d6fbb3 100644
--- a/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue
+++ b/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue
@@ -1,7 +1,7 @@
 <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>
diff --git a/app/assets/javascripts/projects/terraform_notification/index.js b/app/assets/javascripts/projects/terraform_notification/index.js
index eb04f109a8e..0a273247930 100644
--- a/app/assets/javascripts/projects/terraform_notification/index.js
+++ b/app/assets/javascripts/projects/terraform_notification/index.js
@@ -1,18 +1,23 @@
 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),
   });
 };