From b6570e0ec68136c7167cd035f97dfb334977d28f Mon Sep 17 00:00:00 2001 From: YanJin Date: Tue, 19 Sep 2023 18:29:32 +0200 Subject: [PATCH] fix the refresh issue and IAMClient issue --- src/react/DataServiceRoleProvider.tsx | 25 +++++++++---------------- src/react/account/AccountCreate.tsx | 4 +++- src/react/actions/account.ts | 22 ++++++++++++++++------ src/react/utils/hooks.ts | 2 +- 4 files changed, 29 insertions(+), 24 deletions(-) diff --git a/src/react/DataServiceRoleProvider.tsx b/src/react/DataServiceRoleProvider.tsx index af5b30285..049bd1cf8 100644 --- a/src/react/DataServiceRoleProvider.tsx +++ b/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 Loading...; } return ( - + <_DataServiceRoleContext.Provider value={{ role, diff --git a/src/react/account/AccountCreate.tsx b/src/react/account/AccountCreate.tsx index aab12a4d0..0597eb9a2 100644 --- a/src/react/account/AccountCreate.tsx +++ b/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,6 +60,7 @@ 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(); @@ -66,7 +68,7 @@ function AccountCreate() { Name: name, email, }; - dispatch(createAccount(payload, queryClient, token)); + dispatch(createAccount(payload, queryClient, token, setRole)); }; const handleCancel: MouseEventHandler = (e) => { diff --git a/src/react/actions/account.ts b/src/react/actions/account.ts index 4abeb3ea8..af8d86ef1 100644 --- a/src/react/actions/account.ts +++ b/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,11 +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]); + .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'))) diff --git a/src/react/utils/hooks.ts b/src/react/utils/hooks.ts index 4afe700aa..492dcf1a3 100644 --- a/src/react/utils/hooks.ts +++ b/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));