feat(aim): Add Reactivate Org Button (#6347)

* chore(aim): Add Reactivate Org Button

* fix(aim): Move styles to consts

* chore(aim): Fix OpenAPI SHA

Author: abshierjoel

package.json

@@ -52,7 +52,7 @@
     "cy": "CYPRESS_dexUrl=https://$INGRESS_HOST:$PORT_HTTPS CYPRESS_baseUrl=http://localhost:9999 cypress open",
     "cy:dev": "source ../monitor-ci/.env && CYPRESS_dexUrl=CLOUD CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{cloud,shared}/**/*.*'",
     "cy:dev-oss": "source ../monitor-ci/.env && CYPRESS_dexUrl=OSS CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{oss,shared}/**/*.*'",
-    "generate": "export SHA=c8f13fab276fa7af3dd925870e493e973e2df93f && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
+    "generate": "export SHA=66183531c4681177eec11759a912c736af2d48e4 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
     "generate-local": "export REMOTE=../openapi/ && yarn generate-meta",
     "generate-local-cloud": "export REMOTE=../openapi/ && yarn generate-meta-cloud",
     "generate-meta": "if [ -z \"${CLOUD_URL}\" ]; then yarn generate-meta-oss; else yarn generate-meta-cloud; fi",

src/operator/OrgOverlay.tsx

@@ -34,22 +34,29 @@ import LimitsField from 'src/operator/LimitsField'
 // Constants
 import {TOOLS_URL} from 'src/shared/constants'
 
+const viewUsageButtonStyles = {marginRight: '12px'}
+const reactivateOrgButtonStyles = {marginTop: '8px'}
+
 const OrgOverlay: FC = () => {
   const {
     limits,
     limitsStatus,
     handleGetLimits,
     handleGetOrg,
+    handleReactivateOrg,
     handleUpdateLimits,
     organization,
     orgStatus,
+    reactivateOrgStatus,
     setLimits,
     updateLimitStatus,
   } = useContext(OverlayContext)
   const {hasWritePermissions} = useContext(OperatorContext)
 
   const {orgID} = useParams<{orgID: string}>()
   const history = useHistory()
+  const canReactivateOrg =
+    hasWritePermissions && organization?.state === 'suspended'
 
   useEffect(() => {
     handleGetLimits(orgID)
@@ -71,6 +78,11 @@ const OrgOverlay: FC = () => {
     }
   }
 
+  const reactivateOrg = async () => {
+    await handleReactivateOrg(orgID)
+    history.goBack()
+  }
+
   return (
     <Overlay
       visible={true}
@@ -111,8 +123,26 @@ const OrgOverlay: FC = () => {
                       text="View Usage Dashboard"
                       target={LinkTarget.Blank}
                       className="overlay-button--link"
+                      style={viewUsageButtonStyles}
                       href={`${TOOLS_URL}orgs/5d59ccc5163fc318/dashboards/0988da0fd78a7003?vars%5Borgid%5D=${orgID}`}
                     />
+                    {canReactivateOrg && (
+                      <ButtonBase
+                        color={ComponentColor.Primary}
+                        shape={ButtonShape.Default}
+                        size={ComponentSize.Medium}
+                        onClick={reactivateOrg}
+                        style={reactivateOrgButtonStyles}
+                        status={
+                          reactivateOrgStatus === RemoteDataState.Loading
+                            ? ComponentStatus.Disabled
+                            : ComponentStatus.Default
+                        }
+                        testID="org-overlay-reactivate-organization--button"
+                      >
+                        Reactivate Organization
+                      </ButtonBase>
+                    )}
                   </Grid.Column>
                 </Grid.Row>
                 <Grid.Row>

src/operator/context/overlay.tsx

@@ -6,6 +6,7 @@ import {useDispatch} from 'react-redux'
 import {
   getOperatorOrgsLimits,
   getOperatorOrg,
+  postOperatorOrgsReactivate,
   putOperatorOrgsLimits,
 } from 'src/client/unityRoutes'
 import {notify} from 'src/shared/actions/notifications'
@@ -14,6 +15,8 @@ import {
   getLimitsError,
   updateLimitsError,
   updateLimitsSuccess,
+  reactivateOrgError,
+  reactivateOrgSuccess,
 } from 'src/shared/copy/notifications'
 import {toDisplayLimits} from 'src/operator/utils'
 
@@ -30,21 +33,25 @@ export interface OverlayContextType {
   limitsStatus: RemoteDataState
   handleGetLimits: (id: string) => void
   handleGetOrg: (id: string) => void
+  handleReactivateOrg: (id: string) => void
   handleUpdateLimits: (id: string, limits: OperatorOrgLimits) => void
   organization: OperatorOrg
   orgStatus: RemoteDataState
+  reactivateOrgStatus: RemoteDataState
   setLimits: (_: OperatorOrgLimits) => void
   updateLimitStatus: RemoteDataState
 }
 
 export const DEFAULT_CONTEXT: OverlayContextType = {
   handleGetLimits: (_: string) => {},
   handleGetOrg: (_: string) => {},
+  handleReactivateOrg: (_id: string) => {},
   handleUpdateLimits: (_id: string, _limits: OperatorOrgLimits) => {},
   limits: null,
   limitsStatus: RemoteDataState.NotStarted,
   organization: null,
   orgStatus: RemoteDataState.NotStarted,
+  reactivateOrgStatus: RemoteDataState.NotStarted,
   setLimits: (_: OperatorOrgLimits) => {},
   updateLimitStatus: RemoteDataState.NotStarted,
 }
@@ -55,6 +62,9 @@ export const OverlayContext =
 export const OverlayProvider: FC<Props> = React.memo(({children}) => {
   const [limits, setLimits] = useState(null)
   const [limitsStatus, setLimitsStatus] = useState(RemoteDataState.NotStarted)
+  const [reactivateOrgStatus, setReactivateOrgStatus] = useState(
+    RemoteDataState.NotStarted
+  )
   const [updateLimitStatus, setUpdateLimitStatus] = useState(
     RemoteDataState.NotStarted
   )
@@ -109,6 +119,21 @@ export const OverlayProvider: FC<Props> = React.memo(({children}) => {
     [dispatch]
   )
 
+  const handleReactivateOrg = useCallback(
+    async (id: string) => {
+      try {
+        setReactivateOrgStatus(RemoteDataState.Loading)
+        await postOperatorOrgsReactivate({orgId: id})
+        setReactivateOrgStatus(RemoteDataState.Done)
+        dispatch(notify(reactivateOrgSuccess(id)))
+      } catch (error) {
+        console.error(error)
+        dispatch(notify(reactivateOrgError(id)))
+      }
+    },
+    [dispatch]
+  )
+
   const handleUpdateLimits = useCallback(
     async (id: string, updatedLimits: OperatorOrgLimits) => {
       try {
@@ -129,11 +154,13 @@ export const OverlayProvider: FC<Props> = React.memo(({children}) => {
       value={{
         handleGetLimits,
         handleGetOrg,
+        handleReactivateOrg,
         handleUpdateLimits,
         limits,
         limitsStatus,
         organization,
         orgStatus,
+        reactivateOrgStatus,
         setLimits,
         updateLimitStatus,
       }}

src/shared/copy/notifications/categories/operator.ts

@@ -19,6 +19,18 @@ export const getOrgError = (id: string): Notification => ({
   message: `Could not find organization with ID ${id}`,
 })
 
+export const reactivateOrgSuccess = (id: string): Notification => ({
+  ...defaultSuccessNotification,
+  duration: FIVE_SECONDS,
+  message: `Successfully reactivated organization with the ID ${id}`,
+})
+
+export const reactivateOrgError = (id: string): Notification => ({
+  ...defaultErrorNotification,
+  duration: FIVE_SECONDS,
+  message: `Could not reactivate organization with ID ${id}`,
+})
+
 export const getLimitsError = (id: string): Notification => ({
   ...defaultErrorNotification,
   duration: FIVE_SECONDS,