Merge branch '13354-design-status-and-comments-count' into 'master'

Resolve "[FE] Implement status and Discussion Count on Designs"

See merge request gitlab-org/gitlab!16416

doc/user/project/issues/design_management.md

@@ -53,7 +53,7 @@ to be enabled:
 
 Navigate to the **Design Management** page from any issue by clicking the **Designs** tab:
 
-![Designs tab](img/design_management_v12_2.png)
+![Designs tab](img/design_management_v12_3.png)
 
 ## Adding designs
 
@@ -66,6 +66,18 @@ of the design, and will replace the previous version.
 
 Images on the Design Management page can be enlarged by clicking on them.  
 
+The number of comments on a design — if any — is listed to the right
+of the design filename. Clicking on this number enlarges the design
+just like clicking anywhere else on the design.
+When a design is added or modified, an icon is displayed on the item
+to help summarize changes between versions.  
+
+| Indicator | Example |
+| --------- | ------- |
+| Comments | ![Comments Icon](img/design_comments_v12_3.png) |
+| Modified (in the selected version) | ![Design Modified](img/design_modified_v12_3.png) |
+| Added (in the selected version) | ![Design Added](img/design_added_v12_3.png) |
+
 ## Adding annotations to designs
 
 When a design image is displayed, you can add annotations to it by clicking on

ee/app/assets/javascripts/design_management/components/list/index.vue

