Skip to content

G
gitlab-ce
Commit 0328208f authored by Rajat Jain's avatar Rajat Jain
Browse files
Options

Provide more information in design version selector 

Add avatar and user name in design version dropdown

Changelog: changed
parent a87a3d2c
Show whitespace changes
Inline Side-by-side
Showing with 153 additions and 21 deletions
app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue
View file @ 0328208f
<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)"
>
<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
View file @ 0328208f
......@@ -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
View file @ 0328208f
......@@ -17,13 +17,31 @@ exports[`Design management design version dropdown component renders design vers
iconname=""
iconrightarialabel=""
iconrightname=""
ischeckcentered="true"
ischecked="true"
ischeckitem="true"
secondarytext=""
>
<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=""
>
<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=""
>
<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=""
>
<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
View file @ 0328208f
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
View file @ 0328208f
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
View file @ 0328208f
......@@ -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',
},
},
];
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7