fix: split identity redux loading state into three states (#5938)

Author: wdoconnell

src/billing/components/BillingPageContents.tsx

@@ -10,25 +10,32 @@ import BillingFree from 'src/billing/components/Free/Free'
 import BillingPayAsYouGo from 'src/billing/components/PayAsYouGo/PayAsYouGo'
 import MarketplaceBilling from 'src/billing/components/marketplace/MarketplaceBilling'
 
+// Types
+import {RemoteDataState} from 'src/types'
+
 // Utils
-import {selectCurrentIdentity} from 'src/identity/selectors'
+import {
+  selectCurrentIdentity,
+  selectQuartzBillingStatus,
+} from 'src/identity/selectors'
 
 // Thunks
 import {getBillingProviderThunk} from 'src/identity/actions/thunks'
 
 const BillingPageContents: FC = () => {
   const dispatch = useDispatch()
   const {account} = useSelector(selectCurrentIdentity)
+  const quartzBillingStatus = useSelector(selectQuartzBillingStatus)
 
   useEffect(() => {
     if (!CLOUD) {
       return
     }
 
-    if (!account.billingProvider) {
+    if (quartzBillingStatus === RemoteDataState.NotStarted) {
       dispatch(getBillingProviderThunk())
     }
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [dispatch, quartzBillingStatus])
 
   if (account.billingProvider === undefined) {
     return null

src/identity/actions/creators/index.ts

@@ -5,15 +5,20 @@ import {BillingProvider, RemoteDataState} from 'src/types'
 export const SET_QUARTZ_IDENTITY = 'SET_QUARTZ_IDENTITY'
 export const SET_QUARTZ_IDENTITY_STATUS = 'SET_QUARTZ_IDENTITY_STATUS'
 export const SET_CURRENT_BILLING_PROVIDER = 'SET_CURRENT_BILLING_PROVIDER'
+export const SET_CURRENT_BILLING_PROVIDER_STATUS =
+  'SET_CURRENT_BILLING_PROVIDER_STATUS'
 export const SET_CURRENT_ORG_DETAILS = 'SET_CURRENT_ORG_DETAILS'
+export const SET_CURRENT_ORG_DETAILS_STATUS = 'SET_CURRENT_ORG_DETAILS_STATUS'
 export const SET_CURRENT_IDENTITY_ACCOUNT_NAME =
   'SET_CURRENT_IDENTITY_ACCOUNT_NAME'
 
 export type Actions =
   | ReturnType<typeof setQuartzIdentity>
   | ReturnType<typeof setQuartzIdentityStatus>
   | ReturnType<typeof setCurrentBillingProvider>
+  | ReturnType<typeof setCurrentBillingProviderStatus>
   | ReturnType<typeof setCurrentOrgDetails>
+  | ReturnType<typeof setCurrentOrgDetailsStatus>
   | ReturnType<typeof setCurrentIdentityAccountName>
 
 export const setQuartzIdentity = (identity: CurrentIdentity) =>
@@ -22,21 +27,33 @@ export const setQuartzIdentity = (identity: CurrentIdentity) =>
     identity: identity,
   } as const)
 
+export const setQuartzIdentityStatus = (status: RemoteDataState) =>
+  ({
+    type: SET_QUARTZ_IDENTITY_STATUS,
+    status,
+  } as const)
+
 export const setCurrentBillingProvider = (billingProvider: BillingProvider) =>
   ({
     type: SET_CURRENT_BILLING_PROVIDER,
     billingProvider: billingProvider,
   } as const)
 
+export const setCurrentBillingProviderStatus = (status: RemoteDataState) =>
+  ({
+    type: SET_CURRENT_BILLING_PROVIDER_STATUS,
+    status,
+  } as const)
+
 export const setCurrentOrgDetails = (orgDetails: CurrentOrg) =>
   ({
     type: SET_CURRENT_ORG_DETAILS,
     org: orgDetails,
   } as const)
 
-export const setQuartzIdentityStatus = (status: RemoteDataState) =>
+export const setCurrentOrgDetailsStatus = (status: RemoteDataState) =>
   ({
-    type: SET_QUARTZ_IDENTITY_STATUS,
+    type: SET_CURRENT_ORG_DETAILS_STATUS,
     status,
   } as const)
 

src/identity/actions/thunks/index.ts

@@ -5,6 +5,8 @@ import {
   setCurrentBillingProvider,
   setQuartzIdentity,
   setQuartzIdentityStatus,
+  setCurrentBillingProviderStatus,
+  setCurrentOrgDetailsStatus,
 } from 'src/identity/actions/creators'
 
 // Types
@@ -34,6 +36,7 @@ export const getQuartzIdentityThunk =
       const quartzIdentity = await fetchQuartzIdentity()
 
       dispatch(setQuartzIdentity(quartzIdentity))
+
       dispatch(setQuartzIdentityStatus(RemoteDataState.Done))
 
       const legacyMe = convertIdentityToMe(quartzIdentity)
@@ -53,23 +56,23 @@ export const getQuartzIdentityThunk =
 export const getBillingProviderThunk =
   () => async (dispatch: Dispatch<ActionTypes>, getState: GetState) => {
     try {
-      dispatch(setQuartzIdentityStatus(RemoteDataState.Loading))
+      dispatch(setCurrentBillingProviderStatus(RemoteDataState.Loading))
 
       const currentState = getState()
       const accountId = currentState.identity.currentIdentity.account.id
 
       const accountDetails = await fetchAccountDetails(accountId)
 
       dispatch(setCurrentBillingProvider(accountDetails.billingProvider))
-      dispatch(setQuartzIdentityStatus(RemoteDataState.Done))
+      dispatch(setCurrentBillingProviderStatus(RemoteDataState.Done))
       const updatedState = getState()
       const legacyMe = convertIdentityToMe(
         updatedState.identity.currentIdentity
       )
       dispatch(setQuartzMe(legacyMe, RemoteDataState.Done))
       dispatch(setQuartzMeStatus(RemoteDataState.Done))
     } catch (err) {
-      dispatch(setQuartzIdentityStatus(RemoteDataState.Error))
+      dispatch(setCurrentBillingProviderStatus(RemoteDataState.Error))
       dispatch(setQuartzMeStatus(RemoteDataState.Error))
 
       reportErrorThroughHoneyBadger(err, {
@@ -82,12 +85,12 @@ export const getBillingProviderThunk =
 export const getCurrentOrgDetailsThunk =
   (orgId: string) => async (dispatch: any, getState: GetState) => {
     try {
-      dispatch(setQuartzIdentityStatus(RemoteDataState.Loading))
+      dispatch(setCurrentOrgDetailsStatus(RemoteDataState.Loading))
 
       const orgDetails = await fetchOrgDetails(orgId)
 
       dispatch(setCurrentOrgDetails(orgDetails))
-      dispatch(setQuartzIdentityStatus(RemoteDataState.Done))
+      dispatch(setCurrentOrgDetailsStatus(RemoteDataState.Done))
 
       const updatedState = getState()
       const legacyMe = convertIdentityToMe(
@@ -96,7 +99,7 @@ export const getCurrentOrgDetailsThunk =
       dispatch(setQuartzMe(legacyMe, RemoteDataState.Done))
       dispatch(setQuartzMeStatus(RemoteDataState.Done))
     } catch (err) {
-      dispatch(setQuartzIdentityStatus(RemoteDataState.Error))
+      dispatch(setCurrentOrgDetailsStatus(RemoteDataState.Error))
       dispatch(setQuartzMeStatus(RemoteDataState.Error))
 
       reportErrorThroughHoneyBadger(err, {

src/identity/apis/auth.ts

@@ -57,11 +57,17 @@ export type QuartzOrganizations = {
   status?: RemoteDataState
 }
 
+export interface IdentityLoadingStatus {
+  identityStatus: RemoteDataState
+  billingStatus: RemoteDataState
+  orgDetailsStatus: RemoteDataState
+}
+
 export interface CurrentIdentity {
   user: IdentityUser
   account: CurrentAccount
   org: CurrentOrg
-  status?: RemoteDataState
+  loadingStatus?: IdentityLoadingStatus
 }
 
 export enum NetworkErrorTypes {

src/identity/mockUserData.ts

@@ -1,5 +1,5 @@
 import {CurrentIdentity, CurrentOrg} from 'src/identity/apis/auth'
-import {BillingProvider} from 'src/types'
+import {BillingProvider, RemoteDataState} from 'src/types'
 
 export const mockBillingProviders: BillingProvider[] = [
   'zuora',
@@ -16,6 +16,7 @@ export const mockIdentities: CurrentIdentity[] = [
       name: 'TestCo',
       paygCreditStartDate: null,
       type: 'free',
+      isUpgradeable: true,
     },
     org: {
       clusterHost: 'https://fakehost.fakehost.fake',
@@ -31,6 +32,11 @@ export const mockIdentities: CurrentIdentity[] = [
       operatorRole: null,
       orgCount: 1,
     },
+    loadingStatus: {
+      identityStatus: RemoteDataState.NotStarted,
+      billingStatus: RemoteDataState.NotStarted,
+      orgDetailsStatus: RemoteDataState.NotStarted,
+    },
   },
   {
     account: {
@@ -39,6 +45,7 @@ export const mockIdentities: CurrentIdentity[] = [
       name: 'TestCo 2',
       paygCreditStartDate: null,
       type: 'contract',
+      isUpgradeable: false,
     },
     org: {
       clusterHost: 'https://newhost.newhost.new',
@@ -54,6 +61,11 @@ export const mockIdentities: CurrentIdentity[] = [
       operatorRole: null,
       orgCount: 3,
     },
+    loadingStatus: {
+      identityStatus: RemoteDataState.NotStarted,
+      billingStatus: RemoteDataState.NotStarted,
+      orgDetailsStatus: RemoteDataState.NotStarted,
+    },
   },
   {
     account: {
@@ -62,6 +74,7 @@ export const mockIdentities: CurrentIdentity[] = [
       name: 'Test Name 3',
       paygCreditStartDate: null,
       type: 'pay_as_you_go',
+      isUpgradeable: false,
     },
     org: {
       clusterHost: 'https://testdomain.testdomain.org',
@@ -77,6 +90,11 @@ export const mockIdentities: CurrentIdentity[] = [
       operatorRole: null,
       orgCount: 5,
     },
+    loadingStatus: {
+      identityStatus: RemoteDataState.NotStarted,
+      billingStatus: RemoteDataState.NotStarted,
+      orgDetailsStatus: RemoteDataState.NotStarted,
+    },
   },
 ]
 

src/identity/quartzOrganizations/actions/thunks/index.ts

@@ -58,6 +58,8 @@ export const getQuartzOrganizationsThunk =
       const quartzOrganizations = await fetchOrgsByAccountID(accountId)
 
       dispatch(setQuartzOrganizations(quartzOrganizations))
+
+      dispatch(setQuartzOrganizationsStatus(RemoteDataState.Done))
     } catch (err) {
       reportErrorThroughHoneyBadger(err, {
         name: 'Failed to fetch /quartz/orgs/',
@@ -80,13 +82,15 @@ export const updateDefaultOrgThunk =
       dispatch(setQuartzDefaultOrg(newDefaultOrg.id))
 
       const state = getState()
-      const orgStatus = state.identity.currentIdentity.status
+      const orgStatus = state.identity.quartzOrganizations.status
 
       if (orgStatus === RemoteDataState.Error) {
         throw new DefaultOrgStateError(
           OrganizationThunkErrors.DefaultOrgStateError
         )
       }
+
+      dispatch(setQuartzOrganizationsStatus(RemoteDataState.Done))
     } catch (err) {
       reportErrorThroughHoneyBadger(err, {
         name: err.name,

src/identity/quartzOrganizations/reducers/index.test.ts

@@ -6,6 +6,7 @@ import {initialState} from 'src/identity/quartzOrganizations/reducers'
 import {
   setQuartzDefaultOrg,
   setQuartzOrganizations,
+  setQuartzOrganizationsStatus,
 } from 'src/identity/quartzOrganizations/actions/creators'
 
 // Mocks
@@ -36,10 +37,14 @@ describe('identity reducer for quartz organizations', () => {
       expect(oldState.orgs).toStrictEqual(mockOrgData)
     })
 
-    it('sets a `Done` state when the organization array is loaded into state', () => {
+    it('sets a `Done` state after the organization array is loaded into state', () => {
       const newState = reducer(undefined, setQuartzOrganizations(mockOrgData))
+      const newStateWithUpdatedStatus = reducer(
+        newState,
+        setQuartzOrganizationsStatus(RemoteDataState.Done)
+      )
 
-      expect(newState.status).toEqual(RemoteDataState.Done)
+      expect(newStateWithUpdatedStatus.status).toEqual(RemoteDataState.Done)
     })
   })
 

src/identity/quartzOrganizations/reducers/index.ts

@@ -23,8 +23,6 @@ export default (state = initialState, action: Actions): QuartzOrganizations =>
     switch (action.type) {
       case SET_QUARTZ_ORGANIZATIONS: {
         draftState.orgs = action.quartzOrganizations
-        draftState.status = RemoteDataState.Done
-
         return
       }