Merge branch '301029-move-mixin-logic' into 'master'

Remove timeago mixin logic

See merge request gitlab-org/gitlab!83325

app/assets/javascripts/jobs/components/table/cells/duration_cell.vue

 <script>
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { formatDate, getTimeago, durationTimeFormatted } from '~/lib/utils/datetime_utility';
 
 export default {
   iconSize: 12,
@@ -10,7 +10,6 @@ export default {
   components: {
     GlIcon,
   },
-  mixins: [timeagoMixin],
   props: {
     job: {
       type: Object,
@@ -24,6 +23,15 @@ export default {
     duration() {
       return this.job?.duration;
     },
+    timeFormatted() {
+      return getTimeago().format(this.finishedTime);
+    },
+    tooltipTitle() {
+      return formatDate(this.finishedTime);
+    },
+    durationFormatted() {
+      return durationTimeFormatted(this.duration);
+    },
   },
 };
 </script>
@@ -32,18 +40,18 @@ export default {
   <div>
     <div v-if="duration" data-testid="job-duration">
       <gl-icon name="timer" :size="$options.iconSize" data-testid="duration-icon" />
-      {{ durationTimeFormatted(duration) }}
+      {{ durationFormatted }}
     </div>
     <div v-if="finishedTime" data-testid="job-finished-time">
       <gl-icon name="calendar" :size="$options.iconSize" data-testid="finished-time-icon" />
       <time
         v-gl-tooltip
-        :title="tooltipTitle(finishedTime)"
+        :title="tooltipTitle"
         :datetime="finishedTime"
         data-placement="top"
         data-container="body"
       >
-        {{ timeFormatted(finishedTime) }}
+        {{ timeFormatted }}
       </time>
     </div>
   </div>

app/assets/javascripts/lib/utils/datetime/date_format_utility.js

@@ -386,3 +386,23 @@ export const formatTimeAsSummary = ({ seconds, hours, days, minutes, weeks, mont
   }
   return '-';
 };
+
+export const durationTimeFormatted = (duration) => {
+  const date = new Date(duration * 1000);
+
+  let hh = date.getUTCHours();
+  let mm = date.getUTCMinutes();
+  let ss = date.getSeconds();
+
+  if (hh < 10) {
+    hh = `0${hh}`;
+  }
+  if (mm < 10) {
+    mm = `0${mm}`;
+  }
+  if (ss < 10) {
+    ss = `0${ss}`;
+  }
+
+  return `${hh}:${mm}:${ss}`;
+};

app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue

 <script>
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { formatDate, getTimeago, durationTimeFormatted } from '~/lib/utils/datetime_utility';
 
 export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
   components: { GlIcon },
-  mixins: [timeagoMixin],
   props: {
     pipeline: {
       type: Object,
@@ -28,24 +27,7 @@ export default {
       return this.pipeline.flags.stuck;
     },
     durationFormatted() {
-      const date = new Date(this.duration * 1000);
-
-      let hh = date.getUTCHours();
-      let mm = date.getUTCMinutes();
-      let ss = date.getSeconds();
-
-      // left pad
-      if (hh < 10) {
-        hh = `0${hh}`;
-      }
-      if (mm < 10) {
-        mm = `0${mm}`;
-      }
-      if (ss < 10) {
-        ss = `0${ss}`;
-      }
-
-      return `${hh}:${mm}:${ss}`;
+      return durationTimeFormatted(this.duration);
     },
     showInProgress() {
       return !this.duration && !this.finishedTime && !this.skipped;
@@ -53,6 +35,12 @@ export default {
     showSkipped() {
       return !this.duration && !this.finishedTime && this.skipped;
     },
+    timeFormatted() {
+      return getTimeago().format(this.finishedTime);
+    },
+    tooltipTitle() {
+      return formatDate(this.finishedTime);
+    },
   },
 };
 </script>
@@ -85,12 +73,12 @@ export default {
 
       <time
         v-gl-tooltip
-        :title="tooltipTitle(finishedTime)"
+        :title="tooltipTitle"
         :datetime="finishedTime"
         data-placement="top"
         data-container="body"
       >
-        {{ timeFormatted(finishedTime) }}
+        {{ timeFormatted }}
       </time>
     </p>
   </div>

app/assets/javascripts/vue_shared/mixins/timeago.js

@@ -14,25 +14,5 @@ export default {
     tooltipTitle(time) {
       return formatDate(time);
     },
-
-    durationTimeFormatted(duration) {
-      const date = new Date(duration * 1000);
-
-      let hh = date.getUTCHours();
-      let mm = date.getUTCMinutes();
-      let ss = date.getSeconds();
-
-      if (hh < 10) {
-        hh = `0${hh}`;
-      }
-      if (mm < 10) {
-        mm = `0${mm}`;
-      }
-      if (ss < 10) {
-        ss = `0${ss}`;
-      }
-
-      return `${hh}:${mm}:${ss}`;
-    },
   },
 };

spec/frontend/lib/utils/datetime/date_format_utility_spec.js

@@ -133,3 +133,15 @@ describe('formatTimeAsSummary', () => {
     expect(utils.formatTimeAsSummary({ [unit]: value })).toBe(result);
   });
 });
+
+describe('durationTimeFormatted', () => {
+  it.each`
+    duration | expectedOutput
+    ${87}    | ${'00:01:27'}
+    ${141}   | ${'00:02:21'}
+    ${12}    | ${'00:00:12'}
+    ${60}    | ${'00:01:00'}
+  `('returns $expectedOutput when provided $duration', ({ duration, expectedOutput }) => {
+    expect(utils.durationTimeFormatted(duration)).toBe(expectedOutput);
+  });
+});