Merge branch 'improvement/ARTESCA-6720-date-format' into q/2.2

scality · May 7, 2024 · 43aba62 · 43aba62
2 parents 572ce97 + 0c5ccf5
commit 43aba62
Show file tree

Hide file tree

Showing 17 changed files with 174 additions and 140 deletions.
diff --git a/src/react/account/AccountList.tsx b/src/react/account/AccountList.tsx
@@ -4,8 +4,13 @@ import styled from 'styled-components';
 import { spacing } from '@scality/core-ui/dist/style/theme';
 import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
 import { Table } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
-import { formatSimpleDate } from '../utils';
-import { ConstrainedText, Icon, Link, Stack } from '@scality/core-ui';
+import {
+  ConstrainedText,
+  FormattedDateTime,
+  Icon,
+  Link,
+  Stack,
+} from '@scality/core-ui';
 import { Account } from '../next-architecture/domain/entities/account';
 import { CellProps, CoreUIColumn } from 'react-table';
 import {
@@ -70,10 +75,6 @@ function AccountList({ accounts }: { accounts: Account[] }) {
     );
   };
 
-  const createDateCell = ({ value }: CellProps<Account, string>) => {
-    return <div>{formatSimpleDate(new Date(value))}</div>;
-  };
-
   const columns: CoreUIColumn<Account>[] = React.useMemo(() => {
     const dataUsedColumn = getDataUsedColumn(
       (account: Account) => {
@@ -103,7 +104,12 @@ function AccountList({ accounts }: { accounts: Account[] }) {
           textAlign: 'right',
           minWidth: '7rem',
         },
-        Cell: (value: CellProps<Account, string>) => createDateCell(value),
+        Cell: ({ value }: CellProps<Account, string>) => (
+          <FormattedDateTime
+            format="date-time-second"
+            value={new Date(value)}
+          />
+        ),
       },
       ...(isStorageManager ? additionalStorageManagerColumns : []),
     ];

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/AccountUserAccessKeys.tsx b/src/react/account/AccountUserAccessKeys.tsx
@@ -1,8 +1,16 @@
-import { AppContainer, Banner, Stack, Toggle, Tooltip } from '@scality/core-ui';
-import { Icon } from '@scality/core-ui/dist/components/icon/Icon.component';
-import { TextBadge } from '@scality/core-ui/dist/components/textbadge/TextBadge.component';
-import { Box, Button, Table } from '@scality/core-ui/dist/next';
-import { spacing } from '@scality/core-ui/dist/style/theme';
+import {
+  AppContainer,
+  Banner,
+  FormattedDateTime,
+  Stack,
+  Toggle,
+  Tooltip,
+  Wrap,
+  Icon,
+  TextBadge,
+  spacing,
+} from '@scality/core-ui';
+import { Box, Button, CopyButton, Table } from '@scality/core-ui/dist/next';
 import { useMemo, useState } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import {
@@ -17,7 +25,6 @@ import styled from 'styled-components';
 import { useIAMClient } from '../IAMProvider';
 import { getUserAccessKeysQuery } from '../queries';
 import { BreadcrumbAccount } from '../ui-elements/Breadcrumb';
-import { Clipboard } from '../ui-elements/Clipboard';
 import DeleteConfirmation from '../ui-elements/DeleteConfirmation';
 import { TitleRow as TableHeader } from '../ui-elements/TableKeyValue';
 import { formatSimpleDate } from '../utils';
@@ -35,7 +42,7 @@ const CustomIcon = styled.i`
 const CreatedOnCell = (rowValue) => {
   const outdatedAlert = useAccessKeyOutdatedStatus(rowValue);
   return (
-    <div>
+    <Box gap={spacing.r4} justifyContent="right">
       {outdatedAlert ? (
         <Tooltip
           overlay={outdatedAlert}
@@ -46,8 +53,13 @@ const CreatedOnCell = (rowValue) => {
           <Icon name="Exclamation-circle" color="statusWarning" />
         </Tooltip>
       ) : null}
-      {rowValue.createdOn}
-    </div>
+      {
+        <FormattedDateTime
+          format="date-time"
+          value={new Date(rowValue.createdOn)}
+        />
+      }
+    </Box>
   );
 };
 
@@ -91,14 +103,9 @@ const ToggleAccessKeyStatus = (rowValue) => {
 const AccessKeysCell = (rowValue) => {
   const { accessKey } = rowValue;
   return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-      }}
-    >
-      {accessKey} <Clipboard text={accessKey} />
-    </div>
+    <Wrap alignItems="center">
+      {accessKey} <CopyButton textToCopy={accessKey} />
+    </Wrap>
   );
 };
 
@@ -196,15 +203,15 @@ const AccountUserAccessKeys = () => {
       cellStyle: {
         minWidth: '10rem',
         textAlign: 'right',
-        paddingRight: spacing.sp32,
+        paddingRight: spacing.r32,
       },
     },
     {
       Header: 'Status',
       accessor: 'status',
       cellStyle: {
         textAlign: 'left',
-        marginRight: spacing.sp32,
+        marginRight: spacing.r32,
       },
       Cell: (value) => ToggleAccessKeyStatus(value.row.original),
     },
@@ -231,7 +238,7 @@ const AccountUserAccessKeys = () => {
               variant={'statusWarning'}
               //@ts-expect-error fix this when you are working on it
               text={accessKeysResultLength}
-              style={{ marginLeft: spacing.sp8 }}
+              style={{ marginLeft: spacing.r8 }}
             />
           </Box>
           <Banner
@@ -240,7 +247,7 @@ const AccountUserAccessKeys = () => {
                 style={{
                   display: 'flex',
                   alignItems: 'center',
-                  marginLeft: spacing.sp8,
+                  marginLeft: spacing.r8,
                 }}
               >
                 <Icon

diff --git a/src/react/account/AccountUserList.tsx b/src/react/account/AccountUserList.tsx
@@ -3,7 +3,6 @@ import { useHistory } from 'react-router-dom';
 import { Box, Button, CopyButton } from '@scality/core-ui/dist/next';
 import { TextBadge } from '@scality/core-ui/dist/components/textbadge/TextBadge.component';
 import { spacing } from '@scality/core-ui/dist/style/theme';
-import { formatSimpleDate } from '../utils';
 import { useIAMClient } from '../IAMProvider';
 import {
   AWS_PAGINATED_ENTITIES,
@@ -25,11 +24,12 @@ import { useDispatch } from 'react-redux';
 import { handleApiError, handleClientError } from '../actions';
 import { ApiError } from '../../types/actions';
 import { User } from 'aws-sdk/clients/iam';
-import { Icon } from '@scality/core-ui';
+import { FormattedDateTime, Icon } from '@scality/core-ui';
+import { Row } from 'react-table';
 
 type InternalUser = {
   userName: string;
-  createdOn: string;
+  createdOn: Date;
   accessKeys: string | null;
   arn: string;
   actions: null;
@@ -281,7 +281,7 @@ const AccountUserList = ({ accountName }: { accountName?: string }) => {
         queryResult.data?.map((user) => {
           return {
             userName: user.UserName,
-            createdOn: formatSimpleDate(user.CreateDate),
+            createdOn: user.CreateDate,
             accessKeys: null,
             arn: user.Arn,
             actions: null,
@@ -326,6 +326,11 @@ const AccountUserList = ({ accountName }: { accountName?: string }) => {
         textAlign: 'right',
         minWidth: '10%',
       },
+      Cell: ({ value }: { value: Date }) => (
+        <FormattedDateTime format="date-time" value={value} />
+      ),
+      sortType: (row1: Row<InternalUser>, row2: Row<InternalUser>) =>
+        row1.original.createdOn.getTime() - row2.original.createdOn.getTime(),
     }, // Table cell for all the actions (Copy ARN, Edit and Delete)
     {
       Header: '',

diff --git a/src/react/account/__tests__/AccountDetails.test.tsx b/src/react/account/__tests__/AccountDetails.test.tsx
@@ -5,7 +5,8 @@ import { _AuthContext, useAuth } from '../../next-architecture/ui/AuthProvider';
 const account1 = {
   arn: 'arn1',
   canonicalId: 'canonicalId1',
-  createDate: Date.parse('04 Jan 2000 05:12:00 GMT'),
+  CreationDate: Date.parse('04 Jan 2000 05:12:00 GMT'),
+  Roles: [],
   email: '[email protected]',
   id: '1',
   quotaMax: 1,
@@ -54,7 +55,6 @@ describe('AccountDetails', () => {
       };
     });
     const component = renderWithRouterMatch(
-      //@ts-expect-error fix this when you are working on it
       <AccountDetails account={account1} />,
       {
         route: '/accounts/bart',
@@ -70,7 +70,6 @@ describe('AccountDetails', () => {
   it('should render AccountDetails component without access keys for storage manager users', () => {
     //S
     const component = renderWithRouterMatch(
-      //@ts-expect-error fix this when you are working on it
       <AccountDetails account={account1} />,
       {
         route: '/accounts/bart',

diff --git a/src/react/account/__tests__/Accounts.test.tsx b/src/react/account/__tests__/Accounts.test.tsx
@@ -90,9 +90,7 @@ describe('Accounts', () => {
 
     expect(screen.getByText(TEST_ACCOUNT)).toBeInTheDocument();
 
-    expect(
-      screen.getByText(formatSimpleDate(new Date(TEST_ACCOUNT_CREATION_DATE))),
-    ).toBeInTheDocument();
+    expect(screen.getByText('2022-03-18 12:51:44')).toBeInTheDocument();
   });
 
   it('should list accounts display an error when retrieval of accounts failed', async () => {

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 { formatDate } from '../../../utils';
 import {
   useAccounts,
   useAuthGroups,
@@ -173,7 +172,12 @@ function AccountInfo({ account }: Props) {
           </T.Row>
           <T.Row>
             <T.Key> Creation Date </T.Key>
-            <T.Value> {formatDate(new Date(account.CreationDate))} </T.Value>
+            <T.Value>
+              <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() */}
           {/* <T.Row>

diff --git a/src/react/account/details/properties/AccountKeys.tsx b/src/react/account/details/properties/AccountKeys.tsx
@@ -8,10 +8,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Row } from 'react-table';
 import type { Account } from '../../../../types/account';
 import type { AppState } from '../../../../types/state';
-import { Banner, Icon, Wrap } from '@scality/core-ui';
-import { Button, Table } from '@scality/core-ui/dist/next';
-import { Clipboard } from '../../../ui-elements/Clipboard';
-import { formatShortDate } from '../../../utils';
+import { Banner, FormattedDateTime, Icon, Wrap } from '@scality/core-ui';
+import { Button, CopyButton, Table } from '@scality/core-ui/dist/next';
 import { spacing } from '@scality/core-ui/dist/style/theme';
 import styled from 'styled-components';
 import { useDataServiceRole } from '../../../DataServiceRoleProvider';
@@ -96,25 +94,14 @@ function AccountKeys({ account }: Props) {
         Header: 'Access key ID',
         accessor: 'access_key',
         cellStyle: {
-          flex: '0.25',
+          flex: '0.3',
         },
         Cell({ value: access_key }: { value: string }) {
           return (
-            <span
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-start',
-              }}
-            >
-              <EllipsisCell>{access_key}</EllipsisCell>
-              <div
-                style={{
-                  marginLeft: spacing.sp16,
-                }}
-              >
-                <Clipboard text={access_key} />
-              </div>
-            </span>
+            <Wrap style={{ alignItems: 'center' }}>
+              {access_key}
+              <CopyButton textToCopy={access_key} />
+            </Wrap>
           );
         },
       },
@@ -145,7 +132,9 @@ function AccountKeys({ account }: Props) {
         },
 
         Cell({ value }: { value: string }) {
-          return formatShortDate(new Date(value));
+          return (
+            <FormattedDateTime format="date-time" value={new Date(value)} />
+          );
         },
       },
       {
@@ -192,10 +181,7 @@ function AccountKeys({ account }: Props) {
       >
         {accessKeys && accessKeys.length > 0 && (
           <div data-testid="root-access-keys-banner">
-            <Banner
-              variant="danger"
-              icon={<Icon name="Exclamation-triangle" />}
-            >
+            <Banner variant="danger" icon={<Icon name="Exclamation-circle" />}>
               <>
                 Security Status: Root user Access keys give unrestricted access
                 to account resources. It is a best practice to delete root