Add latest changes from gitlab-org/gitlab@master

2 files changed, 37 insertions, 26 deletions

diff --git a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
index 680a101b118..40c2a0eb23d 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
@@ -311,7 +311,6 @@ export default {
             :loading="isResolving"
             category="tertiary"
             data-testid="resolve-button"
-            size="small"
             @click.stop="toggleResolvedStatus"
           />
         </template>
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_note.vue b/app/assets/javascripts/design_management/components/design_notes/design_note.vue
index b92a2392948..46ae87a36e4 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_note.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_note.vue
@@ -3,8 +3,7 @@ import {
   GlAvatar,
   GlAvatarLink,
   GlButton,
-  GlDropdown,
-  GlDropdownItem,
+  GlDisclosureDropdown,
   GlLink,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -29,8 +28,7 @@ export default {
     GlAvatar,
     GlAvatarLink,
     GlButton,
-    GlDropdown,
-    GlDropdownItem,
+    GlDisclosureDropdown,
     GlLink,
     TimeAgoTooltip,
     TimelineEntryItem,
@@ -83,15 +81,38 @@ export default {
         id: this.note.id,
       };
     },
-    isEditButtonVisible() {
-      return !this.isEditing && this.adminPermissions;
-    },
-    isMoreActionsButtonVisible() {
+    isEditingAndHasPermissions() {
       return !this.isEditing && this.adminPermissions;
     },
     adminPermissions() {
       return this.note.userPermissions.adminNote;
     },
+    dropdownItems() {
+      return [
+        {
+          text: this.$options.i18n.editCommentLabel,
+          action: () => {
+            this.isEditing = true;
+          },
+          extraAttrs: {
+            'data-testid': 'delete-note-button',
+            'data-qa-selector': 'delete_design_note_button',
+            class: 'gl-sm-display-none!',
+          },
+        },
+        {
+          text: this.$options.i18n.deleteCommentText,
+          action: () => {
+            this.$emit('delete-note', this.note);
+          },
+          extraAttrs: {
+            'data-testid': 'delete-note-button',
+            'data-qa-selector': 'delete_design_note_button',
+            class: 'gl-text-red-500!',
+          },
+        },
+      ];
+    },
   },
   methods: {
     hideForm() {
@@ -138,43 +159,34 @@ export default {
           </gl-link>
         </span>
       </div>
-      <div class="gl-display-flex gl-align-items-baseline">
+      <div class="gl-display-flex gl-align-items-baseline gl-mt-n2 gl-mr-n2">
         <slot name="resolve-discussion"></slot>
         <gl-button
-          v-if="isEditButtonVisible"
+          v-if="isEditingAndHasPermissions"
           v-gl-tooltip
+          class="gl-display-none gl-sm-display-inline-flex!"
           :aria-label="$options.i18n.editCommentLabel"
           :title="$options.i18n.editCommentLabel"
           category="tertiary"
           data-testid="note-edit"
           icon="pencil"
-          size="small"
           @click="isEditing = true"
         />
-        <gl-dropdown
-          v-if="isMoreActionsButtonVisible"
+        <gl-disclosure-dropdown
+          v-if="isEditingAndHasPermissions"
           v-gl-tooltip.hover
-          class="gl-display-none gl-sm-display-inline-flex! gl-ml-3"
+          toggle-class="btn-sm"
           icon="ellipsis_v"
           category="tertiary"
           data-qa-selector="design_discussion_actions_ellipsis_dropdown"
           data-testid="more-actions-dropdown"
-          :text="$options.i18n.moreActionsLabel"
           text-sr-only
           :title="$options.i18n.moreActionsLabel"
           :aria-label="$options.i18n.moreActionsLabel"
           no-caret
           left
-        >
-          <gl-dropdown-item
-            variant="danger"
-            data-qa-selector="delete_design_note_button"
-            data-testid="delete-note-button"
-            @click="$emit('delete-note', note)"
-          >
-            {{ $options.i18n.deleteCommentText }}
-          </gl-dropdown-item>
-        </gl-dropdown>
+          :items="dropdownItems"
+        />
       </div>
     </div>
     <template v-if="!isEditing">