feat(core/managed): add AbsoluteTimestamp component, use in ArtifactD…

…etail

app/scripts/modules/core/src/managed/AbsoluteTimestamp.tsx

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+import { DateTime } from 'luxon';
+
+import { SETTINGS } from '../config';
+import { CopyToClipboard } from '../utils';
+
+export interface IAbsoluteTimestampProps {
+  timestamp: DateTime;
+  clickToCopy?: boolean;
+}
+
+const TIMEZONE = SETTINGS.feature.displayTimestampsInUserLocalTime ? undefined : SETTINGS.defaultTimeZone;
+
+export const AbsoluteTimestamp = memo(
+  ({ timestamp: timestampInOriginalZone, clickToCopy }: IAbsoluteTimestampProps) => {
+    const timestamp = timestampInOriginalZone.setZone(TIMEZONE);
+
+    const fullTimestamp = timestamp.toFormat('yyyy-MM-dd HH:mm:ss ZZZZ');
+    const formattedTimestamp = timestamp.toFormat('MMM d, y HH:mm');
+    const timestampElement = <span>{formattedTimestamp}</span>;
+
+    if (clickToCopy) {
+      return (
+        <span>
+          {timestampElement}
+          <CopyToClipboard text={fullTimestamp} toolTip={`${fullTimestamp} (click to copy)`} />
+        </span>
+      );
+    } else {
+      return timestampElement;
+    }
+  },
+);

app/scripts/modules/core/src/managed/ArtifactDetail.tsx

@@ -4,7 +4,6 @@ import { useRouter } from '@uirouter/react';
 import { useTransition, animated, UseTransitionProps } from 'react-spring';
 import { DateTime } from 'luxon';
 
-import { CopyToClipboard, timestamp } from '../utils';
 import {
   IManagedArtifactSummary,
   IManagedArtifactVersion,
@@ -14,6 +13,7 @@ import {
 import { Application } from '../application';
 import { useEventListener, Markdown } from '../presentation';
 
+import { AbsoluteTimestamp } from './AbsoluteTimestamp';
 import { ArtifactDetailHeader } from './ArtifactDetailHeader';
 import { ManagedResourceObject } from './ManagedResourceObject';
 import { EnvironmentRow } from './EnvironmentRow';
@@ -227,7 +227,7 @@ export const ArtifactDetail = ({
 
   const isPinnedEverywhere = environments.every(({ pinned }) => pinned);
   const isBadEverywhere = environments.every(({ state }) => state === 'vetoed');
-  const createdAtMillis = createdAt && DateTime.fromISO(createdAt).toMillis();
+  const createdAtTimestamp = useMemo(() => createdAt && DateTime.fromISO(createdAt), [createdAt]);
 
   return (
     <>
@@ -265,15 +265,10 @@ export const ArtifactDetail = ({
             </Button>
           </div>
           <div className="detail-section-right flex-container-v flex-pull-right sp-margin-l-right">
-            {createdAtMillis && (
+            {createdAtTimestamp && (
               <VersionMetadataItem
                 label="Created"
-                value={
-                  <>
-                    {timestamp(createdAtMillis)}{' '}
-                    <CopyToClipboard text={timestamp(createdAtMillis)} toolTip="Copy timestamp" />
-                  </>
-                }
+                value={<AbsoluteTimestamp timestamp={createdAtTimestamp} clickToCopy={true} />}
               />
             )}
             {git?.author && <VersionMetadataItem label="Author" value={git.author} />}