Add latest changes from gitlab-org/gitlab@13-1-stable-ee

10 files changed, 637 insertions, 86 deletions

diff --git a/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap b/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap
index 4828e8cb3c2..4c848256e5b 100644
--- a/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap
+++ b/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Design discussions component should match the snapshot of note when repositioning 1`] = `
+exports[`Design note pin component should match the snapshot of note when repositioning 1`] = `
 <button
   aria-label="Comment form position"
-  class="position-absolute btn-transparent comment-indicator"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center btn-transparent comment-indicator"
   style="left: 10px; top: 10px; cursor: move;"
   type="button"
 >
@@ -14,10 +14,10 @@ exports[`Design discussions component should match the snapshot of note when rep
 </button>
 `;
 
-exports[`Design discussions component should match the snapshot of note with index 1`] = `
+exports[`Design note pin component should match the snapshot of note with index 1`] = `
 <button
   aria-label="Comment '1' position"
-  class="position-absolute js-image-badge badge badge-pill"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center js-image-badge badge badge-pill"
   style="left: 10px; top: 10px;"
   type="button"
 >
@@ -27,10 +27,10 @@ exports[`Design discussions component should match the snapshot of note with ind
 </button>
 `;
 
-exports[`Design discussions component should match the snapshot of note without index 1`] = `
+exports[`Design note pin component should match the snapshot of note without index 1`] = `
 <button
   aria-label="Comment form position"
-  class="position-absolute btn-transparent comment-indicator"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center btn-transparent comment-indicator"
   style="left: 10px; top: 10px;"
   type="button"
 >
diff --git a/spec/frontend/design_management/components/design_note_pin_spec.js b/spec/frontend/design_management/components/design_note_pin_spec.js
index 4f7260b1363..4e045b58a35 100644
--- a/spec/frontend/design_management/components/design_note_pin_spec.js
+++ b/spec/frontend/design_management/components/design_note_pin_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import DesignNotePin from '~/design_management/components/design_note_pin.vue';
 
-describe('Design discussions component', () => {
+describe('Design note pin component', () => {
   let wrapper;
 
   function createComponent(propsData = {}) {
@@ -26,7 +26,7 @@ describe('Design discussions component', () => {
   });
 
   it('should match the snapshot of note with index', () => {
-    createComponent({ label: '1' });
+    createComponent({ label: 1 });
     expect(wrapper.element).toMatchSnapshot();
   });
 
diff --git a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap
index e071274cc81..b55bacb6fc5 100644
--- a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap
+++ b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap
@@ -50,12 +50,18 @@ exports[`Design note component should match the snapshot 1`] = `
       </span>
     </div>
      
-    <!---->
+    <div
+      class="gl-display-flex"
+    >
+       
+      <!---->
+    </div>
   </div>
    
   <div
     class="note-text js-note-text md"
     data-qa-selector="note_content"
   />
