Improvement/artesca 10990 expose account role selector with module federation

.jest-setup.js

@@ -4,3 +4,6 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
 Enzyme.configure({ adapter: new Adapter() });
+HTMLCanvasElement.prototype.getContext = () => {
+  // return whatever getContext has to return
+};

package.json

@@ -71,7 +71,7 @@
     "@hapi/joi-date": "^2.0.1",
     "@hookform/resolvers": "^2.8.8",
     "@monaco-editor/react": "^4.4.5",
-    "@scality/core-ui": "0.121.0",
+    "@scality/core-ui": "0.122.0",
     "@scality/module-federation": "github:scality/module-federation#1.1.0",
     "@types/react-table": "^7.7.10",
     "@types/react-virtualized": "^9.21.20",

src/react/DataServiceRoleProvider.tsx

@@ -5,6 +5,7 @@ import { getRoleArnStored, setRoleArnStored } from './utils/localStorage';
 import { useMutation } from 'react-query';
 import {
   S3ClientProvider,
+  S3ClientWithoutReduxProvider,
   useAssumeRoleQuery,
   useS3ConfigFromAssumeRoleResult,
 } from './next-architecture/ui/S3ClientProvider';
@@ -94,7 +95,18 @@ export const useCurrentAccount = () => {
   };
 };
 
-const DataServiceRoleProvider = ({ children }: { children: JSX.Element }) => {
+const DataServiceRoleProvider = ({
+  children,
+  /**
+   * DoNotChangePropsWithRedux is a static props.
+   * When set, it must not be changed, otherwise it will break the hook rules.
+   * To be removed when we remove redux.
+   */
+  DoNotChangePropsWithRedux = true,
+}: {
+  children: JSX.Element;
+  DoNotChangePropsWithRedux?: boolean;
+}) => {
   const [role, setRoleState] = useState<{ roleArn: string }>({
     roleArn: '',
   });
@@ -121,7 +133,7 @@ const DataServiceRoleProvider = ({ children }: { children: JSX.Element }) => {
     const storedRole = getRoleArnStored();
     if (accountName) {
       const account = accounts.find((account) => account.Name === accountName);
-      if (account) {
+      if (account && !role.roleArn) {
         setRoleState({ roleArn: account?.Roles[0].Arn });
       }
     } else if (!role.roleArn && storedRole && accounts.length) {
@@ -138,6 +150,7 @@ const DataServiceRoleProvider = ({ children }: { children: JSX.Element }) => {
     } else if (!storedRole && !role.roleArn && accounts.length) {
       setRoleState({ roleArn: accounts[0].Roles[0].Arn });
     }
+
     if (role.roleArn) {
       assumeRoleMutation.mutate(role.roleArn);
     }
@@ -171,8 +184,25 @@ const DataServiceRoleProvider = ({ children }: { children: JSX.Element }) => {
     return <Loader>Loading...</Loader>;
   }
 
+  if (DoNotChangePropsWithRedux) {
+    return (
+      <S3ClientProvider configuration={getS3Config(assumedRole)}>
+        <_DataServiceRoleContext.Provider
+          value={{
+            role,
+            setRole,
+            setRolePromise,
+            assumedRole,
+          }}
+        >
+          {children}
+        </_DataServiceRoleContext.Provider>
+      </S3ClientProvider>
+    );
+  }
+
   return (
-    <S3ClientProvider configuration={getS3Config(assumedRole)}>
+    <S3ClientWithoutReduxProvider configuration={getS3Config(assumedRole)}>
       <_DataServiceRoleContext.Provider
         value={{
           role,
@@ -183,7 +213,7 @@ const DataServiceRoleProvider = ({ children }: { children: JSX.Element }) => {
       >
         {children}
       </_DataServiceRoleContext.Provider>
-    </S3ClientProvider>
+    </S3ClientWithoutReduxProvider>
   );
 };
 

src/react/endpoint/EndpointList.tsx

@@ -14,6 +14,7 @@ import {
   cloudServerDashboard,
 } from './AdvancedMetricsButton';
 import { DeleteEndpoint } from './DeleteEndpoint';
+
 type CellProps = {
   row: {
     original: Endpoint;

src/react/next-architecture/adapters/accessible-accounts/IAMPensieveAccessibleAccounts.ts

@@ -1,4 +1,4 @@
-import { useAccounts } from '../../../utils/hooks';
+import { noopBasedEventDispatcher, useAccounts } from '../../../utils/hooks';
 import { useAccountsLocationsAndEndpoints } from '../../domain/business/accounts';
 import { AccountInfo, Role } from '../../domain/entities/account';
 import { PromiseResult } from '../../domain/entities/promise';
@@ -8,6 +8,7 @@ import { IAccountsLocationsEndpointsAdapter } from '../accounts-locations/IAccou
 export class IAMPensieveAccessibleAccounts implements IAccessibleAccounts {
   constructor(
     private accountsLocationsAndEndpointsAdapter: IAccountsLocationsEndpointsAdapter,
+    private withEventDispatcher = true,
   ) {}
   useListAccessibleAccounts(): {
     accountInfos: PromiseResult<(AccountInfo & { assumableRoles: Role[] })[]>;
@@ -17,7 +18,11 @@ export class IAMPensieveAccessibleAccounts implements IAccessibleAccounts {
         accountsLocationsEndpointsAdapter:
           this.accountsLocationsAndEndpointsAdapter,
       });
-    const { accounts: accessibleAccounts, status } = useAccounts();
+    const eventDispatcher = this.withEventDispatcher
+      ? undefined
+      : noopBasedEventDispatcher;
+    const { accounts: accessibleAccounts, status } =
+      useAccounts(eventDispatcher);
 
     if (accountStatus === 'error' || status === 'error') {
       return {

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

@@ -21,12 +21,20 @@ export const useAccessibleAccountsAdapter = (): IAccessibleAccounts => {
 
 export const AccessibleAccountsAdapterProvider = ({
   children,
+  /**
+   * DoNotChangePropsWithEventDispatcher is a static props.
+   * When set, it must not be changed, otherwise it will break the hook rules.
+   * To be removed when we remove redux.
+   */
+  DoNotChangePropsWithEventDispatcher = true,
 }: {
   children: JSX.Element;
+  DoNotChangePropsWithEventDispatcher?: boolean;
 }) => {
   const accountAdapter = useAccountsLocationsEndpointsAdapter();
   const accessibleAccountsAdapter = new IAMPensieveAccessibleAccounts(
     accountAdapter,
+    DoNotChangePropsWithEventDispatcher,
   );
 
   return (

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

@@ -96,10 +96,19 @@ const AlertProvider = ({ children }: { children: React.ReactNode }) => {
   const metalk8sUI = deployedApps.find(
     (app: { kind: string }) => app.kind === 'metalk8s-ui',
   );
-  const metalk8sUIConfig = retrieveConfiguration({
-    configType: 'run',
-    name: metalk8sUI.name,
-  });
+
+  const metalk8sUIConfig = metalk8sUI
+    ? retrieveConfiguration({
+        configType: 'run',
+        name: metalk8sUI.name,
+      })
+    : {
+        spec: {
+          selfConfiguration: {
+            url_alertmanager: '',
+          },
+        },
+      };
 
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>