diff --git a/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue b/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue index 750f16bbe57fb01b6020973886de52ca84146127..816d7ac7abfd44d2dd5b39c3eaf379cb5ee1ab3f 100644 --- a/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue +++ b/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue @@ -1,6 +1,8 @@ <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> diff --git a/app/graphql/queries/design_management/get_design_list.query.graphql b/app/graphql/queries/design_management/get_design_list.query.graphql index ade03d997971e4cdce0b34b8f46587f2134f513d..01503a9572f42bfd8e4c8c1f6b2afd30392b5627 100644 --- a/app/graphql/queries/design_management/get_design_list.query.graphql +++ b/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 + } } } } diff --git a/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap index 63afc3f000d2a27508d9e8d6cae03e0dcb9bb82a..637f22457c42463a88fcb2a4efc9b18bde3fff40 100644 --- a/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap +++ b/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> `; diff --git a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js index 1b01a3636881757820612d3f51c13369e62a8c82..ebfe27eaa71ab82cf8c219a9b8a5a36099a15627 100644 --- a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js +++ b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js @@ -1,9 +1,10 @@ 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); + }); }); }); diff --git a/spec/frontend/design_management/components/upload/mock_data/all_versions.js b/spec/frontend/design_management/components/upload/mock_data/all_versions.js index 237e1654f9b3ef2a35a36ebd3c291a9d092f712b..24c59ce1a7583b6a8b3db46c9cfc1356e0ecef79 100644 --- a/spec/frontend/design_management/components/upload/mock_data/all_versions.js +++ b/spec/frontend/design_management/components/upload/mock_data/all_versions.js @@ -1,10 +1,20 @@ 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', + }, }, ]; diff --git a/spec/frontend/design_management/mock_data/all_versions.js b/spec/frontend/design_management/mock_data/all_versions.js index 2b216574e2726b59a3e874e6917d74219717f4ff..f4026da7dfd11c53f679abe0d6772b4de0eb9264 100644 --- a/spec/frontend/design_management/mock_data/all_versions.js +++ b/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', + }, }, ];