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};
};