Merge pull request #26780 from stephenglass/task-list-timestamp

change task lists created at column to use timestamp

.changeset/dry-frogs-drum.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Change task list created at column to show timestamp

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('<CreatedAtColumn />', () => {
-  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(<CreatedAtColumn {...props} />);
+  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(
+      <CreatedAtColumn createdAt={testDate} />,
+    );
+    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(
+      <CreatedAtColumn createdAt={testDate} />,
+    );
+    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(
+      <CreatedAtColumn createdAt={testDate} locale="fr-FR" />,
+    );
+    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(
+      <CreatedAtColumn createdAt={testDate} locale="en-DE" />,
+    );
+    expect(getByText('22/09/2024, 13:30:00')).toBeDefined();
   });
 });

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 (
-    <Typography paragraph>
-      {humanizeDuration(formatted, { round: true })} ago
-    </Typography>
-  );
+export const CreatedAtColumn: React.FC<CreatedAtColumnProps> = ({
+  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 <Typography paragraph>{formatted}</Typography>;
 };