feat(Identity): use account allowances state to allow org creation (#6324)

* feat: add org creation allowance to indentity state

* chore: update name of allowances creators

* feat: add selectors for orgCreationAllowances

* feat: replace use of account type with allowances

* chore: update name of allowances reducer

* chore: clean up

* feat: create separate selector for all allowances

* test: update test to use getAllowancesOrgsCreate endpoint

* test: move cy interception to test file

* chore: send identity state only to honeybadger

* fix: prettier

* fix: prettier

* chore: add createDeleteOrg ff to useEffect hook

* chore: clean up

Author: blegesse-w

cypress/e2e/cloud/globalHeaderOrgMenuItems.test.ts

@@ -4,6 +4,16 @@ const createOrgsFeatureFlags = {
   createDeleteOrgs: true,
 }
 
+const getOrgCreationAllowance = (fixtureName: string) => {
+  cy.fixture(fixtureName).then(orgCreationAllowance => {
+    cy.intercept(
+      'GET',
+      'api/v2/quartz/allowances/orgs/create',
+      orgCreationAllowance
+    ).as('getAllowancesOrgsCreate')
+  })
+}
+
 describe('FREE: global header menu items test', () => {
   let idpeOrgID: string
 
@@ -29,6 +39,8 @@ describe('FREE: global header menu items test', () => {
     Cypress.Cookies.preserveOnce('sid')
 
     makeQuartzUseIDPEOrgID(idpeOrgID)
+    getOrgCreationAllowance('createOrgAllowance')
+
     cy.visit('/')
   })
 
@@ -66,6 +78,8 @@ describe('PAYG: global header menu items test', () => {
 
   beforeEach(() => {
     makeQuartzUseIDPEOrgID(idpeOrgID, 'pay_as_you_go')
+    getOrgCreationAllowance('createOrgAllowancePAYG')
+
     cy.visit('/')
   })
 
@@ -103,6 +117,8 @@ describe('Contract: global header menu items test', () => {
 
   beforeEach(() => {
     makeQuartzUseIDPEOrgID(idpeOrgID, 'contract')
+    getOrgCreationAllowance('createOrgAllowanceContract')
+
     cy.visit('/')
   })
 

cypress/fixtures/createOrgAllowance.json

@@ -0,0 +1,4 @@
+{
+  "allowed": false,
+  "availableUpgrade": "pay_as_you_go"
+}

cypress/fixtures/createOrgAllowanceContract.json

@@ -0,0 +1,4 @@
+{
+  "allowed": true,
+  "availableUpgrade": "none"
+}

cypress/fixtures/createOrgAllowancePAYG.json

@@ -0,0 +1,4 @@
+{
+  "allowed": true,
+  "availableUpgrade": "contract"
+}

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

@@ -0,0 +1,22 @@
+import {OrgCreationAllowance} from 'src/identity/apis/org'
+import {RemoteDataState} from 'src/types'
+
+export const SET_ORG_CREATION_ALLOWANCE = 'SET_ORG_CREATION_ALLOWANCE'
+export const SET_ORG_CREATION_ALLOWANCE_STATUS =
+  'SET_ORG_CREATION_ALLOWANCE_STATUS'
+
+export type OrgCreationAllowanceActions =
+  | ReturnType<typeof setOrgCreationAllowance>
+  | ReturnType<typeof setOrgCreationAllowanceStatus>
+
+export const setOrgCreationAllowance = (allowances: OrgCreationAllowance) =>
+  ({
+    type: SET_ORG_CREATION_ALLOWANCE,
+    allowances: allowances,
+  } as const)
+
+export const setOrgCreationAllowanceStatus = (loadingStatus: RemoteDataState) =>
+  ({
+    type: SET_ORG_CREATION_ALLOWANCE_STATUS,
+    loadingStatus: loadingStatus,
+  } as const)

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

@@ -0,0 +1,40 @@
+// Libraries
+import {Dispatch} from 'react'
+
+// Actions
+import {
+  OrgCreationAllowanceActions,
+  setOrgCreationAllowance,
+  setOrgCreationAllowanceStatus,
+} from 'src/identity/allowances/actions/creators'
+
+// API
+import {fetchOrgCreationAllowance} from 'src/identity/apis/org'
+
+// Types
+import {GetState, RemoteDataState} from 'src/types'
+
+// Utils
+import {reportErrorThroughHoneyBadger} from 'src/shared/utils/errors'
+
+export const getOrgCreationAllowancesThunk =
+  () =>
+  async (
+    dispatch: Dispatch<OrgCreationAllowanceActions>,
+    getState: GetState
+  ) => {
+    try {
+      dispatch(setOrgCreationAllowanceStatus(RemoteDataState.Loading))
+
+      const allowances = await fetchOrgCreationAllowance()
+
+      dispatch(setOrgCreationAllowance(allowances))
+
+      dispatch(setOrgCreationAllowanceStatus(RemoteDataState.Done))
+    } catch (error) {
+      reportErrorThroughHoneyBadger(error, {
+        name: 'Failed to fetch org creation allowance',
+        context: {state: getState().identity},
+      })
+    }
+  }

src/identity/allowances/reducers/index.ts

@@ -0,0 +1,46 @@
+// Libraries
+import produce from 'immer'
+
+// Actions
+import {
+  OrgCreationAllowanceActions,
+  SET_ORG_CREATION_ALLOWANCE,
+  SET_ORG_CREATION_ALLOWANCE_STATUS,
+} from 'src/identity/allowances/actions/creators'
+
+// Types
+import {OrgCreationAllowance} from 'src/identity/apis/org'
+import {RemoteDataState} from 'src/types'
+
+interface AllowanceState {
+  orgCreation: OrgCreationAllowanceState
+}
+export interface OrgCreationAllowanceState extends OrgCreationAllowance {
+  loadingStatus: RemoteDataState
+}
+
+export const initialState: AllowanceState = {
+  orgCreation: {
+    allowed: false,
+    availableUpgrade: 'none',
+    loadingStatus: RemoteDataState.NotStarted,
+  },
+}
+
+export default (state = initialState, action: OrgCreationAllowanceActions) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case SET_ORG_CREATION_ALLOWANCE: {
+        const {allowed, availableUpgrade} = action.allowances
+
+        draftState.orgCreation.allowed = allowed
+        draftState.orgCreation.availableUpgrade = availableUpgrade
+        return
+      }
+
+      case SET_ORG_CREATION_ALLOWANCE_STATUS: {
+        draftState.orgCreation.loadingStatus = action.loadingStatus
+        return
+      }
+    }
+  })

src/identity/apis/auth.ts

@@ -7,16 +7,19 @@ import {CLOUD} from 'src/shared/constants'
 
 // Types
 import {RemoteDataState} from 'src/types'
+import {OrgCreationAllowanceState} from 'src/identity/allowances/reducers'
 import {Error as IdpeError, UserResponse as UserResponseIdpe} from 'src/client'
 import {ServerError, UnauthorizedError} from 'src/types/error'
 import {CurrentAccount} from 'src/identity/apis/account'
 import {CurrentOrg, QuartzOrganizations} from 'src/identity/apis/org'
 
 export interface IdentityState {
+  allowances: {
+    orgCreation: OrgCreationAllowanceState
+  }
   currentIdentity: CurrentIdentity
   quartzOrganizations: QuartzOrganizations
 }
-
 export interface IdentityLoadingStatus {
   identityStatus: RemoteDataState
   billingStatus: RemoteDataState

src/identity/apis/org.ts

@@ -35,6 +35,11 @@ export interface CurrentOrg {
   regionName?: string
 }
 
+export interface OrgCreationAllowance {
+  allowed: boolean
+  availableUpgrade: 'contract' | 'none' | 'pay_as_you_go'
+}
+
 export interface QuartzOrganization {
   id: string
   name: string
@@ -132,17 +137,18 @@ export const fetchDefaultAccountDefaultOrg = async (): Promise<
 }
 
 // fetch data regarding whether the user can create new orgs, and associated upgrade options.
-export const fetchOrgCreationAllowance = async () => {
-  const response = await getAllowancesOrgsCreate({})
+export const fetchOrgCreationAllowance =
+  async (): Promise<OrgCreationAllowance> => {
+    const response = await getAllowancesOrgsCreate({})
 
-  if (response.status !== 200) {
-    throw new GenericError(
-      'Failed to determine whether this user can create a new organization.'
-    )
-  }
+    if (response.status !== 200) {
+      throw new GenericError(
+        'Failed to determine whether this user can create a new organization.'
+      )
+    }
 
-  return response.data
-}
+    return response.data
+  }
 
 // fetch the list of organizations associated with a given account ID
 export const fetchOrgsByAccountID = async (

src/identity/components/GlobalHeader/OrgDropdown.tsx

@@ -1,8 +1,9 @@
 // Libraries
-import React, {FC} from 'react'
-import {IconFont} from '@influxdata/clockface'
+import React, {FC, useEffect} from 'react'
+import {useDispatch, useSelector} from 'react-redux'
 
 // Components
+import {IconFont, RemoteDataState} from '@influxdata/clockface'
 import {
   GlobalHeaderDropdown,
   MainMenuItem,
@@ -24,12 +25,18 @@ import {
 } from 'src/identity/events/multiOrgEvents'
 import {event} from 'src/cloud/utils/reporting'
 
+// Thunks
+import {getOrgCreationAllowancesThunk} from 'src/identity/allowances/actions/thunks'
+
 // Utils
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Selectors
-import {useSelector} from 'react-redux'
-import {selectCurrentAccountType} from 'src/identity/selectors'
+import {
+  selectOrgCreationAllowance,
+  selectOrgCreationAllowanceStatus,
+  selectOrgCreationAvailableUpgrade,
+} from 'src/identity/selectors'
 import {CreateOrganizationMenuItem} from 'src/identity/components/GlobalHeader/GlobalHeaderDropdown/CreateOrganization/MenuItem'
 
 type OrgSummaryItem = OrganizationSummaries[number]
@@ -43,7 +50,23 @@ const menuStyle = {width: '250px', padding: '16px'}
 const orgDropdownStyle = {width: 'auto'}
 
 export const OrgDropdown: FC<Props> = ({activeOrg, orgsList}) => {
-  const accountType = useSelector(selectCurrentAccountType)
+  const orgCreationAllowed = useSelector(selectOrgCreationAllowance)
+  const availableUpgrade = useSelector(selectOrgCreationAvailableUpgrade)
+  const orgCreationAllowanceStatus = useSelector(
+    selectOrgCreationAllowanceStatus
+  )
+
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    if (
+      isFlagEnabled('createDeleteOrgs') &&
+      orgCreationAllowanceStatus === RemoteDataState.NotStarted
+    ) {
+      dispatch(getOrgCreationAllowancesThunk())
+    }
+  }, [dispatch, orgCreationAllowanceStatus])
+
   const switchOrg = (org: TypeAheadMenuItem) => {
     event(HeaderNavEvent.OrgSwitch, multiOrgTag, {
       oldOrgID: activeOrg.id,
@@ -72,7 +95,11 @@ export const OrgDropdown: FC<Props> = ({activeOrg, orgsList}) => {
     },
   ]
 
-  if (isFlagEnabled('createDeleteOrgs') && accountType === 'free') {
+  if (
+    isFlagEnabled('createDeleteOrgs') &&
+    !orgCreationAllowed &&
+    availableUpgrade !== 'none'
+  ) {
     orgMainMenu.push({
       name: 'Add More Organizations',
       iconFont: IconFont.CrownSolid_New,
@@ -87,10 +114,7 @@ export const OrgDropdown: FC<Props> = ({activeOrg, orgsList}) => {
   }
 
   const additionalHeaderItems = []
-  if (
-    isFlagEnabled('createDeleteOrgs') &&
-    (accountType === 'contract' || accountType === 'pay_as_you_go')
-  ) {
+  if (isFlagEnabled('createDeleteOrgs') && orgCreationAllowed) {
     additionalHeaderItems.push(
       <CreateOrganizationMenuItem key="CreateOrgMenuItem" />
     )