refactor: update type definitions to use React 18 JSX runtime and imp…

…rove context imports

@mf-types/shell/App.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/src/FederatedApp';
+export { default } from './compiled-types/src/FederatedApp';

@mf-types/shell/compiled-types/src/alerts/AlertProvider.d.ts

@@ -9,4 +9,4 @@ import React from 'react';
 export default function AlertProvider({ alertManagerUrl, children, }: {
     alertManagerUrl: string;
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/alerts/alertContext.d.ts

@@ -1 +1 @@
-export declare const AlertContext: any;
+export declare const AlertContext: import("react").Context<any>;

@mf-types/shell/compiled-types/src/auth/AuthConfigProvider.d.ts

@@ -6,4 +6,4 @@ export declare const useAuthConfig: () => {
 };
 export declare function AuthConfigProvider({ children, }: {
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/auth/AuthProvider.d.ts

@@ -2,7 +2,7 @@ import { User } from 'oidc-client-ts';
 import React from 'react';
 export declare function AuthProvider({ children }: {
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export type UserData = {
     token: string;
     username: string;

@mf-types/shell/compiled-types/src/auth/FirstTimeLoginProvider.d.ts

@@ -4,4 +4,4 @@ export declare const useFirstTimeLogin: () => {
 };
 export declare function FirstTimeLoginProvider({ children, }: {
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/initFederation/ShellConfigProvider.d.ts

@@ -51,5 +51,5 @@ export declare const useShellConfig: () => ShellConfig;
 export declare const ShellConfigProvider: ({ shellConfigUrl, children }: {
     shellConfigUrl: any;
     children: any;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export {};

@mf-types/shell/compiled-types/src/initFederation/ShellHistoryProvider.d.ts

@@ -1,4 +1,4 @@
-export declare const useShellHistory: () => import("history").History<unknown>;
+export declare const useShellHistory: () => import("react-router").NavigateFunction;
 export declare const ShellHistoryProvider: ({ children }: {
     children: any;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/initFederation/ShellThemeSelectorProvider.d.ts

@@ -13,5 +13,5 @@ export declare function useShellThemeSelector(): ThemeContextValues;
 export declare function ShellThemeSelectorProvider({ children, }: {
     children: (theme: CoreUITheme, themeName: ThemeMode) => React.ReactNode;
     onThemeChanged?: (evt: CustomEvent) => void;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

@mf-types/shell/compiled-types/src/initFederation/UIListProvider.d.ts

@@ -13,4 +13,4 @@ export declare const useDeployedApps: (selectors?: {
 export declare const UIListProvider: ({ children, discoveryURL, }: {
     children: React.ReactNode;
     discoveryURL: string;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/navbar/InstanceName.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { UserData } from '../auth/AuthProvider';
-export declare const InstanceNameProvider: ({ children }: PropsWithChildren<{}>) => JSX.Element;
+export declare const InstanceNameProvider: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;
 export declare const useInstanceName: () => string;
 export declare const useInstanceNameAdapter: () => {
     remoteEntryUrl: string;
@@ -14,5 +14,5 @@ export declare const _InternalInstanceName: ({ moduleExports, }: {
             setInstanceName: (userData: UserData | undefined, name: string) => Promise<void>;
         };
     };
-}) => JSX.Element;
-export declare const InstanceName: () => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const InstanceName: () => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/navbar/NavBar.d.ts

@@ -3,7 +3,7 @@ import { ViewDefinition } from '../initFederation/ConfigurationProviders';
 import type { Link as TypeLink } from './navbarHooks';
 export declare const LoadingNavbar: ({ logo }: {
     logo: string;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useNavbarLinksToActions: (links: TypeLink[]) => {
     link: TypeLink;
     selected: boolean;
@@ -17,4 +17,4 @@ export declare const Navbar: ({ logo, canChangeLanguage, canChangeTheme, childre
     canChangeTheme?: boolean;
     providerLogout?: boolean;
     children?: React.ReactNode;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/navbar/NavbarUpdaterComponents.d.ts

@@ -1 +1 @@
-export declare const NavbarUpdaterComponents: () => JSX.Element;
+export declare const NavbarUpdaterComponents: () => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/navbar/NotificationCenter.d.ts

@@ -1,2 +1,2 @@
-declare const NotificationCenter: () => JSX.Element;
+declare const NotificationCenter: () => import("react/jsx-runtime").JSX.Element;
 export default NotificationCenter;

@mf-types/shell/compiled-types/src/navbar/SleepingNotificationBell.d.ts

@@ -1 +1 @@
-export declare const SleepingNotificationBell: () => JSX.Element;
+export declare const SleepingNotificationBell: () => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/navbar/index.d.ts

@@ -3,4 +3,4 @@ import './library';
 export type SolutionsNavbarProps = {
     children?: React.ReactNode;
 };
-export declare const SolutionsNavbar: ({ children }: SolutionsNavbarProps) => JSX.Element;
+export declare const SolutionsNavbar: ({ children }: SolutionsNavbarProps) => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/navbar/lang.d.ts

@@ -10,5 +10,5 @@ export declare function LanguageProvider({ children, canChangeLanguage, onLangua
     children: React.ReactNode;
     canChangeLanguage?: boolean;
     onLanguageChanged?: (evt: CustomEvent) => void;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

@mf-types/shell/compiled-types/src/navbar/navbarContext.d.ts

@@ -1,2 +1,3 @@
+import type { Navbar } from './navbarHooks';
 import './navbarHooks';
-export declare const NavbarContext: any;
+export declare const NavbarContext: import("react").Context<Navbar>;

@mf-types/shell/lang.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/src/navbar/lang';
+export { default } from './compiled-types/src/navbar/lang';

@mf-types/shell/useNotificationCenter.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/src/useNotificationCenter';
+export { default } from './compiled-types/src/useNotificationCenter';

build_ts/.dev-server/compiled-types/src/react/ShellHooksContext.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { ShellAlerts, ShellHooks } from '../@mf-types/shell/compiled-types/src/hooks/useShellHooks';
+import { ShellAlerts, ShellHooks } from 'shell/compiled-types/src/hooks/useShellHooks';
 type Listener = () => void;
 export declare const shellHooksStore: {
     getShellHooks: () => any;

src/react/FederableApp.tsx

@@ -15,9 +15,11 @@ import MetricsAdapterProvider from './next-architecture/ui/MetricsAdapterProvide
 import React, { useEffect, useMemo } from 'react';
 import { XCoreLibraryProvider } from './next-architecture/ui/XCoreLibraryProvider';
 import zenkoUIReducer from './reducers';
-import { ShellHooksProvider } from './ShellHooksContext';
+import {
+  ShellHooksProvider,
+  useBasenameRelativeNavigate,
+} from './ShellHooksContext';
 import { FederatedAppProps } from 'shell/compiled-types/src/FederatedApp';
-import { useNavigate } from './utils/useNavigate';
 
 //@ts-expect-error fix this when you are working on it
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
@@ -38,7 +40,7 @@ export const InternalRouter = ({ children }: { children: React.ReactNode }) => {
 };
 
 const HistoryPushEventListener = () => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   useEffect(() => {
     const listener = (event: CustomEvent) => {
       const path = event.detail.path;

src/react/Routes.tsx

@@ -14,7 +14,6 @@ import {
   Routes,
   matchPath,
   useLocation,
-  useNavigate,
 } from 'react-router-dom';
 import { useTheme } from 'styled-components';
 import makeMgtClient from '../js/managementClient';
@@ -43,6 +42,7 @@ import AccountContent from './account/AccountContent';
 import BucketCreate from './databrowser/buckets/BucketCreate';
 import DataBrowser from './databrowser/DataBrowser';
 import LocationEditor from './locations/LocationEditor';
+import { useBasenameRelativeNavigate } from './ShellHooksContext';
 
 export const RemoveTrailingSlash = ({ ...rest }) => {
   const location = useLocation();
@@ -192,7 +192,7 @@ function InternalRoutes() {
   const theme = useTheme();
   const { isStorageManager } = useAuthGroups();
   const config = useConfig();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
 
   const doesRouteMatch = useCallback(
     (paths: string | string[]) => {

src/react/ShellHooksContext.tsx

@@ -1,4 +1,6 @@
+import { useCurrentApp } from '@scality/module-federation';
 import { FC, ReactNode, useMemo, useSyncExternalStore } from 'react';
+import { NavigateOptions, To, useNavigate } from 'react-router-dom';
 import {
   ShellAlerts,
   ShellHooks,
@@ -97,3 +99,14 @@ export const ShellHooksProvider: FC<{
   }, [shellHooks, shellAlerts]);
   return <>{children}</>;
 };
+
+export const useBasenameRelativeNavigate = () => {
+  const originalNavigate = useNavigate();
+  const { appHistoryBasePath } = useCurrentApp();
+
+  const navigate = (to: To, options?: NavigateOptions) => {
+    return originalNavigate(`${appHistoryBasePath}${to}`, options);
+  };
+
+  return navigate;
+};

src/react/account/AccountDetails.tsx

@@ -11,7 +11,7 @@ import {
   Route,
   Routes,
   useLocation,
-  useNavigate,
+  useBasenameRelativeNavigate,
   useParams,
 } from 'react-router-dom';
 import styled, { useTheme } from 'styled-components';
@@ -556,7 +556,7 @@ function Tabs({
   ...rest
 }: TabsProps) {
   const location = useLocation();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const url = location.pathname;
   const [selectedTabIndex, setSelectedTabIndex] = useState<
     number | null | undefined

src/react/account/AccountList.tsx

@@ -7,7 +7,6 @@ import {
 } from '@scality/core-ui';
 import { Button, Table } from '@scality/core-ui/dist/next';
 import React, { useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { CellProps, CoreUIColumn } from 'react-table';
 import { Account } from '../next-architecture/domain/entities/account';
 
@@ -22,6 +21,7 @@ import { useMetricsAdapter } from '../next-architecture/ui/MetricsAdapterProvide
 import { getDataUsedColumn } from '../next-architecture/ui/metrics/DataUsedColumn';
 import { TableHeaderWrapper } from '../ui-elements/Table';
 import { useAuthGroups } from '../utils/hooks';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 function useAutoAssumeRoleUponAccountDeletion({
   accounts,
@@ -38,13 +38,13 @@ function useAutoAssumeRoleUponAccountDeletion({
 }
 
 function AccountList({ accounts }: { accounts: Account[] }) {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const { features } = useConfig();
   const { isStorageManager } = useAuthGroups();
   useAutoAssumeRoleUponAccountDeletion({ accounts });
 
   const nameCell = ({ value, row }: CellProps<Account, string>) => {
-    const navigate = useNavigate();
+    const navigate = useBasenameRelativeNavigate();
     const setRole = useSetAssumedRole();
     if (!row.original.canManageAccount) {
       return <>{value}</>;

src/react/account/AccountPoliciesList.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { Box, Button, CopyButton } from '@scality/core-ui/dist/next';
 import { useIAMClient } from '../IAMProvider';
 
@@ -22,6 +21,7 @@ import { ApiError } from '../../types/actions';
 import { AWS_PAGINATED_ENTITIES } from '../utils/IAMhooks';
 import { ListPoliciesResponse, Policy } from 'aws-sdk/clients/iam';
 import { CoreUIColumn } from 'react-table';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 const EditButton = ({
   policyName,
@@ -36,7 +36,7 @@ const EditButton = ({
   policyArn: string;
   defaultVersionId: string;
 }) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
 
   const IAMClient = useIAMClient();
   const { data, status } = useQuery(
@@ -125,7 +125,7 @@ const AttachButton = ({
   policyArn: string;
   accountName: string;
 }) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   return (
     <Button
       size="inline"
@@ -323,7 +323,7 @@ type InternalPolicy = {
 };
 
 const AccountPoliciesList = ({ accountName }: { accountName: string }) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const getQuery = (IAMClient?: IAMClient | null) =>
     getListPoliciesQuery(notFalsyTypeGuard(accountName), IAMClient);
   const getEntitiesFromResult = (data?: ListPoliciesResponse) =>

src/react/account/AccountRoleSelectButtonAndModal.tsx

@@ -10,7 +10,7 @@ import {
   useSetAssumedRole,
 } from '../DataServiceRoleProvider';
 import { AccountSelectorButton } from '../ui-elements/Table';
-import { useNavigate } from '../utils/useNavigate';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 function AccountRoleList({ accountsWithRoles, onRowSelected }) {
   const { roleArn } = useDataServiceRole();
@@ -190,7 +190,7 @@ const ModalFooter = ({
   roleArn,
   assumedAccount,
 }) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const location = useLocation();
 
   return (

src/react/account/AccountUpdateUser.tsx

@@ -17,10 +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 { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { notFalsyTypeGuard } from '../../types/typeGuards';
 import { ListUsersResponse } from 'aws-sdk/clients/iam';
 import { getListUsersQuery } from '../queries';
+import { useNavigate } from 'react-router-dom';
 const regexpName = /^[\w+=,.@ -]+$/;
 const schema = Joi.object({
   name: Joi.string()

src/react/account/AccountUserAccessKeys.tsx

@@ -27,7 +27,7 @@ import {
   useAwsPaginatedEntities,
 } from '../utils/IAMhooks';
 import AccountUserSecretKeyModal from './AccountUserSecretKeyModal';
-import { useNavigate } from '../utils/useNavigate';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 const CreatedOnCell = (rowValue) => {
   const outdatedAlert = useAccessKeyOutdatedStatus(rowValue);
@@ -155,7 +155,7 @@ const AccountUserAccessKeys = () => {
   const { IAMUserName } = useParams<{
     IAMUserName: string;
   }>();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const IAMClient = useIAMClient();
   const { data: accessKeysResult, status: accessKeysStatus } =
     useAwsPaginatedEntities(

src/react/account/AccountUserList.tsx

@@ -1,5 +1,4 @@
 import { useMemo, useState } from 'react';
-import { useNavigate } 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 { useIAMClient } from '../IAMProvider';
@@ -25,6 +24,7 @@ import { ApiError } from '../../types/actions';
 import { User } from 'aws-sdk/clients/iam';
 import { FormattedDateTime, Icon, spacing } from '@scality/core-ui';
 import { Row } from 'react-table';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 
 type InternalUser = {
   userName: string;
@@ -36,7 +36,7 @@ type InternalUser = {
 
 const AsyncRenderAccessKey = ({ userName }: { userName: string }) => {
   const IAMClient = useIAMClient();
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const { data: accessKeysResult, status: userAccessKeyStatus } =
     useAwsPaginatedEntities(
       getUserAccessKeysQuery(userName, IAMClient),
@@ -99,7 +99,7 @@ const renderAccessKeyComponent = ({ row }) => (
 );
 
 const EditButton = ({ userName }: { userName: string }) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   return (
     <Button
       size="inline"
@@ -118,7 +118,7 @@ const AttachButton = ({
   userName: string;
   accountName: string;
 }) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   return (
     <Button
       size="inline"
@@ -267,7 +267,7 @@ const DeleteUserAction = ({
 };
 
 const AccountUserList = ({ accountName }: { accountName?: string }) => {
-  const navigate = useNavigate();
+  const navigate = useBasenameRelativeNavigate();
   const listUsersQuery = (IAMClient?: IAMClient | null) =>
     getListUsersQuery(notFalsyTypeGuard(accountName), IAMClient);
   const getEntitiesFromResult = (page) => page.Users;