refactor: remove unused RemoteKeys type definition, update imports to…

… use useShellHooks for authentication, and enhance routing consistency with useLocation and useBasenameRelativeNavigate

src/react/FederableApp.tsx

@@ -54,7 +54,11 @@ const HistoryPushEventListener = () => {
   return <></>;
 };
 
-const FederableApp = (props: FederatedAppProps) => {
+const FederableApp = (props) => {
+  const { pathname } = useLocation();
+
+  console.log('path :', pathname);
+
   return (
     <ShellHooksProvider
       shellHooks={props.shellHooks}

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

@@ -1,6 +1,6 @@
 import AccountDetails from '../AccountDetails';
 import { renderWithRouterMatch } from '../../utils/testUtil';
-import { useAuth } from '../../next-architecture/ui/AuthProvider';
+import { useShellHooks } from '../../ShellHooksContext';
 
 const account1 = {
   arn: 'arn1',
@@ -13,6 +13,8 @@ const account1 = {
   Name: 'bart',
 };
 
+const { useAuth } = useShellHooks();
+
 describe('AccountDetails', () => {
   beforeEach(() => {
     //@ts-expect-error fix this when you are working on it

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

@@ -9,7 +9,6 @@ import {
   getStorageConsumptionMetricsHandlers,
 } from '../../../js/mock/managementClientMSWHandlers';
 import { INSTANCE_ID } from '../../actions/__tests__/utils/testUtil';
-import { useAuth } from '../../next-architecture/ui/AuthProvider';
 import { useConfig } from '../../next-architecture/ui/ConfigProvider';
 import { initialErrorsUIState } from '../../reducers/initialConstants';
 import {
@@ -23,13 +22,16 @@ import {
   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 mockUseConfig = useConfig as jest.MockedFunction<typeof useConfig>;
 const mockUseAuth = useAuth as jest.MockedFunction<typeof useAuth>;
 

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

@@ -14,11 +14,11 @@ import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { INSTANCE_ID } from '../../../../actions/__tests__/utils/testUtil';
 import { screen, waitFor, within } from '@testing-library/react';
-import { useAuth } from '../../../../next-architecture/ui/AuthProvider';
 import userEvent from '@testing-library/user-event';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { getConfigOverlay } from '../../../../../js/mock/managementClientMSWHandlers';
 import { debug } from 'jest-preview';
+import { useShellHooks } from '../../../../ShellHooksContext';
 
 const server = setupServer(
   getConfigOverlay(zenkoUITestConfig.managementEndpoint, INSTANCE_ID),
@@ -42,6 +42,8 @@ const account1 = {
 };
 const fakeToken = 'xxx-yyy-zzz-token';
 
+const { useAuth } = useShellHooks();
+
 function testRow(rowWrapper, { key, value, extraCellComponent }) {
   testTableRow(T, rowWrapper, {
     key,
@@ -131,14 +133,14 @@ describe('AccountInfo', () => {
     );
 
     renderWithCustomRoute(
-      <Switch>
-        <Route exact path="/">
+      <Routes>
+        <Route path="/">
           <AccountInfo account={account1} />
         </Route>
         <Route path="/accounts">
           <div>Account Page</div>
         </Route>
-      </Switch>,
+      </Routes>,
       '/',
       {
         instances: { selectedId: INSTANCE_ID },

src/react/account/iamAttachment/AttachmentTable.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useReducer, useRef, useState } from 'react';
-import { useCombobox } from 'downshift';
+import { useCombobox, UseComboboxStateChange } from 'downshift';
 import {
   AWS_PAGINATED_QUERY,
   useAwsPaginatedEntities,
@@ -268,9 +268,12 @@ export const AttachmentTable = <
   const searchInputRef = useRef<HTMLInputElement | null>(null);
 
   const onSelectedItemChange = useCallback(
-    ({ selectedItem }) => {
-      if (selectedItem) {
-        dispatch({ action: AttachmentAction.ADD, entity: selectedItem });
+    (changes: UseComboboxStateChange<AttachableEntity>) => {
+      if (changes.selectedItem) {
+        dispatch({
+          action: AttachmentAction.ADD,
+          entity: changes.selectedItem,
+        });
         if (resetRef.current) resetRef.current();
         if (searchInputRef.current) searchInputRef.current.blur();
       }

src/react/actions/__tests__/s3bucket.test.ts

@@ -85,7 +85,6 @@ describe.skip('s3bucket actions', () => {
     },
     {
       it: 'editDefaultRetention: should edit the default retention',
-      //@ts-expect-error fix this when you are working on it
       fn: actions.editDefaultRetention(BUCKET_NAME, {
         isDefaultRetentionEnabled: false,
       }),
@@ -97,7 +96,6 @@ describe.skip('s3bucket actions', () => {
     },
     {
       it: 'editDefaultRetention: should handle error',
-      //@ts-expect-error fix this when you are working on it
       fn: actions.editDefaultRetention(BUCKET_NAME, {
         isDefaultRetentionEnabled: false,
       }),

src/react/actions/s3bucket.ts

@@ -9,6 +9,7 @@ import { handleAWSClientError, handleAWSError } from './error';
 import { networkEnd, networkStart } from './network';
 import { getClients } from '../utils/actions';
 import { History } from 'history';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 export function getBucketInfoSuccess(
   info: BucketInfo,
@@ -65,12 +66,12 @@ export function toggleBucketVersioning(
 export function editDefaultRetention(
   bucketName: string,
   objectLockRetentionSettings: ObjectLockRetentionSettings,
-  history: History,
 ): ThunkStatePromisedAction {
   return async (dispatch, getState) => {
     // TODO: credentials expired => zenkoClient out of date => zenkoClient.createBucket error.
     const { zenkoClient } = getClients(getState());
     dispatch(networkStart('Editing bucket default retention'));
+    const navigate = useBasenameRelativeNavigate();
 
     try {
       await zenkoClient.putObjectLockConfiguration({

src/react/actions/s3object.ts

@@ -41,6 +41,7 @@ import { Marker, ZenkoClient } from '../../types/zenko';
 import { getClients } from '../utils/actions';
 import { newSearchListing } from '.';
 import { QueryClient } from 'react-query';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 export const UPLOADING_OBJECT = 'Uploading object(s)';
 export function listObjectsSuccess(
@@ -605,10 +606,10 @@ export function putObjectRetention(
   retentionMode: RetentionMode,
   retentionUntilDate: Date,
   accountName: string,
-  history: History,
 ): ThunkStatePromisedAction {
   return (dispatch, getState) => {
     const { zenkoClient } = getClients(getState());
+    const navigate = useBasenameRelativeNavigate();
     dispatch(networkStart('Editing object retention'));
     return zenkoClient
       .putObjectRetention(

src/react/databrowser/buckets/BucketCreate.tsx

@@ -281,7 +281,7 @@ function BucketCreate() {
                 (error &&
                   typeof error === 'object' &&
                   'message' in error &&
-                  error?.message) ||
+                  (error.message as string)) ||
                 'An unexpected error occurred.'}
             </Banner>
           )

src/react/databrowser/buckets/ObjectLockSetting.tsx

@@ -14,6 +14,7 @@ import ObjectLockRetentionSettings, {
 import { clearError, editDefaultRetention, getBucketInfo } from '../../actions';
 import { convertToBucketInfo } from '../../locations/utils';
 import { useBasenameRelativeNavigate } from '../../ShellHooksContext';
+import { RetentionMode } from '../../../types/s3';
 
 const schema = Joi.object(objectLockRetentionSettingsValidationRules);
 
@@ -80,16 +81,11 @@ export default function ObjectLockSetting() {
             years: retentionPeriod,
           };
     dispatch(
-      editDefaultRetention(
-        bucketName,
-        {
-          isDefaultRetentionEnabled,
-          //@ts-expect-error fix this when you are working on it
-          retentionMode,
-          retentionPeriod: retentionPeriodToSubmit,
-        },
-        history,
-      ),
+      editDefaultRetention(bucketName, {
+        isDefaultRetentionEnabled,
+        retentionMode: retentionMode as RetentionMode,
+        retentionPeriod: retentionPeriodToSubmit,
+      }),
     );
   };
 

src/react/databrowser/buckets/__tests__/Buckets.test.tsx

@@ -1,5 +1,5 @@
 import { List } from 'immutable';
-import router, { MemoryRouter, Redirect } from 'react-router-dom';
+import router, { MemoryRouter, Navigate } from 'react-router-dom';
 import { ACCOUNT } from '../../../actions/__tests__/utils/testUtil';
 import { reduxMount } from '../../../utils/testUtil';
 import Buckets from '../Buckets';
@@ -50,6 +50,6 @@ describe.skip('Buckets', () => {
         },
       },
     );
-    expect(component.find(Redirect)).toHaveLength(1);
+    expect(component.find(Navigate)).toHaveLength(1);
   });
 });

src/react/databrowser/objects/ObjectLockSetting.tsx

@@ -31,6 +31,7 @@ import {
 import { AppState } from '../../../types/state';
 import { useCurrentAccount } from '../../DataServiceRoleProvider';
 import { useBasenameRelativeNavigate } from '../../ShellHooksContext';
+import { RetentionMode } from '../../../types/s3';
 
 const Joi = JoiImport.extend(DateExtension);
 const objectLockRetentionSettingsValidationRules = {
@@ -126,11 +127,9 @@ export default function ObjectLockSetting() {
         bucketNameParam,
         objectKey,
         versionId,
-        //@ts-expect-error fix this when you are working on it
-        retentionMode,
-        DateTime.fromISO(retentionUntilDate).toSeconds(),
+        retentionMode as RetentionMode,
+        DateTime.fromISO(retentionUntilDate).toSeconds() as unknown as Date,
         account?.Name,
-        history,
       ),
     );
   };

src/react/endpoint/__tests__/AdvancedMetricsButton.test.tsx

@@ -3,10 +3,12 @@ import { renderWithRouterMatch } from '../../utils/testUtil';
 import { AuthorizedAdvancedMetricsButton } from '../AdvancedMetricsButton';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
-import { useAuth } from '../../next-architecture/ui/AuthProvider';
+import { useShellHooks } from '../../ShellHooksContext';
 
 const expectedBasePath = 'http://testurl';
 
+const { useAuth } = useShellHooks();
+
 const server = setupServer(
   rest.get(`http://localhost/config-shell.json`, (req, res, ctx) => {
     return res(

src/react/next-architecture/domain/business/accounts.test.tsx

@@ -302,7 +302,7 @@ const setUpTest = async ({
 }) => {
   const { renderAdditionalHook, waitForWrapperToBeReady } =
     prepareRenderMultipleHooks({
-      wrapper: NewWrapper(),
+      wrapper: NewWrapper() as unknown as JSX.Element,
     });
   await waitForWrapperToBeReady();
   const { waitFor, result: resultAccounts } = renderAdditionalHook(
@@ -433,7 +433,7 @@ describe('useAccountLatestUsedCapacity', () => {
     //E
     const { renderAdditionalHook, waitForWrapperToBeReady } =
       prepareRenderMultipleHooks({
-        wrapper: NewWrapper(),
+        wrapper: NewWrapper() as unknown as JSX.Element,
       });
     await waitForWrapperToBeReady();
     const { result } = renderAdditionalHook('accountMetrics', () =>

src/react/next-architecture/domain/business/buckets.test.tsx

@@ -107,7 +107,7 @@ describe('Buckets domain', () => {
 
     const { renderAdditionalHook, waitForWrapperToBeReady } =
       prepareRenderMultipleHooks({
-        wrapper: Wrapper,
+        wrapper: Wrapper as unknown as React.ReactNode,
       });
     await waitForWrapperToBeReady();
     //@ts-expect-error fix this when you are working on it
@@ -133,7 +133,7 @@ describe('Buckets domain', () => {
   ) => {
     if (!renderAdditionalHook) {
       const prepared = prepareRenderMultipleHooks({
-        wrapper: Wrapper,
+        wrapper: Wrapper as unknown as React.ReactNode,
       });
 
       renderAdditionalHook = prepared.renderAdditionalHook;
@@ -159,7 +159,7 @@ describe('Buckets domain', () => {
       : new MockedMetricsAdapter();
     if (!renderAdditionalHook) {
       const prepared = prepareRenderMultipleHooks({
-        wrapper: Wrapper,
+        wrapper: Wrapper as unknown as React.ReactNode,
       });
 
       renderAdditionalHook = prepared.renderAdditionalHook;

src/react/next-architecture/ui/AlertProvider.tsx

@@ -28,7 +28,7 @@ const AlertProvider = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <AlertsProvider alertManagerUrl={alertManagerUrl}>
-      {children}
+      {children as JSX.Element}
     </AlertsProvider>
   );
 };

src/react/ui-elements/Editor.tsx

@@ -2,6 +2,7 @@ import MonacoEditor, { EditorProps, loader } from '@monaco-editor/react';
 import React, { useMemo, useState } from 'react';
 
 import { useConfig } from '../next-architecture/ui/ConfigProvider';
+import { useShellHooks } from '../ShellHooksContext';
 
 type Props = {
   width?: string;
@@ -24,7 +25,8 @@ const Editor = ({
   const config = useConfig();
   const { basePath } = config;
   const [theme, setTheme] = useState('');
-  const { themeMode } = window.shellHooks.useShellThemeSelector();
+  const { useShellThemeSelector } = useShellHooks();
+  const { themeMode } = useShellThemeSelector();
 
   useMemo(() => {
     setTheme(themeMode === 'dark' ? 'vs-dark' : 'light');

src/react/ui-elements/Veeam/VeeamSummary.test.tsx

@@ -1,6 +1,5 @@
 import { Stepper } from '@scality/core-ui';
 import { render, screen } from '@testing-library/react';
-import { useAuth } from '../../next-architecture/ui/AuthProvider';
 import { FAKE_TOKEN, Wrapper, defaultUserData } from '../../utils/testUtil';
 import {
   ACCOUNT_SECTION_TITLE,
@@ -16,6 +15,7 @@ import {
   VEEAM_BACKUP_REPLICATION,
   VEEAM_DEFAULT_ACCOUNT_NAME,
 } from './VeeamConstants';
+import { useShellHooks } from '../../ShellHooksContext';
 
 jest.mock('../../next-architecture/ui/CertificateDownloadButton', () => ({
   CertificateDownloadButton: () => <button type="button">Download</button>,
@@ -28,6 +28,7 @@ jest.mock('./useGetS3ServicePoint', () => ({
   },
 }));
 
+const { useAuth } = useShellHooks();
 const mockUseAuth = useAuth as jest.MockedFunction<typeof useAuth>;
 
 const SERVICE_POINT = 's3.test.local';

src/react/utils/testUtil.tsx

@@ -176,7 +176,7 @@ export const zenkoUITestConfig = {
   navbarEndpoint: TEST_API_BASE_URL,
   stsEndpoint: TEST_API_BASE_URL,
 };
-export const Wrapper = ({ children }: { children: ReactNode }) => {
+export const Wrapper = ({ children }: { children: ReactNode }): ReactNode => {
   const role = {
     roleArn: TEST_ROLE_ARN,
   };

src/react/workflow/SourceBucketOption.tsx

@@ -49,7 +49,6 @@ export const SourceBucketSelect = (
     return (
       <>
         {props.value}
-        {/* @ts-expect-error fix this when you are working on it */}
         (<BucketLocationNameAndType bucketName={props.value} />)
       </>
     );