Add empty state for discussion in sidebar

Changelog: changed

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

 <script>
-import { GlAccordion, GlAccordionItem, GlSkeletonLoader } from '@gitlab/ui';
+import { GlAccordion, GlAccordionItem, GlSkeletonLoader, GlEmptyState } from '@gitlab/ui';
+import EMPTY_DISCUSSION_URL from '@gitlab/svgs/dist/illustrations/empty-state/empty-activity-md.svg';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 
 import { s__, n__ } from '~/locale';
@@ -19,6 +20,7 @@ export default {
     GlAccordion,
     GlAccordionItem,
     GlSkeletonLoader,
+    GlEmptyState,
     DescriptionForm,
     DesignDisclosure,
   },
@@ -67,6 +69,7 @@ export default {
     return {
       discussionWithOpenForm: '',
       isLoggedIn: isLoggedIn(),
+      emptyDiscussionSvgPath: EMPTY_DISCUSSION_URL,
     };
   },
   computed: {
@@ -154,13 +157,17 @@ export default {
           <h3 data-testid="unresolved-discussion-count" class="gl-line-height-20! gl-font-lg">
             {{ unresolvedDiscussionsCount }}
           </h3>
-          <h2
+          <gl-empty-state
             v-if="isLoggedIn && unresolvedDiscussions.length === 0"
-            class="new-discussion-disclaimer gl-font-base gl-m-0 gl-mb-4"
             data-testid="new-discussion-disclaimer"
+            :svg-path="emptyDiscussionSvgPath"
           >
-            {{ s__("DesignManagement|Click the image where you'd like to start a new discussion") }}
-          </h2>
+            <template #description>
+              {{
+                s__(`DesignManagement|Click on the image where you'd like to add a new comment.`)
+              }}
+            </template>
+          </gl-empty-state>
           <design-note-signed-out
             v-if="!isLoggedIn"
             class="gl-mb-4"

locale/gitlab.pot

@@ -17786,7 +17786,7 @@ msgstr ""
 msgid "DesignManagement|Cancel"
 msgstr ""
-msgid "DesignManagement|Click the image where you'd like to start a new discussion"
+msgid "DesignManagement|Click on the image where you'd like to add a new comment."
 msgstr ""
 msgid "DesignManagement|Comment"

spec/features/projects/issues/design_management/user_views_design_spec.rb

@@ -10,6 +10,7 @@
   let_it_be(:project) { create(:project_empty_repo, :public) }
   let_it_be(:issue) { create(:issue, project: project) }
   let_it_be(:design) { create(:design, :with_file, issue: issue) }
+  let_it_be(:design_without_notes) { create(:design, :with_file, issue: issue) }
   let_it_be(:note) { create(:diff_note_on_design, noteable: design, author: user) }
 
   def add_diff_note_emoji(diff_note, emoji_name)
@@ -76,6 +77,14 @@ def remove_diff_note_emoji(diff_note, emoji_name)
     expect(page).to have_selector('.js-design-image')
   end
 
+  it 'shows a design without notes' do
+    empty_discussion_message = "Click on the image where you'd like to add a new comment."
+    click_link design_without_notes.filename
+
+    expect(page).not_to have_selector('.image-notes .design-note .note-text')
+    expect(find_by_testid('new-discussion-disclaimer')).to have_content(empty_discussion_message)
+  end
+
   it 'shows a comment within design' do
     click_link design.filename
 

spec/frontend/design_management/components/design_sidebar_spec.js

-import { GlAccordionItem } from '@gitlab/ui';
+import { GlAccordionItem, GlEmptyState } from '@gitlab/ui';
 import { nextTick } from 'vue';
+import emptyDiscussionUrl from '@gitlab/svgs/dist/illustrations/empty-state/empty-activity-md.svg';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
 import DesignNoteSignedOut from '~/design_management/components/design_notes/design_note_signed_out.vue';
@@ -43,7 +44,7 @@ describe('Design management design sidebar component', () => {
   const findUnresolvedDiscussions = () => wrapper.findAllByTestId('unresolved-discussion');
   const findResolvedDiscussions = () => wrapper.findAllByTestId('resolved-discussion');
   const findResolvedCommentsToggle = () => wrapper.findComponent(GlAccordionItem);
-  const findNewDiscussionDisclaimer = () => wrapper.findByTestId('new-discussion-disclaimer');
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findUnresolvedDiscussionsCount = () => wrapper.findByTestId('unresolved-discussion-count');
 
   function createComponent(props = {}) {
@@ -96,7 +97,10 @@ describe('Design management design sidebar component', () => {
     });
 
     it('renders a message about possibility to create a new discussion', () => {
-      expect(findNewDiscussionDisclaimer().exists()).toBe(true);
+      const emptyState = findEmptyState();
+      expect(emptyState.exists()).toBe(true);
+      expect(emptyState.props('svgPath')).toBe(emptyDiscussionUrl);
+      expect(emptyState.text()).toBe(`Click on the image where you'd like to add a new comment.`);
     });
 
     it('renders 0 Threads for unresolved discussions', () => {
@@ -256,7 +260,7 @@ describe('Design management design sidebar component', () => {
     });
 
     it('renders a message about possibility to create a new discussion', () => {
-      expect(findNewDiscussionDisclaimer().exists()).toBe(true);
+      expect(findEmptyState().exists()).toBe(true);
     });
 
     it('does not render unresolved discussions', () => {
@@ -284,7 +288,7 @@ describe('Design management design sidebar component', () => {
       });
 
       it('does not render a message about possibility to create a new discussion', () => {
-        expect(findNewDiscussionDisclaimer().exists()).toBe(false);
+        expect(findEmptyState().exists()).toBe(false);
       });
 
       it('renders design-note-signed-out component', () => {