Add latest changes from gitlab-org/gitlab@master

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>