Update design discussions to use GitLab UI components

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

 <script>
 import { ApolloMutation } from 'vue-apollo';
-import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink, GlBadge } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -26,6 +26,7 @@ export default {
     GlLink,
     ToggleRepliesWidget,
     TimeAgoTooltip,
+    GlBadge,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -158,14 +159,14 @@ export default {
       }
     },
     onCreateNoteError(err) {
-      this.$emit('createNoteError', err);
+      this.$emit('create-note-error', err);
     },
     hideForm() {
       this.isFormRendered = false;
       this.discussionComment = '';
     },
     showForm() {
-      this.$emit('openForm', this.discussion.id);
+      this.$emit('open-form', this.discussion.id);
       this.isFormRendered = true;
     },
     toggleResolvedStatus() {
@@ -177,11 +178,11 @@ export default {
         })
         .then(({ data }) => {
           if (data.errors?.length > 0) {
-            this.$emit('resolveDiscussionError', data.errors[0]);
+            this.$emit('resolve-discussion-error', data.errors[0]);
           }
         })
         .catch(err => {
-          this.$emit('resolveDiscussionError', err);
+          this.$emit('resolve-discussion-error', err);
         })
         .finally(() => {
           this.isResolving = false;
@@ -202,13 +203,12 @@ export default {
 
 <template>
   <div class="design-discussion-wrapper">
-    <div
-      class="badge badge-pill gl-display-flex gl-align-items-center gl-justify-content-center"
+    <gl-badge
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-cursor-pointer"
       :class="{ resolved: discussion.resolved }"
-      type="button"
     >
       {{ discussion.index }}
-    </div>
+    </gl-badge>
     <ul
       class="design-discussion bordered-box gl-relative gl-p-0 gl-list-style-none"
       data-qa-selector="design_discussion_content"
@@ -218,7 +218,7 @@ export default {
         :markdown-preview-path="markdownPreviewPath"
         :is-resolving="isResolving"
         :class="{ 'gl-bg-blue-50': isDiscussionActive }"
-        @error="$emit('updateNoteError', $event)"
+        @error="$emit('update-note-error', $event)"
       >
         <template v-if="discussion.resolvable" #resolveDiscussion>
           <button
@@ -226,7 +226,6 @@ export default {
             :class="{ 'is-active': discussion.resolved }"
             :title="resolveCheckboxText"
             :aria-label="resolveCheckboxText"
-            type="button"
             class="line-resolve-btn note-action-button gl-mr-3"
             data-testid="resolve-button"
             @click.stop="toggleResolvedStatus"
@@ -262,7 +261,7 @@ export default {
         :markdown-preview-path="markdownPreviewPath"
         :is-resolving="isResolving"
         :class="{ 'gl-bg-blue-50': isDiscussionActive }"
-        @error="$emit('updateNoteError', $event)"
+        @error="$emit('update-note-error', $event)"
       />
       <li v-show="isReplyPlaceholderVisible" class="reply-wrapper">
         <reply-placeholder
@@ -286,8 +285,8 @@ export default {
             v-model="discussionComment"
             :is-saving="loading"
             :markdown-preview-path="markdownPreviewPath"
-            @submitForm="mutate"
-            @cancelForm="hideForm"
+            @submit-form="mutate"
+            @cancel-form="hideForm"
           >
             <template v-if="discussion.resolvable" #resolveCheckbox>
               <label data-testid="resolve-checkbox">

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

 <script>
 /* eslint-disable vue/no-v-html */
 import { ApolloMutation } from 'vue-apollo';
-import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon, GlLink } from '@gitlab/ui';
 import updateNoteMutation from '../../graphql/mutations/update_note.mutation.graphql';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
@@ -18,6 +18,7 @@ export default {
     DesignReplyForm,
     ApolloMutation,
     GlIcon,
+    GlLink,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -83,27 +84,27 @@ export default {
       :img-alt="author.username"
       :img-size="40"
     />
-    <div class="d-flex justify-content-between">
+    <div class="gl-display-flex gl-justify-content-space-between">
       <div>
-        <a
+        <gl-link
           v-once
           :href="author.webUrl"
           class="js-user-link"
           :data-user-id="author.id"
           :data-username="author.username"
         >
-          <span class="note-header-author-name bold">{{ author.name }}</span>
+          <span class="note-header-author-name gl-font-weight-bold">{{ author.name }}</span>
           <span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
           <span class="note-headline-light">@{{ author.username }}</span>
-        </a>
+        </gl-link>
         <span class="note-headline-light note-headline-meta">
           <span class="system-note-message"> <slot></slot> </span>
-          <a
+          <gl-link
             class="note-timestamp system-note-separator gl-display-block gl-mb-2"
             :href="`#note_${noteAnchorId}`"
           >
             <time-ago-tooltip :time="note.createdAt" tooltip-placement="bottom" />
-          </a>
+          </gl-link>
         </span>
       </div>
       <div class="gl-display-flex">
@@ -122,7 +123,7 @@ export default {
     </div>
     <template v-if="!isEditing">
       <div
-        class="note-text js-note-text md"
+        class="note-text js-note-text"
         data-qa-selector="note_content"
         v-html="note.bodyHtml"
       ></div>
@@ -143,9 +144,9 @@ export default {
         :is-saving="loading"
         :markdown-preview-path="markdownPreviewPath"
         :is-new-comment="false"
-        class="mt-5"
-        @submitForm="mutate"
-        @cancelForm="hideForm"
+        class="gl-mt-5"
+        @submit-form="mutate"
+        @cancel-form="hideForm"
       />
     </apollo-mutation>
   </timeline-entry-item>

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

 <script>
-import { GlDeprecatedButton, GlModal } from '@gitlab/ui';
+import { GlButton, GlModal } from '@gitlab/ui';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import { s__ } from '~/locale';
 
@@ -7,7 +7,7 @@ export default {
   name: 'DesignReplyForm',
   components: {
     MarkdownField,
-    GlDeprecatedButton,
+    GlButton,
     GlModal,
   },
   props: {
@@ -66,13 +66,13 @@ export default {
   },
   methods: {
     submitForm() {
-      if (this.hasValue) this.$emit('submitForm');
+      if (this.hasValue) this.$emit('submit-form');
     },
     cancelComment() {
       if (this.hasValue && this.formText !== this.value) {
         this.$refs.cancelCommentModal.show();
       } else {
-        this.$emit('cancelForm');
+        this.$emit('cancel-form');
       }
     },
     focusInput() {
@@ -112,20 +112,21 @@ export default {
     </markdown-field>
     <slot name="resolveCheckbox"></slot>
     <div class="note-form-actions gl-display-flex gl-justify-content-space-between">
-      <gl-deprecated-button
+      <gl-button
         ref="submitButton"
         :disabled="!hasValue || isSaving"
+        category="primary"
         variant="success"
         type="submit"
         data-track-event="click_button"
         data-qa-selector="save_comment_button"
-        @click="$emit('submitForm')"
+        @click="$emit('submit-form')"
       >
         {{ buttonText }}
-      </gl-deprecated-button>
-      <gl-deprecated-button ref="cancelButton" @click="cancelComment">{{
+      </gl-button>
+      <gl-button ref="cancelButton" variant="default" category="primary" @click="cancelComment">{{
         __('Cancel')
-      }}</gl-deprecated-button>
+      }}</gl-button>
     </div>
     <gl-modal
       ref="cancelCommentModal"
@@ -134,7 +135,7 @@ export default {
       :ok-title="modalSettings.okTitle"
       :cancel-title="modalSettings.cancelTitle"
       modal-id="cancel-comment-modal"
-      @ok="$emit('cancelForm')"
+      @ok="$emit('cancel-form')"
       >{{ modalSettings.content }}
     </gl-modal>
   </form>

app/assets/javascripts/design_management/components/design_sidebar.vue

@@ -151,11 +151,11 @@ export default {
       :resolved-discussions-expanded="resolvedDiscussionsExpanded"
       :discussion-with-open-form="discussionWithOpenForm"
       data-testid="unresolved-discussion"
-      @createNoteError="$emit('onDesignDiscussionError', $event)"
-      @updateNoteError="$emit('updateNoteError', $event)"
-      @resolveDiscussionError="$emit('resolveDiscussionError', $event)"
+      @create-note-error="$emit('onDesignDiscussionError', $event)"
+      @update-note-error="$emit('updateNoteError', $event)"
+      @resolve-discussion-error="$emit('resolveDiscussionError', $event)"
       @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)"
-      @openForm="updateDiscussionWithOpenForm"
+      @open-form="updateDiscussionWithOpenForm"
     />
     <template v-if="resolvedDiscussions.length > 0">
       <gl-button

app/assets/javascripts/design_management/pages/design/index.vue

@@ -367,8 +367,8 @@ export default {
               v-model="comment"
               :is-saving="loading"
               :markdown-preview-path="markdownPreviewPath"
-              @submitForm="mutate"
-              @cancelForm="closeCommentForm"
+              @submit-form="mutate"
+              @cancel-form="closeCommentForm"
             /> </apollo-mutation
         ></template>
       </design-sidebar>

changelogs/unreleased/ntepluhina-refactor-design-management-to-gitlab-ui-1.yml

+---
+title: Update design discussions to use GitLab UI components
+merge_request: 41686
+author:
+type: other

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

@@ -17,15 +17,15 @@ exports[`Design note component should match the snapshot 1`] = `
   />
    
   <div
-    class="d-flex justify-content-between"
+    class="gl-display-flex gl-justify-content-space-between"
   >
     <div>
-      <a
+      <gl-link-stub
         class="js-user-link"
         data-user-id="author-id"
       >
         <span
-          class="note-header-author-name bold"
+          class="note-header-author-name gl-font-weight-bold"
         >
           
         </span>
@@ -37,7 +37,7 @@ exports[`Design note component should match the snapshot 1`] = `
         >
           @
         </span>
-      </a>
+      </gl-link-stub>
        
       <span
         class="note-headline-light note-headline-meta"
@@ -46,7 +46,7 @@ exports[`Design note component should match the snapshot 1`] = `
           class="system-note-message"
         />
          
-        <a
+        <gl-link-stub
           class="note-timestamp system-note-separator gl-display-block gl-mb-2"
           href="#note_123"
         >
@@ -55,7 +55,7 @@ exports[`Design note component should match the snapshot 1`] = `
             time="2019-07-26T15:02:20Z"
             tooltipplacement="bottom"
           />
-        </a>
+        </gl-link-stub>
       </span>
     </div>
      
@@ -68,7 +68,7 @@ exports[`Design note component should match the snapshot 1`] = `
   </div>
    
   <div
-    class="note-text js-note-text md"
+    class="note-text js-note-text"
     data-qa-selector="note_content"
   />
    

spec/frontend/design_management/components/design_notes/__snapshots__/design_reply_form_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Design reply form component renders button text as "Comment" when creating a comment 1`] = `
-"<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled\\">
+"<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled gl-button\\">
   <!---->
-  Comment
-</button>"
+  <!----> <span class=\\"gl-button-text\\">
+      Comment
+    </span></button>"
 `;
 
 exports[`Design reply form component renders button text as "Save comment" when creating a comment 1`] = `
-"<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled\\">
+"<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled gl-button\\">
   <!---->
-  Save comment
-</button>"
+  <!----> <span class=\\"gl-button-text\\">
+      Save comment
+    </span></button>"
 `;

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

@@ -233,7 +233,7 @@ describe('Design discussions component', () => {
       { discussionComment: 'test', isFormRendered: true },
     );
 
-    findReplyForm().vm.$emit('submitForm');
+    findReplyForm().vm.$emit('submit-form');
     expect(mutate).toHaveBeenCalledWith(mutationVariables);
 
     return mutate()
@@ -254,7 +254,7 @@ describe('Design discussions component', () => {
     return wrapper.vm
       .$nextTick()
       .then(() => {
-        findReplyForm().vm.$emit('cancelForm');
+        findReplyForm().vm.$emit('cancel-form');
 
         expect(wrapper.vm.discussionComment).toBe('');
         return wrapper.vm.$nextTick();
@@ -325,6 +325,6 @@ describe('Design discussions component', () => {
     createComponent();
     findReplyPlaceholder().vm.$emit('onClick');
 
-    expect(wrapper.emitted('openForm')).toBeTruthy();
+    expect(wrapper.emitted('open-form')).toBeTruthy();
   });
 });

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

@@ -133,8 +133,8 @@ describe('Design note component', () => {
         expect(findReplyForm().exists()).toBe(true);
       });
 
-      it('hides the form on hideForm event', () => {
-        findReplyForm().vm.$emit('cancelForm');
+      it('hides the form on cancel-form event', () => {
+        findReplyForm().vm.$emit('cancel-form');
 
         return wrapper.vm.$nextTick().then(() => {
           expect(findReplyForm().exists()).toBe(false);
@@ -142,8 +142,8 @@ describe('Design note component', () => {
         });
       });
 
-      it('calls a mutation on submitForm event and hides a form', () => {
-        findReplyForm().vm.$emit('submitForm');
+      it('calls a mutation on submit-form event and hides a form', () => {
+        findReplyForm().vm.$emit('submit-form');
         expect(mutate).toHaveBeenCalled();
 
         return mutate()

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

@@ -70,7 +70,7 @@ describe('Design reply form component', () => {
       });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('submitForm')).toBeFalsy();
+        expect(wrapper.emitted('submit-form')).toBeFalsy();
       });
     });
 
@@ -80,20 +80,20 @@ describe('Design reply form component', () => {
       });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('submitForm')).toBeFalsy();
+        expect(wrapper.emitted('submit-form')).toBeFalsy();
       });
     });
 
     it('emits cancelForm event on pressing escape button on textarea', () => {
       findTextarea().trigger('keyup.esc');
 
-      expect(wrapper.emitted('cancelForm')).toBeTruthy();
+      expect(wrapper.emitted('cancel-form')).toBeTruthy();
     });
 
     it('emits cancelForm event on clicking Cancel button', () => {
       findCancelButton().vm.$emit('click');
 
-      expect(wrapper.emitted('cancelForm')).toHaveLength(1);
+      expect(wrapper.emitted('cancel-form')).toHaveLength(1);
     });
   });
 
@@ -112,7 +112,7 @@ describe('Design reply form component', () => {
       findSubmitButton().vm.$emit('click');
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('submitForm')).toBeTruthy();
+        expect(wrapper.emitted('submit-form')).toBeTruthy();
       });
     });
 
@@ -122,7 +122,7 @@ describe('Design reply form component', () => {
       });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('submitForm')).toBeTruthy();
+        expect(wrapper.emitted('submit-form')).toBeTruthy();
       });
     });
 
@@ -132,7 +132,7 @@ describe('Design reply form component', () => {
       });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('submitForm')).toBeTruthy();
+        expect(wrapper.emitted('submit-form')).toBeTruthy();
       });
     });
 
@@ -147,7 +147,7 @@ describe('Design reply form component', () => {
     it('emits cancelForm event on Escape key if text was not changed', () => {
       findTextarea().trigger('keyup.esc');
 
-      expect(wrapper.emitted('cancelForm')).toBeTruthy();
+      expect(wrapper.emitted('cancel-form')).toBeTruthy();
     });
 
     it('opens confirmation modal on Escape key when text has changed', () => {
@@ -162,7 +162,7 @@ describe('Design reply form component', () => {
     it('emits cancelForm event on Cancel button click if text was not changed', () => {
       findCancelButton().trigger('click');
 
-      expect(wrapper.emitted('cancelForm')).toBeTruthy();
+      expect(wrapper.emitted('cancel-form')).toBeTruthy();
     });
 
     it('opens confirmation modal on Cancel button click when text has changed', () => {
@@ -178,7 +178,7 @@ describe('Design reply form component', () => {
       findTextarea().trigger('keyup.esc');
       findModal().vm.$emit('ok');
 
-      expect(wrapper.emitted('cancelForm')).toBeTruthy();
+      expect(wrapper.emitted('cancel-form')).toBeTruthy();
     });
   });
 });

spec/frontend/design_management/components/design_sidebar_spec.js

@@ -154,22 +154,22 @@ describe('Design management design sidebar component', () => {
     });
 
     it('emits correct event on discussion create note error', () => {
-      findFirstDiscussion().vm.$emit('createNoteError', 'payload');
+      findFirstDiscussion().vm.$emit('create-note-error', 'payload');
       expect(wrapper.emitted('onDesignDiscussionError')).toEqual([['payload']]);
     });
 
     it('emits correct event on discussion update note error', () => {
-      findFirstDiscussion().vm.$emit('updateNoteError', 'payload');
+      findFirstDiscussion().vm.$emit('update-note-error', 'payload');
       expect(wrapper.emitted('updateNoteError')).toEqual([['payload']]);
     });
 
     it('emits correct event on discussion resolve error', () => {
-      findFirstDiscussion().vm.$emit('resolveDiscussionError', 'payload');
+      findFirstDiscussion().vm.$emit('resolve-discussion-error', 'payload');
       expect(wrapper.emitted('resolveDiscussionError')).toEqual([['payload']]);
     });
 
     it('changes prop correctly on opening discussion form', () => {
-      findFirstDiscussion().vm.$emit('openForm', 'some-id');
+      findFirstDiscussion().vm.$emit('open-form', 'some-id');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(findFirstDiscussion().props('discussionWithOpenForm')).toBe('some-id');

spec/frontend/design_management/pages/design/index_spec.js

@@ -210,7 +210,7 @@ describe('Design management design index page', () => {
       },
     );
 
-    findDiscussionForm().vm.$emit('submitForm');
+    findDiscussionForm().vm.$emit('submit-form');
     expect(mutate).toHaveBeenCalledWith(createDiscussionMutationVariables);
 
     return wrapper.vm
@@ -235,7 +235,7 @@ describe('Design management design index page', () => {
       },
     );
 
-    findDiscussionForm().vm.$emit('cancelForm');
+    findDiscussionForm().vm.$emit('cancel-form');
 
     expect(wrapper.vm.comment).toBe('');