fix types

package.json

@@ -36,8 +36,8 @@
     "@types/jest": "^27.4.1",
     "@types/lodash.set": "^4.3.7",
     "@types/luxon": "^2.3.0",
-    "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.2",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.13",
     "@types/react-redux": "^7.1.23",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-window-infinite-loader": "^1.0.6",
@@ -68,7 +68,7 @@
     "@hookform/resolvers": "^2.8.8",
     "@monaco-editor/react": "^4.4.5",
     "@scality/core-ui": "^0.145.0",
-    "@scality/module-federation": "^1.3.3",
+    "@scality/module-federation": "^1.3.2",
     "@types/react-table": "^7.7.10",
     "@types/react-virtualized": "^9.21.20",
     "@types/react-window": "^1.8.5",

src/react/account/AccountList.tsx

@@ -47,7 +47,7 @@ function AccountList({ accounts }: { accounts: Account[] }) {
     const history = useHistory();
     const setRole = useSetAssumedRole();
     if (!row.original.canManageAccount) {
-      return value;
+      return <>{value}</>;
     }
 
     return (
@@ -97,7 +97,7 @@ function AccountList({ accounts }: { accounts: Account[] }) {
           textAlign: 'right',
           minWidth: '7rem',
         },
-        Cell: ({ value }: CellProps<Account, string>) => (
+        Cell: ({ value }: CellProps<Account, Date>) => (
           <FormattedDateTime
             format="date-time-second"
             value={new Date(value)}

src/react/account/AccountRoleSelectButtonAndModal.tsx

@@ -62,6 +62,7 @@ function AccountRoleList({ accountsWithRoles, onRowSelected }) {
   return (
     <div style={{ height: '25rem' }}>
       <Table
+        // @ts-expect-error fix this when you are working on it
         columns={columns}
         data={accountsWithRoles}
         defaultSortingKey={'accountName'}

src/react/account/iamAttachment/AttachmentTable.tsx

@@ -492,7 +492,7 @@ export const AttachmentTable = <
                 flex: 1,
               },
               Cell: ({ value }: { value?: boolean }) => {
-                return value ? 'Pending' : 'Attached';
+                return <>{value ? 'Pending' : 'Attached'}</>;
               },
             },
             {

src/react/databrowser/buckets/BucketList.tsx

@@ -9,9 +9,8 @@ import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.comp
 import { Box, Button, Table } from '@scality/core-ui/dist/next';
 import { useMemo } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import { CoreUIColumn } from 'react-table';
 import { XDM_FEATURE } from '../../../js/config';
-import { LocationName } from '../../../types/config';
+import { CellProps, CoreUIColumn } from 'react-table';
 import { WorkflowScheduleUnitState } from '../../../types/stats';
 import { useCurrentAccount } from '../../DataServiceRoleProvider';
 import { useBucketLatestUsedCapacity } from '../../next-architecture/domain/business/buckets';
@@ -24,6 +23,7 @@ import { TableHeaderWrapper } from '../../ui-elements/Table';
 import { useAuthGroups, useQueryParams } from '../../utils/hooks';
 import { getLocationIngestionState } from '../../utils/storageOptions';
 import { BucketLocationNameAndType } from '../../workflow/SourceBucketOption';
+import { PromiseResult } from '../../next-architecture/domain/entities/promise';
 
 const SEARCH_QUERY_PARAM = 'search';
 
@@ -59,8 +59,7 @@ export default function BucketList({
       {
         Header: 'Bucket Name',
         accessor: 'name',
-
-        Cell({ value: name }: { value: string }) {
+        Cell({ value: name }) {
           const history = useHistory();
           return (
             <ConstrainedText
@@ -91,7 +90,9 @@ export default function BucketList({
         accessor: 'locationConstraint',
 
         Cell({ row }) {
-          return BucketLocationNameAndType({ bucketName: row.original.name });
+          return (
+            <>{BucketLocationNameAndType({ bucketName: row.original.name })}</>
+          );
         },
 
         cellStyle: { width: 'unset', flex: '1.2' },
@@ -108,15 +109,15 @@ export default function BucketList({
           flex: '1',
           textAlign: 'right',
         },
-        Cell({ value: locationName }: { value: LocationName }) {
+        Cell({ value: locationName }) {
           const value = getLocationIngestionState(
             ingestionStates,
             locationName,
           ).value;
           if (value === '-') {
             return <EmptyCell mr={0} />;
           }
-          return value;
+          return <>{value}</>;
         },
       });
     }
@@ -137,7 +138,7 @@ export default function BucketList({
         paddingRight: spacing.r16,
         width: 'unset',
       },
-      Cell({ value }: { value: string }) {
+      Cell({ value }) {
         return (
           <FormattedDateTime
             format="date-time-second"

src/react/databrowser/buckets/details/Workflow.tsx

@@ -75,7 +75,8 @@ function Workflow({ bucketName }: { bucketName: string }) {
         textAlign: 'right',
         paddingRight: spacing.r16,
       },
-      Cell: ({ value }: { value: boolean }) => (value ? 'Active' : 'Inactive'),
+      Cell: ({ value }: { value: boolean }) =>
+        value ? <>{'Active'}</> : <>{'Inactive'}</>,
       width: 0,
     },
   ];

src/react/ui-elements/EmptyBucket/EmptyBucketSummaryList.tsx

@@ -3,22 +3,28 @@ import { Table } from '@scality/core-ui/dist/components/tablev2/Tablev2.componen
 import { useMemo } from 'react';
 import { maybePluralize } from '../../utils';
 import { DELETE_FAILED, DELETE_SUCCESS, TOTAL_ATTEMPTS } from './constants';
-import { DeleteSummary, ErrorsListData, TableDeleteSummaryData } from './types';
+import {
+  DeleteSummary,
+  ErrorsList,
+  ErrorsListData,
+  TableDeleteSummaryData,
+} from './types';
 import { getUniqueErrorMessages } from './utils';
+import { CoreUIColumn } from 'react-table';
 
 type EmptyBucketSummaryListProps = {
   summaryData: DeleteSummary[];
 };
 
-const ErrorsTable = (messages: string[]) => {
-  const messagesColumns = [
+const ErrorsTable = ({ messages }: { messages: string[] }) => {
+  const messagesColumns: CoreUIColumn<ErrorsList>[] = [
     {
       Header: 'Error Message',
       accessor: 'message',
       cellStyle: {
         minWidth: '8rem',
       },
-      Cell({ value }: { value: string }) {
+      Cell({ value }) {
         return <Text>{value}</Text>;
       },
     },
@@ -28,7 +34,7 @@ const ErrorsTable = (messages: string[]) => {
       cellStyle: {
         minWidth: '8rem',
       },
-      Cell({ value }: { value: number }) {
+      Cell({ value }) {
         return <Text>{value}</Text>;
       },
     },
@@ -70,15 +76,15 @@ const SummaryCell = (
           color={isFailed ? 'statusCritical' : 'statusHealthy'}
         />
         <BasicText>{text}</BasicText>
-        {messages?.length ? ErrorsTable(messages) : null}
+        {messages?.length ? <ErrorsTable messages={messages} /> : null}
       </Stack>
     );
   }
 
   return <BasicText>{text}</BasicText>;
 };
 
-const useCreateDeleteSummaryColumns = () =>
+const useCreateDeleteSummaryColumns = (): CoreUIColumn<DeleteSummary>[] =>
   useMemo(
     () => [
       {
@@ -87,7 +93,7 @@ const useCreateDeleteSummaryColumns = () =>
         cellStyle: {
           minWidth: '12rem',
         },
-        Cell({ value }: { value: number }) {
+        Cell({ value }) {
           return SummaryCell(value);
         },
       },
@@ -97,7 +103,7 @@ const useCreateDeleteSummaryColumns = () =>
         cellStyle: {
           minWidth: '12rem',
         },
-        Cell({ value }: { value: number }) {
+        Cell({ value }) {
           return SummaryCell(value, false, true);
         },
       },
@@ -107,7 +113,7 @@ const useCreateDeleteSummaryColumns = () =>
         cellStyle: {
           minWidth: '12rem',
         },
-        Cell({ value }: { value: { nbErrors: number; messages?: string[] } }) {
+        Cell({ value }) {
           return SummaryCell(value.nbErrors, true, true, value.messages);
         },
       },

src/react/workflow/WorkflowList.tsx

@@ -89,8 +89,8 @@ function WorkflowList({ workflows, workflowId }: Props) {
       sortType: (row1: Row<Workflow>, row2: Row<Workflow>) => {
         return `${row1.original.state}` < `${row2.original.state}` ? 1 : -1;
       },
-      Cell: function ({ value }: { value: boolean }): string {
-        return value ? 'Active' : 'Inactive';
+      Cell: function ({ value }: { value: boolean }): JSX.Element {
+        return value ? <>{'Active'}</> : <>{'Inactive'}</>;
       },
     },
   ];