feat: Add redux and API layer support for User Profile (#5023)

Author: wdoconnell

src/accounts/context/userAccount.tsx

@@ -15,11 +15,7 @@ import {
 } from 'src/shared/copy/notifications'
 
 // Utils
-import {
-  getAccounts,
-  putAccountsDefault,
-  patchAccount,
-} from 'src/client/unityRoutes'
+import {getAccounts, patchAccount} from 'src/client/unityRoutes'
 
 // Metrics
 import {event} from 'src/cloud/utils/reporting'
@@ -29,6 +25,9 @@ import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {setMe} from 'src/me/actions/creators'
 import {MeState} from 'src/me/reducers'
 
+// API
+import {updateDefaultQuartzAccount} from 'src/identity/apis/auth'
+
 export type Props = {
   children: JSX.Element
 }
@@ -108,14 +107,9 @@ export const UserAccountProvider: FC<Props> = React.memo(({children}) => {
     const accountName = getAccountNameById(newDefaultAcctId)
 
     try {
-      const resp = await putAccountsDefault({data: {id: newDefaultAcctId}})
+      await updateDefaultQuartzAccount(newDefaultAcctId)
       setDefaultAccountId(newDefaultAcctId)
-
-      if (resp.status !== 204) {
-        dispatch(notify(accountDefaultSettingError(accountName)))
-      } else {
-        dispatch(notify(accountDefaultSettingSuccess(accountName)))
-      }
+      dispatch(notify(accountDefaultSettingSuccess(accountName)))
     } catch (error) {
       dispatch(notify(accountDefaultSettingError(accountName)))
     }

src/identity/apis/auth.ts

@@ -6,6 +6,7 @@ import {
   getOrg,
   getOrgs,
   putOrgsDefault,
+  putAccountsDefault,
   Account,
   Identity,
   IdentityAccount,
@@ -227,6 +228,23 @@ export const fetchAccountDetails = async (
   return accountDetails
 }
 
+// change the user's default account
+export const updateDefaultQuartzAccount = async (
+  accountId: number
+): Promise<void> => {
+  const response = await putAccountsDefault({
+    data: {
+      id: accountId,
+    },
+  })
+
+  if (response.status === 500) {
+    throw new ServerError(response.data.message)
+  }
+
+  // success status code is 204; no data in response.body is expected.
+}
+
 // fetch details about user's current organization
 export const fetchOrgDetails = async (orgId: string): Promise<Organization> => {
   const response = await getOrg({orgId})
@@ -259,7 +277,7 @@ export const fetchQuartzOrgs = async (): Promise<OrganizationSummaries> => {
 }
 
 // change default organization for a given account
-export const putDefaultQuartzOrg = async (orgId: string) => {
+export const updateDefaultQuartzOrg = async (orgId: string) => {
   const response = await putOrgsDefault({
     data: {
       id: orgId,

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

@@ -3,8 +3,10 @@ import {RemoteDataState} from 'src/types'
 
 export const SET_QUARTZ_ORGANIZATIONS = 'SET_QUARTZ_ORGANIZATIONS'
 export const SET_QUARTZ_ORGANIZATIONS_STATUS = 'SET_QUARTZ_ORGANIZATIONS_STATUS'
+export const SET_QUARTZ_DEFAULT_ORG = 'SET_QUARTZ_DEFAULT_ORG'
 
 export type Actions =
+  | ReturnType<typeof setQuartzDefaultOrg>
   | ReturnType<typeof setQuartzOrganizations>
   | ReturnType<typeof setQuartzOrganizationsStatus>
 
@@ -21,3 +23,13 @@ export const setQuartzOrganizationsStatus = (status: RemoteDataState) =>
     type: SET_QUARTZ_ORGANIZATIONS_STATUS,
     status: status,
   } as const)
+
+export const setQuartzDefaultOrg = (
+  oldDefaultOrgId: string,
+  newDefaultOrgId: string
+) =>
+  ({
+    type: SET_QUARTZ_DEFAULT_ORG,
+    oldDefaultOrgId: oldDefaultOrgId,
+    newDefaultOrgId: newDefaultOrgId,
+  } as const)

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

@@ -1,19 +1,23 @@
 import {Dispatch} from 'react'
 
 // API
-import {fetchQuartzOrgs} from 'src/identity/apis/auth'
+import {fetchQuartzOrgs, updateDefaultQuartzOrg} from 'src/identity/apis/auth'
 
 // Actions
 import {
   Actions as QuartzOrganizationActions,
+  setQuartzDefaultOrg,
   setQuartzOrganizations,
   setQuartzOrganizationsStatus,
 } from 'src/identity/quartzOrganizations/actions/creators'
 import {PublishNotificationAction} from 'src/shared/actions/notifications'
 
 // Types
 import {RemoteDataState} from 'src/types'
+import {OrganizationSummaries} from 'src/client/unityRoutes'
+
 type Actions = QuartzOrganizationActions | PublishNotificationAction
+type DefaultOrg = OrganizationSummaries[number]
 
 // Notifications
 import {notify} from 'src/shared/actions/notifications'
@@ -33,3 +37,21 @@ export const getQuartzOrganizationsThunk = () => async (
     dispatch(notify(updateQuartzOrganizationsFailed()))
   }
 }
+
+export const updateDefaultOrgThunk = (
+  oldDefaultOrg: DefaultOrg,
+  newDefaultOrg: DefaultOrg
+) => async (dispatch: Dispatch<Actions>) => {
+  try {
+    dispatch(setQuartzOrganizationsStatus(RemoteDataState.Loading))
+
+    await updateDefaultQuartzOrg(newDefaultOrg.id)
+
+    dispatch(setQuartzDefaultOrg(oldDefaultOrg.id, newDefaultOrg.id))
+
+    dispatch(setQuartzOrganizationsStatus(RemoteDataState.Done))
+  } catch (err) {
+    dispatch(setQuartzOrganizationsStatus(RemoteDataState.Error))
+    throw Error(err)
+  }
+}

src/identity/quartzOrganizations/reducers/index.ts

@@ -3,6 +3,7 @@ import {
   Actions,
   SET_QUARTZ_ORGANIZATIONS,
   SET_QUARTZ_ORGANIZATIONS_STATUS,
+  SET_QUARTZ_DEFAULT_ORG,
 } from 'src/identity/quartzOrganizations/actions/creators'
 import {emptyOrg} from 'src/identity/components/GlobalHeader/DefaultEntities'
 import produce from 'immer'
@@ -24,5 +25,22 @@ export default (state = initialState, action: Actions): QuartzOrganizations =>
         draftState.status = action.status
         return
       }
+
+      case SET_QUARTZ_DEFAULT_ORG: {
+        const {oldDefaultOrgId, newDefaultOrgId} = action
+
+        if (oldDefaultOrgId !== newDefaultOrgId) {
+          draftState.orgs.forEach(org => {
+            if (org.id === oldDefaultOrgId) {
+              org.isDefault = false
+            }
+
+            if (org.id === newDefaultOrgId) {
+              org.isDefault = true
+            }
+          })
+        }
+        return
+      }
     }
   })

src/shared/copy/notifications/categories/accounts-users-orgs.ts

@@ -4,18 +4,23 @@ import {
   defaultSuccessNotification,
 } from 'src/shared/copy/notifications'
 
+export const accountDefaultSettingError = (
+  accountName: string
+): Notification => ({
+  ...defaultErrorNotification,
+  message: `Account "${accountName}" was not set as the default account. The default is unchanged.`,
+})
+
 export const accountDefaultSettingSuccess = (
   accountName: string
 ): Notification => ({
   ...defaultSuccessNotification,
   message: `Account "${accountName}" was successfully set as the default account`,
 })
 
-export const accountDefaultSettingError = (
-  accountName: string
-): Notification => ({
+export const accountRenameError = (accountName: string): Notification => ({
   ...defaultErrorNotification,
-  message: `Account "${accountName}" was not set as the default account; the default is unchanged`,
+  message: `Account "${accountName}" was not renamed; the rename update failed`,
 })
 
 export const accountRenameSuccess = (
@@ -26,105 +31,104 @@ export const accountRenameSuccess = (
   message: `Account "${oldAccountName}" was successfully renamed to "${newAccountName}"`,
 })
 
-export const accountRenameError = (accountName: string): Notification => ({
+export const inviteFailed = (): Notification => ({
   ...defaultErrorNotification,
-  message: `Account "${accountName}" was not renamed; the rename update failed`,
+  message: `invite failed`,
 })
 
-export const orgCreateSuccess = (): Notification => ({
-  ...defaultSuccessNotification,
-  message: 'Organization was successfully created',
+export const invitationResentFailed = (): Notification => ({
+  ...defaultErrorNotification,
+  message: `Error sending invitation`,
 })
 
-export const orgCreateFailed = (): Notification => ({
-  ...defaultErrorNotification,
-  message: 'Failed to create organization',
+export const invitationResentSuccessful = (): Notification => ({
+  ...defaultSuccessNotification,
+  message: `Invitation Re-sent`,
 })
 
-export const orgEditSuccess = (): Notification => ({
+export const inviteSent = (): Notification => ({
   ...defaultSuccessNotification,
-  message: 'Organization was successfully updated',
+  message: `Invitation Sent`,
 })
 
-export const orgEditFailed = (): Notification => ({
+export const invitationWithdrawnFailed = (): Notification => ({
   ...defaultErrorNotification,
-  message: 'Failed to update organization',
+  message: `Error withdrawing invite, try again`,
 })
 
-export const orgRenameSuccess = (orgName: string): Notification => ({
+export const invitationWithdrawnSuccessful = (): Notification => ({
   ...defaultSuccessNotification,
-  message: `Organization was successfully renamed "${orgName}"`,
+  message: `Invitation Withdrawn`,
 })
 
-export const orgRenameFailed = (orgName): Notification => ({
+export const memberAddFailed = (message: string): Notification => ({
   ...defaultErrorNotification,
-  message: `Failed to update organization "${orgName}"`,
+  message: `Failed to add members: "${message}"`,
 })
 
 export const memberAddSuccess = (username: string): Notification => ({
   ...defaultSuccessNotification,
   message: `Member "${username}" was added successfully`,
 })
 
-export const memberAddFailed = (message: string): Notification => ({
+export const memberRemoveFailed = (message: string): Notification => ({
   ...defaultErrorNotification,
-  message: `Failed to add members: "${message}"`,
+  message: `Failed to remove members: "${message}"`,
 })
 
 export const memberRemoveSuccess = (memberName: string): Notification => ({
   ...defaultSuccessNotification,
   message: `Member "${memberName}" was removed successfully`,
 })
 
-export const memberRemoveFailed = (message: string): Notification => ({
+export const orgCreateFailed = (): Notification => ({
   ...defaultErrorNotification,
-  message: `Failed to remove members: "${message}"`,
+  message: 'Failed to create organization',
 })
 
-/* USERS NOTIFICATIONS */
-export const inviteSent = (): Notification => ({
+export const orgCreateSuccess = (): Notification => ({
   ...defaultSuccessNotification,
-  message: `Invitation Sent`,
+  message: 'Organization was successfully created',
 })
 
-export const inviteFailed = (): Notification => ({
+export const orgDefaultSettingError = (orgName: string): Notification => ({
   ...defaultErrorNotification,
-  message: `invite failed`,
+  message: `Organization "${orgName}" could not be set as the default organization. Please try again.`,
 })
 
-export const invitationResentSuccessful = (): Notification => ({
+export const orgDefaultSettingSuccess = (orgName: string): Notification => ({
   ...defaultSuccessNotification,
-  message: `Invitation Re-sent`,
+  message: `Organization "${orgName}" was successfully set as the default organization`,
 })
 
-export const invitationResentFailed = (): Notification => ({
+export const orgEditFailed = (): Notification => ({
   ...defaultErrorNotification,
-  message: `Error sending invitation`,
+  message: 'Failed to update organization',
 })
 
-export const invitationWithdrawnSuccessful = (): Notification => ({
+export const orgEditSuccess = (): Notification => ({
   ...defaultSuccessNotification,
-  message: `Invitation Withdrawn`,
+  message: 'Organization was successfully updated',
 })
 
-export const invitationWithdrawnFailed = (): Notification => ({
+export const orgRenameFailed = (orgName): Notification => ({
   ...defaultErrorNotification,
-  message: `Error withdrawing invite, try again`,
+  message: `Failed to update organization "${orgName}"`,
 })
 
-export const removeUserSuccessful = (): Notification => ({
+export const orgRenameSuccess = (orgName: string): Notification => ({
   ...defaultSuccessNotification,
-  message: `User Removed`,
+  message: `Organization was successfully renamed "${orgName}"`,
 })
 
 export const removeUserFailed = (): Notification => ({
   ...defaultErrorNotification,
   message: `Error removing user, try again`,
 })
 
-export const updateIdentityFailed = (): Notification => ({
-  ...defaultErrorNotification,
-  message: 'Error retrieving user identity. Please refresh this page.',
+export const removeUserSuccessful = (): Notification => ({
+  ...defaultSuccessNotification,
+  message: `User Removed`,
 })
 
 export const updateBillingFailed = (): Notification => ({
@@ -133,6 +137,11 @@ export const updateBillingFailed = (): Notification => ({
     'Error retrieving account billing provider. Please refresh this page.',
 })
 
+export const updateIdentityFailed = (): Notification => ({
+  ...defaultErrorNotification,
+  message: 'Error retrieving user identity. Please refresh this page.',
+})
+
 export const updateOrgFailed = (): Notification => ({
   ...defaultErrorNotification,
   message: