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