Unverified Commit a53d01e6 authored by Alireza Heidari's avatar Alireza Heidari
Browse files

display time in the user's local time for pretty mode

parent 1d4460a0

client/src/components/DatasetInformation/DatasetInformation.test.js

+2 −3
Original line number Diff line number Diff line
@@ -5,8 +5,7 @@ import { getLocalVue } from "tests/jest/helpers"; 
import DatasetInformation from "./DatasetInformation";

import datasetResponse from "./testData/datasetResponse";

import flushPromises from "flush-promises";

import { parseISO } from "date-fns";

import { formatInTimeZone } from "date-fns-tz";

import { format, parseISO } from "date-fns";



const HDA_ID = "FOO_HDA_ID";
@@ -67,7 +66,7 @@ describe("DatasetInformation/DatasetInformation", () => { 
    it("Date should be formatted", async () => {

        const date = datasetInfoTable.find(".utc-time").text();

        const parsedDate = parseISO(`${datasetResponse.create_time}Z`);

        const formattedDate = `${formatInTimeZone(parsedDate, "Etc/Zulu", "eeee MMM do H:mm:ss yyyy")} UTC`;

        const formattedDate = `${format(parsedDate, "eeee MMM do H:mm:ss yyyy zz")}`;

        expect(date).toBe(formattedDate);

    });

client/src/components/UtcDate.vue

+3 −5
Original line number Diff line number Diff line 
<script setup lang="ts">

import { formatDistanceToNow, parseISO } from "date-fns";

import { formatInTimeZone } from "date-fns-tz";

import { computed } from "vue";

import { format, formatDistanceToNow, parseISO } from "date-fns";



interface UtcDateProps {

    date: string;
@@ -12,13 +11,12 @@ const props = withDefaults(defineProps<UtcDateProps>(), { 
    mode: "date",

});



// Component assumes ISO format date, but note that in Galaxy this won't have

// TZinfo -- it will always be Zulu

const parsedDate = computed(() => parseISO(`${props.date}Z`));

const elapsedTime = computed(() => formatDistanceToNow(parsedDate.value, { addSuffix: true }));

const fullISO = computed(() => parsedDate.value.toISOString());

const pretty = computed(() => `${formatInTimeZone(parsedDate.value, "Etc/Zulu", "eeee MMM do H:mm:ss yyyy")} UTC`);

const pretty = computed(() => `${format(parsedDate.value, "eeee MMM do H:mm:ss yyyy zz")}`);

</script>



<template>

    <span v-if="mode == 'date'" class="utc-time" :title="elapsedTime">

        {{ fullISO }}