From 3fbb45c9e4c2f08d454b7fbd1a2d28149295c497 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 16 Apr 2024 11:55:51 -0700
Subject: [PATCH 1/8] convert date cell to single line

---
 app/table/columns/common.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/table/columns/common.tsx b/app/table/columns/common.tsx
index 727268463b..c8212c6d62 100644
--- a/app/table/columns/common.tsx
+++ b/app/table/columns/common.tsx
@@ -12,7 +12,6 @@ import { filesize } from 'filesize'
 import { Truncate } from '~/ui/lib/Truncate'
 
 import { EmptyCell } from '../cells/EmptyCell'
-import { TwoLineCell } from '../cells/TwoLineCell'
 
 // the full type of the info arg is CellContext<Row, Item> from RT, but in these
 // cells we only care about the return value of getValue
@@ -20,7 +19,12 @@ type Info<T> = { getValue: () => T }
 
 function dateCell(info: Info<Date>) {
   const date = info.getValue()
-  return <TwoLineCell value={[format(date, 'MMM d, yyyy'), format(date, 'p')]} />
+  return (
+    <span className="flex flex-wrap gap-x-2">
+      <span>{format(date, 'MMM d, yyyy')}</span>
+      <span className="text-quaternary">{format(date, 'p')}</span>
+    </span>
+  )
 }
 
 function sizeCell(info: Info<number>) {

From 0a826758a9e4f69c077695d8194df48a53568ad2 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 16 Apr 2024 12:41:26 -0700
Subject: [PATCH 2/8] use html5 time element as wrapper

---
 app/table/columns/common.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/table/columns/common.tsx b/app/table/columns/common.tsx
index c8212c6d62..4001670d9c 100644
--- a/app/table/columns/common.tsx
+++ b/app/table/columns/common.tsx
@@ -6,6 +6,7 @@
  * Copyright Oxide Computer Company
  */
 
+import { formatISO } from 'date-fns'
 import { format } from 'date-fns/format'
 import { filesize } from 'filesize'
 
@@ -20,10 +21,10 @@ type Info<T> = { getValue: () => T }
 function dateCell(info: Info<Date>) {
   const date = info.getValue()
   return (
-    <span className="flex flex-wrap gap-x-2">
-      <span>{format(date, 'MMM d, yyyy')}</span>
+    <time dateTime={formatISO(date)} className="flex flex-wrap gap-x-2">
+      <span>{format(date, 'PP')}</span>
       <span className="text-quaternary">{format(date, 'p')}</span>
-    </span>
+    </time>
   )
 }
 

From 99f578fae5430a9ad372ec8e504b53502aaaceea Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 16 Apr 2024 13:02:50 -0700
Subject: [PATCH 3/8] use native toISOString

---
 app/table/columns/common.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/table/columns/common.tsx b/app/table/columns/common.tsx
index 4001670d9c..4d16943986 100644
--- a/app/table/columns/common.tsx
+++ b/app/table/columns/common.tsx
@@ -6,7 +6,6 @@
  * Copyright Oxide Computer Company
  */
 
-import { formatISO } from 'date-fns'
 import { format } from 'date-fns/format'
 import { filesize } from 'filesize'
 
@@ -21,7 +20,7 @@ type Info<T> = { getValue: () => T }
 function dateCell(info: Info<Date>) {
   const date = info.getValue()
   return (
-    <time dateTime={formatISO(date)} className="flex flex-wrap gap-x-2">
+    <time dateTime={date.toISOString()} className="flex flex-wrap gap-x-2">
       <span>{format(date, 'PP')}</span>
       <span className="text-quaternary">{format(date, 'p')}</span>
     </time>

From b53bbcf521d11a9bf9e297b321617750289c5fb8 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 16 Apr 2024 16:31:48 -0700
Subject: [PATCH 4/8] Add utils / helper components and migrate timestamps

---
 app/components/TimeAgo.tsx                    |  5 ++---
 app/forms/disk-create.tsx                     |  4 ++--
 app/forms/idp/edit.tsx                        |  6 +++---
 app/forms/image-edit.tsx                      |  6 +++---
 .../instances/instance/InstancePage.tsx       |  9 ++-------
 app/pages/project/vpcs/VpcPage/VpcPage.tsx    |  6 +++---
 app/pages/system/silos/SiloPage.tsx           |  6 +++---
 app/table/columns/common.tsx                  | 10 ++--------
 app/ui/lib/DateTime.tsx                       | 16 +++++++++++++++
 app/util/date.spec.ts                         | 18 ++++++++++++++++-
 app/util/date.ts                              | 20 +++++++++++++------
 11 files changed, 67 insertions(+), 39 deletions(-)
 create mode 100644 app/ui/lib/DateTime.tsx

diff --git a/app/components/TimeAgo.tsx b/app/components/TimeAgo.tsx
index 783c9d03d6..30ab827a84 100644
--- a/app/components/TimeAgo.tsx
+++ b/app/components/TimeAgo.tsx
@@ -6,10 +6,9 @@
  * Copyright Oxide Computer Company
  */
 import type { Placement } from '@floating-ui/react'
-import { format } from 'date-fns'
 
 import { Tooltip } from '~/ui/lib/Tooltip'
-import { timeAgoAbbr } from '~/util/date'
+import { timeAgoAbbr, toLocaleDateString } from '~/util/date'
 
 export const TimeAgo = ({
   datetime,
@@ -23,7 +22,7 @@ export const TimeAgo = ({
   const content = (
     <div className="flex flex-col">
       <span className="text-tertiary">{tooltipText}</span>
-      <span>{format(datetime, 'MMM d, yyyy p')}</span>
+      <span>{toLocaleDateString(datetime)}</span>
     </div>
   )
   return (
diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx
index d20c0f928d..ea0ae12d80 100644
--- a/app/forms/disk-create.tsx
+++ b/app/forms/disk-create.tsx
@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-import { format } from 'date-fns'
 import { filesize } from 'filesize'
 import { useMemo } from 'react'
 import { useController, type Control } from 'react-hook-form'
@@ -35,6 +34,7 @@ import { FormDivider } from '~/ui/lib/Divider'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
 import { Radio } from '~/ui/lib/Radio'
 import { RadioGroup } from '~/ui/lib/RadioGroup'
+import { toLocaleDateString } from '~/util/date'
 import { bytesToGiB, GiB } from '~/util/units'
 
 const blankDiskSource: DiskSource = {
@@ -258,7 +258,7 @@ const SnapshotSelectField = ({ control }: { control: Control<DiskCreate> }) => {
             <>
               <div>{i.name}</div>
               <div className="text-tertiary selected:text-accent-secondary">
-                Created on {format(i.timeCreated, 'MMM d, yyyy')}
+                Created on {toLocaleDateString(i.timeCreated)}
                 <DiskNameFromId disk={i.diskId} />{' '}
                 <span className="mx-1 text-quinary selected:text-accent-disabled">/</span>{' '}
                 {formattedSize.value} {formattedSize.unit}
diff --git a/app/forms/idp/edit.tsx b/app/forms/idp/edit.tsx
index 0ab889d0f0..dea56cd58f 100644
--- a/app/forms/idp/edit.tsx
+++ b/app/forms/idp/edit.tsx
@@ -15,10 +15,10 @@ import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { getIdpSelector, useForm, useIdpSelector } from '~/hooks'
+import { DateTime } from '~/ui/lib/DateTime'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ResourceLabel } from '~/ui/lib/SideModal'
 import { Truncate } from '~/ui/lib/Truncate'
-import { formatDateTime } from '~/util/date'
 import { pb } from '~/util/path-builder'
 
 EditIdpSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
@@ -62,10 +62,10 @@ export function EditIdpSideModalForm() {
           <Truncate text={idp.id} maxLength={32} hasCopyButton />
         </PropertiesTable.Row>
         <PropertiesTable.Row label="Created">
-          {formatDateTime(idp.timeCreated)}
+          <DateTime date={idp.timeCreated} />
         </PropertiesTable.Row>
         <PropertiesTable.Row label="Updated">
-          {formatDateTime(idp.timeModified)}
+          <DateTime date={idp.timeModified} />
         </PropertiesTable.Row>
       </PropertiesTable>
 
diff --git a/app/forms/image-edit.tsx b/app/forms/image-edit.tsx
index 1871960436..85bf2ba275 100644
--- a/app/forms/image-edit.tsx
+++ b/app/forms/image-edit.tsx
@@ -21,10 +21,10 @@ import {
   useProjectImageSelector,
   useSiloImageSelector,
 } from '~/hooks'
+import { DateTime } from '~/ui/lib/DateTime'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ResourceLabel } from '~/ui/lib/SideModal'
 import { Truncate } from '~/ui/lib/Truncate'
-import { formatDateTime } from '~/util/date'
 import { pb } from '~/util/path-builder'
 import { bytesToGiB } from '~/util/units'
 
@@ -94,10 +94,10 @@ export function EditImageSideModalForm({
           <span className="ml-1 inline-block text-quaternary">GiB</span>
         </PropertiesTable.Row>
         <PropertiesTable.Row label="Created">
-          {formatDateTime(image.timeCreated)}
+          <DateTime date={image.timeCreated} />
         </PropertiesTable.Row>
         <PropertiesTable.Row label="Updated">
-          {formatDateTime(image.timeModified)}
+          <DateTime date={image.timeModified} />
         </PropertiesTable.Row>
       </PropertiesTable>
 
diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index 1d5a36fe8d..51e4082621 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-import { format } from 'date-fns'
 import { filesize } from 'filesize'
 import { useMemo } from 'react'
 import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
@@ -25,6 +24,7 @@ import { RouteTabs, Tab } from '~/components/RouteTabs'
 import { InstanceStatusBadge } from '~/components/StatusBadge'
 import { getInstanceSelector, useInstanceSelector, useQuickActions } from '~/hooks'
 import { EmptyCell } from '~/table/cells/EmptyCell'
+import { DateTime } from '~/ui/lib/DateTime'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { Truncate } from '~/ui/lib/Truncate'
@@ -172,12 +172,7 @@ export function InstancePage() {
             </span>
           </PropertiesTable.Row>
           <PropertiesTable.Row label="created">
-            <span className="text-secondary">
-              {format(instance.timeCreated, 'MMM d, yyyy')}{' '}
-            </span>
-            <span className="ml-1 text-quaternary">
-              {format(instance.timeCreated, 'p')}
-            </span>
+            <DateTime date={instance.timeCreated} />
           </PropertiesTable.Row>
           <PropertiesTable.Row label="id">
             <span className="overflow-hidden text-ellipsis whitespace-nowrap text-secondary">
diff --git a/app/pages/project/vpcs/VpcPage/VpcPage.tsx b/app/pages/project/vpcs/VpcPage/VpcPage.tsx
index 864a0098c7..f8ffdcb21d 100644
--- a/app/pages/project/vpcs/VpcPage/VpcPage.tsx
+++ b/app/pages/project/vpcs/VpcPage/VpcPage.tsx
@@ -13,10 +13,10 @@ import { Networking24Icon } from '@oxide/design-system/icons/react'
 import { QueryParamTabs } from '~/components/QueryParamTabs'
 import { getVpcSelector, useVpcSelector } from '~/hooks'
 import { EmptyCell } from '~/table/cells/EmptyCell'
+import { DateTime } from '~/ui/lib/DateTime'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { Tabs } from '~/ui/lib/Tabs'
-import { formatDateTime } from '~/util/date'
 
 import { VpcFirewallRulesTab } from './tabs/VpcFirewallRulesTab'
 import { VpcSubnetsTab } from './tabs/VpcSubnetsTab'
@@ -56,10 +56,10 @@ export function VpcPage() {
         </PropertiesTable>
         <PropertiesTable>
           <PropertiesTable.Row label="Created">
-            {formatDateTime(vpc.timeCreated)}
+            <DateTime date={vpc.timeCreated} />
           </PropertiesTable.Row>
           <PropertiesTable.Row label="Last Modified">
-            {formatDateTime(vpc.timeModified)}
+            <DateTime date={vpc.timeModified} />
           </PropertiesTable.Row>
         </PropertiesTable>
       </PropertiesTable.Group>
diff --git a/app/pages/system/silos/SiloPage.tsx b/app/pages/system/silos/SiloPage.tsx
index 91c8f2f9f8..5142e81b41 100644
--- a/app/pages/system/silos/SiloPage.tsx
+++ b/app/pages/system/silos/SiloPage.tsx
@@ -14,12 +14,12 @@ import { QueryParamTabs } from '~/components/QueryParamTabs'
 import { getSiloSelector, useSiloSelector } from '~/hooks'
 import { EmptyCell } from '~/table/cells/EmptyCell'
 import { Badge } from '~/ui/lib/Badge'
+import { DateTime } from '~/ui/lib/DateTime'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { TableEmptyBox } from '~/ui/lib/Table'
 import { Tabs } from '~/ui/lib/Tabs'
-import { formatDateTime } from '~/util/date'
 
 import { SiloIdpsTab } from './SiloIdpsTab'
 import { SiloIpPoolsTab } from './SiloIpPoolsTab'
@@ -64,10 +64,10 @@ export function SiloPage() {
         </PropertiesTable>
         <PropertiesTable>
           <PropertiesTable.Row label="Created">
-            {formatDateTime(silo.timeCreated)}
+            <DateTime date={silo.timeCreated} />
           </PropertiesTable.Row>
           <PropertiesTable.Row label="Last Modified">
-            {formatDateTime(silo.timeModified)}
+            <DateTime date={silo.timeModified} />
           </PropertiesTable.Row>
         </PropertiesTable>
       </PropertiesTable.Group>
diff --git a/app/table/columns/common.tsx b/app/table/columns/common.tsx
index 4d16943986..c8de914199 100644
--- a/app/table/columns/common.tsx
+++ b/app/table/columns/common.tsx
@@ -6,9 +6,9 @@
  * Copyright Oxide Computer Company
  */
 
-import { format } from 'date-fns/format'
 import { filesize } from 'filesize'
 
+import { DateTime } from '~/ui/lib/DateTime'
 import { Truncate } from '~/ui/lib/Truncate'
 
 import { EmptyCell } from '../cells/EmptyCell'
@@ -18,13 +18,7 @@ import { EmptyCell } from '../cells/EmptyCell'
 type Info<T> = { getValue: () => T }
 
 function dateCell(info: Info<Date>) {
-  const date = info.getValue()
-  return (
-    <time dateTime={date.toISOString()} className="flex flex-wrap gap-x-2">
-      <span>{format(date, 'PP')}</span>
-      <span className="text-quaternary">{format(date, 'p')}</span>
-    </time>
-  )
+  return <DateTime date={info.getValue()} />
 }
 
 function sizeCell(info: Info<number>) {
diff --git a/app/ui/lib/DateTime.tsx b/app/ui/lib/DateTime.tsx
new file mode 100644
index 0000000000..828d1bf1ed
--- /dev/null
+++ b/app/ui/lib/DateTime.tsx
@@ -0,0 +1,16 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import { toLocaleDateString, toLocaleTimeString } from '~/util/date'
+
+export const DateTime = ({ date, locale }: { date: Date; locale?: string }) => (
+  <time dateTime={date.toISOString()} className="flex flex-wrap gap-x-2">
+    <span>{toLocaleDateString(date, locale)}</span>
+    <span className="text-quaternary">{toLocaleTimeString(date, locale)}</span>
+  </time>
+)
diff --git a/app/util/date.spec.ts b/app/util/date.spec.ts
index d59ea38e11..839c63b930 100644
--- a/app/util/date.spec.ts
+++ b/app/util/date.spec.ts
@@ -8,7 +8,7 @@
 import { subDays, subHours, subMinutes, subSeconds } from 'date-fns'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { timeAgoAbbr } from './date'
+import { timeAgoAbbr, toLocaleDateString, toLocaleTimeString } from './date'
 
 const baseDate = new Date(2021, 5, 7)
 
@@ -54,4 +54,20 @@ describe('timeAgoAbbr', () => {
     expect(timeAgoAbbr(subDays(baseDate, 200), { addSuffix: true })).toEqual('7mo ago')
     expect(timeAgoAbbr(subDays(baseDate, 3), { addSuffix: true })).toEqual('3d ago')
   })
+
+  it('formats toLocaleDateString', () => {
+    expect(toLocaleDateString(baseDate)).toEqual('Jun 7, 2021')
+    expect(toLocaleDateString(baseDate, 'en-US')).toEqual('Jun 7, 2021')
+    expect(toLocaleDateString(baseDate, 'fr-FR')).toEqual('7 juin 2021')
+    expect(toLocaleDateString(baseDate, 'de-DE')).toEqual('7. Juni 2021')
+    expect(toLocaleDateString(baseDate, 'ja-JP')).toEqual('2021年6月7日')
+  })
+
+  it('formats toLocaleTimeString', () => {
+    expect(toLocaleTimeString(baseDate)).toEqual('12:00 AM')
+    expect(toLocaleTimeString(baseDate, 'en-US')).toEqual('12:00 AM')
+    expect(toLocaleTimeString(baseDate, 'fr-FR')).toEqual('0:00 AM')
+    expect(toLocaleTimeString(baseDate, 'de-DE')).toEqual('0:00 AM')
+    expect(toLocaleTimeString(baseDate, 'ja-JP')).toEqual('午前0:00')
+  })
 })
diff --git a/app/util/date.ts b/app/util/date.ts
index 8715641522..f61f196669 100644
--- a/app/util/date.ts
+++ b/app/util/date.ts
@@ -5,11 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import {
-  format,
-  formatDistanceToNowStrict,
-  type FormatDistanceToNowStrictOptions,
-} from 'date-fns'
+import { formatDistanceToNowStrict, type FormatDistanceToNowStrictOptions } from 'date-fns'
 
 // locale setup and formatDistance function copied from here and modified
 // https://github.com/date-fns/date-fns/blob/56a3856/src/locale/en-US/_lib/formatDistance/index.js
@@ -47,4 +43,16 @@ export const timeAgoAbbr = (d: Date, options?: FormatDistanceToNowStrictOptions)
     },
   })
 
-export const formatDateTime = (d: Date) => format(d, 'MMM d, yyyy H:mm aa')
+export const toLocaleDateString = (d: Date, locale = 'en-US') =>
+  new Intl.DateTimeFormat(locale, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(d)
+
+export const toLocaleTimeString = (d: Date, locale = 'en-US') =>
+  new Intl.DateTimeFormat(locale, {
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: true,
+  }).format(d)

From 21cc3d8fe34e734891f957bbf643754db6fb7cc4 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 16 Apr 2024 20:37:20 -0700
Subject: [PATCH 5/8] add toLocaleDateTimeFormat

---
 app/components/RefetchIntervalPicker.tsx |  5 ++--
 app/components/TimeAgo.tsx               |  4 +--
 app/util/date.spec.ts                    | 21 +++++++++++++---
 app/util/date.ts                         | 32 ++++++++++++++----------
 4 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/app/components/RefetchIntervalPicker.tsx b/app/components/RefetchIntervalPicker.tsx
index f874c400a8..200189a737 100644
--- a/app/components/RefetchIntervalPicker.tsx
+++ b/app/components/RefetchIntervalPicker.tsx
@@ -6,7 +6,6 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import { format } from 'date-fns'
 import { useEffect, useState } from 'react'
 
 import { Refresh16Icon, Time16Icon } from '@oxide/design-system/icons/react'
@@ -14,6 +13,7 @@ import { Refresh16Icon, Time16Icon } from '@oxide/design-system/icons/react'
 import { Listbox, type ListboxItem } from '~/ui/lib/Listbox'
 import { SpinnerLoader } from '~/ui/lib/Spinner'
 import { useInterval } from '~/ui/lib/use-interval'
+import { toLocaleTimeString } from '~/util/date'
 
 const intervalPresets = {
   Off: undefined,
@@ -55,7 +55,8 @@ export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
     intervalPicker: (
       <div className="mb-12 flex items-center justify-between">
         <div className="hidden items-center gap-2 text-right text-mono-sm text-quaternary lg+:flex">
-          <Time16Icon className="text-quinary" /> Refreshed {format(lastFetched, 'HH:mm')}
+          <Time16Icon className="text-quinary" /> Refreshed{' '}
+          {toLocaleTimeString(lastFetched)}
         </div>
         <div className="flex">
           <button
diff --git a/app/components/TimeAgo.tsx b/app/components/TimeAgo.tsx
index 30ab827a84..0f93874212 100644
--- a/app/components/TimeAgo.tsx
+++ b/app/components/TimeAgo.tsx
@@ -8,7 +8,7 @@
 import type { Placement } from '@floating-ui/react'
 
 import { Tooltip } from '~/ui/lib/Tooltip'
-import { timeAgoAbbr, toLocaleDateString } from '~/util/date'
+import { timeAgoAbbr, toLocaleDateTimeString } from '~/util/date'
 
 export const TimeAgo = ({
   datetime,
@@ -22,7 +22,7 @@ export const TimeAgo = ({
   const content = (
     <div className="flex flex-col">
       <span className="text-tertiary">{tooltipText}</span>
-      <span>{toLocaleDateString(datetime)}</span>
+      <span>{toLocaleDateTimeString(datetime)}</span>
     </div>
   )
   return (
diff --git a/app/util/date.spec.ts b/app/util/date.spec.ts
index 839c63b930..cd522aebb7 100644
--- a/app/util/date.spec.ts
+++ b/app/util/date.spec.ts
@@ -8,7 +8,12 @@
 import { subDays, subHours, subMinutes, subSeconds } from 'date-fns'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { timeAgoAbbr, toLocaleDateString, toLocaleTimeString } from './date'
+import {
+  timeAgoAbbr,
+  toLocaleDateString,
+  toLocaleDateTimeString,
+  toLocaleTimeString,
+} from './date'
 
 const baseDate = new Date(2021, 5, 7)
 
@@ -66,8 +71,16 @@ describe('timeAgoAbbr', () => {
   it('formats toLocaleTimeString', () => {
     expect(toLocaleTimeString(baseDate)).toEqual('12:00 AM')
     expect(toLocaleTimeString(baseDate, 'en-US')).toEqual('12:00 AM')
-    expect(toLocaleTimeString(baseDate, 'fr-FR')).toEqual('0:00 AM')
-    expect(toLocaleTimeString(baseDate, 'de-DE')).toEqual('0:00 AM')
-    expect(toLocaleTimeString(baseDate, 'ja-JP')).toEqual('午前0:00')
+    expect(toLocaleTimeString(baseDate, 'fr-FR')).toEqual('00:00')
+    expect(toLocaleTimeString(baseDate, 'de-DE')).toEqual('00:00')
+    expect(toLocaleTimeString(baseDate, 'ja-JP')).toEqual('0:00')
+  })
+
+  it('formats toLocaleDateTimeString', () => {
+    expect(toLocaleDateTimeString(baseDate)).toEqual('Jun 7, 2021, 12:00 AM')
+    expect(toLocaleDateTimeString(baseDate, 'en-US')).toEqual('Jun 7, 2021, 12:00 AM')
+    expect(toLocaleDateTimeString(baseDate, 'fr-FR')).toEqual('7 juin 2021, 00:00')
+    expect(toLocaleDateTimeString(baseDate, 'de-DE')).toEqual('7. Juni 2021, 00:00')
+    expect(toLocaleDateTimeString(baseDate, 'ja-JP')).toEqual('2021年6月7日 0:00')
   })
 })
diff --git a/app/util/date.ts b/app/util/date.ts
index f61f196669..a3a60039de 100644
--- a/app/util/date.ts
+++ b/app/util/date.ts
@@ -43,16 +43,22 @@ export const timeAgoAbbr = (d: Date, options?: FormatDistanceToNowStrictOptions)
     },
   })
 
-export const toLocaleDateString = (d: Date, locale = 'en-US') =>
-  new Intl.DateTimeFormat(locale, {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  }).format(d)
-
-export const toLocaleTimeString = (d: Date, locale = 'en-US') =>
-  new Intl.DateTimeFormat(locale, {
-    hour: 'numeric',
-    minute: 'numeric',
-    hour12: true,
-  }).format(d)
+const dateOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+} satisfies Intl.DateTimeFormatOptions
+
+const timeOptions = {
+  hour: 'numeric',
+  minute: 'numeric',
+} satisfies Intl.DateTimeFormatOptions
+
+export const toLocaleDateString = (d: Date, locale?: string) =>
+  new Intl.DateTimeFormat(locale, dateOptions).format(d)
+
+export const toLocaleTimeString = (d: Date, locale?: string) =>
+  new Intl.DateTimeFormat(locale, timeOptions).format(d)
+
+export const toLocaleDateTimeString = (d: Date, locale?: string) =>
+  new Intl.DateTimeFormat(locale, { ...dateOptions, ...timeOptions }).format(d)

From 0eb2872515f1328bebb60d4c3e2f6014e4593bed Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 16 Apr 2024 21:34:22 -0700
Subject: [PATCH 6/8] Update to use dateStyle and timeStyle

---
 app/util/date.spec.ts |  8 ++++----
 app/util/date.ts      | 19 +++++--------------
 2 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/app/util/date.spec.ts b/app/util/date.spec.ts
index cd522aebb7..63382e082a 100644
--- a/app/util/date.spec.ts
+++ b/app/util/date.spec.ts
@@ -64,8 +64,8 @@ describe('timeAgoAbbr', () => {
     expect(toLocaleDateString(baseDate)).toEqual('Jun 7, 2021')
     expect(toLocaleDateString(baseDate, 'en-US')).toEqual('Jun 7, 2021')
     expect(toLocaleDateString(baseDate, 'fr-FR')).toEqual('7 juin 2021')
-    expect(toLocaleDateString(baseDate, 'de-DE')).toEqual('7. Juni 2021')
-    expect(toLocaleDateString(baseDate, 'ja-JP')).toEqual('2021年6月7日')
+    expect(toLocaleDateString(baseDate, 'de-DE')).toEqual('07.06.2021')
+    expect(toLocaleDateString(baseDate, 'ja-JP')).toEqual('2021/06/07')
   })
 
   it('formats toLocaleTimeString', () => {
@@ -80,7 +80,7 @@ describe('timeAgoAbbr', () => {
     expect(toLocaleDateTimeString(baseDate)).toEqual('Jun 7, 2021, 12:00 AM')
     expect(toLocaleDateTimeString(baseDate, 'en-US')).toEqual('Jun 7, 2021, 12:00 AM')
     expect(toLocaleDateTimeString(baseDate, 'fr-FR')).toEqual('7 juin 2021, 00:00')
-    expect(toLocaleDateTimeString(baseDate, 'de-DE')).toEqual('7. Juni 2021, 00:00')
-    expect(toLocaleDateTimeString(baseDate, 'ja-JP')).toEqual('2021年6月7日 0:00')
+    expect(toLocaleDateTimeString(baseDate, 'de-DE')).toEqual('07.06.2021, 00:00')
+    expect(toLocaleDateTimeString(baseDate, 'ja-JP')).toEqual('2021/06/07 0:00')
   })
 })
diff --git a/app/util/date.ts b/app/util/date.ts
index a3a60039de..9f504267df 100644
--- a/app/util/date.ts
+++ b/app/util/date.ts
@@ -43,22 +43,13 @@ export const timeAgoAbbr = (d: Date, options?: FormatDistanceToNowStrictOptions)
     },
   })
 
-const dateOptions = {
-  month: 'short',
-  day: 'numeric',
-  year: 'numeric',
-} satisfies Intl.DateTimeFormatOptions
-
-const timeOptions = {
-  hour: 'numeric',
-  minute: 'numeric',
-} satisfies Intl.DateTimeFormatOptions
-
+// dateStyle: 'medium' looks like `Apr 16, 2024` for en-US
 export const toLocaleDateString = (d: Date, locale?: string) =>
-  new Intl.DateTimeFormat(locale, dateOptions).format(d)
+  new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(d)
 
+// timeStyle: 'short' looks like `8:33 PM` for en-US
 export const toLocaleTimeString = (d: Date, locale?: string) =>
-  new Intl.DateTimeFormat(locale, timeOptions).format(d)
+  new Intl.DateTimeFormat(locale, { timeStyle: 'short' }).format(d)
 
 export const toLocaleDateTimeString = (d: Date, locale?: string) =>
-  new Intl.DateTimeFormat(locale, { ...dateOptions, ...timeOptions }).format(d)
+  new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short' }).format(d)

From 3f933572f91e26fc99b4b7404b4890d235dc63f0 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 16 Apr 2024 21:45:01 -0700
Subject: [PATCH 7/8] add two basic tests for presence of datetime string

---
 test/e2e/silos.e2e.ts | 1 +
 test/e2e/vpcs.e2e.ts  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/test/e2e/silos.e2e.ts b/test/e2e/silos.e2e.ts
index af733c3afa..9d08ef2e8a 100644
--- a/test/e2e/silos.e2e.ts
+++ b/test/e2e/silos.e2e.ts
@@ -28,6 +28,7 @@ test('Create silo', async ({ page }) => {
     // not easy to assert this until we can calculate accessible name instead of text content
     // discoverable: 'true',
   })
+  await expect(page.getByText('Feb 28, 202312:00 AM')).toBeVisible()
 
   await page.click('role=link[name="New silo"]')
 
diff --git a/test/e2e/vpcs.e2e.ts b/test/e2e/vpcs.e2e.ts
index 2a0d0a1484..17527f38f7 100644
--- a/test/e2e/vpcs.e2e.ts
+++ b/test/e2e/vpcs.e2e.ts
@@ -12,6 +12,7 @@ test('can nav to VpcPage from /', async ({ page }) => {
   await page.getByRole('table').getByRole('link', { name: 'mock-project' }).click()
   await page.getByRole('link', { name: 'VPCs' }).click()
   await page.getByRole('link', { name: 'mock-vpc' }).click()
+  await expect(page.getByText('Jan 1, 202112:00 AM')).toBeVisible()
   await expect(page.getByRole('tab', { name: 'Firewall rules' })).toBeVisible()
   await expect(page.getByRole('cell', { name: 'allow-icmp' })).toBeVisible()
   expect(await page.title()).toEqual('mock-vpc / VPCs / mock-project / Oxide Console')

From 8d64752d03939547422dd29e79486ec2348fb24a Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 16 Apr 2024 23:25:23 -0700
Subject: [PATCH 8/8] Add small test to check international date formatting

---
 test/e2e/dates.e2e.ts | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 test/e2e/dates.e2e.ts

diff --git a/test/e2e/dates.e2e.ts b/test/e2e/dates.e2e.ts
new file mode 100644
index 0000000000..df5cd7b405
--- /dev/null
+++ b/test/e2e/dates.e2e.ts
@@ -0,0 +1,29 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { expect, test } from '@playwright/test'
+
+test('date formatting - English locale', async ({ page }) => {
+  await page.goto('/system/silos')
+  await expect(page.getByText('Feb 28, 202312:00 AM')).toBeVisible()
+})
+
+test.describe('date formatting - German locale', () => {
+  test.use({ locale: 'de-DE' })
+  test('date formatting - German locale', async ({ page }) => {
+    await page.goto('/system/silos')
+    await expect(page.getByText('28.02.202300:00')).toBeVisible()
+  })
+})
+
+test.describe('date formatting - French locale', () => {
+  test.use({ locale: 'fr-FR' })
+  test('date formatting - French locale', async ({ page }) => {
+    await page.goto('/system/silos')
+    await expect(page.getByText('28 févr. 202300:00')).toBeVisible()
+  })
+})