feat: redirect to orgslist, offer switch-org option on creating new org (#6350)

* chore: working version of renav on org creation

* chore: make notification code more readable

* chore: remove unnecessary return from quartzOrgs thunk

* chore: remove event handler from switchToNewOrgButton

Author: wdoconnell

src/identity/apis/org.ts

@@ -28,6 +28,10 @@ import {
   UnprocessableEntityError,
 } from 'src/types/error'
 
+export interface CreatedOrg extends Omit<Organization, 'state'> {
+  provisioningStatus?: state
+}
+
 export interface CurrentOrg {
   id: string
   clusterHost: string
@@ -57,7 +61,7 @@ export type QuartzOrganizations = {
 // create a new organization
 export const createNewOrg = async (
   organizationCreateRequest: OrganizationCreateRequest
-) => {
+): Promise<CreatedOrg> => {
   const {orgName, provider, region} = organizationCreateRequest
 
   const response = await postOrg({
@@ -88,8 +92,12 @@ export const createNewOrg = async (
     throw new ServerError(response.data.message)
   }
 
-  // Status code in response when successfully creating an org is 201.
-  return response.data
+  // Rename the quartz 'state' property to 'provisioningStatus' for clarity.
+  const newOrg = response.data
+  const provisioningStatus = newOrg.state
+  const formattedNewOrg = {...omit(newOrg, ['state']), provisioningStatus}
+
+  return formattedNewOrg
 }
 
 // fetch the list of clusters in which an org can be created

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

@@ -1,5 +1,6 @@
 // Libraries
 import React, {FC, useContext, useEffect, useState} from 'react'
+import {useHistory} from 'react-router-dom'
 import {useDispatch, useSelector} from 'react-redux'
 import {
   Alert,
@@ -28,7 +29,7 @@ import {RegionDropdown} from 'src/identity/components/GlobalHeader/GlobalHeaderD
 import './CreateOrganizationOverlay.scss'
 
 // API
-import {createNewOrg, fetchClusterList} from 'src/identity/apis/org'
+import {CreatedOrg, createNewOrg, fetchClusterList} from 'src/identity/apis/org'
 
 // Types
 import {Cluster, OrganizationCreateRequest} from 'src/client/unityRoutes'
@@ -66,6 +67,7 @@ enum ProviderSelectMessage {
 // Selectors
 import {
   selectCurrentAccountId,
+  selectCurrentOrgId,
   selectOrgCreationAllowance,
   selectOrgCreationAllowanceStatus,
   selectQuartzOrgs,
@@ -74,7 +76,13 @@ import {
 
 // Notifications
 import {notify} from 'src/shared/actions/notifications'
-import {orgCreateSuccess, orgQuotaReached} from 'src/shared/copy/notifications'
+import {
+  quartzOrgCreateSuccess,
+  quartzOrgQuotaReached,
+} from 'src/shared/copy/notifications'
+
+// Constants
+import {CLOUD_URL} from 'src/shared/constants'
 
 // Thunks
 import {getQuartzOrganizationsThunk} from 'src/identity/quartzOrganizations/actions/thunks'
@@ -84,13 +92,33 @@ import {getOrgCreationAllowancesThunk} from 'src/identity/allowances/actions/thu
 import {generateProviderMap} from 'src/identity/components/GlobalHeader/GlobalHeaderDropdown/CreateOrganization/utils/generateProviderMap'
 import {SafeBlankLink} from 'src/utils/SafeBlankLink'
 
+const switchToNewOrgButtonStyle = {
+  color: 'black',
+  textDecoration: 'underline',
+  cursor: 'pointer',
+}
+
+const SwitchToNewOrgButton = (url: string): JSX.Element => {
+  return (
+    <a
+      href={url}
+      data-testid="go-to-new-org--link"
+      style={switchToNewOrgButtonStyle}
+    >
+      Switch to new org.
+    </a>
+  )
+}
+
 export const CreateOrganizationOverlay: FC = () => {
   const dispatch = useDispatch()
+  const history = useHistory()
   const {onClose} = useContext(OverlayContext)
 
   // Selectors
   const currentAccountId = useSelector(selectCurrentAccountId)
   const organizations = useSelector(selectQuartzOrgs)
+  const currentOrgId = useSelector(selectCurrentOrgId)
   const orgsLoadedStatus = useSelector(selectQuartzOrgsStatus)
   const orgCreationAllowed = useSelector(selectOrgCreationAllowance)
   const orgCreationAllowanceStatus = useSelector(
@@ -178,22 +206,41 @@ export const CreateOrganizationOverlay: FC = () => {
   }, [])
 
   // Event Handlers
+  const createNewOrgPopup = (newOrg: CreatedOrg) => {
+    const newOrgUrl = `${CLOUD_URL}/orgs/${newOrg.id}`
+
+    const switchToOrgLink =
+      newOrg.provisioningStatus === 'provisioned'
+        ? () => SwitchToNewOrgButton(newOrgUrl)
+        : null
+
+    dispatch(notify(quartzOrgCreateSuccess(newOrg.name, switchToOrgLink)))
+  }
+
   const handleCreateOrg = async () => {
     try {
       setCreateOrgButtonStatus(ComponentStatus.Loading)
-      await createNewOrg({
+
+      const newOrg = await createNewOrg({
         orgName: newOrgName,
         provider: currentProvider,
         region: currentRegion,
       })
+
       setCreateOrgButtonStatus(ComponentStatus.Default)
-      dispatch(notify(orgCreateSuccess()))
-      dispatch(getQuartzOrganizationsThunk(currentAccountId))
+
       Promise.resolve(dispatch(getOrgCreationAllowancesThunk())).then(
-        allowed => {
-          if (!allowed) {
-            dispatch(notify(orgQuotaReached()))
+        orgCreationAllowed => {
+          dispatch(getQuartzOrganizationsThunk(currentAccountId))
+
+          createNewOrgPopup(newOrg)
+
+          if (!orgCreationAllowed) {
+            dispatch(notify(quartzOrgQuotaReached()))
           }
+
+          history.push(`/orgs/${currentOrgId}/accounts/orglist`)
+
           onClose()
         }
       )

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

@@ -11,7 +11,11 @@ import {
 } from 'src/shared/copy/notifications'
 
 // Types
-import {Notification, NotificationStyle} from 'src/types'
+import {
+  Notification,
+  NotificationButtonElement,
+  NotificationStyle,
+} from 'src/types'
 
 export const accountDefaultSettingError = (
   accountName: string
@@ -110,15 +114,6 @@ 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}"`,
@@ -129,6 +124,32 @@ export const orgRenameSuccess = (orgName: string): Notification => ({
   message: `Organization was successfully renamed "${orgName}"`,
 })
 
+export const quartzOrgCreateSuccess = (
+  orgName: string,
+  switchToOrgLink?: NotificationButtonElement
+): Notification => {
+  const notification = {
+    ...defaultSuccessNotification,
+    message: `Organization "${orgName}" created.`,
+    duration: FIFTEEN_SECONDS,
+  }
+
+  if (switchToOrgLink) {
+    notification.buttonElement = switchToOrgLink
+  }
+
+  return notification
+}
+
+export const quartzOrgQuotaReached = (): 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 removeUserFailed = (): Notification => ({
   ...defaultErrorNotification,
   message: `Error removing user, try again`,