From 46986466fef617ca0e1c797fddab5015b57d44a0 Mon Sep 17 00:00:00 2001 From: Stephen Glass Date: Wed, 18 Sep 2024 21:57:38 -0400 Subject: [PATCH 1/3] change task lists created at column to use timestamp Signed-off-by: Stephen Glass --- .changeset/dry-frogs-drum.md | 5 +++++ .../ListTasksPage/columns/CreatedAtColumn.tsx | 15 +++++---------- 2 files changed, 10 insertions(+), 10 deletions(-) create mode 100644 .changeset/dry-frogs-drum.md diff --git a/.changeset/dry-frogs-drum.md b/.changeset/dry-frogs-drum.md new file mode 100644 index 0000000000..c929732943 --- /dev/null +++ b/.changeset/dry-frogs-drum.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder': patch +--- + +Change task list created at column to show timestamp diff --git a/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx index 3b47287fd6..f40c4549d1 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx @@ -13,20 +13,15 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { DateTime, Interval } from 'luxon'; -import humanizeDuration from 'humanize-duration'; +import { DateTime } from 'luxon'; import React from 'react'; import Typography from '@material-ui/core/Typography'; export const CreatedAtColumn = ({ createdAt }: { createdAt: string }) => { const createdAtTime = DateTime.fromISO(createdAt); - const formatted = Interval.fromDateTimes(createdAtTime, DateTime.local()) - .toDuration() - .valueOf(); - - return ( - - {humanizeDuration(formatted, { round: true })} ago - + const formatted = createdAtTime.toLocaleString( + DateTime.DATETIME_SHORT_WITH_SECONDS, ); + + return {formatted}; }; From b829833344eb33caa99e8a8b2442985f189154f0 Mon Sep 17 00:00:00 2001 From: Stephen Glass Date: Wed, 18 Sep 2024 22:10:17 -0400 Subject: [PATCH 2/3] update created at column test Signed-off-by: Stephen Glass --- .../ListTasksPage/columns/CreatedAtColumn.test.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx index 9cd1353ae1..92f1c4560c 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx @@ -23,12 +23,16 @@ import { DateTime } from 'luxon'; describe('', () => { it('should render the column with the time', async () => { const props = { - createdAt: DateTime.now().toISO()!, + createdAt: DateTime.now().toISO(), }; + const formattedTime = DateTime.fromISO(props.createdAt).toLocaleString( + DateTime.DATETIME_SHORT_WITH_SECONDS, + ); + const { getByText } = await renderInTestApp(); - const text = getByText('0 seconds ago'); + const text = getByText(formattedTime); expect(text).toBeDefined(); }); }); From 088101722c64eed48352c31c633ab537a750e3ef Mon Sep 17 00:00:00 2001 From: Stephen Glass Date: Sun, 22 Sep 2024 15:14:38 -0400 Subject: [PATCH 3/3] add support for locales Signed-off-by: Stephen Glass --- .../columns/CreatedAtColumn.test.tsx | 48 ++++++++++++++----- .../ListTasksPage/columns/CreatedAtColumn.tsx | 19 ++++++-- 2 files changed, 50 insertions(+), 17 deletions(-) diff --git a/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx index 92f1c4560c..c172c2122f 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx @@ -13,26 +13,48 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -import { renderInTestApp } from '@backstage/test-utils'; - import React from 'react'; import { CreatedAtColumn } from './CreatedAtColumn'; -import { DateTime } from 'luxon'; +import { renderInTestApp } from '@backstage/test-utils'; describe('', () => { - it('should render the column with the time', async () => { - const props = { - createdAt: DateTime.now().toISO(), - }; + const testDate = '2024-09-22T13:30:00Z'; - const formattedTime = DateTime.fromISO(props.createdAt).toLocaleString( - DateTime.DATETIME_SHORT_WITH_SECONDS, + const mockNavigatorLanguage = (language: string) => { + jest.spyOn(window.navigator, 'language', 'get').mockReturnValue(language); + }; + + afterEach(() => { + jest.restoreAllMocks(); + }); + + it('should render the column using mocked locale (de-DE)', async () => { + mockNavigatorLanguage('de-DE'); + const { getByText } = await renderInTestApp( + , ); + expect(getByText('22.9.2024, 13:30:00')).toBeDefined(); + }); - const { getByText } = await renderInTestApp(); + it('should render the column with the default locale (en-US)', async () => { + mockNavigatorLanguage(''); + const { getByText } = await renderInTestApp( + , + ); + expect(getByText('9/22/2024, 1:30:00 PM')).toBeDefined(); + }); - const text = getByText(formattedTime); - expect(text).toBeDefined(); + it('should render the column with a specified locale (fr-FR)', async () => { + const { getByText } = await renderInTestApp( + , + ); + expect(getByText('22/09/2024 13:30:00')).toBeDefined(); + }); + + it('should render the column with a specified locale (en-DE)', async () => { + const { getByText } = await renderInTestApp( + , + ); + expect(getByText('22/09/2024, 13:30:00')).toBeDefined(); }); }); diff --git a/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx index f40c4549d1..525e4cea04 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx @@ -17,11 +17,22 @@ import { DateTime } from 'luxon'; import React from 'react'; import Typography from '@material-ui/core/Typography'; -export const CreatedAtColumn = ({ createdAt }: { createdAt: string }) => { +interface CreatedAtColumnProps { + createdAt: string; + locale?: string; +} + +export const CreatedAtColumn: React.FC = ({ + createdAt, + locale, +}) => { const createdAtTime = DateTime.fromISO(createdAt); - const formatted = createdAtTime.toLocaleString( - DateTime.DATETIME_SHORT_WITH_SECONDS, - ); + + const userLocale = locale || window.navigator.language || 'en-US'; + + const formatted = createdAtTime.setLocale(userLocale).toLocaleString({ + ...DateTime.DATETIME_SHORT_WITH_SECONDS, + }); return {formatted}; };