diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/actions_button.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/actions_button.vue | 116 |
1 files changed, 37 insertions, 79 deletions
diff --git a/app/assets/javascripts/vue_shared/components/actions_button.vue b/app/assets/javascripts/vue_shared/components/actions_button.vue index 175aef59ae5..c3f3226c46e 100644 --- a/app/assets/javascripts/vue_shared/components/actions_button.vue +++ b/app/assets/javascripts/vue_shared/components/actions_button.vue @@ -1,29 +1,25 @@ <script> -import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlButton, GlTooltip } from '@gitlab/ui'; +import { + GlDisclosureDropdown, + GlDisclosureDropdownGroup, + GlDisclosureDropdownItem, +} from '@gitlab/ui'; export default { components: { - GlDropdown, - GlDropdownItem, - GlDropdownDivider, - GlButton, - GlTooltip, + GlDisclosureDropdown, + GlDisclosureDropdownGroup, + GlDisclosureDropdownItem, }, props: { - id: { + toggleText: { type: String, - required: false, - default: '', + required: true, }, actions: { type: Array, required: true, }, - selectedKey: { - type: String, - required: false, - default: '', - }, category: { type: String, required: false, @@ -34,78 +30,40 @@ export default { required: false, default: 'default', }, - showActionTooltip: { - type: Boolean, - required: false, - default: true, - }, - }, - computed: { - hasMultipleActions() { - return this.actions.length > 1; - }, - selectedAction() { - return this.actions.find((x) => x.key === this.selectedKey) || this.actions[0]; - }, }, methods: { handleItemClick(action) { - this.$emit('select', action.key); - }, - handleClick(action, evt) { - this.$emit('actionClicked', { action }); - return action.handle?.(evt); + return action.handle?.(); }, }, }; </script> <template> - <span> - <gl-dropdown - v-if="hasMultipleActions" - :id="id" - :text="selectedAction.text" - :split-href="selectedAction.href" - :variant="variant" - :category="category" - split - data-qa-selector="action_dropdown" - @click="handleClick(selectedAction, $event)" - > - <template #button-content> - <span class="gl-dropdown-button-text" v-bind="selectedAction.attrs"> - {{ selectedAction.text }} - </span> - </template> - <template v-for="(action, index) in actions"> - <gl-dropdown-item - :key="action.key" - is-check-item - :is-checked="action.key === selectedAction.key" - :secondary-text="action.secondaryText" - :data-qa-selector="`${action.key}_menu_item`" - :data-testid="`action_${action.key}`" - @click="handleItemClick(action)" - > - <span class="gl-font-weight-bold">{{ action.text }}</span> - </gl-dropdown-item> - <gl-dropdown-divider v-if="index != actions.length - 1" :key="action.key + '_divider'" /> - </template> - </gl-dropdown> - <gl-button - v-else-if="selectedAction" - :id="id" - v-bind="selectedAction.attrs" - :variant="variant" - :category="category" - :href="selectedAction.href" - @click="handleClick(selectedAction, $event)" - > - {{ selectedAction.text }} - </gl-button> - <gl-tooltip v-if="selectedAction.tooltip && showActionTooltip" :target="id"> - {{ selectedAction.tooltip }} - </gl-tooltip> - </span> + <gl-disclosure-dropdown + :variant="variant" + :category="category" + :toggle-text="toggleText" + data-qa-selector="action_dropdown" + > + <gl-disclosure-dropdown-group> + <gl-disclosure-dropdown-item + v-for="action in actions" + :key="action.key" + v-bind="action.attrs" + :item="action" + :data-qa-selector="`${action.key}_menu_item`" + @action="handleItemClick(action)" + > + <template #list-item> + <div class="gl-display-flex gl-flex-direction-column"> + <span class="gl-font-weight-bold gl-mb-2">{{ action.text }}</span> + <span class="gl-text-gray-700"> + {{ action.secondaryText }} + </span> + </div> + </template> + </gl-disclosure-dropdown-item> + </gl-disclosure-dropdown-group> + </gl-disclosure-dropdown> </template> |