feat: add multiorg, multiaccount GlobalHeader to UI

Author: ChitlangeSahas

package.json

@@ -164,7 +164,7 @@
   "dependencies": {
     "@codingame/monaco-jsonrpc": "^0.3.1",
     "@docsearch/react": "^3.0.0-alpha.37",
-    "@influxdata/clockface": "^4.7.3",
+    "@influxdata/clockface": "^4.7.4",
     "@influxdata/flux-lsp-browser": "0.8.20",
     "@influxdata/giraffe": "^2.30.0",
     "@influxdata/influxdb-templates": "0.9.0",

src/App.tsx

@@ -26,6 +26,8 @@ import {
 } from 'src/overlays/components/OverlayController'
 import PageSpinner from 'src/perf/components/PageSpinner'
 import EngagementLink from 'src/cloud/components/onboarding/EngagementLink'
+import {GlobalHeaderContainer} from 'src/identity/components/GlobalHeaderContainer'
+
 const SetOrg = lazy(() => import('src/shared/containers/SetOrg'))
 const CreateOrgOverlay = lazy(() =>
   import('src/organizations/components/CreateOrgOverlay')
@@ -37,6 +39,10 @@ import {AppState} from 'src/types'
 // Utils
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {CLOUD} from 'src/shared/constants'
+import {shouldUseQuartzIdentity} from './identity/utils/shouldUseQuartzIdentity'
+
+// Styles
+const fullScreen = {height: '100%', width: '100%'}
 
 const App: FC = () => {
   const {theme, presentationMode} = useContext(AppSettingContext)
@@ -87,10 +93,15 @@ const App: FC = () => {
       <EngagementLink />
       <TreeNav />
       <Suspense fallback={<PageSpinner />}>
-        <Switch>
-          <Route path="/orgs/new" component={CreateOrgOverlay} />
-          <Route path="/orgs/:orgID" component={SetOrg} />
-        </Switch>
+        <div style={fullScreen}>
+          {CLOUD && isFlagEnabled('multiOrg') && shouldUseQuartzIdentity() && (
+            <GlobalHeaderContainer />
+          )}
+          <Switch>
+            <Route path="/orgs/new" component={CreateOrgOverlay} />
+            <Route path="/orgs/:orgID" component={SetOrg} />
+          </Switch>
+        </div>
       </Suspense>
     </AppWrapper>
   )

src/identity/actions/thunks/index.ts

@@ -65,14 +65,14 @@ export const getBillingProviderThunk = () => async (
     dispatch(setQuartzIdentityStatus(RemoteDataState.Loading))
 
     const currentState = getState()
-    const accountId = currentState.identity.account.id
+    const accountId = currentState.identity.currentIdentity.account.id
 
     const accountDetails = await fetchAccountDetails(accountId)
 
     dispatch(setCurrentBillingProvider(accountDetails.billingProvider))
     dispatch(setQuartzIdentityStatus(RemoteDataState.Done))
     const updatedState = getState()
-    const legacyMe = convertIdentityToMe(updatedState.identity)
+    const legacyMe = convertIdentityToMe(updatedState.identity.currentIdentity)
     dispatch(setQuartzMe(legacyMe, RemoteDataState.Done))
     dispatch(setQuartzMeStatus(RemoteDataState.Done))
   } catch (error) {
@@ -90,15 +90,15 @@ export const getCurrentOrgDetailsThunk = () => async (
     dispatch(setQuartzIdentityStatus(RemoteDataState.Loading))
 
     const state = getState()
-    const orgId = state.identity.org.id
+    const orgId = state.identity.currentIdentity.org.id
 
     const orgDetails = await fetchOrgDetails(orgId)
 
     dispatch(setCurrentOrgDetails(orgDetails))
     dispatch(setQuartzIdentityStatus(RemoteDataState.Done))
 
     const updatedState = getState()
-    const legacyMe = convertIdentityToMe(updatedState.identity)
+    const legacyMe = convertIdentityToMe(updatedState.identity.currentIdentity)
     dispatch(setQuartzMe(legacyMe, RemoteDataState.Done))
     dispatch(setQuartzMeStatus(RemoteDataState.Done))
   } catch (error) {

src/identity/apis/auth.ts

@@ -4,12 +4,15 @@ import {
   getIdentity,
   getMe as getMeQuartz,
   getOrg,
+  getOrgs,
+  putOrgsDefault,
   Account,
   Identity,
   IdentityAccount,
   IdentityUser,
   Me as MeQuartz,
   Organization,
+  OrganizationSummaries,
 } from 'src/client/unityRoutes'
 
 import {
@@ -45,6 +48,16 @@ export interface CurrentOrg {
   regionName?: string
 }
 
+export interface IdentityState {
+  currentIdentity: CurrentIdentity
+  quartzOrganizations: QuartzOrganizations
+}
+
+export type QuartzOrganizations = {
+  orgs: OrganizationSummaries
+  status?: RemoteDataState
+}
+
 export interface CurrentIdentity {
   user: IdentityUser
   account: CurrentAccount
@@ -186,3 +199,34 @@ export const fetchOrgDetails = async (orgId: string): Promise<Organization> => {
   const orgDetails = response.data
   return orgDetails
 }
+
+// fetch list of user's current organizations
+export const fetchQuartzOrgs = async (): Promise<OrganizationSummaries> => {
+  const response = await getOrgs({})
+
+  if (response.status === 401) {
+    throw new UnauthorizedError(response.data.message)
+  }
+
+  if (response.status === 500) {
+    throw new ServerError(response.data.message)
+  }
+
+  return response.data
+}
+
+// change default organization for a given account
+export const putDefaultQuartzOrg = async (orgId: string) => {
+  const response = await putOrgsDefault({
+    data: {
+      id: orgId,
+    },
+  })
+
+  // Only status codes thrown at moment are 204 and 5xx.
+  if (response.status !== 204) {
+    throw new ServerError(response.data.message)
+  }
+
+  return response.data
+}

src/identity/components/GlobalHeader/AccountDropdown.tsx

@@ -0,0 +1,57 @@
+import React, {FC} from 'react'
+import {IconFont} from '@influxdata/clockface'
+import {MenuDropdown, SubMenuItem} from '@influxdata/clockface'
+import {OrganizationSummaries, UserAccount} from 'src/client/unityRoutes'
+
+type OrgSummaryItem = OrganizationSummaries[number]
+
+interface Props {
+  activeOrg: OrgSummaryItem
+  activeAccount: UserAccount
+  accountsList: UserAccount[]
+}
+
+const style = {width: 'auto'}
+const menuStyle = {width: '250px'}
+
+export const AccountDropdown: FC<Props> = ({
+  activeOrg,
+  activeAccount,
+  accountsList,
+}) => {
+  const selectedAccount = {
+    id: activeAccount.id.toString(),
+    name: activeAccount.name,
+  }
+
+  const accountMainMenu = [
+    {
+      name: 'Settings',
+      iconFont: IconFont.CogOutline,
+      href: `/orgs/${activeOrg.id}/accounts/settings`,
+    },
+    {
+      name: 'Billing',
+      iconFont: IconFont.Bill,
+      href: `/orgs/${activeOrg.id}/billing`,
+    },
+  ]
+
+  // Quartz handles switching accounts by having the user hit this URL.
+  const switchAccount = (account: SubMenuItem) => {
+    window.location.href = `orgs/${activeOrg.id}/accounts/${account.id}`
+  }
+
+  return (
+    <MenuDropdown
+      selectedOption={selectedAccount}
+      options={accountMainMenu}
+      subMenuOptions={accountsList}
+      menuHeaderIcon={IconFont.Switch_New}
+      menuHeaderText="Switch Account"
+      style={style}
+      menuStyle={menuStyle}
+      onSelectOption={switchAccount}
+    />
+  )
+}

src/identity/components/GlobalHeader/DefaultEntities.tsx

@@ -0,0 +1,17 @@
+// Types
+import {UserAccount} from 'src/client/unityRoutes'
+import {OrganizationSummaries} from 'src/client/unityRoutes'
+
+export const emptyAccount: UserAccount = {
+  id: 0,
+  name: '',
+  isActive: false,
+  isDefault: false,
+}
+
+export const emptyOrg: OrganizationSummaries[number] = {
+  id: '',
+  name: '',
+  isActive: false,
+  isDefault: false,
+}

src/identity/components/GlobalHeader/GlobalHeader.tsx

@@ -0,0 +1,93 @@
+// Library imports
+import React, {useContext, useEffect, useState, FC} from 'react'
+import {useSelector, useDispatch} from 'react-redux'
+import {
+  ComponentSize,
+  FlexBox,
+  IconFont,
+  Icon,
+  JustifyContent,
+} from '@influxdata/clockface'
+
+// Selectors and Context
+import {selectQuartzIdentity} from 'src/identity/selectors'
+import {UserAccountContext} from 'src/accounts/context/userAccount'
+
+// Components
+import {OrgDropdown} from 'src/identity/components/GlobalHeader/OrgDropdown'
+import {AccountDropdown} from 'src/identity/components/GlobalHeader/AccountDropdown'
+
+// Thunks
+import {getQuartzOrganizationsThunk} from 'src/identity/quartzOrganizations/actions/thunks'
+
+// Styles
+import 'src/identity/components/GlobalHeader/GlobalHeaderStyle.scss'
+
+import {
+  emptyAccount,
+  emptyOrg,
+} from 'src/identity/components/GlobalHeader/DefaultEntities'
+import {alphaSortSelectedFirst} from 'src/identity/utils/alphaSortSelectedFirst'
+
+export const GlobalHeader: FC = () => {
+  const dispatch = useDispatch()
+  const identity = useSelector(selectQuartzIdentity)
+  const orgsList = identity.quartzOrganizations.orgs
+  const {userAccounts} = useContext(UserAccountContext)
+
+  const accountsList = userAccounts ? userAccounts : [emptyAccount] // eslint-disable-line react-hooks/exhaustive-deps
+
+  const [sortedOrgs, setSortedOrgs] = useState([emptyOrg])
+  const [sortedAccounts, setSortedAccts] = useState([emptyAccount])
+
+  const [activeOrg, setActiveOrg] = useState(emptyOrg)
+  const [activeAccount, setActiveAccount] = useState(emptyAccount)
+
+  useEffect(() => {
+    dispatch(getQuartzOrganizationsThunk())
+  }, [dispatch])
+
+  useEffect(() => {
+    if (accountsList[0].id !== 0) {
+      const currentActiveAccount = accountsList?.find(
+        account => account?.isActive === true
+      )
+
+      setActiveAccount(currentActiveAccount)
+
+      setSortedAccts(alphaSortSelectedFirst(accountsList, currentActiveAccount))
+    }
+  }, [accountsList])
+
+  useEffect(() => {
+    if (orgsList[0].id !== '') {
+      const currentActiveOrg = orgsList?.find(org => org.isActive === true)
+
+      setActiveOrg(currentActiveOrg)
+
+      setSortedOrgs(alphaSortSelectedFirst(orgsList, currentActiveOrg))
+    }
+  }, [orgsList])
+
+  return (
+    <FlexBox
+      margin={ComponentSize.Large}
+      justifyContent={JustifyContent.SpaceBetween}
+      className="multiaccountorg--header"
+    >
+      <FlexBox margin={ComponentSize.Medium}>
+        {activeOrg && activeAccount && (
+          <>
+            <AccountDropdown
+              activeOrg={activeOrg}
+              activeAccount={activeAccount}
+              accountsList={sortedAccounts}
+            />
+            <Icon glyph={IconFont.CaretRight} />
+            <OrgDropdown activeOrg={activeOrg} orgsList={sortedOrgs} />
+          </>
+        )}
+      </FlexBox>
+    </FlexBox>
+  )
+}

src/identity/components/GlobalHeader/GlobalHeaderStyle.scss

@@ -0,0 +1,11 @@
+.multiaccountorg--header {
+  height: 60px;
+  padding-top: 12px;
+  padding-right: 32px;
+  padding-bottom: 12px;
+  padding-left: 22px;
+  margin-top: 0px;
+  margin-right: 0px;
+  margin-bottom: 0px;
+  margin-left: 0px;
+}

src/identity/components/GlobalHeader/OrgDropdown.tsx

@@ -0,0 +1,52 @@
+import React, {FC} from 'react'
+import {MenuDropdown, SubMenuItem} from '@influxdata/clockface'
+import {IconFont} from '@influxdata/clockface'
+import {OrganizationSummaries} from 'src/client/unityRoutes'
+
+const switchOrg = (org: SubMenuItem) => {
+  window.location.href = `/orgs/${org.id}`
+}
+
+type OrgSummaryItem = OrganizationSummaries[number]
+
+interface Props {
+  activeOrg: OrgSummaryItem
+  orgsList: OrganizationSummaries
+}
+
+const style = {width: 'auto'}
+const menuStyle = {width: '250px'}
+
+export const OrgDropdown: FC<Props> = ({activeOrg, orgsList}) => {
+  const orgMainMenu = [
+    {
+      name: 'Settings',
+      iconFont: IconFont.CogOutline,
+      href: `/orgs/${activeOrg.id}/about`,
+    },
+    {
+      name: 'Members',
+      iconFont: IconFont.CogOutline,
+      href: `/orgs/${activeOrg.id}/users`,
+    },
+    {
+      name: 'Usage',
+      iconFont: IconFont.CogOutline,
+      href: `/orgs/${activeOrg.id}/usage`,
+    },
+  ]
+
+  return (
+    <MenuDropdown
+      selectedOption={activeOrg}
+      options={orgMainMenu}
+      subMenuOptions={orgsList}
+      menuHeaderIcon={IconFont.Switch_New}
+      menuHeaderText="Switch Organization"
+      searchText="Search Organizations"
+      style={style}
+      menuStyle={menuStyle}
+      onSelectOption={switchOrg}
+    />
+  )
+}

src/identity/components/GlobalHeaderContainer.tsx

@@ -0,0 +1,11 @@
+import React, {FC} from 'react'
+import {UserAccountProvider} from 'src/accounts/context/userAccount'
+import {GlobalHeader} from 'src/identity/components/GlobalHeader/GlobalHeader'
+
+export const GlobalHeaderContainer: FC = () => {
+  return (
+    <UserAccountProvider>
+      <GlobalHeader />
+    </UserAccountProvider>
+  )
+}