Refactor package entity to use tooltip component

- source
- tests
- snapshots

app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue

 <script>
-import { GlIcon, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui';
+import { GlIcon, GlSprintf, GlBadge } from '@gitlab/ui';
 import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { __ } from '~/locale';
@@ -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 MetadataItem from '~/vue_shared/components/registry/metadata_item.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 {
   name: 'PackageTitle',
@@ -19,11 +19,8 @@ export default {
     PackageTags,
     MetadataItem,
     GlBadge,
+    TimeAgoTooltip,
   },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  mixins: [timeagoMixin],
   i18n: {
     packageInfo: __('v%{version} published %{timeAgo}'),
   },
@@ -77,17 +74,21 @@ export default {
   <title-area :title="packageEntity.name" :avatar="packageIcon" data-qa-selector="package_title">
     <template #sub-header>
       <gl-icon name="eye" class="gl-mr-3" />
-      <gl-sprintf :message="$options.i18n.packageInfo">
-        <template #version>
-          {{ packageEntity.version }}
-        </template>
+      <span data-testid="sub-header">
+        <gl-sprintf :message="$options.i18n.packageInfo">
+          <template #version>
+            {{ packageEntity.version }}
+          </template>
 
-        <template #timeAgo>
-          <span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)">
-            &nbsp;{{ timeFormatted(packageEntity.created_at) }}
-          </span>
-        </template>
-      </gl-sprintf>
+          <template #timeAgo>
+            <time-ago-tooltip
+              v-if="packageEntity.createdAt"
+              class="gl-ml-2"
+              :time="packageEntity.createdAt"
+            />
+          </template>
+        </gl-sprintf>
+      </span>
     </template>
 
     <template v-if="packageTypeDisplay" #metadata-type>

spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/package_title_spec.js.snap

@@ -35,9 +35,19 @@ exports[`PackageTitle renders with tags 1`] = `
               size="16"
             />
              
-            <gl-sprintf-stub
-              message="v%{version} published %{timeAgo}"
-            />
+            <span
+              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>
@@ -123,9 +133,19 @@ exports[`PackageTitle renders without tags 1`] = `
               size="16"
             />
              
-            <gl-sprintf-stub
-              message="v%{version} published %{timeAgo}"
-            />
+            <span
+              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>

spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js

+import { GlIcon, GlSprintf } from '@gitlab/ui';
 import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import PackageTags from '~/packages/shared/components/package_tags.vue';
@@ -9,6 +10,7 @@ import {
   PACKAGE_TYPE_NUGET,
 } from '~/packages_and_registries/package_registry/constants';
 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';
 
@@ -26,6 +28,7 @@ describe('PackageTitle', () => {
       propsData: { packageEntity },
       stubs: {
         TitleArea,
+        GlSprintf,
       },
     });
     return wrapper.vm.$nextTick();
@@ -38,6 +41,9 @@ describe('PackageTitle', () => {
   const findPackageRef = () => wrapper.findByTestId('package-ref');
   const findPackageTags = () => wrapper.findComponent(PackageTags);
   const findPackageBadges = () => wrapper.findAllByTestId('tag-badge');
+  const findSubHeaderIcon = () => wrapper.findComponent(GlIcon);
+  const findSubHeaderText = () => wrapper.findByTestId('sub-header');
+  const findSubHeaderTimeAgo = () => wrapper.findComponent(TimeAgoTooltip);
 
   afterEach(() => {
     wrapper.destroy();
@@ -59,6 +65,7 @@ describe('PackageTitle', () => {
     it('with tags on mobile', async () => {
       jest.spyOn(GlBreakpointInstance, 'isDesktop').mockReturnValue(false);
       await createComponent();
+
       await wrapper.vm.$nextTick();
 
       expect(findPackageBadges()).toHaveLength(packageTags().length);
@@ -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`
     packageType           | text
     ${PACKAGE_TYPE_CONAN} | ${'Conan'}