refactor: update imports from 'react-router-dom' to 'react-router' fo…

…r improved consistency across components and enhance routing practices

jestSetupAfterEnv.tsx

@@ -2,12 +2,8 @@ import '@testing-library/jest-dom';
 import fetch from 'node-fetch';
 import { queryClient } from './src/react/utils/testUtil';
 
-import Enzyme from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import 'core-js/stable';
 
-Enzyme.configure({ adapter: new Adapter() });
-
 window.fetch = (url, ...rest) =>
   //@ts-expect-error fix this when you are working on it
   fetch(/^https?:/.test(url) ? url : new URL(url, 'http://localhost'), ...rest);
@@ -47,9 +43,6 @@ const shellHooks = {
   }),
 };
 
-// @ts-expect-error The type is wrong because we only mock what we need for the test
-window.shellHooks = shellHooks;
-
 // When testing that the upload api is effectively called
 // we are getting this error from MSW
 // error: TypeError [NetworkingError]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received an instance of Blob

package.json

@@ -39,17 +39,17 @@
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
     "@types/react-redux": "^7.1.23",
+    "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-window-infinite-loader": "^1.0.6",
+    "@types/redux-mock-store": "^1.5.0",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@welldone-software/why-did-you-render": "^4.0.5",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "cheerio": "^1.0.0-rc.3",
-    "enzyme": "^3.11.0",
     "eslint": "^8.10.0",
     "fs-extra": "^11.1.1",
     "identity-obj-proxy": "^3.0.0",
@@ -78,6 +78,7 @@
     "core-js": "^3.6.5",
     "downshift": "^6.1.7",
     "immutable": "^4.0.0-rc.12",
+    "lodash.isequal": "^4.5.0",
     "lodash.set": "^4.3.2",
     "luxon": "^2.3.0",
     "memoize-one": "^5.1.1",

src/react/DataServiceRoleProvider.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useMemo, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { noopBasedEventDispatcher, regexArn, useAccounts } from './utils/hooks';
 import { getRoleArnStored, setRoleArnStored } from './utils/localStorage';
 import { useMutation } from 'react-query';

src/react/FederableApp.tsx

@@ -1,7 +1,7 @@
 import { ToastProvider } from '@scality/core-ui';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import { Provider } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { applyMiddleware, compose, createStore } from 'redux';
 
 import thunk from 'redux-thunk';

src/react/NoMatch.tsx

@@ -1,5 +1,5 @@
 import { Icon } from '@scality/core-ui/dist/components/icon/Icon.component';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { Warning } from './ui-elements/Warning';
 
 function NoMatch() {

src/react/Routes.tsx

@@ -8,13 +8,7 @@ import {
 } from '@scality/core-ui';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  Navigate,
-  Route,
-  Routes,
-  matchPath,
-  useLocation,
-} from 'react-router-dom';
+import { Navigate, Route, Routes, matchPath, useLocation } from 'react-router';
 import { useTheme } from 'styled-components';
 import makeMgtClient from '../js/managementClient';
 import { AppState } from '../types/state';

src/react/ShellHooksContext.tsx

@@ -1,6 +1,6 @@
 import { useCurrentApp } from '@scality/module-federation';
 import { FC, ReactNode, useMemo, useSyncExternalStore } from 'react';
-import { NavigateOptions, To, useNavigate } from 'react-router-dom';
+import { NavigateOptions, To, useNavigate } from 'react-router';
 import {
   ShellAlerts,
   ShellHooks,

src/react/account/AccountContent.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes, useLocation, useParams } from 'react-router-dom';
+import { Route, Routes, useLocation, useParams } from 'react-router';
 import AccountDetails from './AccountDetails';
 import { BreadcrumbAccount } from '../ui-elements/Breadcrumb';
 import AccountCreateUser from './AccountCreateUser';

src/react/account/AccountCreate.tsx

