Merge branch 'design-discussion-button-migration' into 'master'

Updates the design discussion buttons to match the design system

See merge request gitlab-org/gitlab!84707

app/assets/javascripts/design_management/components/design_notes/design_discussion.vue

 <script>
-import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink } from '@gitlab/ui';
+import { GlButton, GlLink, GlTooltipDirective } from '@gitlab/ui';
 import { ApolloMutation } from 'vue-apollo';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
@@ -26,15 +26,14 @@ export default {
   components: {
     ApolloMutation,
     DesignNote,
+    DesignNotePin,
     DesignNoteSignedOut,
-    ReplyPlaceholder,
     DesignReplyForm,
-    GlIcon,
-    GlLoadingIcon,
+    GlButton,
     GlLink,
-    ToggleRepliesWidget,
+    ReplyPlaceholder,
     TimeAgoTooltip,
-    DesignNotePin,
+    ToggleRepliesWidget,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -239,18 +238,17 @@ export default {
         @error="$emit('update-note-error', $event)"
       >
         <template v-if="isLoggedIn && discussion.resolvable" #resolve-discussion>
-          <button
+          <gl-button
             v-gl-tooltip
-            :class="{ 'is-active': discussion.resolved }"
-            :title="resolveCheckboxText"
             :aria-label="resolveCheckboxText"
-            class="line-resolve-btn note-action-button gl-mr-3"
+            :icon="resolveIconName"
+            :title="resolveCheckboxText"
+            :loading="isResolving"
+            category="tertiary"
             data-testid="resolve-button"
+            size="small"
             @click.stop="toggleResolvedStatus"
-          >
-            <gl-icon v-if="!isResolving" :name="resolveIconName" data-testid="resolve-icon" />
-            <gl-loading-icon v-else size="sm" inline />
-          </button>
+          />
         </template>
         <template v-if="discussion.resolved" #resolved-status>
           <p class="gl-text-gray-500 gl-font-sm gl-m-0 gl-mt-5" data-testid="resolved-message">

app/assets/javascripts/design_management/components/design_notes/design_note.vue

 <script>
 import {
-  GlTooltipDirective,
-  GlIcon,
-  GlLink,
-  GlSafeHtmlDirective,
   GlAvatar,
   GlAvatarLink,
+  GlButton,
+  GlLink,
+  GlSafeHtmlDirective,
+  GlTooltipDirective,
 } from '@gitlab/ui';
 import { ApolloMutation } from 'vue-apollo';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
@@ -22,14 +22,14 @@ export default {
     editCommentLabel: __('Edit comment'),
   },
   components: {
+    ApolloMutation,
+    DesignReplyForm,
     GlAvatar,
     GlAvatarLink,
-    TimelineEntryItem,
-    TimeAgoTooltip,
-    DesignReplyForm,
-    ApolloMutation,
-    GlIcon,
+    GlButton,
     GlLink,
+    TimeAgoTooltip,
+    TimelineEntryItem,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -123,18 +123,17 @@ export default {
       </div>
       <div class="gl-display-flex gl-align-items-baseline">
         <slot name="resolve-discussion"></slot>
-        <button
+        <gl-button
           v-if="isEditButtonVisible"
           v-gl-tooltip
-          type="button"
-          :title="$options.i18n.editCommentLabel"
           :aria-label="$options.i18n.editCommentLabel"
-          class="note-action-button btn btn-transparent qa-note-edit-button"
+          :title="$options.i18n.editCommentLabel"
+          category="tertiary"
           data-testid="note-edit"
+          icon="pencil"
+          size="small"
           @click="isEditing = true"
-        >
-          <gl-icon name="pencil" class="link-highlight" />
-        </button>
+        />
       </div>
     </div>
     <template v-if="!isEditing">

spec/frontend/design_management/components/design_notes/design_discussion_spec.js

@@ -31,7 +31,6 @@ describe('Design discussions component', () => {
   const findReplyForm = () => wrapper.find(DesignReplyForm);
   const findRepliesWidget = () => wrapper.find(ToggleRepliesWidget);
   const findResolveButton = () => wrapper.find('[data-testid="resolve-button"]');
-  const findResolveIcon = () => wrapper.find('[data-testid="resolve-icon"]');
   const findResolvedMessage = () => wrapper.find('[data-testid="resolved-message"]');
   const findResolveLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const findResolveCheckbox = () => wrapper.find('[data-testid="resolve-checkbox"]');
@@ -117,7 +116,7 @@ describe('Design discussions component', () => {
     });
 
     it('does not render an icon to resolve a thread', () => {
-      expect(findResolveIcon().exists()).toBe(false);
+      expect(findResolveButton().exists()).toBe(false);
     });
 
     it('does not render a checkbox in reply form', async () => {
@@ -147,7 +146,7 @@ describe('Design discussions component', () => {
     });
 
     it('renders a correct icon to resolve a thread', () => {
-      expect(findResolveIcon().props('name')).toBe('check-circle');
+      expect(findResolveButton().props('icon')).toBe('check-circle');
     });
 
     it('renders a checkbox with Resolve thread text in reply form', async () => {
@@ -203,7 +202,7 @@ describe('Design discussions component', () => {
     });
 
     it('renders a correct icon to resolve a thread', () => {
-      expect(findResolveIcon().props('name')).toBe('check-circle-filled');
+      expect(findResolveButton().props('icon')).toBe('check-circle-filled');
     });
 
     it('emit todo:toggle when discussion is resolved', async () => {

spec/frontend/design_management/components/design_notes/design_note_spec.js

@@ -122,7 +122,7 @@ describe('Design note component', () => {
         },
       });
 
-      findEditButton().trigger('click');
+      findEditButton().vm.$emit('click');
 
       await nextTick();
       expect(findReplyForm().exists()).toBe(true);