diff options
Diffstat (limited to 'app/assets/javascripts')
4 files changed, 87 insertions, 4 deletions
diff --git a/app/assets/javascripts/mr_tabs_popover/components/popover.vue b/app/assets/javascripts/mr_tabs_popover/components/popover.vue new file mode 100644 index 00000000000..da1e1e70993 --- /dev/null +++ b/app/assets/javascripts/mr_tabs_popover/components/popover.vue @@ -0,0 +1,64 @@ +<script> +import { GlPopover, GlButton, GlLink } from '@gitlab/ui'; +import Icon from '~/vue_shared/components/icon.vue'; +import axios from '~/lib/utils/axios_utils'; + +export default { + components: { + GlPopover, + GlButton, + GlLink, + Icon, + }, + props: { + dismissEndpoint: { + type: String, + required: true, + }, + featureId: { + type: String, + required: true, + }, + }, + data() { + return { + showPopover: false, + }; + }, + mounted() { + setTimeout(() => { + this.showPopover = true; + }, 2000); + }, + methods: { + onDismiss() { + this.showPopover = false; + + axios.post(this.dismissEndpoint, { + feature_name: this.featureId, + }); + }, + }, +}; +</script> + +<template> + <gl-popover target="#diffs-tab" placement="bottom" :show="showPopover"> + <p class="mb-2"> + {{ + __( + 'Now you can access the merge request navigation tabs at the top, where they’re easier to find.', + ) + }} + </p> + <p> + <gl-link href="https://gitlab.com/gitlab-org/gitlab/issues/36125" target="_blank"> + {{ __('More information and share feedback') }} + <icon name="external-link" :size="10" /> + </gl-link> + </p> + <gl-button variant="primary" size="sm" @click="onDismiss"> + {{ __('Got it') }} + </gl-button> + </gl-popover> +</template> diff --git a/app/assets/javascripts/mr_tabs_popover/index.js b/app/assets/javascripts/mr_tabs_popover/index.js new file mode 100644 index 00000000000..9ee0ba046f0 --- /dev/null +++ b/app/assets/javascripts/mr_tabs_popover/index.js @@ -0,0 +1,12 @@ +import Vue from 'vue'; +import Popover from './components/popover.vue'; + +export default el => + new Vue({ + el, + render(createElement) { + return createElement(Popover, { + props: { dismissEndpoint: el.dataset.dismissEndpoint, featureId: el.dataset.featureId }, + }); + }, + }); diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js index 16034313af2..1f8befc07c8 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js +++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js @@ -6,6 +6,7 @@ import howToMerge from '~/how_to_merge'; import initPipelines from '~/commit/pipelines/pipelines_bundle'; import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle'; import initSourcegraph from '~/sourcegraph'; +import initPopover from '~/mr_tabs_popover'; import initWidget from '../../../vue_merge_request_widget'; export default function() { @@ -21,4 +22,10 @@ export default function() { howToMerge(); initWidget(); initSourcegraph(); + + const tabHighlightEl = document.querySelector('.js-tabs-feature-highlight'); + + if (tabHighlightEl) { + initPopover(tabHighlightEl); + } } diff --git a/app/assets/javascripts/persistent_user_callout.js b/app/assets/javascripts/persistent_user_callout.js index 8d6a3781048..4598626718c 100644 --- a/app/assets/javascripts/persistent_user_callout.js +++ b/app/assets/javascripts/persistent_user_callout.js @@ -6,8 +6,8 @@ import Flash from './flash'; const DEFERRED_LINK_CLASS = 'deferred-link'; export default class PersistentUserCallout { - constructor(container) { - const { dismissEndpoint, featureId, deferLinks } = container.dataset; + constructor(container, options = container.dataset) { + const { dismissEndpoint, featureId, deferLinks } = options; this.container = container; this.dismissEndpoint = dismissEndpoint; this.featureId = featureId; @@ -53,11 +53,11 @@ export default class PersistentUserCallout { }); } - static factory(container) { + static factory(container, options) { if (!container) { return undefined; } - return new PersistentUserCallout(container); + return new PersistentUserCallout(container, options); } } |