diff options
Diffstat (limited to 'app/assets/javascripts/groups/components/invite_members_banner.vue')
-rw-r--r-- | app/assets/javascripts/groups/components/invite_members_banner.vue | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/app/assets/javascripts/groups/components/invite_members_banner.vue b/app/assets/javascripts/groups/components/invite_members_banner.vue new file mode 100644 index 00000000000..da7adab1d86 --- /dev/null +++ b/app/assets/javascripts/groups/components/invite_members_banner.vue @@ -0,0 +1,76 @@ +<script> +import { GlBanner } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import { parseBoolean, setCookie, getCookie } from '~/lib/utils/common_utils'; +import Tracking from '~/tracking'; + +const trackingMixin = Tracking.mixin(); + +export default { + components: { + GlBanner, + }, + mixins: [trackingMixin], + inject: ['svgPath', 'inviteMembersPath', 'isDismissedKey', 'trackLabel'], + data() { + return { + isDismissed: parseBoolean(getCookie(this.isDismissedKey)), + tracking: { + label: this.trackLabel, + }, + }; + }, + created() { + this.$nextTick(() => { + this.addTrackingAttributesToButton(); + }); + }, + mounted() { + this.trackOnShow(); + }, + methods: { + handleClose() { + setCookie(this.isDismissedKey, true); + this.isDismissed = true; + this.track(this.$options.dismissEvent); + }, + trackOnShow() { + if (!this.isDismissed) this.track(this.$options.displayEvent); + }, + addTrackingAttributesToButton() { + if (this.$refs.banner === undefined) return; + + const button = this.$refs.banner.$el.querySelector(`[href='${this.inviteMembersPath}']`); + + if (button) { + button.setAttribute('data-track-event', this.$options.buttonClickEvent); + button.setAttribute('data-track-label', this.trackLabel); + } + }, + }, + i18n: { + title: s__('InviteMembersBanner|Collaborate with your team'), + body: s__( + "InviteMembersBanner|We noticed that you haven't invited anyone to this group. Invite your colleagues so you can discuss issues, collaborate on merge requests, and share your knowledge.", + ), + button_text: s__('InviteMembersBanner|Invite your colleagues'), + }, + displayEvent: 'invite_members_banner_displayed', + buttonClickEvent: 'invite_members_banner_button_clicked', + dismissEvent: 'invite_members_banner_dismissed', +}; +</script> + +<template> + <gl-banner + v-if="!isDismissed" + ref="banner" + :title="$options.i18n.title" + :button-text="$options.i18n.button_text" + :svg-path="svgPath" + :button-link="inviteMembersPath" + @close="handleClose" + > + <p>{{ $options.i18n.body }}</p> + </gl-banner> +</template> |