Merge branch '229505-optimize-click-area-in-design-version-dropdown' into 'master'

Optimize click area in design version dropdown

See merge request gitlab-org/gitlab!38747

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

 <script>
-import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui';
+import { GlNewDropdown, GlNewDropdownItem, GlSprintf } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import allVersionsMixin from '../../mixins/all_versions';
 import { findVersionId } from '../../utils/design_management_utils';
@@ -8,6 +8,7 @@ export default {
   components: {
     GlNewDropdown,
     GlNewDropdownItem,
+    GlSprintf,
   },
   mixins: [allVersionsMixin],
   computed: {
@@ -33,42 +34,48 @@ export default {
     },
     dropdownText() {
       if (this.isLatestVersion) {
-        return __('Showing Latest Version');
+        return __('Showing latest version');
       }
       // allVersions is sorted in reverse chronological order (latest first)
       const currentVersionNumber = this.allVersions.length - this.currentVersionIdx;
 
-      return sprintf(__('Showing Version #%{versionNumber}'), {
+      return sprintf(__('Showing version #%{versionNumber}'), {
         versionNumber: currentVersionNumber,
       });
     },
   },
   methods: {
     findVersionId,
+    routeToVersion(versionId) {
+      this.$router.push({
+        path: this.$route.path,
+        query: { version: this.findVersionId(versionId) },
+      });
+    },
+    versionText(versionId) {
+      if (this.findVersionId(versionId) === this.latestVersionId) {
+        return __('Version %{versionNumber} (latest)');
+      }
+      return __('Version %{versionNumber}');
+    },
   },
 };
 </script>
 
 <template>
-  <gl-new-dropdown :text="dropdownText" size="small" class="design-version-dropdown">
-    <gl-new-dropdown-item v-for="(version, index) in allVersions" :key="version.id">
-      <router-link
-        class="d-flex js-version-link"
-        :to="{ path: $route.path, query: { version: findVersionId(version.id) } }"
-      >
-        <div class="flex-grow-1 ml-2">
-          <div>
-            <strong
-              >{{ __('Version') }} {{ allVersions.length - index }}
-              <span v-if="findVersionId(version.id) === latestVersionId">({{ __('latest') }})</span>
-            </strong>
-          </div>
-        </div>
-        <i
-          v-if="findVersionId(version.id) === currentVersionId"
-          class="fa fa-check float-right gl-mr-2"
-        ></i>
-      </router-link>
+  <gl-new-dropdown :text="dropdownText" size="small">
+    <gl-new-dropdown-item
+      v-for="(version, index) in allVersions"
+      :key="version.id"
+      :is-check-item="true"
+      :is-checked="findVersionId(version.id) === currentVersionId"
+      @click="routeToVersion(version.id)"
+    >
+      <gl-sprintf :message="versionText(version.id)">
+        <template #versionNumber>
+          {{ allVersions.length - index }}
+        </template>
+      </gl-sprintf>
     </gl-new-dropdown-item>
   </gl-new-dropdown>
 </template>

changelogs/unreleased/229505-optimize-click-area-in-design-version-dropdown.yml

+---
+title: Optimize click area in design version dropdown
+merge_request: 38747
+author:
+type: fixed

locale/gitlab.pot

@@ -22366,6 +22366,12 @@ msgstr ""
 msgid "Showing last %{size} of log -"
 msgstr ""
 
+msgid "Showing latest version"
+msgstr ""
+
+msgid "Showing version #%{versionNumber}"
+msgstr ""
+
 msgid "Side-by-side"
 msgstr ""
 
@@ -26850,6 +26856,12 @@ msgstr ""
 msgid "Version"
 msgstr ""
 
+msgid "Version %{versionNumber}"
+msgstr ""
+
+msgid "Version %{versionNumber} (latest)"
+msgstr ""
+
 msgid "View Documentation"
 msgstr ""
 

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

@@ -3,12 +3,11 @@
 exports[`Design management design version dropdown component renders design version dropdown button 1`] = `
 <gl-new-dropdown-stub
   category="tertiary"
-  class="design-version-dropdown"
   headertext=""
   issueiid=""
   projectpath=""
   size="small"
-  text="Showing Latest Version"
+  text="Showing latest version"
   variant="default"
 >
   <gl-new-dropdown-item-stub
@@ -16,56 +15,25 @@ exports[`Design management design version dropdown component renders design vers
     iconcolor=""
     iconname=""
     iconrightname=""
+    ischecked="true"
+    ischeckitem="true"
     secondarytext=""
   >
-    <router-link-stub
-      class="d-flex js-version-link"
-      to="[object Object]"
-    >
-      <div
-        class="flex-grow-1 ml-2"
-      >
-        <div>
-          <strong>
-            Version 2
-            
-            <span>
-              (latest)
-            </span>
-          </strong>
-        </div>
-      </div>
-       
-      <i
-        class="fa fa-check float-right gl-mr-2"
-      />
-    </router-link-stub>
+    Version 
+        2
+       (latest)
   </gl-new-dropdown-item-stub>
   <gl-new-dropdown-item-stub
     avatarurl=""
     iconcolor=""
     iconname=""
     iconrightname=""
+    ischeckitem="true"
     secondarytext=""
   >
-    <router-link-stub
-      class="d-flex js-version-link"
-      to="[object Object]"
-    >
-      <div
-        class="flex-grow-1 ml-2"
-      >
-        <div>
-          <strong>
-            Version 1
-            
-            <!---->
-          </strong>
-        </div>
-      </div>
-       
-      <!---->
-    </router-link-stub>
+    Version 
+        1
+      
   </gl-new-dropdown-item-stub>
 </gl-new-dropdown-stub>
 `;
@@ -73,12 +41,11 @@ exports[`Design management design version dropdown component renders design vers
 exports[`Design management design version dropdown component renders design version list 1`] = `
 <gl-new-dropdown-stub
   category="tertiary"
-  class="design-version-dropdown"
   headertext=""
   issueiid=""
   projectpath=""
   size="small"
-  text="Showing Latest Version"
+  text="Showing latest version"
   variant="default"
 >
   <gl-new-dropdown-item-stub
@@ -86,56 +53,25 @@ exports[`Design management design version dropdown component renders design vers
     iconcolor=""
     iconname=""
     iconrightname=""
+    ischecked="true"
+    ischeckitem="true"
     secondarytext=""
   >
-    <router-link-stub
-      class="d-flex js-version-link"
-      to="[object Object]"
-    >
-      <div
-        class="flex-grow-1 ml-2"
-      >
-        <div>
-          <strong>
-            Version 2
-            
-            <span>
-              (latest)
-            </span>
-          </strong>
-        </div>
-      </div>
-       
-      <i
-        class="fa fa-check float-right gl-mr-2"
-      />
-    </router-link-stub>
+    Version 
+        2
+       (latest)
   </gl-new-dropdown-item-stub>
   <gl-new-dropdown-item-stub
     avatarurl=""
     iconcolor=""
     iconname=""
     iconrightname=""
+    ischeckitem="true"
     secondarytext=""
   >
-    <router-link-stub
-      class="d-flex js-version-link"
-      to="[object Object]"
-    >
-      <div
-        class="flex-grow-1 ml-2"
-      >
-        <div>
-          <strong>
-            Version 1
-            
-            <!---->
-          </strong>
-        </div>
-      </div>
-       
-      <!---->
-    </router-link-stub>
+    Version 
+        1
+      
   </gl-new-dropdown-item-stub>
 </gl-new-dropdown-stub>
 `;

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

 import { shallowMount } from '@vue/test-utils';
 import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue';
-import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui';
+import { GlNewDropdown, GlNewDropdownItem, GlSprintf } from '@gitlab/ui';
 import mockAllVersions from './mock_data/all_versions';
 
 const LATEST_VERSION_ID = 3;
@@ -30,7 +30,7 @@ describe('Design management design version dropdown component', () => {
       mocks: {
         $route,
       },
-      stubs: ['router-link'],
+      stubs: { GlSprintf },
     });
 
     wrapper.setData({
@@ -42,7 +42,7 @@ describe('Design management design version dropdown component', () => {
     wrapper.destroy();
   });
 
-  const findVersionLink = index => wrapper.findAll('.js-version-link').at(index);
+  const findVersionLink = index => wrapper.findAll(GlNewDropdownItem).at(index);
 
   it('renders design version dropdown button', () => {
     createComponent();
@@ -75,7 +75,7 @@ describe('Design management design version dropdown component', () => {
       createComponent();
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
+        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version');
       });
     });
 
@@ -83,7 +83,7 @@ describe('Design management design version dropdown component', () => {
       createComponent({ maxVersions: 1 });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
+        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version');
       });
     });
 
@@ -91,7 +91,7 @@ describe('Design management design version dropdown component', () => {
       createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe(`Showing Version #1`);
+        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe(`Showing version #1`);
       });
     });
 
@@ -99,7 +99,7 @@ describe('Design management design version dropdown component', () => {
       createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
+        expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version');
       });
     });