fix: Code review feedback

src/operator/MigrateOrg.tsx

@@ -13,12 +13,16 @@ import {
 import React, {ChangeEvent, FC, useContext, useState} from 'react'
 import {OverlayContext} from 'src/operator/context/overlay'
 import {OperatorAccount, getOperatorAccount} from 'src/client/unityRoutes'
-import MigrateOrgOverlay from './MigrateOrgOverlay'
+import {MigrateOrgOverlay} from './MigrateOrgOverlay'
+import {useDispatch} from 'react-redux'
+import {notify} from 'src/shared/actions/notifications'
+import {getAccountError} from 'src/shared/copy/notifications'
 
-const MigrateOrg: FC = () => {
+export const MigrateOrg: FC = () => {
   const {organization, setMigrateOverlayVisible} = useContext(OverlayContext)
   const [toAccountId, setToAccountId] = useState('')
   const [toAccount, setToAccount] = useState<OperatorAccount>(null)
+  const dispatch = useDispatch()
 
   const changeToAccountId = (event: ChangeEvent<HTMLInputElement>) => {
     setToAccountId(event.target.value)
@@ -32,6 +36,7 @@ const MigrateOrg: FC = () => {
     try {
       const resp = await getOperatorAccount({accountId: toAccountId})
       if (resp.status !== 200) {
+        dispatch(notify(getAccountError(toAccountId)))
         return
       }
       setToAccount(resp.data)
@@ -79,5 +84,3 @@ const MigrateOrg: FC = () => {
     </>
   )
 }
-
-export default MigrateOrg

src/operator/MigrateOrgOverlay.tsx

@@ -19,11 +19,11 @@ interface Props {
 
 const MigrateOrgOverlay: FC<Props> = ({toAccount}) => {
   const {
-    organization,
-    migrateOverlayVisible,
-    setMigrateOverlayVisible,
     handleMigrateOrg,
+    migrateOverlayVisible,
     migrateStatus,
+    organization,
+    setMigrateOverlayVisible,
   } = useContext(OverlayContext)
 
   const migrateOrg = () => {
@@ -89,4 +89,4 @@ const MigrateOrgOverlay: FC<Props> = ({toAccount}) => {
   )
 }
 
-export default MigrateOrgOverlay
+export {MigrateOrgOverlay}

src/operator/OrgOverlay.tsx

@@ -34,12 +34,12 @@ import LimitsField from 'src/operator/LimitsField'
 
 // Constants
 import {TOOLS_URL} from 'src/shared/constants'
-import MigrateOrg from './MigrateOrg'
+import {MigrateOrg} from './MigrateOrg'
 
 const viewUsageButtonStyles = {marginRight: '12px'}
 const reactivateOrgButtonStyles = {marginTop: '8px'}
 
-const OrgOverlay: FC = () => {
+export const OrgOverlay: FC = () => {
   const {
     limits,
     limitsStatus,
@@ -399,5 +399,3 @@ const OrgOverlay: FC = () => {
     </Overlay>
   )
 }
-
-export default OrgOverlay

src/operator/account/AccountView.tsx

@@ -14,7 +14,7 @@ import AccountViewHeader from 'src/operator/account/AccountViewHeader'
 import AccountGrid from 'src/operator/account/AccountGrid'
 import {AccountContext} from 'src/operator/context/account'
 import PageSpinner from 'src/perf/components/PageSpinner'
-import MigrateOrgsTool from './MigrateOrgs'
+import {MigrateOrgsTool} from './MigrateOrgs'
 
 const AccountView: FC = () => {
   const {account, accountStatus} = useContext(AccountContext)

src/operator/account/MigrateOrgs.tsx

@@ -8,17 +8,23 @@ import {
   FlexBox,
   FlexDirection,
   Form,
+  InfluxColors,
   Input,
+  Label,
 } from '@influxdata/clockface'
 import React, {ChangeEvent, FC, useContext, useState} from 'react'
 import {AccountContext} from '../context/account'
-import MigrateOrgsOverlay from './MigrateOrgsOverlay'
+import {MigrateOrgsOverlay} from './MigrateOrgsOverlay'
 import {OperatorAccount, getOperatorAccount} from 'src/client/unityRoutes'
+import {useDispatch} from 'react-redux'
+import {notify} from 'src/shared/actions/notifications'
+import {getAccountError} from 'src/shared/copy/notifications'
 
-const MigrateOrgsTool: FC = () => {
+export const MigrateOrgsTool: FC = () => {
   const {account, setMigrateOverlayVisible} = useContext(AccountContext)
   const [toAccountId, setToAccountId] = useState('')
   const [toAccount, setToAccount] = useState<OperatorAccount>(null)
+  const dispatch = useDispatch()
 
   const changeToAccountId = (event: ChangeEvent<HTMLInputElement>) => {
     setToAccountId(event.target.value)
@@ -32,6 +38,7 @@ const MigrateOrgsTool: FC = () => {
     try {
       const resp = await getOperatorAccount({accountId: toAccountId})
       if (resp.status !== 200) {
+        dispatch(notify(getAccountError(toAccountId)))
         return
       }
       setToAccount(resp.data)
@@ -57,6 +64,12 @@ const MigrateOrgsTool: FC = () => {
           alignItems={AlignItems.FlexStart}
           margin={ComponentSize.Large}
         >
+          <Label
+            id="accounts-migrate--account-id-label"
+            name="Please enter an Account ID to migrate to:"
+            description="Please enter an Account ID to migrate to:"
+            color={InfluxColors.Grey25}
+          />
           <Input
             placeholder="Account ID to migrate resources to"
             inputStyle={{width: '400px'}}
@@ -81,5 +94,3 @@ const MigrateOrgsTool: FC = () => {
     </>
   )
 }
-
-export default MigrateOrgsTool

src/operator/account/MigrateOrgsOverlay.tsx

@@ -17,14 +17,14 @@ interface Props {
   toAccount: OperatorAccount
 }
 
-const MigrateOrgsOverlay: FC<Props> = ({toAccount}) => {
+export const MigrateOrgsOverlay: FC<Props> = ({toAccount}) => {
   const {
     account,
     organizations,
-    migrateStatus,
     handleMigrateOrgs,
-    setMigrateOverlayVisible,
     migrateOverlayVisible,
+    migrateStatus,
+    setMigrateOverlayVisible,
   } = useContext(AccountContext)
 
   const migrateAccountOrgs = () => {
@@ -101,5 +101,3 @@ const MigrateOrgsOverlay: FC<Props> = ({toAccount}) => {
     </Overlay>
   )
 }
-
-export default MigrateOrgsOverlay

src/operator/context/account.tsx

@@ -193,8 +193,8 @@ export const AccountProvider: FC<Props> = React.memo(({children}) => {
           throw new Error(resp.data.message)
         }
 
-        setMigrateOverlayVisible(false)
         setMigrateStatus(RemoteDataState.Done)
+        setMigrateOverlayVisible(false)
         history.push(`/operator/accounts/${toAccountId}`)
       } catch (error) {
         console.error({error})