+   
 </timeline-entry-item-stub>
 `;
diff --git a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
index b16b26ff82f..557f53e864f 100644
--- a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
@@ -1,16 +1,33 @@
-import { shallowMount } from '@vue/test-utils';
-import { ApolloMutation } from 'vue-apollo';
+import { mount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
+import notes from '../../mock_data/notes';
 import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
 import DesignNote from '~/design_management/components/design_notes/design_note.vue';
 import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
 import createNoteMutation from '~/design_management/graphql/mutations/createNote.mutation.graphql';
+import toggleResolveDiscussionMutation from '~/design_management/graphql/mutations/toggle_resolve_discussion.mutation.graphql';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
+import ToggleRepliesWidget from '~/design_management/components/design_notes/toggle_replies_widget.vue';
+
+const discussion = {
+  id: '0',
+  resolved: false,
+  resolvable: true,
+  notes,
+};
 
 describe('Design discussions component', () => {
   let wrapper;
 
+  const findDesignNotes = () => wrapper.findAll(DesignNote);
   const findReplyPlaceholder = () => wrapper.find(ReplyPlaceholder);
   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"]');
 
   const mutationVariables = {
     mutation: createNoteMutation,
@@ -29,22 +46,14 @@ describe('Design discussions component', () => {
   };
 
   function createComponent(props = {}, data = {}) {
-    wrapper = shallowMount(DesignDiscussion, {
+    wrapper = mount(DesignDiscussion, {
       propsData: {
-        discussion: {
-          id: '0',
-          notes: [
-            {
-              id: '1',
-            },
-            {
-              id: '2',
-            },
-          ],
-        },
+        resolvedDiscussionsExpanded: true,
+        discussion,
         noteableId: 'noteable-id',
         designId: 'design-id',
         discussionIndex: 1,
+        discussionWithOpenForm: '',
         ...props,
       },
       data() {
@@ -52,11 +61,12 @@ describe('Design discussions component', () => {
           ...data,
         };
       },
-      stubs: {
-        ReplyPlaceholder,
-        ApolloMutation,
+      mocks: {
+        $apollo,
+        $route: {
+          hash: '#note_1',
+        },
       },
-      mocks: { $apollo },
     });
   }
 
@@ -64,19 +74,147 @@ describe('Design discussions component', () => {
     wrapper.destroy();
   });
 
-  it('renders correct amount of discussion notes', () => {
-    createComponent();
-    expect(wrapper.findAll(DesignNote)).toHaveLength(2);
+  describe('when discussion is not resolvable', () => {
+    beforeEach(() => {
+      createComponent({
+        discussion: {
+          ...discussion,
+          resolvable: false,
+        },
+      });
+    });
+
+    it('does not render an icon to resolve a thread', () => {
+      expect(findResolveIcon().exists()).toBe(false);
+    });
+
+    it('does not render a checkbox in reply form', () => {
+      findReplyPlaceholder().vm.$emit('onMouseDown');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findResolveCheckbox().exists()).toBe(false);
+      });
+    });
   });
 
-  it('renders reply placeholder by default', () => {
-    createComponent();
-    expect(findReplyPlaceholder().exists()).toBe(true);
+  describe('when discussion is unresolved', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders correct amount of discussion notes', () => {
+      expect(findDesignNotes()).toHaveLength(2);
+      expect(findDesignNotes().wrappers.every(w => w.isVisible())).toBe(true);
+    });
+
+    it('renders reply placeholder', () => {
+      expect(findReplyPlaceholder().isVisible()).toBe(true);
+    });
+
+    it('does not render toggle replies widget', () => {
+      expect(findRepliesWidget().exists()).toBe(false);
+    });
+
+    it('renders a correct icon to resolve a thread', () => {
+      expect(findResolveIcon().props('name')).toBe('check-circle');
+    });
+
+    it('renders a checkbox with Resolve thread text in reply form', () => {
+      findReplyPlaceholder().vm.$emit('onClick');
+      wrapper.setProps({ discussionWithOpenForm: discussion.id });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findResolveCheckbox().text()).toBe('Resolve thread');
+      });
+    });
+
+    it('does not render resolved message', () => {
+      expect(findResolvedMessage().exists()).toBe(false);
+    });
+  });
+
+  describe('when discussion is resolved', () => {
+    beforeEach(() => {
+      createComponent({
+        discussion: {
+          ...discussion,
+          resolved: true,
+          resolvedBy: notes[0].author,
+          resolvedAt: '2020-05-08T07:10:45Z',
+        },
+      });
+    });
+
+    it('shows only the first note', () => {
+      expect(
+        findDesignNotes()
+          .at(0)
+          .isVisible(),
+      ).toBe(true);
+      expect(
+        findDesignNotes()
+          .at(1)
+          .isVisible(),
+      ).toBe(false);
+    });
+
+    it('renders resolved message', () => {
+      expect(findResolvedMessage().exists()).toBe(true);
+    });
+
+    it('does not show renders reply placeholder', () => {
+      expect(findReplyPlaceholder().isVisible()).toBe(false);
+    });
+
+    it('renders toggle replies widget with correct props', () => {
+      expect(findRepliesWidget().exists()).toBe(true);
+      expect(findRepliesWidget().props()).toEqual({
+        collapsed: true,
+        replies: notes.slice(1),
+      });
+    });
+
+    it('renders a correct icon to resolve a thread', () => {
+      expect(findResolveIcon().props('name')).toBe('check-circle-filled');
+    });
+
+    describe('when replies are expanded', () => {
+      beforeEach(() => {
+        findRepliesWidget().vm.$emit('toggle');
+        return wrapper.vm.$nextTick();
+      });
+
+      it('renders replies widget with collapsed prop equal to false', () => {
+        expect(findRepliesWidget().props('collapsed')).toBe(false);
+      });
+
+      it('renders the second note', () => {
+        expect(
+          findDesignNotes()
+            .at(1)
+            .isVisible(),
+        ).toBe(true);
+      });
+
+      it('renders a reply placeholder', () => {
+        expect(findReplyPlaceholder().isVisible()).toBe(true);
+      });
+
+      it('renders a checkbox with Unresolve thread text in reply form', () => {
+        findReplyPlaceholder().vm.$emit('onClick');
+        wrapper.setProps({ discussionWithOpenForm: discussion.id });
+
+        return wrapper.vm.$nextTick().then(() => {
+          expect(findResolveCheckbox().text()).toBe('Unresolve thread');
+        });
+      });
+    });
   });
 
   it('hides reply placeholder and opens form on placeholder click', () => {
     createComponent();
-    findReplyPlaceholder().trigger('click');
+    findReplyPlaceholder().vm.$emit('onClick');
+    wrapper.setProps({ discussionWithOpenForm: discussion.id });
 
     return wrapper.vm.$nextTick().then(() => {
       expect(findReplyPlaceholder().exists()).toBe(false);
@@ -85,7 +223,10 @@ describe('Design discussions component', () => {
   });
 
   it('calls mutation on submitting form and closes the form', () => {
-    createComponent({}, { discussionComment: 'test', isFormRendered: true });
+    createComponent(
+      { discussionWithOpenForm: discussion.id },
+      { discussionComment: 'test', isFormRendered: true },
+    );
 
     findReplyForm().vm.$emit('submitForm');
     expect(mutate).toHaveBeenCalledWith(mutationVariables);
@@ -100,7 +241,10 @@ describe('Design discussions component', () => {
   });
 
   it('clears the discussion comment on closing comment form', () => {
-    createComponent({}, { discussionComment: 'test', isFormRendered: true });
+    createComponent(
+      { discussionWithOpenForm: discussion.id },
+      { discussionComment: 'test', isFormRendered: true },
+    );
 
     return wrapper.vm
       .$nextTick()
@@ -120,7 +264,7 @@ describe('Design discussions component', () => {
       {},
       {
         activeDiscussion: {
-          id: '1',
+          id: notes[0].id,
           source: 'pin',
         },
       },
@@ -130,4 +274,45 @@ describe('Design discussions component', () => {
       true,
     );
   });
+
+  it('calls toggleResolveDiscussion mutation on resolve thread button click', () => {
+    createComponent();
+    findResolveButton().trigger('click');
+    expect(mutate).toHaveBeenCalledWith({
+      mutation: toggleResolveDiscussionMutation,
+      variables: {
+        id: discussion.id,
+        resolve: true,
+      },
+    });
+    return wrapper.vm.$nextTick(() => {
+      expect(findResolveLoadingIcon().exists()).toBe(true);
+    });
+  });
+
+  it('calls toggleResolveDiscussion mutation after adding a note if checkbox was checked', () => {
+    createComponent(
+      { discussionWithOpenForm: discussion.id },
+      { discussionComment: 'test', isFormRendered: true },
+    );
+    findResolveButton().trigger('click');
+    findReplyForm().vm.$emit('submitForm');
+
+    return mutate().then(() => {
+      expect(mutate).toHaveBeenCalledWith({
+        mutation: toggleResolveDiscussionMutation,
+        variables: {
+          id: discussion.id,
+          resolve: true,
+        },
+      });
+    });
+  });
+
+  it('emits openForm event on opening the form', () => {
+    createComponent();
+    findReplyPlaceholder().vm.$emit('onClick');
+
+    expect(wrapper.emitted('openForm')).toBeTruthy();
+  });
 });
diff --git a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
index 34b8f1f9fa8..16b34f150b8 100644
--- a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
@@ -18,7 +18,7 @@ describe('Design reply form component', () => {
   const findCancelButton = () => wrapper.find({ ref: 'cancelButton' });
   const findModal = () => wrapper.find({ ref: 'cancelCommentModal' });
 
-  function createComponent(props = {}) {
+  function createComponent(props = {}, mountOptions = {}) {
     wrapper = mount(DesignReplyForm, {
       propsData: {
         value: '',
@@ -26,6 +26,7 @@ describe('Design reply form component', () => {
         ...props,
       },
       stubs: { GlModal },
+      ...mountOptions,
     });
   }
 
@@ -34,7 +35,8 @@ describe('Design reply form component', () => {
   });
 
   it('textarea has focus after component mount', () => {
-    createComponent();
+    // We need to attach to document, so that `document.activeElement` is properly set in jsdom
+    createComponent({}, { attachToDocument: true });
 
     expect(findTextarea().element).toEqual(document.activeElement);
   });
diff --git a/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js b/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js
new file mode 100644
index 00000000000..7eda294d2d3
--- /dev/null
+++ b/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js
@@ -0,0 +1,98 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlIcon, GlButton, GlLink } from '@gitlab/ui';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import ToggleRepliesWidget from '~/design_management/components/design_notes/toggle_replies_widget.vue';
+import notes from '../../mock_data/notes';
+
+describe('Toggle replies widget component', () => {
+  let wrapper;
+
+  const findToggleWrapper = () => wrapper.find('[data-testid="toggle-comments-wrapper"]');
+  const findIcon = () => wrapper.find(GlIcon);
+  const findButton = () => wrapper.find(GlButton);
+  const findAuthorLink = () => wrapper.find(GlLink);
+  const findTimeAgo = () => wrapper.find(TimeAgoTooltip);
+
+  function createComponent(props = {}) {
+    wrapper = shallowMount(ToggleRepliesWidget, {
+      propsData: {
+        collapsed: true,
+        replies: notes,
+        ...props,
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when replies are collapsed', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('should not have expanded class', () => {
+      expect(findToggleWrapper().classes()).not.toContain('expanded');
+    });
+
+    it('should render chevron-right icon', () => {
+      expect(findIcon().props('name')).toBe('chevron-right');
+    });
+
+    it('should have replies length on button', () => {
+      expect(findButton().text()).toBe('2 replies');
+    });
+
+    it('should render a link to the last reply author', () => {
+      expect(findAuthorLink().exists()).toBe(true);
+      expect(findAuthorLink().text()).toBe(notes[1].author.name);
+      expect(findAuthorLink().attributes('href')).toBe(notes[1].author.webUrl);
+    });
+
+    it('should render correct time ago tooltip', () => {
+      expect(findTimeAgo().exists()).toBe(true);
+      expect(findTimeAgo().props('time')).toBe(notes[1].createdAt);
+    });
+  });
+
+  describe('when replies are expanded', () => {
+    beforeEach(() => {
+      createComponent({ collapsed: false });
+    });
+
+    it('should have expanded class', () => {
+      expect(findToggleWrapper().classes()).toContain('expanded');
+    });
+
+    it('should render chevron-down icon', () => {
+      expect(findIcon().props('name')).toBe('chevron-down');
+    });
+
+    it('should have Collapse replies text on button', () => {
+      expect(findButton().text()).toBe('Collapse replies');
+    });
+
+    it('should not have a link to the last reply author', () => {
+      expect(findAuthorLink().exists()).toBe(false);
+    });
+
+    it('should not render time ago tooltip', () => {
+      expect(findTimeAgo().exists()).toBe(false);
+    });
+  });
+
+  it('should emit toggle event on icon click', () => {
+    createComponent();
+    findIcon().vm.$emit('click', new MouseEvent('click'));
+
+    expect(wrapper.emitted('toggle')).toHaveLength(1);
+  });
+
+  it('should emit toggle event on button click', () => {
+    createComponent();
+    findButton().vm.$emit('click', new MouseEvent('click'));
+
+    expect(wrapper.emitted('toggle')).toHaveLength(1);
+  });
+});
diff --git a/spec/frontend/design_management/components/design_overlay_spec.js b/spec/frontend/design_management/components/design_overlay_spec.js
index 1c9b130aca6..f243323b162 100644
--- a/spec/frontend/design_management/components/design_overlay_spec.js
+++ b/spec/frontend/design_management/components/design_overlay_spec.js
@@ -10,16 +10,6 @@ describe('Design overlay component', () => {
   let wrapper;
 
   const mockDimensions = { width: 100, height: 100 };
-  const mockNoteNotAuthorised = {
-    id: 'note-not-authorised',
-    discussion: { id: 'discussion-not-authorised' },
-    position: {
-      x: 1,
-      y: 80,
-      ...mockDimensions,
-    },
-    userPermissions: {},
-  };
 
   const findOverlay = () => wrapper.find('.image-diff-overlay');
   const findAllNotes = () => wrapper.findAll('.js-image-badge');
@@ -43,6 +33,7 @@ describe('Design overlay component', () => {
           top: '0',
           left: '0',
         },
+        resolvedDiscussionsExpanded: false,
         ...props,
       },
       data() {
@@ -88,19 +79,46 @@ describe('Design overlay component', () => {
   });
 
   describe('with notes', () => {
-    beforeEach(() => {
+    it('should render only the first note', () => {
       createComponent({
         notes,
       });
+      expect(findAllNotes()).toHaveLength(1);
     });
 
-    it('should render a correct amount of notes', () => {
-      expect(findAllNotes()).toHaveLength(notes.length);
-    });
+    describe('with resolved discussions toggle expanded', () => {
+      beforeEach(() => {
+        createComponent({
+          notes,
+          resolvedDiscussionsExpanded: true,
+        });
+      });
+
+      it('should render all notes', () => {
+        expect(findAllNotes()).toHaveLength(notes.length);
+      });
+
+      it('should have set the correct position for each note badge', () => {
+        expect(findFirstBadge().attributes().style).toBe('left: 10px; top: 15px;');
+        expect(findSecondBadge().attributes().style).toBe('left: 50px; top: 50px;');
+      });
+
+      it('should apply resolved class to the resolved note pin', () => {
+        expect(findSecondBadge().classes()).toContain('resolved');
+      });
+
+      it('when there is an active discussion, should apply inactive class to all pins besides the active one', () => {
+        wrapper.setData({
+          activeDiscussion: {
+            id: notes[0].id,
+            source: 'discussion',
+          },
+        });
 
-    it('should have a correct style for each note badge', () => {
-      expect(findFirstBadge().attributes().style).toBe('left: 10px; top: 15px;');
-      expect(findSecondBadge().attributes().style).toBe('left: 50px; top: 50px;');
+        return wrapper.vm.$nextTick().then(() => {
+          expect(findSecondBadge().classes()).toContain('inactive');
+        });
+      });
     });
 
     it('should recalculate badges positions on window resize', () => {
@@ -144,19 +162,6 @@ describe('Design overlay component', () => {
         expect(mutate).toHaveBeenCalledWith(mutationVariables);
       });
     });
-
-    it('when there is an active discussion, should apply inactive class to all pins besides the active one', () => {
-      wrapper.setData({
-        activeDiscussion: {
-          id: notes[0].id,
-          source: 'discussion',
-        },
-      });
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findSecondBadge().classes()).toContain('inactive');
-      });
-    });
   });
 
   describe('when moving notes', () => {
@@ -213,20 +218,32 @@ describe('Design overlay component', () => {
         });
     });
 
-    it('should do nothing if [adminNote] permission is not present', () => {
-      createComponent({
-        dimensions: mockDimensions,
-        notes: [mockNoteNotAuthorised],
-      });
+    describe('without [adminNote] permission', () => {
+      const mockNoteNotAuthorised = {
+        ...notes[0],
+        userPermissions: {
+          adminNote: false,
+        },
+      };
 
-      const badge = findAllNotes().at(0);
-      return clickAndDragBadge(
-        badge,
-        { x: mockNoteNotAuthorised.x, y: mockNoteNotAuthorised.y },
-        { x: 20, y: 20 },
-      ).then(() => {
-        expect(wrapper.vm.movingNoteStartPosition).toBeNull();
-        expect(findFirstBadge().attributes().style).toBe('left: 1px; top: 80px;');
+      const mockNoteCoordinates = {
+        x: mockNoteNotAuthorised.position.x,
+        y: mockNoteNotAuthorised.position.y,
+      };
+
+      it('should be unable to move a note', () => {
+        createComponent({
+          dimensions: mockDimensions,
+          notes: [mockNoteNotAuthorised],
+        });
+
+        const badge = findAllNotes().at(0);
+        return clickAndDragBadge(badge, { ...mockNoteCoordinates }, { x: 20, y: 20 }).then(() => {
+          // note position should not change after a click-and-drag attempt
+          expect(findFirstBadge().attributes().style).toContain(
+            `left: ${mockNoteCoordinates.x}px; top: ${mockNoteCoordinates.y}px;`,
+          );
+        });
       });
     });
   });
diff --git a/spec/frontend/design_management/components/design_presentation_spec.js b/spec/frontend/design_management/components/design_presentation_spec.js
index 8a709393d92..7e513182589 100644
--- a/spec/frontend/design_management/components/design_presentation_spec.js
+++ b/spec/frontend/design_management/components/design_presentation_spec.js
@@ -17,7 +17,13 @@ describe('Design management design presentation component', () => {
   let wrapper;
 
   function createComponent(
-    { image, imageName, discussions = [], isAnnotating = false } = {},
+    {
+      image,
+      imageName,
+      discussions = [],
+      isAnnotating = false,
+      resolvedDiscussionsExpanded = false,
+    } = {},
     data = {},
     stubs = {},
   ) {
@@ -27,6 +33,7 @@ describe('Design management design presentation component', () => {
         imageName,
         discussions,
         isAnnotating,
+        resolvedDiscussionsExpanded,
       },
       stubs,
     });
diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js
new file mode 100644
index 00000000000..e098e7de867
--- /dev/null
+++ b/spec/frontend/design_management/components/design_sidebar_spec.js
@@ -0,0 +1,236 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlCollapse, GlPopover } from '@gitlab/ui';
+import Cookies from 'js-cookie';
+import DesignSidebar from '~/design_management/components/design_sidebar.vue';
+import Participants from '~/sidebar/components/participants/participants.vue';
+import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
+import design from '../mock_data/design';
+import updateActiveDiscussionMutation from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql';
+
+const updateActiveDiscussionMutationVariables = {
+  mutation: updateActiveDiscussionMutation,
+  variables: {
+    id: design.discussions.nodes[0].notes.nodes[0].id,
+    source: 'discussion',
+  },
+};
+
+const $route = {
+  params: {
+    id: '1',
+  },
+};
+
+const cookieKey = 'hide_design_resolved_comments_popover';
+
+const mutate = jest.fn().mockResolvedValue();
+
+describe('Design management design sidebar component', () => {
+  let wrapper;
+
+  const findDiscussions = () => wrapper.findAll(DesignDiscussion);
+  const findFirstDiscussion = () => findDiscussions().at(0);
+  const findUnresolvedDiscussions = () => wrapper.findAll('[data-testid="unresolved-discussion"]');
+  const findResolvedDiscussions = () => wrapper.findAll('[data-testid="resolved-discussion"]');
+  const findParticipants = () => wrapper.find(Participants);
+  const findCollapsible = () => wrapper.find(GlCollapse);
+  const findToggleResolvedCommentsButton = () => wrapper.find('[data-testid="resolved-comments"]');
+  const findPopover = () => wrapper.find(GlPopover);
+  const findNewDiscussionDisclaimer = () =>
+    wrapper.find('[data-testid="new-discussion-disclaimer"]');
+
+  function createComponent(props = {}) {
+    wrapper = shallowMount(DesignSidebar, {
+      propsData: {
+        design,
+        resolvedDiscussionsExpanded: false,
+        markdownPreviewPath: '',
+        ...props,
+      },
+      mocks: {
+        $route,
+        $apollo: {
+          mutate,
+        },
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders participants', () => {
+    createComponent();
+
+    expect(findParticipants().exists()).toBe(true);
+  });
+
+  it('passes the correct amount of participants to the Participants component', () => {
+    createComponent();
+
+    expect(findParticipants().props('participants')).toHaveLength(1);
+  });
+
+  describe('when has no discussions', () => {
+    beforeEach(() => {
+      createComponent({
+        design: {
+          ...design,
+          discussions: {
+            nodes: [],
+          },
+        },
+      });
+    });
+
+    it('does not render discussions', () => {
+      expect(findDiscussions().exists()).toBe(false);
+    });
+
+    it('renders a message about possibility to create a new discussion', () => {
+      expect(findNewDiscussionDisclaimer().exists()).toBe(true);
+    });
+  });
+
+  describe('when has discussions', () => {
+    beforeEach(() => {
+      Cookies.set(cookieKey, true);
+      createComponent();
+    });
+
+    it('renders correct amount of unresolved discussions', () => {
+      expect(findUnresolvedDiscussions()).toHaveLength(1);
+    });
+
+    it('renders correct amount of resolved discussions', () => {
+      expect(findResolvedDiscussions()).toHaveLength(1);
+    });
+
+    it('has resolved comments collapsible collapsed', () => {
+      expect(findCollapsible().attributes('visible')).toBeUndefined();
+    });
+
+    it('emits toggleResolveComments event on resolve comments button click', () => {
+      findToggleResolvedCommentsButton().vm.$emit('click');
+      expect(wrapper.emitted('toggleResolvedComments')).toHaveLength(1);
+    });
+
+    it('opens a collapsible when resolvedDiscussionsExpanded prop changes to true', () => {
+      expect(findCollapsible().attributes('visible')).toBeUndefined();
+      wrapper.setProps({
+        resolvedDiscussionsExpanded: true,
+      });
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findCollapsible().attributes('visible')).toBe('true');
+      });
+    });
+
+    it('does not popover about resolved comments', () => {
+      expect(findPopover().exists()).toBe(false);
+    });
+
+    it('sends a mutation to set an active discussion when clicking on a discussion', () => {
+      findFirstDiscussion().trigger('click');
+
+      expect(mutate).toHaveBeenCalledWith(updateActiveDiscussionMutationVariables);
+    });
+
+    it('sends a mutation to reset an active discussion when clicking outside of discussion', () => {
+      wrapper.trigger('click');
+
+      expect(mutate).toHaveBeenCalledWith({
+        ...updateActiveDiscussionMutationVariables,
+        variables: { id: undefined, source: 'discussion' },
+      });
+    });
+
+    it('emits correct event on discussion create note error', () => {
+      findFirstDiscussion().vm.$emit('createNoteError', 'payload');
+      expect(wrapper.emitted('onDesignDiscussionError')).toEqual([['payload']]);
+    });
+
+    it('emits correct event on discussion update note error', () => {
+      findFirstDiscussion().vm.$emit('updateNoteError', 'payload');
+      expect(wrapper.emitted('updateNoteError')).toEqual([['payload']]);
+    });
+
+    it('emits correct event on discussion resolve error', () => {
+      findFirstDiscussion().vm.$emit('resolveDiscussionError', 'payload');
+      expect(wrapper.emitted('resolveDiscussionError')).toEqual([['payload']]);
+    });
+
+    it('changes prop correctly on opening discussion form', () => {
+      findFirstDiscussion().vm.$emit('openForm', 'some-id');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findFirstDiscussion().props('discussionWithOpenForm')).toBe('some-id');
+      });
+    });
+  });
+
+  describe('when all discussions are resolved', () => {
+    beforeEach(() => {
+      createComponent({
+        design: {
+          ...design,
+          discussions: {
+            nodes: [
+              {
+                id: 'discussion-id',
+                replyId: 'discussion-reply-id',
+                resolved: true,
+                notes: {
+                  nodes: [
+                    {
+                      id: 'note-id',
+                      body: '123',
+                      author: {
+                        name: 'Administrator',
+                        username: 'root',
+                        webUrl: 'link-to-author',
+                        avatarUrl: 'link-to-avatar',
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      });
+    });
+
+    it('renders a message about possibility to create a new discussion', () => {
+      expect(findNewDiscussionDisclaimer().exists()).toBe(true);
+    });
+
+    it('does not render unresolved discussions', () => {
+      expect(findUnresolvedDiscussions()).toHaveLength(0);
+    });
+  });
+
+  describe('when showing resolved discussions for the first time', () => {
+    beforeEach(() => {
+      Cookies.set(cookieKey, false);
+      createComponent();
+    });
+
+    it('renders a popover if we show resolved comments collapsible for the first time', () => {
+      expect(findPopover().exists()).toBe(true);
+    });
+
+    it('dismisses a popover on the outside click', () => {
+      wrapper.trigger('click');
+      return wrapper.vm.$nextTick(() => {
+        expect(findPopover().exists()).toBe(false);
+      });
+    });
+
+    it(`sets a ${cookieKey} cookie on clicking outside the popover`, () => {
+      jest.spyOn(Cookies, 'set');
+      wrapper.trigger('click');
+      expect(Cookies.set).toHaveBeenCalledWith(cookieKey, 'true', { expires: 365 * 10 });
+    });
+  });
+});
diff --git a/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap
index 185bf4a48f7..27c0ba589e6 100644
--- a/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap
+++ b/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap
@@ -10,7 +10,7 @@ exports[`Design management upload button component renders inverted upload desig
     variant="success"
   >
     
-    Add designs
+    Upload designs
     
     <!---->
   </gl-deprecated-button-stub>
@@ -34,7 +34,7 @@ exports[`Design management upload button component renders loading icon 1`] = `
     variant="success"
   >
     
-    Add designs
+    Upload designs
     
     <gl-loading-icon-stub
       class="ml-1"
@@ -63,7 +63,7 @@ exports[`Design management upload button component renders upload design button
     variant="success"
   >
     
-    Add designs
+    Upload designs
     
     <!---->
   </gl-deprecated-button-stub>