@@ -19,7 +19,8 @@ export default {
     <li v-for="design in designs" :key="design.id" class="col-md-6 col-lg-4 mb-3">
       <design
         :id="design.id"
-        :comments-count="design.commentsCount"
+        :event="design.event"
+        :notes-count="design.notesCount"
         :image="design.image"
         :name="design.filename"
         :updated-at="design.updatedAt"

ee/app/assets/javascripts/design_management/components/list/item.vue

 <script>
 import Icon from '~/vue_shared/components/icon.vue';
 import Timeago from '~/vue_shared/components/time_ago_tooltip.vue';
-import { n__ } from '~/locale';
+import { n__, __ } from '~/locale';
 
 export default {
   components: {
@@ -13,10 +13,13 @@ export default {
       type: [Number, String],
       required: true,
     },
-    commentsCount: {
+    event: {
+      type: String,
+      required: true,
+    },
+    notesCount: {
       type: Number,
-      required: false,
-      default: 0,
+      required: true,
     },
     image: {
       type: String,
@@ -33,8 +36,30 @@ export default {
     },
   },
   computed: {
-    commentsLabel() {
-      return n__('%d comment', '%d comments', this.commentsCount);
+    icon() {
+      const normalizedEvent = this.event.toLowerCase();
+      const icons = {
+        creation: {
+          name: 'file-addition-solid',
+          classes: 'text-success-500',
+          tooltip: __('Added in this version'),
+        },
+        modification: {
+          name: 'file-modified-solid',
+          classes: 'text-primary-500',
+          tooltip: __('Modified in this version'),
+        },
+        deletion: {
+          name: 'file-deletion-solid',
+          classes: 'text-danger-500',
+          tooltip: __('Deleted in this version'),
+        },
+      };
+
+      return icons[normalizedEvent] ? icons[normalizedEvent] : {};
+    },
+    notesLabel() {
+      return n__('%d comment', '%d comments', this.notesCount);
     },
   },
 };
@@ -49,7 +74,12 @@ export default {
     }"
     class="card cursor-pointer text-plain js-design-list-item design-list-item"
   >
-    <div class="card-body p-0 d-flex align-items-center overflow-hidden">
+    <div class="card-body p-0 d-flex align-items-center overflow-hidden position-relative">
+      <div v-if="icon.name" class="design-event position-absolute">
+        <span :title="icon.tooltip" :aria-label="icon.tooltip">
+          <icon :name="icon.name" :size="18" :css-classes="icon.classes" />
+        </span>
+      </div>
       <img :src="image" :alt="name" class="block ml-auto mr-auto mw-100 mh-100 design-img" />
     </div>
     <div class="card-footer d-flex w-100">
@@ -59,10 +89,10 @@ export default {
           {{ __('Updated') }} <timeago :time="updatedAt" tooltip-placement="bottom" />
         </span>
       </div>
-      <div v-if="commentsCount" class="ml-auto d-flex align-items-center text-secondary">
+      <div v-if="notesCount" class="ml-auto d-flex align-items-center text-secondary">
         <icon name="comments" class="ml-1" />
-        <span :aria-label="commentsLabel" class="ml-1">
-          {{ commentsCount }}
+        <span :aria-label="notesLabel" class="ml-1">
+          {{ notesCount }}
         </span>
       </div>
     </div>

ee/app/assets/javascripts/design_management/graphql/fragments/designList.fragment.graphql

@@ -4,11 +4,13 @@
 fragment DesignListItem on Design {
   id
   image
+  event
   filename
   fullPath
   diffRefs {
     ...DesignDiffRefs
   }
+  notesCount
   discussions {
     edges {
       node {

ee/app/assets/stylesheets/components/design_management/design.scss

@@ -6,6 +6,11 @@
   overflow-y: scroll;
 }
 
+.design-list-item .design-event {
+  top: $gl-padding;
+  right: $gl-padding;
+}
+
 .image-notes {
   overflow-y: scroll;
   padding: 0 $gl-padding;

ee/changelogs/unreleased/feature-design-counts.yml

+---
+title: Implement design comment counts and current-version status icon indicator
+merge_request: 16416
+author:
+type: added

ee/spec/frontend/design_management/components/list/__snapshots__/index_spec.js.snap

@@ -8,10 +8,11 @@ exports[`Design management list component renders list 1`] = `
     class="col-md-6 col-lg-4 mb-3"
   >
     <design-stub
-      commentscount="2"
+      event="NONE"
       id="1"
       image="test"
       name="test"
+      notescount="2"
       updatedat="01-01-2019"
     />
   </li>
@@ -19,10 +20,11 @@ exports[`Design management list component renders list 1`] = `
     class="col-md-6 col-lg-4 mb-3"
   >
     <design-stub
-      commentscount="2"
+      event="NONE"
       id="2"
       image="test"
       name="test"
+      notescount="2"
       updatedat="01-01-2019"
     />
   </li>

ee/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap

@@ -6,8 +6,190 @@ exports[`Design management list item component hides comment count 1`] = `
   to="[object Object]"
 >
   <div
-    class="card-body p-0 d-flex align-items-center overflow-hidden"
+    class="card-body p-0 d-flex align-items-center overflow-hidden position-relative"
   >
+    <!---->
+     
+    <img
+      alt="test"
+      class="block ml-auto mr-auto mw-100 mh-100 design-img"
+      src="http://via.placeholder.com/300"
+    />
+  </div>
+   
+  <div
+    class="card-footer d-flex w-100"
+  >
+    <div
+      class="d-flex flex-column str-truncated-100"
+    >
+      <span
+        class="bold str-truncated-100"
+      >
+        test
+      </span>
+       
+      <span
+        class="str-truncated-100"
+      >
+        
+        Updated 
+        <timeago-stub
+          cssclass=""
+          time="01-01-2019"
+          tooltipplacement="bottom"
+        />
+      </span>
+    </div>
+     
+    <!---->
+  </div>
+</router-link-stub>
+`;
+
+exports[`Design management list item component renders item with correct status icon for creation event 1`] = `
+<router-link-stub
+  class="card cursor-pointer text-plain js-design-list-item design-list-item"
+  to="[object Object]"
+>
+  <div
+    class="card-body p-0 d-flex align-items-center overflow-hidden position-relative"
+  >
+    <div
+      class="design-event position-absolute"
+    >
+      <span
+        aria-label="Added in this version"
+        title="Added in this version"
+      >
+        <icon-stub
+          cssclasses="text-success-500"
+          name="file-addition-solid"
+          size="18"
+        />
+      </span>
+    </div>
+     
+    <img
+      alt="test"
+      class="block ml-auto mr-auto mw-100 mh-100 design-img"
+      src="http://via.placeholder.com/300"
+    />
+  </div>
+   
+  <div
+    class="card-footer d-flex w-100"
+  >
+    <div
+      class="d-flex flex-column str-truncated-100"
+    >
+      <span
+        class="bold str-truncated-100"
+      >
+        test
+      </span>
+       
+      <span
+        class="str-truncated-100"
+      >
+        
+        Updated 
+        <timeago-stub
+          cssclass=""
+          time="01-01-2019"
+          tooltipplacement="bottom"
+        />
+      </span>
+    </div>
+     
+    <!---->
+  </div>
+</router-link-stub>
+`;
+
+exports[`Design management list item component renders item with correct status icon for deletion event 1`] = `
+<router-link-stub
+  class="card cursor-pointer text-plain js-design-list-item design-list-item"
+  to="[object Object]"
+>
+  <div
+    class="card-body p-0 d-flex align-items-center overflow-hidden position-relative"
+  >
+    <div
+      class="design-event position-absolute"
+    >
+      <span
+        aria-label="Deleted in this version"
+        title="Deleted in this version"
+      >
+        <icon-stub
+          cssclasses="text-danger-500"
+          name="file-deletion-solid"
+          size="18"
+        />
+      </span>
+    </div>
+     
+    <img
+      alt="test"
+      class="block ml-auto mr-auto mw-100 mh-100 design-img"
+      src="http://via.placeholder.com/300"
+    />
+  </div>
+   
+  <div
+    class="card-footer d-flex w-100"
+  >
+    <div
+      class="d-flex flex-column str-truncated-100"
+    >
+      <span
+        class="bold str-truncated-100"
+      >
+        test
+      </span>
+       
+      <span
+        class="str-truncated-100"
+      >
+        
+        Updated 
+        <timeago-stub
+          cssclass=""
+          time="01-01-2019"
+          tooltipplacement="bottom"
+        />
+      </span>
+    </div>
+     
+    <!---->
+  </div>
+</router-link-stub>
+`;
+
+exports[`Design management list item component renders item with correct status icon for modification event 1`] = `
+<router-link-stub
+  class="card cursor-pointer text-plain js-design-list-item design-list-item"
+  to="[object Object]"
+>
+  <div
+    class="card-body p-0 d-flex align-items-center overflow-hidden position-relative"
+  >
+    <div
+      class="design-event position-absolute"
+    >
+      <span
+        aria-label="Modified in this version"
+        title="Modified in this version"
+      >
+        <icon-stub
+          cssclasses="text-primary-500"
+          name="file-modified-solid"
+          size="18"
+        />
+      </span>
+    </div>
+     
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"
@@ -51,8 +233,10 @@ exports[`Design management list item component renders item with multiple commen
   to="[object Object]"
 >
   <div
-    class="card-body p-0 d-flex align-items-center overflow-hidden"
+    class="card-body p-0 d-flex align-items-center overflow-hidden position-relative"
   >
+    <!---->
+     
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"
@@ -108,14 +292,63 @@ exports[`Design management list item component renders item with multiple commen
 </router-link-stub>
 `;
 
+exports[`Design management list item component renders item with no status icon for none event 1`] = `
+<router-link-stub
+  class="card cursor-pointer text-plain js-design-list-item design-list-item"
+  to="[object Object]"
+>
+  <div
+    class="card-body p-0 d-flex align-items-center overflow-hidden position-relative"
+  >
+    <!---->
+     
+    <img
+      alt="test"
+      class="block ml-auto mr-auto mw-100 mh-100 design-img"
+      src="http://via.placeholder.com/300"
+    />
+  </div>
+   
+  <div
+    class="card-footer d-flex w-100"
+  >
+    <div
+      class="d-flex flex-column str-truncated-100"
+    >
+      <span
+        class="bold str-truncated-100"
+      >
+        test
+      </span>
+       
+      <span
+        class="str-truncated-100"
+      >
+        
+        Updated 
+        <timeago-stub
+          cssclass=""
+          time="01-01-2019"
+          tooltipplacement="bottom"
+        />
+      </span>
+    </div>
+     
+    <!---->
+  </div>
+</router-link-stub>
+`;
+
 exports[`Design management list item component renders item with single comment 1`] = `
 <router-link-stub
   class="card cursor-pointer text-plain js-design-list-item design-list-item"
   to="[object Object]"
 >
   <div
-    class="card-body p-0 d-flex align-items-center overflow-hidden"
+    class="card-body p-0 d-flex align-items-center overflow-hidden position-relative"
   >
+    <!---->
+     
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"

ee/spec/frontend/design_management/components/list/index_spec.js

@@ -5,7 +5,8 @@ const createMockDesign = id => ({
   id,
   filename: 'test',
   image: 'test',
-  commentsCount: 2,
+  event: 'NONE',
+  notesCount: 2,
   updatedAt: '01-01-2019',
 });
 

ee/spec/frontend/design_management/components/list/item_spec.js

@@ -9,7 +9,7 @@ const router = new VueRouter();
 describe('Design management list item component', () => {
   let wrapper;
 
-  function createComponent(commentsCount = 1) {
+  function createComponent(notesCount = 1, event = 'NONE') {
     wrapper = shallowMount(Item, {
       sync: false,
       localVue,
@@ -18,7 +18,8 @@ describe('Design management list item component', () => {
         id: 1,
         name: 'test',
         image: 'http://via.placeholder.com/300',
-        commentsCount,
+        event,
+        notesCount,
         updatedAt: '01-01-2019',
       },
       stubs: ['router-link'],
@@ -46,4 +47,28 @@ describe('Design management list item component', () => {
 
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  it('renders item with correct status icon for modification event', () => {
+    createComponent(0, 'MODIFICATION');
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('renders item with correct status icon for deletion event', () => {
+    createComponent(0, 'DELETION');
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('renders item with correct status icon for creation event', () => {
+    createComponent(0, 'CREATION');
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('renders item with no status icon for none event', () => {
+    createComponent(0, 'NONE');
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
 });

locale/gitlab.pot

@@ -992,6 +992,9 @@ msgstr ""
 msgid "Added at"
 msgstr ""
 
+msgid "Added in this version"
+msgstr ""
+
 msgid "Adding new applications is disabled in your GitLab instance. Please contact your GitLab administrator to get the permission"
 msgstr ""
 
@@ -4782,6 +4785,9 @@ msgstr ""
 msgid "Deleted chat nickname: %{chat_name}!"
 msgstr ""
 
+msgid "Deleted in this version"
+msgstr ""
+
 msgid "Deleting the license failed."
 msgstr ""
 
@@ -9897,6 +9903,9 @@ msgstr ""
 msgid "Modal|Close"
 msgstr ""
 
+msgid "Modified in this version"
+msgstr ""
+
 msgid "Modify commit message"
 msgstr ""