Commit 93fec053 authored by Miguel Rincon's avatar Miguel Rincon

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
parents b2a0967e 79c0c61a
<script> <script>
import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui'; import { GlNewDropdown, GlNewDropdownItem, GlSprintf } from '@gitlab/ui';
import { __, sprintf } from '~/locale'; import { __, sprintf } from '~/locale';
import allVersionsMixin from '../../mixins/all_versions'; import allVersionsMixin from '../../mixins/all_versions';
import { findVersionId } from '../../utils/design_management_utils'; import { findVersionId } from '../../utils/design_management_utils';
...@@ -8,6 +8,7 @@ export default { ...@@ -8,6 +8,7 @@ export default {
components: { components: {
GlNewDropdown, GlNewDropdown,
GlNewDropdownItem, GlNewDropdownItem,
GlSprintf,
}, },
mixins: [allVersionsMixin], mixins: [allVersionsMixin],
computed: { computed: {
...@@ -33,42 +34,48 @@ export default { ...@@ -33,42 +34,48 @@ export default {
}, },
dropdownText() { dropdownText() {
if (this.isLatestVersion) { if (this.isLatestVersion) {
return __('Showing Latest Version'); return __('Showing latest version');
} }
// allVersions is sorted in reverse chronological order (latest first) // allVersions is sorted in reverse chronological order (latest first)
const currentVersionNumber = this.allVersions.length - this.currentVersionIdx; const currentVersionNumber = this.allVersions.length - this.currentVersionIdx;
return sprintf(__('Showing Version #%{versionNumber}'), { return sprintf(__('Showing version #%{versionNumber}'), {
versionNumber: currentVersionNumber, versionNumber: currentVersionNumber,
}); });
}, },
}, },
methods: { methods: {
findVersionId, 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> </script>
<template> <template>
<gl-new-dropdown :text="dropdownText" size="small" class="design-version-dropdown"> <gl-new-dropdown :text="dropdownText" size="small">
<gl-new-dropdown-item v-for="(version, index) in allVersions" :key="version.id"> <gl-new-dropdown-item
<router-link v-for="(version, index) in allVersions"
class="d-flex js-version-link" :key="version.id"
:to="{ path: $route.path, query: { version: findVersionId(version.id) } }" :is-check-item="true"
> :is-checked="findVersionId(version.id) === currentVersionId"
<div class="flex-grow-1 ml-2"> @click="routeToVersion(version.id)"
<div> >
<strong <gl-sprintf :message="versionText(version.id)">
>{{ __('Version') }} {{ allVersions.length - index }} <template #versionNumber>
<span v-if="findVersionId(version.id) === latestVersionId">({{ __('latest') }})</span> {{ allVersions.length - index }}
</strong> </template>
</div> </gl-sprintf>
</div>
<i
v-if="findVersionId(version.id) === currentVersionId"
class="fa fa-check float-right gl-mr-2"
></i>
</router-link>
</gl-new-dropdown-item> </gl-new-dropdown-item>
</gl-new-dropdown> </gl-new-dropdown>
</template> </template>
---
title: Optimize click area in design version dropdown
merge_request: 38747
author:
type: fixed
...@@ -22366,6 +22366,12 @@ msgstr "" ...@@ -22366,6 +22366,12 @@ msgstr ""
msgid "Showing last %{size} of log -" msgid "Showing last %{size} of log -"
msgstr "" msgstr ""
msgid "Showing latest version"
msgstr ""
msgid "Showing version #%{versionNumber}"
msgstr ""
msgid "Side-by-side" msgid "Side-by-side"
msgstr "" msgstr ""
...@@ -26850,6 +26856,12 @@ msgstr "" ...@@ -26850,6 +26856,12 @@ msgstr ""
msgid "Version" msgid "Version"
msgstr "" msgstr ""
msgid "Version %{versionNumber}"
msgstr ""
msgid "Version %{versionNumber} (latest)"
msgstr ""
msgid "View Documentation" msgid "View Documentation"
msgstr "" msgstr ""
......
...@@ -3,12 +3,11 @@ ...@@ -3,12 +3,11 @@
exports[`Design management design version dropdown component renders design version dropdown button 1`] = ` exports[`Design management design version dropdown component renders design version dropdown button 1`] = `
<gl-new-dropdown-stub <gl-new-dropdown-stub
category="tertiary" category="tertiary"
class="design-version-dropdown"
headertext="" headertext=""
issueiid="" issueiid=""
projectpath="" projectpath=""
size="small" size="small"
text="Showing Latest Version" text="Showing latest version"
variant="default" variant="default"
> >
<gl-new-dropdown-item-stub <gl-new-dropdown-item-stub
...@@ -16,56 +15,25 @@ exports[`Design management design version dropdown component renders design vers ...@@ -16,56 +15,25 @@ exports[`Design management design version dropdown component renders design vers
iconcolor="" iconcolor=""
iconname="" iconname=""
iconrightname="" iconrightname=""
ischecked="true"
ischeckitem="true"
secondarytext="" secondarytext=""
> >
<router-link-stub Version
class="d-flex js-version-link" 2
to="[object Object]" (latest)
>
<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>
</gl-new-dropdown-item-stub> </gl-new-dropdown-item-stub>
<gl-new-dropdown-item-stub <gl-new-dropdown-item-stub
avatarurl="" avatarurl=""
iconcolor="" iconcolor=""
iconname="" iconname=""
iconrightname="" iconrightname=""
ischeckitem="true"
secondarytext="" secondarytext=""
> >
<router-link-stub Version
class="d-flex js-version-link" 1
to="[object Object]"
>
<div
class="flex-grow-1 ml-2"
>
<div>
<strong>
Version 1
<!---->
</strong>
</div>
</div>
<!---->
</router-link-stub>
</gl-new-dropdown-item-stub> </gl-new-dropdown-item-stub>
</gl-new-dropdown-stub> </gl-new-dropdown-stub>
`; `;
...@@ -73,12 +41,11 @@ exports[`Design management design version dropdown component renders design vers ...@@ -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`] = ` exports[`Design management design version dropdown component renders design version list 1`] = `
<gl-new-dropdown-stub <gl-new-dropdown-stub
category="tertiary" category="tertiary"
class="design-version-dropdown"
headertext="" headertext=""
issueiid="" issueiid=""
projectpath="" projectpath=""
size="small" size="small"
text="Showing Latest Version" text="Showing latest version"
variant="default" variant="default"
> >
<gl-new-dropdown-item-stub <gl-new-dropdown-item-stub
...@@ -86,56 +53,25 @@ exports[`Design management design version dropdown component renders design vers ...@@ -86,56 +53,25 @@ exports[`Design management design version dropdown component renders design vers
iconcolor="" iconcolor=""
iconname="" iconname=""
iconrightname="" iconrightname=""
ischecked="true"
ischeckitem="true"
secondarytext="" secondarytext=""
> >
<router-link-stub Version
class="d-flex js-version-link" 2
to="[object Object]" (latest)
>
<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>
</gl-new-dropdown-item-stub> </gl-new-dropdown-item-stub>
<gl-new-dropdown-item-stub <gl-new-dropdown-item-stub
avatarurl="" avatarurl=""
iconcolor="" iconcolor=""
iconname="" iconname=""
iconrightname="" iconrightname=""
ischeckitem="true"
secondarytext="" secondarytext=""
> >
<router-link-stub Version
class="d-flex js-version-link" 1
to="[object Object]"
>
<div
class="flex-grow-1 ml-2"
>
<div>
<strong>
Version 1
<!---->
</strong>
</div>
</div>
<!---->
</router-link-stub>
</gl-new-dropdown-item-stub> </gl-new-dropdown-item-stub>
</gl-new-dropdown-stub> </gl-new-dropdown-stub>
`; `;
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue'; 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'; import mockAllVersions from './mock_data/all_versions';
const LATEST_VERSION_ID = 3; const LATEST_VERSION_ID = 3;
...@@ -30,7 +30,7 @@ describe('Design management design version dropdown component', () => { ...@@ -30,7 +30,7 @@ describe('Design management design version dropdown component', () => {
mocks: { mocks: {
$route, $route,
}, },
stubs: ['router-link'], stubs: { GlSprintf },
}); });
wrapper.setData({ wrapper.setData({
...@@ -42,7 +42,7 @@ describe('Design management design version dropdown component', () => { ...@@ -42,7 +42,7 @@ describe('Design management design version dropdown component', () => {
wrapper.destroy(); 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', () => { it('renders design version dropdown button', () => {
createComponent(); createComponent();
...@@ -75,7 +75,7 @@ describe('Design management design version dropdown component', () => { ...@@ -75,7 +75,7 @@ describe('Design management design version dropdown component', () => {
createComponent(); createComponent();
return wrapper.vm.$nextTick().then(() => { 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', () => { ...@@ -83,7 +83,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ maxVersions: 1 }); createComponent({ maxVersions: 1 });
return wrapper.vm.$nextTick().then(() => { 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', () => { ...@@ -91,7 +91,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) }); createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) });
return wrapper.vm.$nextTick().then(() => { 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', () => { ...@@ -99,7 +99,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) }); createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) });
return wrapper.vm.$nextTick().then(() => { 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');
}); });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment