diff options
Diffstat (limited to 'app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue')
-rw-r--r-- | app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue | 53 |
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> |