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.test.tsx b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx index 9cd1353ae1..c172c2122f 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.test.tsx @@ -13,22 +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 { getByText } = await renderInTestApp(); + const mockNavigatorLanguage = (language: string) => { + jest.spyOn(window.navigator, 'language', 'get').mockReturnValue(language); + }; - const text = getByText('0 seconds ago'); - expect(text).toBeDefined(); + 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(); + }); + + 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(); + }); + + 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 3b47287fd6..525e4cea04 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx @@ -13,20 +13,26 @@ * 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(); +interface CreatedAtColumnProps { + createdAt: string; + locale?: string; +} - return ( - - {humanizeDuration(formatted, { round: true })} ago - - ); +export const CreatedAtColumn: React.FC = ({ + createdAt, + locale, +}) => { + const createdAtTime = DateTime.fromISO(createdAt); + + const userLocale = locale || window.navigator.language || 'en-US'; + + const formatted = createdAtTime.setLocale(userLocale).toLocaleString({ + ...DateTime.DATETIME_SHORT_WITH_SECONDS, + }); + + return {formatted}; };