@@ -12,7 +12,7 @@ import { Button, Input } from '@scality/core-ui/dist/next';
 import { MouseEventHandler } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { useCreateAccountMutation } from '../../js/mutations';
 import { useSetAssumedRole } from '../DataServiceRoleProvider';
 import { useAccountsLocationsAndEndpoints } from '../next-architecture/domain/business/accounts';

src/react/account/AccountCreateUser.tsx

@@ -22,7 +22,7 @@ import { useForm } from 'react-hook-form';
 import { useOutsideClick } from '../utils/hooks';
 import { useIAMClient } from '../IAMProvider';
 import { useMutation, InfiniteData, useQueryClient } from 'react-query';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 import { getListUsersQuery } from '../queries';
 import { notFalsyTypeGuard } from '../../types/typeGuards';
 import { CreateUserResponse, ListUsersResponse } from 'aws-sdk/clients/iam';

src/react/account/AccountDetails.tsx

@@ -1,6 +1,6 @@
 import { Icon } from '@scality/core-ui';
 import { Tabs } from '@scality/core-ui/dist/next';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router';
 import { useTheme } from 'styled-components';
 import { Account } from '../../types/account';
 import { Warning } from '../ui-elements/Warning';

src/react/account/AccountRoleSelectButtonAndModal.tsx

