Provide more information in design version selector

Add avatar and user name in design version dropdown

Changelog: changed

app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue

 <script>
 import { GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
+import defaultAvatarUrl from 'images/no_avatar.png';
 import { __, sprintf } from '~/locale';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import allVersionsMixin from '../../mixins/all_versions';
 import { findVersionId } from '../../utils/design_management_utils';
 
@@ -9,6 +11,7 @@ export default {
     GlDropdown,
     GlDropdownItem,
     GlSprintf,
+    TimeAgo,
   },
   mixins: [allVersionsMixin],
   computed: {
@@ -58,6 +61,9 @@ export default {
       }
       return __('Version %{versionNumber}');
     },
+    getAvatarUrl(version) {
+      return version?.author?.avatarUrl || defaultAvatarUrl;
+    },
   },
 };
 </script>
@@ -68,14 +74,28 @@ export default {
       v-for="(version, index) in allVersions"
       :key="version.id"
       :is-check-item="true"
+      :is-check-centered="true"
       :is-checked="findVersionId(version.id) === currentVersionId"
+      :avatar-url="getAvatarUrl(version)"
       @click="routeToVersion(version.id)"
     >
-      <gl-sprintf :message="versionText(version.id)">
-        <template #versionNumber>
-          {{ allVersions.length - index }}
-        </template>
-      </gl-sprintf>
+      <strong>
+        <gl-sprintf :message="versionText(version.id)">
+          <template #versionNumber>
+            {{ allVersions.length - index }}
+          </template>
+        </gl-sprintf>
+      </strong>
+
+      <div v-if="version.author" class="gl-text-gray-600 gl-mt-1">
+        <div>{{ version.author.name }}</div>
+        <time-ago
+          v-if="version.createdAt"
+          class="text-1"
+          :time="version.createdAt"
+          tooltip-placement="bottom"
+        />
+      </div>
     </gl-dropdown-item>
   </gl-dropdown>
 </template>

app/graphql/queries/design_management/get_design_list.query.graphql

@@ -32,6 +32,13 @@ query getDesignList($fullPath: ID!, $iid: String!, $atVersion: ID) {
             __typename
             id
             sha
+            createdAt
+            author {
+              __typename
+              id
+              name
+              avatarUrl
+            }
           }
         }
       }

spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap

