diff options
Diffstat (limited to 'app/assets/javascripts')
6 files changed, 24 insertions, 46 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/action_buttons.vue b/app/assets/javascripts/vue_merge_request_widget/components/action_buttons.vue index 952ff9b18e9..c49c1316b1b 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/action_buttons.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/action_buttons.vue @@ -4,32 +4,26 @@ import { GlPopover, GlSprintf, GlLink, - GlDropdown, - GlDropdownItem, + GlDisclosureDropdown, GlTooltipDirective, } from '@gitlab/ui'; -import { sprintf, __ } from '~/locale'; export default { + name: 'ActionButtons', components: { GlButton, GlPopover, GlSprintf, GlLink, - GlDropdown, - GlDropdownItem, + GlDisclosureDropdown, }, directives: { GlTooltip: GlTooltipDirective, }, props: { - widget: { - type: String, - required: false, - default: '', - }, tertiaryButtons: { type: Array, + // fix `spec/frontend/vue_merge_request_widget/mr_widget_options_spec.js` before making this required required: false, default: () => [], }, @@ -41,17 +35,26 @@ export default { }; }, computed: { - dropdownLabel() { - if (!this.widget) return undefined; - - return sprintf(__('%{widget} options'), { widget: this.widget }); - }, hasOneOption() { return this.tertiaryButtons.length === 1; }, hasMultipleOptions() { return this.tertiaryButtons.length > 1; }, + dropdownItems() { + return this.tertiaryButtons.map((item) => { + return { + ...item, + text: item.text, + href: item.href, + extraAttrs: { + dataClipboardText: item.dataClipboardText, + dataMethod: item.dataMethod, + target: item.target, + }, + }; + }); + }, }, methods: { onClickAction(action) { @@ -135,32 +138,18 @@ export default { </span> </template> <template v-if="hasMultipleOptions"> - <gl-dropdown + <gl-disclosure-dropdown v-gl-tooltip + :items="dropdownItems" :title="__('Options')" - :text="dropdownLabel" icon="ellipsis_v" no-caret category="tertiary" - right - lazy text-sr-only size="small" - toggle-class="gl-p-2!" class="gl-display-block gl-md-display-none!" - > - <gl-dropdown-item - v-for="(btn, index) in tertiaryButtons" - :key="index" - :href="btn.href" - :target="btn.target" - :data-clipboard-text="btn.dataClipboardText" - :data-method="btn.dataMethod" - @click="onClickAction(btn)" - > - {{ btn.text }} - </gl-dropdown-item> - </gl-dropdown> + @action="onClickAction" + /> <span v-for="(btn, index) in tertiaryButtons" :key="index"> <gl-button :id="btn.id" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue index 31bf62b7e52..51f519f6f0c 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue @@ -346,11 +346,7 @@ export default { </template> </template> </div> - <actions - :widget="$options.label || $options.name" - :tertiary-buttons="tertiaryActionsButtons" - @clickedAction="onClickedAction" - /> + <actions :tertiary-buttons="tertiaryActionsButtons" @clickedAction="onClickedAction" /> <div v-if="isCollapsible" class="gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3 gl-h-6" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue index fa369d23b6c..5cd9179ef72 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue @@ -108,7 +108,6 @@ export default { </gl-badge> </div> <actions - :widget="widgetLabel" :tertiary-buttons="data.actions" class="gl-ml-auto gl-pl-3" @clickedAction="onClickedAction" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue index 618d1e71f81..72c041759d9 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue @@ -92,7 +92,6 @@ export default { </div> <actions v-if="hasActionButtons" - :widget="widgetName" :tertiary-buttons="data.actions" class="gl-ml-auto gl-pl-3" @clickedAction="onClickedAction" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue index 2c8bf90064e..d17be3e4037 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue @@ -368,7 +368,6 @@ export default { <slot name="action-buttons"> <action-buttons v-if="actionButtons.length > 0" - :widget="widgetName" :tertiary-buttons="actionButtons" @clickedAction="onActionClick" /> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue index e67924d28ab..bb82da7796a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue @@ -128,11 +128,7 @@ export default { > </template> </help-popover> - <action-buttons - v-if="hasActionButtons" - :widget="widgetName" - :tertiary-buttons="actionButtons" - /> + <action-buttons v-if="hasActionButtons" :tertiary-buttons="actionButtons" /> </div> </div> <div class="gl-display-flex gl-align-items-baseline"> |