From 7a9d1867e44e2d040cf149c9f6e428b5dcd6f336 Mon Sep 17 00:00:00 2001
From: Joel Abshier <jabshier@influxdata.com>
Date: Wed, 5 Jul 2023 17:08:30 -0500
Subject: [PATCH] fix: Code review feedback

---
 src/operator/MigrateOrg.tsx                 | 11 +++++++----
 src/operator/MigrateOrgOverlay.tsx          |  8 ++++----
 src/operator/OrgOverlay.tsx                 |  6 ++----
 src/operator/account/AccountView.tsx        |  2 +-
 src/operator/account/MigrateOrgs.tsx        | 19 +++++++++++++++----
 src/operator/account/MigrateOrgsOverlay.tsx |  8 +++-----
 src/operator/context/account.tsx            |  2 +-
 7 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/operator/MigrateOrg.tsx b/src/operator/MigrateOrg.tsx
index 887aa3d833..5c947002c5 100644
--- a/src/operator/MigrateOrg.tsx
+++ b/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
diff --git a/src/operator/MigrateOrgOverlay.tsx b/src/operator/MigrateOrgOverlay.tsx
index add11fee49..5dd3e8b69c 100644
--- a/src/operator/MigrateOrgOverlay.tsx
+++ b/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}
diff --git a/src/operator/OrgOverlay.tsx b/src/operator/OrgOverlay.tsx
index ec96f06909..630071a12e 100644
--- a/src/operator/OrgOverlay.tsx
+++ b/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
diff --git a/src/operator/account/AccountView.tsx b/src/operator/account/AccountView.tsx
index ba24bc915b..48210e5aa9 100644
--- a/src/operator/account/AccountView.tsx
+++ b/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)
diff --git a/src/operator/account/MigrateOrgs.tsx b/src/operator/account/MigrateOrgs.tsx
index 0eee700d06..503e384c90 100644
--- a/src/operator/account/MigrateOrgs.tsx
+++ b/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
diff --git a/src/operator/account/MigrateOrgsOverlay.tsx b/src/operator/account/MigrateOrgsOverlay.tsx
index e664660103..18f29a25c6 100644
--- a/src/operator/account/MigrateOrgsOverlay.tsx
+++ b/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
diff --git a/src/operator/context/account.tsx b/src/operator/context/account.tsx
index 2100b1e470..3669ae0672 100644
--- a/src/operator/context/account.tsx
+++ b/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})