@@ -17,13 +17,31 @@ exports[`Design management design version dropdown component renders design vers
     iconname=""
     iconrightarialabel=""
     iconrightname=""
+    ischeckcentered="true"
     ischecked="true"
     ischeckitem="true"
     secondarytext=""
   >
-    Version 
-        2
-       (latest)
+    <strong>
+      Version 
+          2
+         (latest)
+    </strong>
+     
+    <div
+      class="gl-text-gray-600 gl-mt-1"
+    >
+      <div>
+        Adminstrator
+      </div>
+       
+      <time-ago-stub
+        class="text-1"
+        cssclass=""
+        time="2021-08-09T06:05:00Z"
+        tooltipplacement="bottom"
+      />
+    </div>
   </gl-dropdown-item-stub>
   <gl-dropdown-item-stub
     avatarurl=""
@@ -31,12 +49,30 @@ exports[`Design management design version dropdown component renders design vers
     iconname=""
     iconrightarialabel=""
     iconrightname=""
+    ischeckcentered="true"
     ischeckitem="true"
     secondarytext=""
   >
-    Version 
-        1
-      
+    <strong>
+      Version 
+          1
+        
+    </strong>
+     
+    <div
+      class="gl-text-gray-600 gl-mt-1"
+    >
+      <div>
+        Adminstrator
+      </div>
+       
+      <time-ago-stub
+        class="text-1"
+        cssclass=""
+        time="2021-08-09T06:05:00Z"
+        tooltipplacement="bottom"
+      />
+    </div>
   </gl-dropdown-item-stub>
 </gl-dropdown-stub>
 `;
@@ -58,13 +94,31 @@ exports[`Design management design version dropdown component renders design vers
     iconname=""
     iconrightarialabel=""
     iconrightname=""
+    ischeckcentered="true"
     ischecked="true"
     ischeckitem="true"
     secondarytext=""
   >
-    Version 
-        2
-       (latest)
+    <strong>
+      Version 
+          2
+         (latest)
+    </strong>
+     
+    <div
+      class="gl-text-gray-600 gl-mt-1"
+    >
+      <div>
+        Adminstrator
+      </div>
+       
+      <time-ago-stub
+        class="text-1"
+        cssclass=""
+        time="2021-08-09T06:05:00Z"
+        tooltipplacement="bottom"
+      />
+    </div>
   </gl-dropdown-item-stub>
   <gl-dropdown-item-stub
     avatarurl=""
@@ -72,12 +126,30 @@ exports[`Design management design version dropdown component renders design vers
     iconname=""
     iconrightarialabel=""
     iconrightname=""
+    ischeckcentered="true"
     ischeckitem="true"
     secondarytext=""
   >
-    Version 
-        1
-      
+    <strong>
+      Version 
+          1
+        
+    </strong>
+     
+    <div
+      class="gl-text-gray-600 gl-mt-1"
+    >
+      <div>
+        Adminstrator
+      </div>
+       
+      <time-ago-stub
+        class="text-1"
+        cssclass=""
+        time="2021-08-09T06:05:00Z"
+        tooltipplacement="bottom"
+      />
+    </div>
   </gl-dropdown-item-stub>
 </gl-dropdown-stub>
 `;

spec/frontend/design_management/components/upload/design_version_dropdown_spec.js

 import { GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import mockAllVersions from './mock_data/all_versions';
 
-const LATEST_VERSION_ID = 3;
+const LATEST_VERSION_ID = 1;
 const PREVIOUS_VERSION_ID = 2;
 
 const designRouteFactory = (versionId) => ({
@@ -110,5 +111,13 @@ describe('Design management design version dropdown component', () => {
         expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
       });
     });
+
+    it('should render TimeAgo', async () => {
+      createComponent();
+
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.findAllComponents(TimeAgo)).toHaveLength(wrapper.vm.allVersions.length);
+    });
   });
 });

spec/frontend/design_management/components/upload/mock_data/all_versions.js

 export default [
   {
-    id: 'gid://gitlab/DesignManagement::Version/3',
-    sha: '0945756378e0b1588b9dd40d5a6b99e8b7198f55',
+    id: 'gid://gitlab/DesignManagement::Version/1',
+    sha: 'b389071a06c153509e11da1f582005b316667001',
+    createdAt: '2021-08-09T06:05:00Z',
+    author: {
+      id: 'gid://gitlab/User/1',
+      name: 'Adminstrator',
+    },
   },
   {
     id: 'gid://gitlab/DesignManagement::Version/2',
-    sha: '5b063fef0cd7213b312db65b30e24f057df21b20',
+    sha: 'b389071a06c153509e11da1f582005b316667021',
+    createdAt: '2021-08-09T06:05:00Z',
+    author: {
+      id: 'gid://gitlab/User/1',
+      name: 'Adminstrator',
+    },
   },
 ];

spec/frontend/design_management/mock_data/all_versions.js

@@ -2,5 +2,19 @@ export default [
   {
     id: 'gid://gitlab/DesignManagement::Version/1',
     sha: 'b389071a06c153509e11da1f582005b316667001',
+    createdAt: '2021-08-09T06:05:00Z',
+    author: {
+      id: 'gid://gitlab/User/1',
+      name: 'Adminstrator',
+    },
+  },
+  {
+    id: 'gid://gitlab/DesignManagement::Version/1',
+    sha: 'b389071a06c153509e11da1f582005b316667021',
+    createdAt: '2021-08-09T06:05:00Z',
+    author: {
+      id: 'gid://gitlab/User/1',
+      name: 'Adminstrator',
+    },
   },
 ];