Skip to content

Commit

Permalink
refactor: don't render user menu if org isn't available
Browse files Browse the repository at this point in the history
  • Loading branch information
alexpaxton committed Jan 9, 2020
1 parent 1587ce3 commit 3a37998
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 34 deletions.
5 changes: 4 additions & 1 deletion ui/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import NotesPortal from 'src/portals/NotesPortal'
import Notifications from 'src/shared/components/notifications/Notifications'
import OverlayController from 'src/overlays/components/OverlayController'
import CloudNav from 'src/pageLayout/components/CloudNav'
import CloudOnly from 'src/shared/components/cloud/CloudOnly'

// Types
import {AppState} from 'src/types'
Expand All @@ -25,7 +26,9 @@ type Props = OwnProps & StateProps

const App: SFC<Props> = ({children, inPresentationMode}) => (
<>
<CloudNav />
<CloudOnly>
<CloudNav />
</CloudOnly>
<AppWrapper presentationMode={inPresentationMode}>
<Notifications />
<TooltipPortal />
Expand Down
99 changes: 66 additions & 33 deletions ui/src/pageLayout/components/CloudNav.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
// Libraries
import React, {FunctionComponent} from 'react'
import React, {FC} from 'react'
import {Link} from 'react-router'
import {connect} from 'react-redux'

// Components
import {FeatureFlag} from 'src/shared/utils/featureFlag'
import {AppHeader, PopNav, Button, ComponentColor, FlexBox, FlexDirection, ComponentSize} from '@influxdata/clockface'
import CloudOnly from 'src/shared/components/cloud/CloudOnly'
import {
AppHeader,
PopNav,
Button,
ComponentColor,
FlexBox,
FlexDirection,
ComponentSize,
} from '@influxdata/clockface'

// Constants
import {
Expand All @@ -17,62 +24,88 @@ import {
} from 'src/shared/constants'

// Types
import {AppState} from 'src/types'
import {AppState, Organization} from 'src/types'

// Images
import Logo from '../images/influxdata-logo.png'

// Selectors
import {getOrg} from 'src/organizations/selectors'

interface StateProps {
orgName: string
orgID: string
org: Organization
}

const CloudNav: FunctionComponent<StateProps> = ({orgName, orgID}) => {
const CloudNav: FC<StateProps> = ({org}) => {
const usageURL = `${CLOUD_URL}${CLOUD_USAGE_PATH}`
const billingURL = `${CLOUD_URL}${CLOUD_BILLING_PATH}`
const handleUpgradeClick = () => {
console.log('boop')
}
return (
<CloudOnly>

if (!org) {
return (
<AppHeader className="cloud-nav">
<AppHeader.Logo>
<img className="cloud-nav--logo" alt="InfluxData Logo" src={Logo} />
</AppHeader.Logo>
</AppHeader>
)
}

return (
<AppHeader className="cloud-nav">
<AppHeader.Logo>
<Link to={`/orgs/${orgID}`} className="cloud-nav--logo-link"><img className="cloud-nav--logo" alt="InfluxData Logo" src={Logo} /></Link></AppHeader.Logo>
<FlexBox direction={FlexDirection.Row} margin={ComponentSize.Medium}>
<Button
color={ComponentColor.Success}
text="Upgrade"
onClick={handleUpgradeClick}
className="upgrade-payg--button"
/>
<PopNav>
<p className="cloud-nav--account">Logged in as <strong>{orgName}</strong></p>
<PopNav.Item active={false} titleLink={className => (
<Link to={`/orgs/${org.id}`} className="cloud-nav--logo-link">
<img className="cloud-nav--logo" alt="InfluxData Logo" src={Logo} />
</Link>
</AppHeader.Logo>
<FlexBox direction={FlexDirection.Row} margin={ComponentSize.Medium}>
<Button
color={ComponentColor.Success}
text="Upgrade"
onClick={handleUpgradeClick}
className="upgrade-payg--button"
/>
<PopNav>
<p className="cloud-nav--account">
Logged in as <strong>{org.name}</strong>
</p>
<PopNav.Item
active={false}
titleLink={className => (
<a className={className} href={usageURL}>
Usage
</a>
)} />
<FeatureFlag name="cloudBilling">
<PopNav.Item active={false} titleLink={className => (
)}
/>
<FeatureFlag name="cloudBilling">
<PopNav.Item
active={false}
titleLink={className => (
<a className={className} href={billingURL}>
Billing
</a>
)} />
</FeatureFlag>
<PopNav.Item active={false} titleLink={className => (
)}
/>
</FeatureFlag>
<PopNav.Item
active={false}
titleLink={className => (
<a className={className} href={CLOUD_SIGNOUT_URL}>
Logout
</a>
)} />
</PopNav>
</FlexBox>
</AppHeader>
</CloudOnly>
)}
/>
</PopNav>
</FlexBox>
</AppHeader>
)
}

const mstp = ({ orgs: { org } }: AppState) => {
return {orgName: org.name, orgID: org.id}
const mstp = (state: AppState) => {
const org = getOrg(state)
return {org}
}

export default connect<StateProps>(mstp)(CloudNav)

0 comments on commit 3a37998

Please sign in to comment.