Geo 2.0 Regression - Timezone Issues

app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue

@@ -15,7 +15,7 @@ export default {
   mixins: [timeagoMixin],
   props: {
     time: {
-      type: String,
+      type: [String, Number],
       required: true,
     },
     tooltipPlacement: {

ee/app/assets/javascripts/geo_nodes_beta/components/details/secondary_node/geo_node_secondary_other_info.vue

@@ -51,12 +51,12 @@ export default {
       return this.$options.i18n.unknown;
     },
     lastEventTimestamp() {
-      const time = this.node.lastEventTimestamp * 1000;
-      return new Date(time).toString();
+      // Converting timestamp to ms
+      return this.node.lastEventTimestamp * 1000;
     },
     lastCursorEventTimestamp() {
-      const time = this.node.cursorLastEventTimestamp * 1000;
-      return new Date(time).toString();
+      // Converting timestamp to ms
+      return this.node.cursorLastEventTimestamp * 1000;
     },
   },
 };

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

@@ -39,7 +39,7 @@ export default {
     },
     statusCheckTimestamp() {
       return this.node.lastSuccessfulStatusCheckTimestamp
-        ? this.node.lastSuccessfulStatusCheckTimestamp * 1000
+        ? this.node.lastSuccessfulStatusCheckTimestamp * 1000 // Converting timestamp to ms
         : null;
     },
   },

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

@@ -47,10 +47,6 @@ export default {
         link: HELP_NODE_HEALTH_URL,
       };
     },
-    timeAgo() {
-      const time = this.statusCheckTimestamp;
-      return new Date(time).toString();
-    },
   },
 };
 </script>
@@ -60,7 +56,7 @@ export default {
     <span class="gl-text-gray-500" data-testid="last-updated-main-text">
       <gl-sprintf :message="$options.i18n.timeAgoMainText">
         <template #timeAgo>
-          <time-ago :time="timeAgo" />
+          <time-ago :time="statusCheckTimestamp" />
         </template>
       </gl-sprintf>
     </span>
@@ -74,7 +70,7 @@ export default {
       <p class="gl-font-base">
         <gl-sprintf :message="$options.i18n.timeAgoPopoverText">
           <template #timeAgo>
-            <time-ago :time="timeAgo" />
+            <time-ago :time="statusCheckTimestamp" />
           </template>
         </gl-sprintf>
       </p>

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

@@ -51,9 +51,7 @@ describe('GeoNodeLastUpdated', () => {
 
       it('renders main text correctly', () => {
         expect(findMainText().exists()).toBe(true);
-        expect(findMainText().find(TimeAgo).props('time')).toBe(
-          new Date(staleStatusTime).toString(),
-        );
+        expect(findMainText().find(TimeAgo).props('time')).toBe(staleStatusTime);
       });
 
       it('renders the question icon correctly', () => {
@@ -67,9 +65,7 @@ describe('GeoNodeLastUpdated', () => {
 
       it('renders the popover text correctly', () => {
         expect(findPopoverText().exists()).toBe(true);
-        expect(findPopoverText().find(TimeAgo).props('time')).toBe(
-          new Date(staleStatusTime).toString(),
-        );
+        expect(findPopoverText().find(TimeAgo).props('time')).toBe(staleStatusTime);
       });
 
       it('renders the popover link always', () => {

spec/frontend/vue_shared/components/time_ago_tooltip_spec.js

 import { shallowMount } from '@vue/test-utils';
 
+import timezoneMock from 'timezone-mock';
 import { formatDate, getTimeago } from '~/lib/utils/datetime_utility';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 describe('Time ago with tooltip component', () => {
   let vm;
 
-  const buildVm = (propsData = {}, scopedSlots = {}) => {
+  const timestamp = '2017-05-08T14:57:39.781Z';
+  const timeAgoTimestamp = getTimeago().format(timestamp);
+
+  const defaultProps = {
+    time: timestamp,
+  };
+
+  const buildVm = (props = {}, scopedSlots = {}) => {
     vm = shallowMount(TimeAgoTooltip, {
-      propsData,
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
       scopedSlots,
     });
   };
-  const timestamp = '2017-05-08T14:57:39.781Z';
-  const timeAgoTimestamp = getTimeago().format(timestamp);
 
   afterEach(() => {
     vm.destroy();
+    timezoneMock.unregister();
   });
 
   it('should render timeago with a bootstrap tooltip', () => {
-    buildVm({
-      time: timestamp,
-    });
+    buildVm();
 
     expect(vm.attributes('title')).toEqual(formatDate(timestamp));
     expect(vm.text()).toEqual(timeAgoTimestamp);
@@ -30,7 +38,6 @@ describe('Time ago with tooltip component', () => {
 
   it('should render provided html class', () => {
     buildVm({
-      time: timestamp,
       cssClass: 'foo',
     });
 
@@ -38,14 +45,58 @@ describe('Time ago with tooltip component', () => {
   });
 
   it('should render with the datetime attribute', () => {
-    buildVm({ time: timestamp });
+    buildVm();
 
     expect(vm.attributes('datetime')).toEqual(timestamp);
   });
 
   it('should render provided scope content with the correct timeAgo string', () => {
-    buildVm({ time: timestamp }, { default: `<span>The time is {{ props.timeAgo }}</span>` });
+    buildVm(null, { default: `<span>The time is {{ props.timeAgo }}</span>` });
 
     expect(vm.text()).toEqual(`The time is ${timeAgoTimestamp}`);
   });
+
+  describe('number based timestamps', () => {
+    // Store a date object before we mock the TZ
+    const date = new Date();
+
+    describe('with default TZ', () => {
+      beforeEach(() => {
+        buildVm({ time: date.getTime() });
+      });
+
+      it('handled correctly', () => {
+        expect(vm.text()).toEqual(getTimeago().format(date.getTime()));
+      });
+    });
+
+    describe.each`
+      timezone           | offset
+      ${'US/Pacific'}    | ${420}
+      ${'US/Eastern'}    | ${240}
+      ${'Brazil/East'}   | ${180}
+      ${'UTC'}           | ${-0}
+      ${'Europe/London'} | ${-60}
+    `('with different client vs server TZ', ({ timezone, offset }) => {
+      let tzDate;
+
+      beforeEach(() => {
+        timezoneMock.register(timezone);
+        // Date object with mocked TZ
+        tzDate = new Date();
+        buildVm({ time: date.getTime() });
+      });
+
+      it('the date object should have correct timezones', () => {
+        expect(tzDate.getTimezoneOffset()).toBe(offset);
+      });
+
+      it('timeago should handled the date correctly', () => {
+        // getTime() should always handle the TZ, which allows for us to validate the date objects represent
+        // the same date and time regardless of the TZ.
+        expect(vm.text()).toEqual(getTimeago().format(date.getTime()));
+        expect(vm.text()).toEqual(getTimeago().format(tzDate.getTime()));
+      });
+    });
+  });
 });