feat: add organization list tab to account page (#6197)

* feat: add organization list tab to account page

* chore: conform components to new org-allowance data shape

* chore: add link to checkout page

* chore: fix formatting nits

* chore: adjust types and component names in response to code review

* chore: reorder imports

* chore: make display of account/org tab conditional

Author: wdoconnell

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=b561645e05716036f071a43df0bf2a81ad32be90 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
+    "generate": "export SHA=1378c4d5bf380e7f33de3381fa4c8c45b6734e58 && 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/accounts/AccountPage.tsx

@@ -105,7 +105,7 @@ const AccountAboutPage: FC = () => {
   const showDeactivateAccountSection = isFlagEnabled('freeAccountCancellation')
 
   return (
-    <AccountTabContainer activeTab="about">
+    <AccountTabContainer activeTab="settings">
       <>
         <h4
           data-testid="account-settings--header"

src/accounts/AccountTabContainer.scss

@@ -0,0 +1,3 @@
+.account-page--tab-contents {
+  padding-top: 0px !important;
+}

src/accounts/AccountTabContainer.tsx

@@ -9,6 +9,9 @@ import {Tabs, Orientation, Page} from '@influxdata/clockface'
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+// Style
+import './AccountTabContainer.scss'
+
 interface Props {
   activeTab: string
 }
@@ -22,7 +25,9 @@ class AccountTabContainer extends PureComponent<Props> {
       <Page.Contents fullWidth={true} scrollable={true}>
         <Tabs.Container orientation={Orientation.Horizontal}>
           <AccountTabs activeTab={activeTab} />
-          <Tabs.TabContents>{children}</Tabs.TabContents>
+          <Tabs.TabContents className="account-page--tab-contents">
+            {children}
+          </Tabs.TabContents>
         </Tabs.Container>
       </Page.Contents>
     )

src/accounts/AccountTabs.tsx

@@ -1,66 +1,74 @@
 // Libraries
 import React, {FC} from 'react'
-import {useSelector} from 'react-redux'
 import {Link} from 'react-router-dom'
+import {useSelector} from 'react-redux'
 
 // Components
-import {Tabs, Orientation, ComponentSize} from '@influxdata/clockface'
+import {ComponentSize, Orientation, Tabs} from '@influxdata/clockface'
 
 // Utils
 import {getOrg} from 'src/organizations/selectors'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 interface Props {
   activeTab: string
 }
 
 interface AccountPageTab {
-  text: string
   id: string
+  enabled: boolean
   link: string
   testID: string
-}
-
-enum Tab {
-  Billing = 'billing',
-  About = 'about',
+  text: string
 }
 
 const AccountTabs: FC<Props> = ({activeTab}) => {
   const orgID = useSelector(getOrg)?.id
 
   const tabs: AccountPageTab[] = [
     {
-      text: 'Settings',
-      id: Tab.About,
-      testID: 'accounts-setting-tab',
+      id: 'settings',
       link: `/orgs/${orgID}/accounts/settings`,
+      enabled: true,
+      testID: 'accounts-setting-tab',
+      text: 'Settings',
     },
     {
-      text: 'Billing',
-      id: Tab.Billing,
-      testID: 'accounts-billing-tab',
+      id: 'organizations',
+      enabled: isFlagEnabled('createDeleteOrgs'),
+      link: `/orgs/${orgID}/accounts/orglist`,
+      testID: 'accounts-orglist-tab',
+      text: 'Organizations',
+    },
+    {
+      id: 'billing',
+      enabled: true,
       link: `/orgs/${orgID}/billing`,
+      testID: 'accounts-billing-tab',
+      text: 'Billing',
     },
   ]
 
   return (
     <Tabs orientation={Orientation.Horizontal} size={ComponentSize.Large}>
-      {tabs.map(tabInfo => {
-        const isActive = tabInfo.id === activeTab
+      {tabs
+        .filter(tab => tab.enabled)
+        .map(tab => {
+          const isActive = tab.id === activeTab
 
-        return (
-          <Tabs.Tab
-            key={tabInfo.id}
-            text={tabInfo.text}
-            id={tabInfo.id}
-            linkElement={className => (
-              <Link to={tabInfo.link} className={className} />
-            )}
-            testID={tabInfo.testID}
-            active={isActive}
-          />
-        )
-      })}
+          return (
+            <Tabs.Tab
+              key={tab.id}
+              text={tab.text}
+              id={tab.id}
+              linkElement={className => (
+                <Link to={tab.link} className={className} />
+              )}
+              testID={tab.testID}
+              active={isActive}
+            />
+          )
+        })}
     </Tabs>
   )
 }

src/annotations/components/AnnotationsTab.tsx

@@ -10,9 +10,9 @@ import {
   Grid,
   Sort,
 } from '@influxdata/clockface'
-import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
+import {SearchWidget} from 'src/shared/components/search_widget/SearchWidget'
 import TabbedPageHeader from 'src/shared/components/tabbed_page/TabbedPageHeader'
-import Filter from 'src/shared/components/FilterList'
+import {FilterListContainer} from 'src/shared/components/FilterList'
 import GetResources from 'src/resources/components/GetResources'
 
 import {AnnotationsList} from 'src/annotations/components/AnnotationsList'
@@ -28,7 +28,7 @@ import {SortTypes} from 'src/shared/utils/sort'
 // Thunks
 import {fetchAndSetAnnotationStreams} from 'src/annotations/actions/thunks'
 
-const FilterList = Filter<AnnotationStream>()
+const FilterList = FilterListContainer<AnnotationStream>()
 
 interface AnnotationsTabEmptyStateProps {
   searchTerm?: string

src/authorizations/components/CustomApiTokenOverlay.tsx

@@ -25,7 +25,7 @@ import {
   ComponentStatus,
 } from '@influxdata/clockface'
 import ResourceAccordion from 'src/authorizations/components/ResourceAccordion'
-import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
+import {SearchWidget} from 'src/shared/components/search_widget/SearchWidget'
 
 // Contexts
 import {OverlayContext} from 'src/overlays/components/OverlayController'

src/authorizations/components/EditResourceAccordion.tsx

@@ -8,7 +8,7 @@ import {ResourceAccordionHeader} from 'src/authorizations/components/ResourceAcc
 import {IndividualAccordionBody} from 'src/authorizations/components/IndividualAccordionBody'
 import {AllAccordionBody} from './AllAccordionBody'
 import {formatResources} from 'src/authorizations/utils/permissions'
-import FilterList from 'src/shared/components/FilterList'
+import {FilterListContainer} from 'src/shared/components/FilterList'
 
 // Types
 import {Resource} from 'src/client'
@@ -17,7 +17,7 @@ interface Props {
   searchTerm: string
 }
 
-const Filter = FilterList<Resource>()
+const Filter = FilterListContainer<Resource>()
 export class EditResourceAccordion extends Component<Props> {
   public render() {
     const {permissions} = this.props

src/authorizations/components/EditTokenOverlay.tsx

@@ -19,7 +19,7 @@ import {
   ComponentStatus,
 } from '@influxdata/clockface'
 import {EditResourceAccordion} from 'src/authorizations/components/EditResourceAccordion'
-import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
+import {SearchWidget} from 'src/shared/components/search_widget/SearchWidget'
 
 // Types
 import {Authorization, ResourceType} from 'src/types'

src/authorizations/components/ResourceAccordion.tsx

@@ -10,7 +10,7 @@ import {Accordion, DapperScrollbars} from '@influxdata/clockface'
 import {ResourceAccordionHeader} from 'src/authorizations/components/ResourceAccordionHeader'
 import {AllAccordionBody} from 'src/authorizations/components/AllAccordionBody'
 import {IndividualAccordionBody} from 'src/authorizations/components/IndividualAccordionBody'
-import FilterList from 'src/shared/components/FilterList'
+import {FilterListContainer} from 'src/shared/components/FilterList'
 
 // Types
 import {Resource} from 'src/client'
@@ -27,7 +27,7 @@ interface OwnProps {
   searchTerm: string
 }
 
-const Filter = FilterList<Resource>()
+const Filter = FilterListContainer<Resource>()
 
 class ResourceAccordion extends Component<OwnProps> {
   public render() {