feat(ecommerce): Add Account Type Dropdown to Operator UI (#4218)

* ✨ Add Account Type Dropdown to Operator

* ✨ Format dropdown and add to organizations list

* 🏷️ Add type to `useState` in operator

* 🏷️  Replace `string` with `AccountType`

* 🏷️ Update operator types

* 🔧 Use new SHA for `openapi`

* 🏷️ Use `type` instead of `JSON.parse`

* 🏷️  Update type for operator `setAccountType` function

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=8823ef7b35fe7096856fa903649f7986ff31ef2e && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
+    "generate": "export SHA=1a800fb92ad8ed86e28365c4fd5ac43ff193c303 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
     "generate-local": "export REMOTE=../openapi/ && yarn generate-meta",
     "generate-meta": "if [ -z \"${CLOUD_URL}\" ]; then yarn generate-meta-oss; else yarn generate-meta-cloud; fi",
     "generate-meta-oss": "yarn oss-api && yarn notebooks && yarn unity && yarn annotations-oss && yarn pinned && yarn mapsd-oss && yarn cloudPriv && yarn fluxdocs && yarn subscriptions-oss",

src/operator/ResourcesAccountType.tsx

@@ -0,0 +1,38 @@
+import {
+  ComponentColor,
+  DropdownMenuTheme,
+  MultiSelectDropdown,
+} from '@influxdata/clockface'
+import React, {FC, useContext} from 'react'
+import {OperatorContext} from './context/operator'
+import {AccountType} from 'src/types'
+
+const allAccountTypes: AccountType[] = [
+  'cancelled',
+  'contract',
+  'free',
+  'pay_as_you_go',
+]
+
+const ResourcesAccountType: FC = () => {
+  const {accountTypes, setAccountTypes} = useContext(OperatorContext)
+
+  const handleSelect = (selectedOption: AccountType): void =>
+    accountTypes.includes(selectedOption)
+      ? setAccountTypes(prev => prev.filter(x => x !== selectedOption))
+      : setAccountTypes(prev => [selectedOption, ...prev])
+
+  return (
+    <MultiSelectDropdown
+      style={{width: '220px', marginRight: '20px'}}
+      options={allAccountTypes}
+      selectedOptions={accountTypes}
+      onSelect={(value: AccountType) => handleSelect(value)}
+      menuTheme={DropdownMenuTheme.Onyx}
+      emptyText="Account Types"
+      buttonColor={ComponentColor.Primary}
+    />
+  )
+}
+
+export default ResourcesAccountType

src/operator/ResourcesTable.tsx

@@ -6,6 +6,8 @@ import {
   ComponentSize,
   Tabs,
   Orientation,
+  FlexBox,
+  FlexDirection,
 } from '@influxdata/clockface'
 
 // Components
@@ -26,6 +28,7 @@ import {OperatorRoutes} from 'src/operator/constants'
 
 // Types
 import {OperatorOrg, OperatorAccount} from 'src/types'
+import ResourcesAccountType from './ResourcesAccountType'
 
 const ResourcesTable: FC = () => {
   const {pathname, accounts, organizations, status} = useContext(
@@ -46,7 +49,10 @@ const ResourcesTable: FC = () => {
     <Tabs.Container orientation={Orientation.Horizontal}>
       <OperatorTabs />
       <Tabs.TabContents>
-        <ResourcesSearchbar />
+        <FlexBox direction={FlexDirection.Row}>
+          <ResourcesAccountType />
+          <ResourcesSearchbar />
+        </FlexBox>
         <PageSpinner loading={status}>
           {resources?.length ? (
             <Table>

src/operator/context/operator.tsx

@@ -10,7 +10,12 @@ import {getAccountsError, getOrgsError} from 'src/shared/copy/notifications'
 import {getQuartzMe} from 'src/me/selectors'
 
 // Types
-import {OperatorAccount, OperatorOrg, RemoteDataState} from 'src/types'
+import {
+  AccountType,
+  OperatorAccount,
+  OperatorOrg,
+  RemoteDataState,
+} from 'src/types'
 
 // Constants
 import {OperatorRoutes} from 'src/operator/constants'
@@ -21,6 +26,10 @@ export type Props = {
 
 export interface OperatorContextType {
   accounts: OperatorAccount[]
+  accountTypes: AccountType[]
+  setAccountTypes: (
+    accountTypes: AccountType[] | ((prevState: AccountType[]) => AccountType[])
+  ) => void
   handleGetAccounts: () => void
   handleGetOrgs: () => void
   organizations: OperatorOrg[]
@@ -33,6 +42,8 @@ export interface OperatorContextType {
 
 export const DEFAULT_CONTEXT: OperatorContextType = {
   accounts: [],
+  accountTypes: [],
+  setAccountTypes: () => {},
   handleGetAccounts: () => {},
   handleGetOrgs: () => {},
   organizations: [],
@@ -52,6 +63,7 @@ export const OperatorProvider: FC<Props> = React.memo(({children}) => {
   const [accountStatus, setAccountStatus] = useState(RemoteDataState.NotStarted)
   const [orgsStatus, setOrgsStatus] = useState(RemoteDataState.NotStarted)
   const [searchTerm, setSearchTerm] = useState('')
+  const [accountTypes, setAccountTypes] = useState<AccountType[]>([])
   const dispatch = useDispatch()
   const quartzMe = useSelector(getQuartzMe)
 
@@ -63,6 +75,7 @@ export const OperatorProvider: FC<Props> = React.memo(({children}) => {
       const resp = await getOperatorAccounts({
         query: {
           query: searchTerm,
+          accountTypes,
         },
       })
 
@@ -77,12 +90,14 @@ export const OperatorProvider: FC<Props> = React.memo(({children}) => {
       dispatch(notify(getAccountsError()))
       console.error({error})
     }
-  }, [searchTerm, dispatch])
+  }, [accountTypes, searchTerm, dispatch])
 
   const handleGetOrgs = useCallback(async () => {
     try {
       setOrgsStatus(RemoteDataState.Loading)
-      const resp = await getOperatorOrgs({query: {query: searchTerm}})
+      const resp = await getOperatorOrgs({
+        query: {query: searchTerm, accountTypes},
+      })
 
       if (resp.status !== 200) {
         throw new Error(resp.data.message)
@@ -95,7 +110,7 @@ export const OperatorProvider: FC<Props> = React.memo(({children}) => {
       setOrgsStatus(RemoteDataState.Error)
       dispatch(notify(getOrgsError()))
     }
-  }, [searchTerm, dispatch])
+  }, [accountTypes, searchTerm, dispatch])
 
   const {pathname} = useLocation()
 
@@ -134,6 +149,8 @@ export const OperatorProvider: FC<Props> = React.memo(({children}) => {
     <OperatorContext.Provider
       value={{
         accounts,
+        accountTypes,
+        setAccountTypes,
         handleGetAccounts,
         handleGetOrgs,
         organizations,