Commit 1716bf84 authored by Paul Slaughter's avatar Paul Slaughter

Merge branch...

Merge branch '336388-convert-usage-of-timeago-mixin-to-time-ago-tooltip-in-package-registry' into 'master'

Use time-ago-tooltip in package details title

See merge request gitlab-org/gitlab!67494
parents 574ce362 4110463d
<script> <script>
import { GlIcon, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui'; import { GlIcon, GlSprintf, GlBadge } from '@gitlab/ui';
import { GlBreakpointInstance } from '@gitlab/ui/dist/utils'; import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
import { numberToHumanSize } from '~/lib/utils/number_utils'; import { numberToHumanSize } from '~/lib/utils/number_utils';
import { __ } from '~/locale'; import { __ } from '~/locale';
...@@ -8,7 +8,7 @@ import { PACKAGE_TYPE_NUGET } from '~/packages_and_registries/package_registry/c ...@@ -8,7 +8,7 @@ import { PACKAGE_TYPE_NUGET } from '~/packages_and_registries/package_registry/c
import { getPackageTypeLabel } from '~/packages_and_registries/package_registry/utils'; import { getPackageTypeLabel } from '~/packages_and_registries/package_registry/utils';
import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue'; import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
import TitleArea from '~/vue_shared/components/registry/title_area.vue'; import TitleArea from '~/vue_shared/components/registry/title_area.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
export default { export default {
name: 'PackageTitle', name: 'PackageTitle',
...@@ -19,11 +19,8 @@ export default { ...@@ -19,11 +19,8 @@ export default {
PackageTags, PackageTags,
MetadataItem, MetadataItem,
GlBadge, GlBadge,
TimeAgoTooltip,
}, },
directives: {
GlTooltip: GlTooltipDirective,
},
mixins: [timeagoMixin],
i18n: { i18n: {
packageInfo: __('v%{version} published %{timeAgo}'), packageInfo: __('v%{version} published %{timeAgo}'),
}, },
...@@ -77,17 +74,21 @@ export default { ...@@ -77,17 +74,21 @@ export default {
<title-area :title="packageEntity.name" :avatar="packageIcon" data-qa-selector="package_title"> <title-area :title="packageEntity.name" :avatar="packageIcon" data-qa-selector="package_title">
<template #sub-header> <template #sub-header>
<gl-icon name="eye" class="gl-mr-3" /> <gl-icon name="eye" class="gl-mr-3" />
<gl-sprintf :message="$options.i18n.packageInfo"> <span data-testid="sub-header">
<template #version> <gl-sprintf :message="$options.i18n.packageInfo">
{{ packageEntity.version }} <template #version>
</template> {{ packageEntity.version }}
</template>
<template #timeAgo> <template #timeAgo>
<span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)"> <time-ago-tooltip
&nbsp;{{ timeFormatted(packageEntity.created_at) }} v-if="packageEntity.createdAt"
</span> class="gl-ml-2"
</template> :time="packageEntity.createdAt"
</gl-sprintf> />
</template>
</gl-sprintf>
</span>
</template> </template>
<template v-if="packageTypeDisplay" #metadata-type> <template v-if="packageTypeDisplay" #metadata-type>
......
...@@ -35,9 +35,19 @@ exports[`PackageTitle renders with tags 1`] = ` ...@@ -35,9 +35,19 @@ exports[`PackageTitle renders with tags 1`] = `
size="16" size="16"
/> />
<gl-sprintf-stub <span
message="v%{version} published %{timeAgo}" data-testid="sub-header"
/> >
v
1.0.0
published
<time-ago-tooltip-stub
class="gl-ml-2"
cssclass=""
time="2020-08-17T14:23:32Z"
tooltipplacement="top"
/>
</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -123,9 +133,19 @@ exports[`PackageTitle renders without tags 1`] = ` ...@@ -123,9 +133,19 @@ exports[`PackageTitle renders without tags 1`] = `
size="16" size="16"
/> />
<gl-sprintf-stub <span
message="v%{version} published %{timeAgo}" data-testid="sub-header"
/> >
v
1.0.0
published
<time-ago-tooltip-stub
class="gl-ml-2"
cssclass=""
time="2020-08-17T14:23:32Z"
tooltipplacement="top"
/>
</span>
</div> </div>
</div> </div>
</div> </div>
......
import { GlIcon, GlSprintf } from '@gitlab/ui';
import { GlBreakpointInstance } from '@gitlab/ui/dist/utils'; import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import PackageTags from '~/packages/shared/components/package_tags.vue'; import PackageTags from '~/packages/shared/components/package_tags.vue';
...@@ -9,6 +10,7 @@ import { ...@@ -9,6 +10,7 @@ import {
PACKAGE_TYPE_NUGET, PACKAGE_TYPE_NUGET,
} from '~/packages_and_registries/package_registry/constants'; } from '~/packages_and_registries/package_registry/constants';
import TitleArea from '~/vue_shared/components/registry/title_area.vue'; import TitleArea from '~/vue_shared/components/registry/title_area.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import { packageData, packageFiles, packageTags, packagePipelines } from '../../mock_data'; import { packageData, packageFiles, packageTags, packagePipelines } from '../../mock_data';
...@@ -26,6 +28,7 @@ describe('PackageTitle', () => { ...@@ -26,6 +28,7 @@ describe('PackageTitle', () => {
propsData: { packageEntity }, propsData: { packageEntity },
stubs: { stubs: {
TitleArea, TitleArea,
GlSprintf,
}, },
}); });
return wrapper.vm.$nextTick(); return wrapper.vm.$nextTick();
...@@ -38,6 +41,9 @@ describe('PackageTitle', () => { ...@@ -38,6 +41,9 @@ describe('PackageTitle', () => {
const findPackageRef = () => wrapper.findByTestId('package-ref'); const findPackageRef = () => wrapper.findByTestId('package-ref');
const findPackageTags = () => wrapper.findComponent(PackageTags); const findPackageTags = () => wrapper.findComponent(PackageTags);
const findPackageBadges = () => wrapper.findAllByTestId('tag-badge'); const findPackageBadges = () => wrapper.findAllByTestId('tag-badge');
const findSubHeaderIcon = () => wrapper.findComponent(GlIcon);
const findSubHeaderText = () => wrapper.findByTestId('sub-header');
const findSubHeaderTimeAgo = () => wrapper.findComponent(TimeAgoTooltip);
afterEach(() => { afterEach(() => {
wrapper.destroy(); wrapper.destroy();
...@@ -59,6 +65,7 @@ describe('PackageTitle', () => { ...@@ -59,6 +65,7 @@ describe('PackageTitle', () => {
it('with tags on mobile', async () => { it('with tags on mobile', async () => {
jest.spyOn(GlBreakpointInstance, 'isDesktop').mockReturnValue(false); jest.spyOn(GlBreakpointInstance, 'isDesktop').mockReturnValue(false);
await createComponent(); await createComponent();
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
expect(findPackageBadges()).toHaveLength(packageTags().length); expect(findPackageBadges()).toHaveLength(packageTags().length);
...@@ -93,6 +100,25 @@ describe('PackageTitle', () => { ...@@ -93,6 +100,25 @@ describe('PackageTitle', () => {
}); });
}); });
describe('sub-header', () => {
it('has the eye icon', async () => {
await createComponent();
expect(findSubHeaderIcon().props('name')).toBe('eye');
});
it('has a text showing version', async () => {
await createComponent();
expect(findSubHeaderText().text()).toMatchInterpolatedText('v 1.0.0 published');
});
it('has a time ago tooltip component', async () => {
await createComponent();
expect(findSubHeaderTimeAgo().props('time')).toBe(packageWithTags.createdAt);
});
});
describe.each` describe.each`
packageType | text packageType | text
${PACKAGE_TYPE_CONAN} | ${'Conan'} ${PACKAGE_TYPE_CONAN} | ${'Conan'}
......
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