Skip to content

[DT-3505] add iso option to timestamp formats #3102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
andrewzamojc wants to merge 7 commits into from
Closed

[DT-3505] add iso option to timestamp formats #3102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cc8654f
add iso option to timestamp formats, add tests
andrewzamojc Jan 19, 2026
5da5660
fix iso format check
andrewzamojc Jan 19, 2026
c11ff5f
refactor layout in workflows-with-new-search.svelte so long date form…
andrewzamojc Jan 19, 2026
8706c8d
fix: ensure formatUTCOffset returns an empty string for undefined offset
andrewzamojc Jan 19, 2026
ff5272b
fix: handle undefined query in workflows-with-new-search component
andrewzamojc Jan 19, 2026
586f9a3
fix: relative
andrewzamojc Jan 19, 2026
a41160c
improve scrolling
andrewzamojc Jan 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 29 additions & 23 deletions src/lib/components/timezone-select.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@
id="timezones-menu"
{position}
class="w-[10rem] sm:w-[20rem] md:w-[28rem]"
maxHeight=""
>
<Input
label={translate('common.search')}
Expand Down Expand Up @@ -160,6 +161,11 @@
/>
</div>
<ToggleButtons>
<ToggleButton
size="xs"
active={$timestampFormat === 'iso'}
on:click={() => setTimestampFormat('iso')}>ISO</ToggleButton
>
<ToggleButton
size="xs"
active={$timestampFormat === 'short'}
Expand All @@ -181,33 +187,33 @@

<MenuDivider />

{#if !search}
{#each QuickTimezoneOptions as { value, label }}
<div class="max-h-[16rem] overflow-auto overscroll-contain">
{#if !search}
{#each QuickTimezoneOptions as { value, label }}
<MenuItem
onclick={() => selectTimezone(value)}
data-testid="timezones-{value}"
selected={value === $timeFormat}
description={value === BASE_TIME_FORMAT_OPTIONS.LOCAL
? localTime
: undefined}
>
{label}
</MenuItem>
{/each}
{/if}

{#each filteredOptions as { value, label, offset, abbr }}
<MenuItem
onclick={() => selectTimezone(value)}
data-testid="timezones-{value}"
selected={value === $timeFormat}
description={value === BASE_TIME_FORMAT_OPTIONS.LOCAL
? localTime
: undefined}
onclick={() => selectTimezone(value)}
description={formatUTCOffset(offset, translate('common.utc'))}
>
{label}
{label} ({abbr})
</MenuItem>
{:else}
<MenuItem disabled>{translate('common.no-results')}</MenuItem>
{/each}

<MenuDivider />
{/if}

{#each filteredOptions as { value, label, offset, abbr }}
<MenuItem
selected={value === $timeFormat}
onclick={() => selectTimezone(value)}
description={formatUTCOffset(offset, translate('common.utc'))}
>
{label} ({abbr})
</MenuItem>
{:else}
<MenuItem disabled>{translate('common.no-results')}</MenuItem>
{/each}
</div>
</Menu>
</MenuContainer>
16 changes: 8 additions & 8 deletions src/lib/pages/workflows-with-new-search.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
});
$effect(() => {
$workflowsQuery = query;
$workflowsQuery = query ?? '';
Copy link
Contributor Author

@andrewzamojc andrewzamojc Jan 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Annotation: danger file made me do it

});
$effect(() => {
Expand Down Expand Up @@ -228,8 +228,8 @@

<header class="flex flex-col gap-2">
<div class="flex flex-col justify-between gap-2 md:flex-row">
<div class="flex flex-row flex-wrap items-start gap-2">
<div>
<div class="flex flex-col gap-2">
<div class="flex flex-row items-center gap-1">
Copy link
Contributor Author

@andrewzamojc andrewzamojc Jan 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Annotation: On workflows page, just under the main heading there is a timestamp. When the "long" format was selected it pushed the refresh button away. This rejigs the flexbox to fix that.

<h1 class="flex items-center gap-2 leading-7" data-cy="workflows-title">
{#if $supportsAdvancedVisibility}
<span data-testid="workflow-count"
Expand All @@ -243,12 +243,12 @@
<Translate key="workflows.recent-workflows" />
{/if}
</h1>
<p class="text-xs text-secondary">
{refreshTimeFormatted}
</p>
<WorkflowCountRefresh count={$workflowCount.newCount} />
<WorkflowCounts bind:refreshTime />
</div>
<WorkflowCountRefresh count={$workflowCount.newCount} />
<WorkflowCounts bind:refreshTime />
<p class="text-xs text-secondary">
{refreshTimeFormatted}
</p>
</div>
{#if $$slots['header-actions'] || workflowStartEnabled}
<div class="flex items-center gap-4">
Expand Down
3 changes: 3 additions & 0 deletions src/lib/utilities/format-date.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
});

it('should not format other timezones as relative', () => {
expect(formatDate(date, 'UTC', { relative: true })).toEqual(

Check failure on line 77 in src/lib/utilities/format-date.test.ts

View workflow job for this annotation

GitHub Actions / unit-tests

src/lib/utilities/format-date.test.ts > formatDate > should not format other timezones as relative 

AssertionError: expected '1378 days ago' to deeply equal 'Apr 13, 2022, 4:29:35.63 PM UTC'

Expected: "Apr 13, 2022, 4:29:35.63 PM UTC"
Received: "1378 days ago"

 ❯ src/lib/utilities/format-date.test.ts:77:57
'Apr 13, 2022, 4:29:35.63 PM UTC',
);
});
Expand Down Expand Up @@ -147,6 +147,9 @@
expect(formatDate(date, 'utc', { format: 'long' })).toEqual(
'April 13, 2022 at 4:29:35.63 PM UTC',
);
expect(formatDate(date, 'utc', { format: 'iso' })).toEqual(
'2022-04-13T16:29:35.630Z',
);
});
});

Expand Down
29 changes: 17 additions & 12 deletions src/lib/utilities/format-date.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export const timestampFormats: Record<
},
} as const;

export type TimestampFormat = keyof typeof timestampFormats;
export type TimestampFormat = keyof typeof timestampFormats | 'iso';

export function formatDate(
date: ValidTime | undefined | null,
Expand All @@ -82,18 +82,22 @@ export function formatDate(

const parsed = parseJSON(new Date(date));

if (timeFormat === BASE_TIME_FORMAT_OPTIONS.LOCAL) {
if (relative) {
return (
formatDistanceToNowStrict(parsed, {
...(!flexibleUnits &&
Math.abs(differenceInHours(currentDate, parsed)) > 24 && {
unit: 'day',
}),
}) + ` ${relativeLabel}`
);
}
if (relative) {
return (
formatDistanceToNowStrict(parsed, {
...(!flexibleUnits &&
Math.abs(differenceInHours(currentDate, parsed)) > 24 && {
unit: 'day',
}),
}) + ` ${relativeLabel}`
);
}

if (format === 'iso') {
return parsed.toISOString();
}

if (timeFormat === BASE_TIME_FORMAT_OPTIONS.LOCAL) {
return new Intl.DateTimeFormat(
undefined,
timestampFormats[format],
Expand Down Expand Up @@ -127,6 +131,7 @@ export function formatUTCOffset(
absoluteValue > 9 ? `${absoluteValue}:00` : `0${absoluteValue}:00`;
if (offset > 0) return `${utc}+${formattedOffset}`;
if (offset < 0) return `${utc}-${formattedOffset}`;
return '';
}

export function getLocalTimezone(): string {
Expand Down
Loading