Optimize click area in design version dropdown

- remove <strong> tag
- use pajamas-conforming dropdown checked icon
- update specs

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

@@ -33,12 +33,12 @@ 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,
       });
     },
@@ -50,25 +50,20 @@ export default {
 </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="$router.push({ path: $route.path, query: { version: findVersionId(version.id) } })"
+    >
+      <template>
+        {{ __('Version') }} {{ allVersions.length - index }}
+        <template v-if="findVersionId(version.id) === latestVersionId"
+          >({{ __('latest') }})</template
+        >
+      </template>
     </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

@@ -22230,6 +22230,12 @@ msgstr ""
 msgid "Showing last %{size} of log -"
 msgstr ""
 
+msgid "Showing latest version"
+msgstr ""
+
+msgid "Showing version #%{versionNumber}"
+msgstr ""
+
 msgid "Side-by-side"
 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,26 @@ 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 +42,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 +54,26 @@ 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

@@ -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');
       });
     });