diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-18 13:34:06 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-18 13:34:06 +0300 |
commit | 859a6fb938bb9ee2a317c46dfa4fcc1af49608f0 (patch) | |
tree | d7f2700abe6b4ffcb2dcfc80631b2d87d0609239 /app/assets/javascripts/feature_highlight/feature_highlight_popover.vue | |
parent | 446d496a6d000c73a304be52587cd9bbc7493136 (diff) |
Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42
Diffstat (limited to 'app/assets/javascripts/feature_highlight/feature_highlight_popover.vue')
-rw-r--r-- | app/assets/javascripts/feature_highlight/feature_highlight_popover.vue | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_popover.vue b/app/assets/javascripts/feature_highlight/feature_highlight_popover.vue new file mode 100644 index 00000000000..2fd92a1bb11 --- /dev/null +++ b/app/assets/javascripts/feature_highlight/feature_highlight_popover.vue @@ -0,0 +1,101 @@ +<script> +import clusterPopover from '@gitlab/svgs/dist/illustrations/cluster_popover.svg'; +import { + GlPopover, + GlSprintf, + GlLink, + GlButton, + GlSafeHtmlDirective as SafeHtml, +} from '@gitlab/ui'; +import { __ } from '~/locale'; +import { POPOVER_TARGET_ID } from './constants'; +import { dismiss } from './feature_highlight_helper'; + +export default { + components: { + GlPopover, + GlSprintf, + GlLink, + GlButton, + }, + directives: { + SafeHtml, + }, + props: { + autoDevopsHelpPath: { + type: String, + required: true, + }, + highlightId: { + type: String, + required: true, + }, + dismissEndpoint: { + type: String, + required: true, + }, + }, + data() { + return { + dismissed: false, + triggerHidden: false, + }; + }, + methods: { + dismiss() { + dismiss(this.dismissEndpoint, this.highlightId); + this.$refs.popover.$emit('close'); + this.dismissed = true; + }, + hideTrigger() { + if (this.dismissed) { + this.triggerHidden = true; + } + }, + }, + clusterPopover, + targetId: POPOVER_TARGET_ID, + i18n: { + highlightMessage: __('Allows you to add and manage Kubernetes clusters.'), + autoDevopsProTipMessage: __( + 'Protip: %{linkStart}Auto DevOps%{linkEnd} uses Kubernetes clusters to deploy your code!', + ), + dismissButtonLabel: __('Got it!'), + }, +}; +</script> +<template> + <div class="gl-ml-3"> + <span v-if="!triggerHidden" :id="$options.targetId" class="feature-highlight"></span> + <gl-popover + ref="popover" + :target="$options.targetId" + :css-classes="['feature-highlight-popover']" + triggers="hover" + container="body" + placement="right" + boundary="viewport" + @hidden="hideTrigger" + > + <span + v-safe-html="$options.clusterPopover" + class="feature-highlight-illustration gl-display-flex gl-justify-content-center gl-py-4 gl-w-full" + ></span> + <div class="gl-px-4 gl-py-5"> + <p> + {{ $options.i18n.highlightMessage }} + </p> + <p> + <gl-sprintf :message="$options.i18n.autoDevopsProTipMessage"> + <template #link="{ content }"> + <gl-link class="gl-font-sm" :href="autoDevopsHelpPath">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + <gl-button size="small" icon="thumb-up" variant="confirm" @click="dismiss"> + {{ $options.i18n.dismissButtonLabel }} + </gl-button> + </div> + </gl-popover> + </div> +</template> |