Merge remote-tracking branch 'origin/bugfix/ZKUI-378-fix-the-bug-of-p…

…ost-account-create' into w/2.0/bugfix/ZKUI-378-fix-the-bug-of-post-account-create

src/react/DataServiceRoleProvider.tsx

@@ -2,7 +2,7 @@ import { createContext, useContext, useMemo, useState } from 'react';
 import { useRouteMatch } from 'react-router-dom';
 import { noopBasedEventDispatcher, regexArn, useAccounts } from './utils/hooks';
 import { getRoleArnStored, setRoleArnStored } from './utils/localStorage';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation } from 'react-query';
 import {
   S3ClientProvider,
   useAssumeRoleQuery,
@@ -73,6 +73,11 @@ const DataServiceRoleProvider = ({ children }: { children: JSX.Element }) => {
   }>('/accounts/:accountName');
   const accountName = match?.params.accountName;
 
+  const { getQuery } = useAssumeRoleQuery();
+  const assumeRoleMutation = useMutation({
+    mutationFn: (roleArn: string) => getQuery(roleArn).queryFn(),
+  });
+
   // invalide the stored ARN if it's not in the list accountsWithRoles
   useMemo(() => {
     const storedRole = getRoleArnStored();
@@ -95,13 +100,9 @@ const DataServiceRoleProvider = ({ children }: { children: JSX.Element }) => {
     } else if (!storedRole && !role.roleArn && accounts.length) {
       setRoleState({ roleArn: accounts[0].Roles[0].Arn });
     }
+    assumeRoleMutation.mutate(role.roleArn);
   }, [role.roleArn, JSON.stringify(accounts)]);
 
-  const { getQuery } = useAssumeRoleQuery();
-  const assumeRoleMutation = useMutation({
-    mutationFn: (roleArn: string) => getQuery(roleArn).queryFn(),
-  });
-
   const { getS3Config } = useS3ConfigFromAssumeRoleResult();
 
   const setRole = (role: { roleArn: string }) => {
@@ -110,20 +111,12 @@ const DataServiceRoleProvider = ({ children }: { children: JSX.Element }) => {
     assumeRoleMutation.mutate(role.roleArn);
   };
 
-  const { data: assumeRoleResult, status } = useQuery(getQuery(role.roleArn));
-
-  if (status === 'idle' && role.roleArn) {
+  if (role.roleArn && !assumeRoleMutation.data) {
     return <Loader>Loading...</Loader>;
   }
 
   return (
-    <S3ClientProvider
-      configuration={
-        assumeRoleMutation.data
-          ? getS3Config(assumeRoleMutation.data)
-          : getS3Config(assumeRoleResult)
-      }
-    >
+    <S3ClientProvider configuration={getS3Config(assumeRoleMutation.data)}>
       <_DataServiceRoleContext.Provider
         value={{
           role,

src/react/account/AccountCreate.tsx

@@ -17,6 +17,7 @@ import { joiResolver } from '@hookform/resolvers/joi';
 import { useForm } from 'react-hook-form';
 import { useOutsideClick } from '../utils/hooks';
 import { useQueryClient } from 'react-query';
+import { useSetAssumedRole } from '../DataServiceRoleProvider';
 
 const regexpEmailAddress = /^\S+@\S+.\S+$/;
 const regexpName = /^[\w+=,.@ -]+$/;
@@ -59,14 +60,15 @@ function AccountCreate() {
   );
   const dispatch = useDispatch();
   const queryClient = useQueryClient();
+  const setRole = useSetAssumedRole();
   const token = useSelector((state: AppState) => state.oidc.user?.access_token);
   const onSubmit = ({ name, email }: AccountFormField) => {
     clearServerError();
     const payload = {
       Name: name,
       email,
     };
-    dispatch(createAccount(payload, queryClient, token));
+    dispatch(createAccount(payload, queryClient, token, setRole));
   };
 
   const handleCancel: MouseEventHandler<HTMLButtonElement> = (e) => {

src/react/actions/account.ts

@@ -26,11 +26,11 @@ import {
 } from './error';
 import { networkEnd, networkStart } from './network';
 import type { IamAccessKey } from '../../types/user';
-import { getAssumeRoleWithWebIdentityIAM } from '../../js/IAMClient';
 import { getClients } from '../utils/actions';
 import { push } from 'connected-react-router';
 import { updateConfiguration } from './configuration';
 import { QueryClient } from 'react-query';
+import { getAssumeRoleWithWebIdentityIAM } from '../../js/IAMClient';
 
 export function openAccountDeleteDialog(): OpenAccountDeleteDialogAction {
   return {
@@ -88,6 +88,7 @@ export function createAccount(
   user: CreateAccountRequest,
   queryClient: QueryClient,
   token: string,
+  setRole: (role: { roleArn: string }) => void,
 ): ThunkStatePromisedAction {
   return (dispatch: DispatchFunction, getState: GetStateFunction) => {
     const { managementClient, instanceId } = getClients(getState());
@@ -98,12 +99,20 @@ export function createAccount(
     dispatch(networkStart('Creating account'));
     return managementClient
       .createConfigurationOverlayUser(params.user, params.uuid)
-      .then((resp) => Promise.all([resp.id, dispatch(updateConfiguration())]))
-      .then(() => dispatch(push(`/accounts/${user.Name}`)))
-      .then(() => {
-        queryClient.refetchQueries(['accounts']);
-        queryClient.invalidateQueries(['WebIdentityRoles', token]);
-        queryClient.invalidateQueries(['s3AssumeRoleClient']);
+      .then(async (resp) => {
+        await Promise.all([resp.id, dispatch(updateConfiguration())]);
+        return resp;
+      })
+      .then((resp) => {
+        dispatch(push(`/accounts/${user.Name}`));
+        return resp;
+      })
+      .then((resp) => {
+        queryClient.clear();
+        const accountId = resp.id;
+        setRole({
+          roleArn: `arn:aws:iam::${accountId}:role/storage-manager-role`,
+        });
       })
       .catch((error) => dispatch(handleClientError(error)))
       .catch((error) => dispatch(handleApiError(error, 'byComponent')))

src/react/utils/hooks.ts

@@ -203,7 +203,7 @@ export const useAccounts = (
     ApiError
   >(
     {
-      queryKey: ['WebIdentityRoles', token],
+      queryKey: ['WebIdentityRoles'],
       queryFn: () => {
         notifyLoadingAccounts();
         return getRolesForWebIdentity(iamEndpoint, notFalsyTypeGuard(token));