Merge branch '325182_06_time_ago_cleanup' into 'master'

Geo Node Status 2.0 - TimeAgo Cleanup

See merge request gitlab-org/gitlab!60434

ee/app/assets/javascripts/geo_nodes_beta/components/header/geo_node_last_updated.vue

 <script>
-import { GlPopover, GlLink, GlIcon } from '@gitlab/ui';
+import { GlPopover, GlLink, GlIcon, GlSprintf } from '@gitlab/ui';
 import {
   HELP_NODE_HEALTH_URL,
   GEO_TROUBLESHOOTING_URL,
   STATUS_DELAY_THRESHOLD_MS,
 } from 'ee/geo_nodes_beta/constants';
-import { sprintf, s__ } from '~/locale';
-import timeAgoMixin from '~/vue_shared/mixins/timeago';
+import { s__ } from '~/locale';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   name: 'GeoNodeLastUpdated',
@@ -20,8 +20,9 @@ export default {
     GlPopover,
     GlLink,
     GlIcon,
+    GlSprintf,
+    TimeAgo,
   },
-  mixins: [timeAgoMixin],
   props: {
     statusCheckTimestamp: {
       type: Number,
@@ -46,13 +47,9 @@ export default {
         link: HELP_NODE_HEALTH_URL,
       };
     },
-    syncTimeAgo() {
-      const timeAgo = this.timeFormatted(this.statusCheckTimestamp);
-
-      return {
-        mainText: sprintf(this.$options.i18n.timeAgoMainText, { timeAgo }),
-        popoverText: sprintf(this.$options.i18n.timeAgoPopoverText, { timeAgo }),
-      };
+    timeAgo() {
+      const time = this.statusCheckTimestamp;
+      return new Date(time).toString();
     },
   },
 };
@@ -60,12 +57,27 @@ export default {
 
 <template>
   <div class="gl-display-flex gl-align-items-center">
-    <span class="gl-text-gray-500" data-testid="last-updated-main-text">{{
-      syncTimeAgo.mainText
-    }}</span>
-    <gl-icon ref="lastUpdated" name="question" class="gl-text-blue-500 gl-cursor-pointer gl-ml-2" />
+    <span class="gl-text-gray-500" data-testid="last-updated-main-text">
+      <gl-sprintf :message="$options.i18n.timeAgoMainText">
+        <template #timeAgo>
+          <time-ago :time="timeAgo" />
+        </template>
+      </gl-sprintf>
+    </span>
+    <gl-icon
+      ref="lastUpdated"
+      tabindex="0"
+      name="question"
+      class="gl-text-blue-500 gl-cursor-pointer gl-ml-2"
+    />
     <gl-popover :target="() => $refs.lastUpdated.$el" placement="top">
-      <p class="gl-font-base">{{ syncTimeAgo.popoverText }}</p>
+      <p class="gl-font-base">
+        <gl-sprintf :message="$options.i18n.timeAgoPopoverText">
+          <template #timeAgo>
+            <time-ago :time="timeAgo" />
+          </template>
+        </gl-sprintf>
+      </p>
       <gl-link :href="syncHelp.link" target="_blank">{{ syncHelp.text }}</gl-link>
     </gl-popover>
   </div>

ee/spec/frontend/geo_nodes_beta/components/header/geo_node_last_updated_spec.js

-import { GlPopover, GlLink, GlIcon } from '@gitlab/ui';
+import { GlPopover, GlLink, GlIcon, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import GeoNodeLastUpdated from 'ee/geo_nodes_beta/components/header/geo_node_last_updated.vue';
 import {
@@ -8,6 +8,7 @@ import {
 } from 'ee/geo_nodes_beta/constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { differenceInMilliseconds } from '~/lib/utils/datetime_utility';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 
 describe('GeoNodeLastUpdated', () => {
   let wrapper;
@@ -27,6 +28,7 @@ describe('GeoNodeLastUpdated', () => {
           ...defaultProps,
           ...props,
         },
+        stubs: { GlSprintf },
       }),
     );
   };
@@ -49,7 +51,9 @@ describe('GeoNodeLastUpdated', () => {
 
       it('renders main text correctly', () => {
         expect(findMainText().exists()).toBe(true);
-        expect(findMainText().text()).toBe('Updated 10 minutes ago');
+        expect(findMainText().find(TimeAgo).props('time')).toBe(
+          new Date(staleStatusTime).toString(),
+        );
       });
 
       it('renders the question icon correctly', () => {
@@ -63,7 +67,9 @@ describe('GeoNodeLastUpdated', () => {
 
       it('renders the popover text correctly', () => {
         expect(findPopoverText().exists()).toBe(true);
-        expect(findPopoverText().text()).toBe("Node's status was updated 10 minutes ago.");
+        expect(findPopoverText().find(TimeAgo).props('time')).toBe(
+          new Date(staleStatusTime).toString(),
+        );
       });
 
       it('renders the popover link always', () => {