save

.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: '',
   });
@@ -171,8 +183,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 +212,7 @@ const DataServiceRoleProvider = ({ children }: { children: JSX.Element }) => {
       >
         {children}
       </_DataServiceRoleContext.Provider>
-    </S3ClientProvider>
+    </S3ClientWithoutReduxProvider>
   );
 };
 

src/react/databrowser/buckets/details/Overview.tsx

@@ -45,6 +45,7 @@ import {
   getLocationType,
 } from '../../../utils/storageOptions';
 import { useWorkflows } from '../../../workflow/Workflows';
+import { SelectAccountIAMRole } from '../../../ui-elements/SelectAccountIAMRole';
 
 function capitalize(string: string) {
   return string.toLowerCase().replace(/^\w/, (c) => {
@@ -388,6 +389,49 @@ function Overview({ bucket, ingestionStates }: Props) {
               </T.Row>
             </T.GroupContent>
           </T.Group>
+          <div
+            style={{ display: 'flex', gap: '1rem', flexDirection: 'column' }}
+          >
+            <div>
+              Normal
+              <SelectAccountIAMRole />
+            </div>
+            <div>
+              Default Value
+              <SelectAccountIAMRole
+                defaultValue={{
+                  accountName: 'william',
+                  roleName: 'backbeat-gc-1',
+                }}
+              />
+            </div>
+
+            <div>
+              hidden
+              <SelectAccountIAMRole
+                hideAccountRoles={[
+                  { accountName: 'william', roleName: 'backbeat-gc-1' },
+                  { accountName: 'william', roleName: 'data-consumer-role' },
+                ]}
+              />
+            </div>
+
+            <div>
+              wrong default value
+              <SelectAccountIAMRole
+                defaultValue={{
+                  accountName: 'william1',
+                  roleName: 'backbeat-gc-1',
+                }}
+              />
+              <SelectAccountIAMRole
+                defaultValue={{
+                  accountName: 'william',
+                  roleName: 'backbeat-gc-2',
+                }}
+              />
+            </div>
+          </div>
         </T.Body>
       </Table>
     </TableContainer>

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,12 @@ export class IAMPensieveAccessibleAccounts implements IAccessibleAccounts {
         accountsLocationsEndpointsAdapter:
           this.accountsLocationsAndEndpointsAdapter,
       });
-    const { accounts: accessibleAccounts, status } = useAccounts();
+    const eventDispatcher = this.withEventDispatcher
+      ? undefined
+      : noopBasedEventDispatcher;
+    console.log('withEventDispatcher', this.withEventDispatcher);
+    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/S3ClientProvider.tsx

@@ -92,6 +92,60 @@ 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();

src/react/ui-elements/SelectAccountIAMRole.tsx

@@ -1,12 +1,49 @@
 import { Stack } from '@scality/core-ui';
 import { Select } from '@scality/core-ui/dist/next';
 import { IAM } from 'aws-sdk';
+import { Bucket } from 'aws-sdk/clients/s3';
 import { useState } from 'react';
 import { useQuery } from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
 import { Account } from '../../types/iam';
+import DataServiceRoleProvider, {
+  useCurrentAccount,
+  useSetAssumedRole,
+} from '../DataServiceRoleProvider';
 import { useIAMClient } from '../IAMProvider';
+import { IMetricsAdapter } from '../next-architecture/adapters/metrics/IMetricsAdapter';
+import { useListAccounts } from '../next-architecture/domain/business/accounts';
+import { LatestUsedCapacity } from '../next-architecture/domain/entities/metrics';
+import {
+  AccessibleAccountsAdapterProvider,
+  useAccessibleAccountsAdapter,
+} from '../next-architecture/ui/AccessibleAccountsAdapterProvider';
+import { AccountsLocationsEndpointsAdapterProvider } from '../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 import { getListRolesQuery } from '../queries';
-import { useAccounts } from '../utils/hooks';
+import { noopBasedEventDispatcher, useAccounts } from '../utils/hooks';
+
+class NoOppMetricsAdapter implements IMetricsAdapter {
+  async listBucketsLatestUsedCapacity(
+    buckets: Bucket[],
+  ): Promise<Record<string, LatestUsedCapacity>> {
+    return {};
+  }
+  async listLocationsLatestUsedCapacity(
+    locationIds: string[],
+  ): Promise<Record<string, LatestUsedCapacity>> {
+    return {};
+  }
+  async listAccountLocationsLatestUsedCapacity(
+    accountCanonicalId: string,
+  ): Promise<Record<string, LatestUsedCapacity>> {
+    return {};
+  }
+  async listAccountsLatestUsedCapacity(
+    accountCanonicalIds: string[],
+  ): Promise<Record<string, LatestUsedCapacity>> {
+    return {};
+  }
+}
 
 const filterRoles = (
   accountName: string,
@@ -24,7 +61,24 @@ const filterRoles = (
 };
 
 const defaultOnChange = () => ({});
-export const SelectAccountIAMRole = (props: {
+
+const InternalProvider = ({ children }) => {
+  return (
+    <MemoryRouter>
+      <DataServiceRoleProvider DoNotChangePropsWithRedux={false}>
+        <AccountsLocationsEndpointsAdapterProvider>
+          <AccessibleAccountsAdapterProvider
+            DoNotChangePropsWithEventDispatcher={false}
+          >
+            {children}
+          </AccessibleAccountsAdapterProvider>
+        </AccountsLocationsEndpointsAdapterProvider>
+      </DataServiceRoleProvider>
+    </MemoryRouter>
+  );
+};
+
+export const _SelectAccountIAMRole = (props: {
   onChange: (account: Account, role: IAM.Role) => void;
   defaultValue?: { accountName: string; roleName: string };
   hideAccountRoles?: { accountName: string; roleName: string }[];
@@ -34,9 +88,25 @@ export const SelectAccountIAMRole = (props: {
     hideAccountRoles = [],
     defaultValue,
   } = props;
-  const { accounts } = useAccounts();
+  const { accounts } = useAccounts(noopBasedEventDispatcher);
+
+  const accessibleAccountsAdapter = useAccessibleAccountsAdapter();
+  const metricsAdapter = new NoOppMetricsAdapter();
+  const accounts2 = useListAccounts({
+    accessibleAccountsAdapter,
+    metricsAdapter,
+  });
+  console.log('accounts2', accounts2.accounts);
   const IAMClient = useIAMClient();
 
+  const setAssumedRole = useSetAssumedRole();
+
+  const currentAccount = useCurrentAccount();
+
+  console.log('currentAccount', currentAccount);
+
+  console.log('accounts', accounts);
+
   const defaultAccount =
     accounts.find((account) => account.Name === defaultValue?.accountName) ??
     null;
@@ -50,6 +120,7 @@ export const SelectAccountIAMRole = (props: {
     enabled: !!IAMClient && !!IAMClient.client && accountName !== '',
   };
   const roleQueryData = useQuery(listRolesQuery);
+  // console.log('roleQueryData', roleQueryData);
   const roles = filterRoles(
     accountName,
     roleQueryData?.data?.Roles ?? [],
@@ -106,3 +177,15 @@ export const SelectAccountIAMRole = (props: {
     </Stack>
   );
 };
+
+export const SelectAccountIAMRole = (props: {
+  onChange: (account: Account, role: IAM.Role) => void;
+  defaultValue?: { accountName: string; roleName: string };
+  hideAccountRoles?: { accountName: string; roleName: string }[];
+}) => {
+  return (
+    <InternalProvider>
+      <_SelectAccountIAMRole {...props} />
+    </InternalProvider>
+  );
+};