diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue')
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue | 41 |
1 files changed, 38 insertions, 3 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue index 655ceb5f700..b76d5d90ead 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { GlButton, GlDropdown, GlDropdownItem, GlTooltipDirective } from '@gitlab/ui'; import { sprintf, __ } from '~/locale'; export default { @@ -8,6 +8,9 @@ export default { GlDropdown, GlDropdownItem, }, + directives: { + GlTooltip: GlTooltipDirective, + }, props: { widget: { type: String, @@ -19,6 +22,12 @@ export default { default: () => [], }, }, + data: () => { + return { + timeout: null, + updatingTooltip: false, + }; + }, computed: { dropdownLabel() { return sprintf(__('%{widget} options'), { widget: this.widget }); @@ -27,9 +36,29 @@ export default { methods: { onClickAction(action) { this.$emit('clickedAction', action); + if (action.onClick) { action.onClick(); } + + if (action.tooltipOnClick) { + this.updatingTooltip = true; + this.$root.$emit('bv::show::tooltip', action.id); + + clearTimeout(this.timeout); + + this.timeout = setTimeout(() => { + this.updatingTooltip = false; + this.$root.$emit('bv::hide::tooltip', action.id); + }, 1000); + } + }, + setTooltip(btn) { + if (this.updatingTooltip && btn.tooltipOnClick) { + return btn.tooltipOnClick; + } + + return btn.tooltipText; }, }, }; @@ -55,6 +84,7 @@ export default { :key="index" :href="btn.href" :target="btn.target" + :data-clipboard-text="btn.dataClipboardText" @click="onClickAction(btn)" > {{ btn.text }} @@ -63,15 +93,20 @@ export default { <template v-if="tertiaryButtons.length"> <gl-button v-for="(btn, index) in tertiaryButtons" + :id="btn.id" :key="index" + v-gl-tooltip.hover + :title="setTooltip(btn)" :href="btn.href" :target="btn.target" :class="{ 'gl-mr-3': index !== tertiaryButtons.length - 1 }" + :data-clipboard-text="btn.dataClipboardText" + :icon="btn.icon" + :data-testid="btn.testId || 'extension-actions-button'" + :variant="btn.variant || 'confirm'" category="tertiary" - variant="confirm" size="small" class="gl-display-none gl-md-display-block gl-float-left" - data-testid="extension-actions-button" @click="onClickAction(btn)" > {{ btn.text }} |