feat: on creating last org in account, user gets an upgrade notification (#6335)

Author: wdoconnell

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

@@ -31,10 +31,13 @@ export const getOrgCreationAllowancesThunk =
       dispatch(setOrgCreationAllowance(allowances))
 
       dispatch(setOrgCreationAllowanceStatus(RemoteDataState.Done))
+
+      return allowances.allowed
     } catch (error) {
       reportErrorThroughHoneyBadger(error, {
         name: 'Failed to fetch org creation allowance',
         context: {state: getState().identity},
       })
+      return false
     }
   }

src/identity/components/GlobalHeader/GlobalHeaderDropdown/CreateOrganization/CreateOrgInput.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useState} from 'react'
+import React, {FC} from 'react'
 import {
   ComponentSize,
   ComponentStatus,
@@ -25,12 +25,7 @@ export const CreateOrgInput: FC<Props> = ({
   orgName,
   validationMsg,
 }) => {
-  const [userTouchedFormInput, setUserTouchedFormInput] = useState(false)
-
   const handleInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
-    if (!userTouchedFormInput) {
-      setUserTouchedFormInput(true)
-    }
     handleValidateOrgName(evt.target.value)
   }
 

src/identity/components/GlobalHeader/GlobalHeaderDropdown/CreateOrganization/CreateOrganizationOverlay.tsx

@@ -66,16 +66,19 @@ enum ProviderSelectMessage {
 // Selectors
 import {
   selectCurrentAccountId,
+  selectOrgCreationAllowance,
+  selectOrgCreationAllowanceStatus,
   selectQuartzOrgsContents,
   selectQuartzOrgsStatus,
 } from 'src/identity/selectors'
 
 // Notifications
 import {notify} from 'src/shared/actions/notifications'
-import {orgCreateSuccess} from 'src/shared/copy/notifications'
+import {orgCreateSuccess, orgQuotaReached} from 'src/shared/copy/notifications'
 
 // Thunks
 import {getQuartzOrganizationsThunk} from 'src/identity/quartzOrganizations/actions/thunks'
+import {getOrgCreationAllowancesThunk} from 'src/identity/allowances/actions/thunks'
 
 // Utils
 import {generateProviderMap} from 'src/identity/components/GlobalHeader/GlobalHeaderDropdown/CreateOrganization/utils/generateProviderMap'
@@ -89,6 +92,10 @@ export const CreateOrganizationOverlay: FC = () => {
   const currentAccountId = useSelector(selectCurrentAccountId)
   const organizations = useSelector(selectQuartzOrgsContents)
   const orgsLoadedStatus = useSelector(selectQuartzOrgsStatus)
+  const orgCreationAllowed = useSelector(selectOrgCreationAllowance)
+  const orgCreationAllowanceStatus = useSelector(
+    selectOrgCreationAllowanceStatus
+  )
 
   // Local State
   // Dropdown State
@@ -120,13 +127,31 @@ export const CreateOrganizationOverlay: FC = () => {
     ? RemoteDataState.Done
     : RemoteDataState.Loading
 
-  // Ajax requests
+  // Side effects
   useEffect(() => {
     if (orgsLoadedStatus === RemoteDataState.NotStarted) {
       dispatch(getQuartzOrganizationsThunk(currentAccountId))
     }
   }, [currentAccountId, orgsLoadedStatus, dispatch])
 
+  useEffect(() => {
+    if (orgCreationAllowanceStatus === RemoteDataState.NotStarted) {
+      dispatch(getOrgCreationAllowancesThunk())
+    }
+  }, [dispatch, orgCreationAllowanceStatus])
+
+  useEffect(() => {
+    if (!orgCreationAllowed) {
+      if (createOrgButtonStatus === ComponentStatus.Default) {
+        setCreateOrgButtonStatus(ComponentStatus.Disabled)
+      }
+
+      if (networkErrorMsg !== OrgOverlayNetworkError.OrgLimitError) {
+        setNetworkErrorMsg(OrgOverlayNetworkError.OrgLimitError)
+      }
+    }
+  }, [createOrgButtonStatus, networkErrorMsg, orgCreationAllowed])
+
   useEffect(() => {
     const retrieveClusters = async () => {
       try {
@@ -162,12 +187,16 @@ export const CreateOrganizationOverlay: FC = () => {
         region: currentRegion,
       })
       setCreateOrgButtonStatus(ComponentStatus.Default)
-      onClose()
       dispatch(notify(orgCreateSuccess()))
-      // Will make another API call to the allowance endpoint in PR resolving this issue.
-      // https://github.com/influxdata/ui/issues/6267
-      // Need a parallel update to global header state to ensure list of orgs remains updated.
       dispatch(getQuartzOrganizationsThunk(currentAccountId))
+      Promise.resolve(dispatch(getOrgCreationAllowancesThunk())).then(
+        allowed => {
+          if (!allowed) {
+            dispatch(notify(orgQuotaReached()))
+          }
+          onClose()
+        }
+      )
     } catch (err) {
       if (err instanceof UnprocessableEntityError) {
         setNetworkErrorMsg(OrgOverlayNetworkError.NameConflictError)

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

@@ -1,9 +1,18 @@
-import {Notification} from 'src/types'
+// Libraries
+import {IconFont} from '@influxdata/clockface'
+
+// Constants
+import {FIFTEEN_SECONDS} from 'src/shared/constants'
+
+// Notifications
 import {
   defaultErrorNotification,
   defaultSuccessNotification,
 } from 'src/shared/copy/notifications'
 
+// Types
+import {Notification, NotificationStyle} from 'src/types'
+
 export const accountDefaultSettingError = (
   accountName: string
 ): Notification => ({
@@ -101,6 +110,15 @@ export const orgEditSuccess = (): Notification => ({
   message: 'Organization was successfully updated',
 })
 
+export const orgQuotaReached = (): Notification => ({
+  ...defaultSuccessNotification,
+  style: NotificationStyle.Primary,
+  styles: {maxWidth: '360px'},
+  icon: IconFont.Info_New,
+  duration: FIFTEEN_SECONDS,
+  message: `You've reached the organization quota for this account. Upgrade to add more organizations.`,
+})
+
 export const orgRenameFailed = (orgName): Notification => ({
   ...defaultErrorNotification,
   message: `Failed to update organization "${orgName}"`,