diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue
index d1c549f1b34dd4db04bd5b35b88d59b7a0f31960..0377bdb91009f9a86ef9cfdb0ecca41fde95f7da 100644
--- a/app/assets/javascripts/design_management/components/design_sidebar.vue
+++ b/app/assets/javascripts/design_management/components/design_sidebar.vue
@@ -1,5 +1,6 @@
<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"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index e849ea945cb9ab8f3d9c52801bb5943f8c174d1a..133dae8492b44cfad67e102a8970f17fbda70ef2 100644
--- a/locale/gitlab.pot
+++ b/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"
diff --git a/spec/features/projects/issues/design_management/user_views_design_spec.rb b/spec/features/projects/issues/design_management/user_views_design_spec.rb
index 50d4d9fa970988ce40d8dca94f8d533c72005a6d..0a7a83afe045a0e54d525001d79db4ed6f64b2d0 100644
--- a/spec/features/projects/issues/design_management/user_views_design_spec.rb
+++ b/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
diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js
index 7bf734bca4182cf4133aca02d18d2e45c1b8613e..6b3d9a63e9a83b12cacaf2c5cad7dbd8dd573955 100644
--- a/spec/frontend/design_management/components/design_sidebar_spec.js
+++ b/spec/frontend/design_management/components/design_sidebar_spec.js
@@ -1,5 +1,6 @@
-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', () => {