change formatShortDate for FormattedDateTime and change tests

scality · Apr 10, 2024 · ac081a3 · ac081a3
1 parent 4ef4aaa
commit ac081a3
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 37 deletions.
diff --git a/src/react/account/AccountPoliciesList.tsx b/src/react/account/AccountPoliciesList.tsx
@@ -2,9 +2,13 @@ import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Box, Button, CopyButton } from '@scality/core-ui/dist/next';
 import { spacing } from '@scality/core-ui/dist/style/theme';
-import { formatShortDate } from '../utils';
 import { useIAMClient } from '../IAMProvider';
-import { ConstrainedText, Icon, Tooltip } from '@scality/core-ui';
+import {
+  ConstrainedText,
+  FormattedDateTime,
+  Icon,
+  Tooltip,
+} from '@scality/core-ui';
 import { notFalsyTypeGuard } from '../../types/typeGuards';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import DeleteConfirmation from '../ui-elements/DeleteConfirmation';
@@ -310,7 +314,7 @@ const AccessPolicyNameCell = ({ rowValues }: { rowValues: InternalPolicy }) => {
 type InternalPolicy = {
   policyPath: string;
   policyName: string;
-  modifiedOn: string;
+  modifiedOn: string | Date;
   attachments: number;
   defaultVersionId: string;
   policyArn: string;
@@ -333,9 +337,7 @@ const AccountPoliciesList = ({ accountName }: { accountName: string }) => {
           return {
             policyPath: policy.Path?.substring(1) || '',
             policyName: policy.PolicyName || '',
-            modifiedOn: policy.UpdateDate
-              ? formatShortDate(policy.UpdateDate)
-              : '-',
+            modifiedOn: policy.UpdateDate || '-',
             attachments: policy.AttachmentCount || 0,
             policyArn: policy.Arn || '',
             defaultVersionId: policy?.DefaultVersionId || '',
@@ -371,7 +373,12 @@ const AccountPoliciesList = ({ accountName }: { accountName: string }) => {
         textAlign: 'right',
         minWidth: '20%',
       },
-      Cell: ({ value }) => <>{value}</>,
+      Cell: ({ value }) => {
+        if (typeof value === 'string') {
+          return <>{value}</>;
+        }
+        return <FormattedDateTime format="date-time" value={value} />;
+      },
     },
     {
       Header: 'Attachments',

diff --git a/src/react/account/details/properties/AccountInfo.tsx b/src/react/account/details/properties/AccountInfo.tsx
@@ -1,4 +1,4 @@
-import { Icon, Modal, Wrap } from '@scality/core-ui';
+import { FormattedDateTime, Icon, Modal, Wrap } from '@scality/core-ui';
 import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
 import { useMutation, useQueryClient } from 'react-query';
 import { useHistory } from 'react-router-dom';
@@ -19,7 +19,6 @@ import { ButtonContainer } from '../../../ui-elements/Container';
 import DeleteConfirmation from '../../../ui-elements/DeleteConfirmation';
 import * as T from '../../../ui-elements/TableKeyValue';
 import Table, { TitleRow } from '../../../ui-elements/TableKeyValue';
-import { formatShortDate } from '../../../utils';
 import {
   useAccounts,
   useAuthGroups,
@@ -174,7 +173,10 @@ function AccountInfo({ account }: Props) {
           <T.Row>
             <T.Key> Creation Date </T.Key>
             <T.Value>
-              {formatShortDate(new Date(account.CreationDate))}{' '}
+              <FormattedDateTime
+                format="date-time"
+                value={new Date(account.CreationDate)}
+              />
             </T.Value>
           </T.Row>
           {/* We have to hide this two fields until the information is ready from GetRolesForWebIdentity() */}

diff --git a/src/react/account/details/properties/__tests__/AccountInfo.test.tsx b/src/react/account/details/properties/__tests__/AccountInfo.test.tsx
@@ -10,7 +10,6 @@ import {
 } from '../../../../utils/testUtil';
 import AccountInfo from '../AccountInfo';
 import Table from '../../../../ui-elements/TableKeyValue';
-import { formatDate, formatShortDate } from '../../../../utils';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { INSTANCE_ID } from '../../../../actions/__tests__/utils/testUtil';
@@ -86,7 +85,7 @@ describe('AccountInfo', () => {
     const thirdRow = rows.at(2);
     testRow(thirdRow, {
       key: 'Creation Date',
-      value: formatShortDate(new Date(account1.CreationDate)),
+      value: '',
       extraCellComponent: undefined,
     });
   });

diff --git a/src/react/databrowser/buckets/BucketList.tsx b/src/react/databrowser/buckets/BucketList.tsx
@@ -1,4 +1,10 @@
-import { ConstrainedText, Icon, Link, spacing } from '@scality/core-ui';
+import {
+  ConstrainedText,
+  FormattedDateTime,
+  Icon,
+  Link,
+  spacing,
+} from '@scality/core-ui';
 import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
 import { Box, Table } from '@scality/core-ui/dist/next';
 import { useMemo } from 'react';
@@ -14,8 +20,6 @@ import { useConfig } from '../../next-architecture/ui/ConfigProvider';
 import { useMetricsAdapter } from '../../next-architecture/ui/MetricsAdapterProvider';
 import { getDataUsedColumn } from '../../next-architecture/ui/metrics/DataUsedColumn';
 import * as T from '../../ui-elements/Table';
-import { TextAligner } from '../../ui-elements/Utility';
-import { formatShortDate } from '../../utils';
 import { useAuthGroups, useQueryParams } from '../../utils/hooks';
 import { getLocationIngestionState } from '../../utils/storageOptions';
 import { BucketLocationNameAndType } from '../../workflow/SourceBucketOption';
@@ -129,12 +133,12 @@ export default function BucketList({
         paddingRight: spacing.r32,
         textAlign: 'right',
       },
-
       Cell({ value }: { value: string }) {
         return (
-          <TextAligner alignment="right">
-            {formatShortDate(new Date(value))}
-          </TextAligner>
+          <FormattedDateTime
+            format="date-time-second"
+            value={new Date(value)}
+          />
         );
       },
     });

diff --git a/src/react/databrowser/buckets/__tests__/BucketList.test.tsx b/src/react/databrowser/buckets/__tests__/BucketList.test.tsx
@@ -1,7 +1,6 @@
 import { List } from 'immutable';
 import { MemoryRouter } from 'react-router-dom';
 import { XDM_FEATURE } from '../../../../js/config';
-import { formatShortDate } from '../../../utils';
 import { mockOffsetSize, reduxRender } from '../../../utils/testUtil';
 import BucketList from '../BucketList';
 
@@ -78,9 +77,7 @@ describe.skip('BucketList', () => {
       'us-east-1 / Local Filesystem',
     );
     expect(firstBucketCellAsyncNotification.textContent).toBe('-');
-    expect(firstBucketCellDate.textContent).toBe(
-      formatShortDate(new Date(buckets.get(0).CreationDate)),
-    );
+    expect(firstBucketCellDate.textContent).toBe('2020-04-19 16:15:29');
     const secondRow = rows[1];
     const secondRowCells = secondRow.getElementsByClassName('td');
     const secondBucketCellLink = secondRowCells[0];
@@ -92,9 +89,7 @@ describe.skip('BucketList', () => {
       's3c-ring / Scality RING with S3 Connector',
     );
     expect(secondBucketCellAsyncNotification.textContent).toBe('Active');
-    expect(secondBucketCellDate.textContent).toBe(
-      formatShortDate(new Date(buckets.get(1).CreationDate)),
-    );
+    expect(secondBucketCellDate.textContent).toBe('2020-04-19 16:15:29');
   });
   it('should list buckets with the data associated when XDM feature is disabled', () => {
     const { component } = reduxRender(
@@ -139,9 +134,7 @@ describe.skip('BucketList', () => {
     expect(firstBucketCellLocation.textContent).toBe(
       'us-east-1 / Local Filesystem',
     );
-    expect(firstBucketCellDate.textContent).toBe(
-      formatShortDate(new Date(buckets.get(0).CreationDate)),
-    );
+    expect(firstBucketCellDate.textContent).toBe('2020-04-19 16:15:29');
     const secondRow = rows[1];
     const secondRowCells = secondRow.getElementsByClassName('td');
     const secondBucketCellLink = secondRowCells[0];
@@ -151,9 +144,7 @@ describe.skip('BucketList', () => {
     expect(secondBucketCellLocation.textContent).toBe(
       's3c-ring / Scality RING with S3 Connector',
     );
-    expect(secondBucketCellDate.textContent).toBe(
-      formatShortDate(new Date(buckets.get(1).CreationDate)),
-    );
+    expect(secondBucketCellDate.textContent).toBe('2020-04-19 16:15:29');
   });
   it('should select row if the bucket name specified in the parameter matches one of the bucket names listed', () => {
     const { component } = reduxRender(

diff --git a/src/react/databrowser/objects/details/ObjectRestorationButtonAndModal.tsx b/src/react/databrowser/objects/details/ObjectRestorationButtonAndModal.tsx
@@ -1,6 +1,7 @@
 import { ChangeEvent, useState } from 'react';
 import {
   Banner,
+  FormattedDateTime,
   Icon,
   Modal,
   PrettyBytes,
@@ -14,7 +15,6 @@ import { useSelector } from 'react-redux';
 import { AWSError } from 'aws-sdk';
 import { getClients } from '../../../utils/actions';
 import { AppState } from '../../../../types/state';
-import { formatShortDate } from '../../../utils';
 import { useTheme } from 'styled-components';
 import { ObjectMetadata } from '../../../../types/s3';
 
@@ -50,7 +50,10 @@ const ObjectRestorationButtonAndModal = ({
           <tr style={{ borderBottom: `1px solid ${theme.border}` }}>
             <td align="left">{objectMetadata.objectKey}</td>
             <td align="left">
-              {formatShortDate(new Date(objectMetadata.lastModified))}
+              <FormattedDateTime
+                value={new Date(objectMetadata.lastModified)}
+                format="date-time-second"
+              />
             </td>
             <td align="left">
               <PrettyBytes bytes={objectMetadata.contentLength} decimals={2} />

diff --git a/src/react/databrowser/objects/details/Properties.tsx b/src/react/databrowser/objects/details/Properties.tsx
@@ -13,7 +13,6 @@ import {
   Toggle,
 } from '@scality/core-ui';
 import { useEffect } from 'react';
-import { formatShortDate } from '../../../utils';
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
 import { putObjectLegalHold } from '../../../actions/s3object';
@@ -115,14 +114,20 @@ function Properties({ objectMetadata }: Props) {
               <T.Row>
                 <T.Key> Modified On </T.Key>
                 <T.Value>
-                  {formatShortDate(new Date(objectMetadata.lastModified))}{' '}
+                  <FormattedDateTime
+                    format="date-time-second"
+                    value={new Date(objectMetadata.lastModified)}
+                  />
                 </T.Value>
               </T.Row>
               {objectMetadata.expiration ? (
                 <T.Row>
                   <T.Key> Expires On </T.Key>
                   <T.Value>
-                    {formatShortDate(objectMetadata.expiration)}{' '}
+                    <FormattedDateTime
+                      format="date-time-second"
+                      value={new Date(objectMetadata.expiration)}
+                    />
                   </T.Value>
                 </T.Row>
               ) : (