Improvement/artesca 10989 add account role selector

.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
+};

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/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}>

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

@@ -92,30 +92,87 @@ export const S3ClientProvider = ({
   );
 };
 
+export const S3ClientWithoutReduxProvider = ({
+  configuration,
+  children,
+}: PropsWithChildren<{
+  configuration: S3.Types.ClientConfiguration;
+}>) => {
+  const { iamEndpoint, iamInternalFQDN, s3InternalFQDN, basePath } =
+    useConfig();
+  const { s3Client, zenkoClient, iamClient } = useMemo(() => {
+    const s3Config = {
+      ...configuration,
+      endpoint: genClientEndpoint(configuration.endpoint as string),
+    };
+    const s3Client = new S3(s3Config);
+    const zenkoClient = new ZenkoClient(
+      s3Config.endpoint,
+      iamInternalFQDN,
+      s3InternalFQDN,
+      process.env.NODE_ENV === 'development' ? '' : basePath,
+    );
+    const iamClient = new IAMClient(iamEndpoint);
+
+    if (
+      configuration.credentials?.accessKeyId &&
+      configuration.credentials?.secretAccessKey &&
+      configuration.credentials?.sessionToken
+    ) {
+      zenkoClient.login({
+        accessKey: configuration.credentials.accessKeyId,
+        secretKey: configuration.credentials.secretAccessKey,
+        sessionToken: configuration.credentials.sessionToken,
+      });
+
+      iamClient.login({
+        accessKey: configuration.credentials.accessKeyId,
+        secretKey: configuration.credentials.secretAccessKey,
+        sessionToken: configuration.credentials.sessionToken,
+      });
+    }
+
+    return { s3Client, zenkoClient, iamClient };
+  }, [configuration]);
+
+  return (
+    <S3ClientContext.Provider value={s3Client}>
+      <ZenkoClientContext.Provider value={zenkoClient}>
+        <_IAMContext.Provider value={{ iamClient }}>
+          {children}
+        </_IAMContext.Provider>
+      </ZenkoClientContext.Provider>
+    </S3ClientContext.Provider>
+  );
+};
+
 export const useAssumeRoleQuery = () => {
   const { stsEndpoint } = useConfig();
   const token = useAccessToken();
+
   const user = useAuth();
   const roleSessionName = `ui-${user.userData?.id}`;
   const stsClient = new STSClient({ endpoint: stsEndpoint });
   const queryKey = ['s3AssumeRoleClient', roleSessionName, token];
 
   return {
     queryKey,
-    getQuery: (roleArn: string) => ({
-      queryKey,
-      queryFn: () =>
-        stsClient.assumeRoleWithWebIdentity({
-          idToken: notFalsyTypeGuard(token),
-          roleArn: roleArn,
-          RoleSessionName: roleSessionName,
-        }),
-
-      refetchOnMount: false,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-      enabled: !!token && !!roleArn,
-    }),
+    getQuery: (roleArn: string) => {
+      return {
+        queryKey,
+        queryFn: () =>
+          stsClient.assumeRoleWithWebIdentity({
+            idToken: notFalsyTypeGuard(token),
+            roleArn: roleArn,
+            RoleSessionName: roleSessionName,
+          }),
+
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+        enabled: !!token && !!roleArn,
+      };
+    },
   };
 };