@@ -1,7 +1,7 @@
 import { Icon, Stack, Tooltip, Wrap } from '@scality/core-ui';
 import { Box, Button, Table } from '@scality/core-ui/dist/next';
 import { useMemo, useState } from 'react';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router';
 import {
   useCurrentAccount,
   useDataServiceRole,

src/react/account/AccountUpdateUser.tsx

@@ -17,11 +17,11 @@ import { useForm } from 'react-hook-form';
 import { useOutsideClick } from '../utils/hooks';
 import { useIAMClient } from '../IAMProvider';
 import { InfiniteData, useMutation, useQueryClient } from 'react-query';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { notFalsyTypeGuard } from '../../types/typeGuards';
 import { ListUsersResponse } from 'aws-sdk/clients/iam';
 import { getListUsersQuery } from '../queries';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 const regexpName = /^[\w+=,.@ -]+$/;
 const schema = Joi.object({
   name: Joi.string()

src/react/account/AccountUserAccessKeys.tsx

@@ -13,7 +13,7 @@ import {
 import { Box, Button, CopyButton, Table } from '@scality/core-ui/dist/next';
 import { useMemo, useState } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
-import { Route, useLocation, useParams } from 'react-router-dom';
+import { Route, useLocation, useParams } from 'react-router';
 import { Column } from 'react-table';
 import { useTheme } from 'styled-components';
 import { useIAMClient } from '../IAMProvider';

src/react/account/Accounts.tsx

@@ -6,7 +6,7 @@ import {
   Icon,
   Loader,
 } from '@scality/core-ui';
-import { Route, Routes, useLocation } from 'react-router-dom';
+import { Route, Routes, useLocation } from 'react-router';
 
 import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
 import { useListAccounts } from '../next-architecture/domain/business/accounts';

src/react/account/AwsPaginatedResourceTable.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { SearchInput, Tooltip, Wrap, spacing } from '@scality/core-ui';
 import { Box, Table } from '@scality/core-ui/dist/next';
 import { TableItemCount } from '@scality/core-ui/dist/components/tablev2/Search';

src/react/account/CreateAccountPolicy.tsx

@@ -3,14 +3,14 @@ import { useMutation, useQueryClient } from 'react-query';
 import { getListPoliciesQuery } from '../queries';
 import { useIAMClient } from '../IAMProvider';
 
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { handleApiError, handleClientError } from '../actions';
 import { useDispatch } from 'react-redux';
 import { ApiError } from '../../types/actions';
 import { CommonPolicyLayout } from './AccountEditCommonLayout';
 import { Input } from '@scality/core-ui/dist/components/inputv2/inputv2';
 import { MouseEvent } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 type PolicyFormValues = {
   policyName: string;
   policyDocument: string;

src/react/account/UpdateAccountPolicy.tsx

@@ -1,6 +1,6 @@
 import { useForm } from 'react-hook-form';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { useIAMClient } from '../IAMProvider';
 import {
   getListPoliciesQuery,

src/react/account/__tests__/AccountDetails.test.tsx

@@ -1,6 +1,5 @@
+import { mockShellHooks, renderWithRouterMatch } from '../../utils/testUtil';
 import AccountDetails from '../AccountDetails';
-import { renderWithRouterMatch } from '../../utils/testUtil';
-import { useShellHooks } from '../../ShellHooksContext';
 
 const account1 = {
   arn: 'arn1',
@@ -13,7 +12,7 @@ const account1 = {
   Name: 'bart',
 };
 
-const { useAuth } = useShellHooks();
+const useAuth = mockShellHooks.useAuth;
 
 describe('AccountDetails', () => {
   beforeEach(() => {

src/react/account/__tests__/Accounts.test.tsx

@@ -17,20 +17,20 @@ import {
   WrapperAsStorageManager,
   defaultUserData,
   mockOffsetSize,
+  mockShellHooks,
   reduxRender,
   renderWithRouterMatch,
   zenkoUITestConfig,
 } from '../../utils/testUtil';
 import Accounts from '../Accounts';
-import { useShellHooks } from '../../ShellHooksContext';
 
 const TEST_ACCOUNT =
   USERS.find((user) => user.id === '064609833007')?.userName ?? '';
 const TEST_ACCOUNT_CREATION_DATE =
   USERS.find((user) => user.id === '064609833007')?.createDate ?? '';
 const NO_ACCOUNT_MESSAGE = "You don't have any account yet.";
 
-const { useAuth } = useShellHooks();
+const useAuth = mockShellHooks.useAuth;
 
 const mockUseConfig = useConfig as jest.MockedFunction<typeof useConfig>;
 const mockUseAuth = useAuth as jest.MockedFunction<typeof useAuth>;
@@ -253,6 +253,7 @@ describe('Accounts', () => {
   });
 
   it('should hide Create Account Button for Storage Account Owner', async () => {
+    // @ts-expect-error
     mockUseAuth.mockImplementation(() => {
       return {
         userData: defaultUserData,
@@ -316,6 +317,7 @@ describe('Accounts', () => {
       };
     });
 
+    // @ts-expect-error
     mockUseAuth.mockImplementation(() => {
       return {
         userData: {

src/react/account/details/properties/__tests__/AccountInfo.test.tsx

@@ -7,6 +7,7 @@ import {
   renderWithRouterMatch,
   renderWithCustomRoute,
   zenkoUITestConfig,
+  mockShellHooks,
 } from '../../../../utils/testUtil';
 import AccountInfo from '../AccountInfo';
 import Table from '../../../../ui-elements/TableKeyValue';
@@ -15,10 +16,9 @@ import { setupServer } from 'msw/node';
 import { INSTANCE_ID } from '../../../../actions/__tests__/utils/testUtil';
 import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router';
 import { getConfigOverlay } from '../../../../../js/mock/managementClientMSWHandlers';
 import { debug } from 'jest-preview';
-import { useShellHooks } from '../../../../ShellHooksContext';
 
 const server = setupServer(
   getConfigOverlay(zenkoUITestConfig.managementEndpoint, INSTANCE_ID),
@@ -42,7 +42,7 @@ const account1 = {
 };
 const fakeToken = 'xxx-yyy-zzz-token';
 
-const { useAuth } = useShellHooks();
+const useAuth = mockShellHooks.useAuth;
 
 function testRow(rowWrapper, { key, value, extraCellComponent }) {
   testTableRow(T, rowWrapper, {
@@ -70,29 +70,23 @@ describe('AccountInfo', () => {
   });
 
   it('should render AccountInfo component', () => {
-    const { component } = reduxMount(<AccountInfo account={account1} />);
-    expect(component.find(Table)).toHaveLength(1);
-    const rows = component.find(T.Row);
-    // switched from 5 -> 3 because we hide the root user email and arn
+    reduxMount(<AccountInfo account={account1} />);
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+
+    const rows = screen.getAllByRole('row');
     expect(rows).toHaveLength(3);
-    const firstRow = rows.first();
-    testRow(firstRow, {
-      key: 'Account ID',
-      value: account1.id,
-      extraCellComponent: 'CopyButton',
-    });
-    const secondRow = rows.at(1);
-    testRow(secondRow, {
-      key: 'Name',
-      value: account1.Name,
-      extraCellComponent: 'CopyButton',
-    });
-    const thirdRow = rows.at(2);
-    testRow(thirdRow, {
-      key: 'Creation Date',
-      value: '',
-      extraCellComponent: undefined,
-    });
+
+    const firstRow = within(rows[0]).getAllByRole('cell');
+    expect(firstRow[0]).toHaveTextContent('Account ID');
+    expect(firstRow[1]).toHaveTextContent(account1.id);
+
+    const secondRow = within(rows[1]).getAllByRole('cell');
+    expect(secondRow[0]).toHaveTextContent('Name');
+    expect(secondRow[1]).toHaveTextContent(account1.Name);
+
+    const thirdRow = within(rows[2]).getAllByRole('cell');
+    expect(thirdRow[0]).toHaveTextContent('Creation Date');
   });
 
   it('should not be able to delete an account when not a storage manager', () => {
@@ -134,12 +128,8 @@ describe('AccountInfo', () => {
 
     renderWithCustomRoute(
       <Routes>
-        <Route path="/">
-          <AccountInfo account={account1} />
-        </Route>
-        <Route path="/accounts">
-          <div>Account Page</div>
-        </Route>
+        <Route path="/" element={<AccountInfo account={account1} />}></Route>
+        <Route path="/accounts" element={<div>Account Page</div>}></Route>
       </Routes>,
       '/',
       {

src/react/account/iamAttachment/AttachmentTabs.tsx

@@ -1,6 +1,6 @@
 import { Icon, Loader } from '@scality/core-ui';
 import { useReducer } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router';
 import { useTheme } from 'styled-components';
 import { useQuery } from 'react-query';
 import { useIAMClient } from '../../IAMProvider';

src/react/account/iamAttachment/Attachments.tsx

@@ -1,6 +1,6 @@
 import { BasicText, EmphaseText, LargerText } from '@scality/core-ui';
 import { useState } from 'react';
-import { matchPath, useParams, useLocation } from 'react-router-dom';
+import { matchPath, useParams, useLocation } from 'react-router';
 import styled from 'styled-components';
 import { useCurrentAccount } from '../../DataServiceRoleProvider';
 import { regexArn } from '../../utils/hooks';

src/react/databrowser/DataBrowser.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes, useLocation, useParams } from 'react-router-dom';
+import { Route, Routes, useLocation, useParams } from 'react-router';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { AppState } from '../../types/state';

src/react/databrowser/HeaderButtons.tsx

@@ -1,4 +1,4 @@
-import { matchPath, useLocation, useParams } from 'react-router-dom';
+import { matchPath, useLocation, useParams } from 'react-router';
 import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
 import { ButtonsContainer } from '../ui-elements/Container';
 import { listObjects } from '../actions/s3object';

src/react/databrowser/buckets/BucketCreate.tsx

@@ -23,7 +23,7 @@ import ObjectLockRetentionSettings, {
 import { XDM_FEATURE } from '../../../js/config';
 import { renderLocation } from '../../locations/utils';
 import { convertRemToPixels } from '@scality/core-ui/dist/utils';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import {
   useChangeBucketDefaultRetention,
   useChangeBucketVersionning,

src/react/databrowser/buckets/BucketList.tsx

@@ -8,7 +8,7 @@ import {
 import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
 import { Box, Button, Table } from '@scality/core-ui/dist/next';
 import { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { CoreUIColumn } from 'react-table';
 import { XDM_FEATURE } from '../../../js/config';
 import { WorkflowScheduleUnitState } from '../../../types/stats';