feat(nav): allow user to switch orgs from the navbar

influxdata · Apr 4, 2019 · fc265c8 · fc265c8
1 parent 8254149
commit fc265c8
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 1. [13024](https://github.com/influxdata/influxdb/pull/13024): Add the ability to edit token's description
 1. [13078](https://github.com/influxdata/influxdb/pull/13078): Add the option to create a Dashboard from a Template.
 1. [13161](https://github.com/influxdata/influxdb/pull/13161): Add the ability to add labels on variables
+1. [13171](https://github.com/influxdata/influxdb/pull/13171): Add switch organizations dropdown to home navigation menu item.
 
 ### Bug Fixes
 

diff --git a/ui/src/clockface/types/index.ts b/ui/src/clockface/types/index.ts
@@ -188,4 +188,5 @@ export enum Stack {
 export enum NavMenuType {
   RouterLink = 'router',
   HTTPLink = 'http',
+  ShowDropdown = 'showDropdown',
 }
diff --git a/ui/src/pageLayout/components/Nav.scss b/ui/src/pageLayout/components/Nav.scss
@@ -205,4 +205,8 @@ $nav--bg-accent: $c-comet;
   &:last-child {
     border-bottom-right-radius: $radius;
   }
+
+  &.back-button {
+    font-weight: bolder;
+  }
 }
diff --git a/ui/src/pageLayout/components/NavMenuSubItem.tsx b/ui/src/pageLayout/components/NavMenuSubItem.tsx
@@ -8,9 +8,10 @@ import {NavMenuType} from 'src/clockface'
 
 interface PassedProps {
   title: string
-  path: string
+  path?: string
   active: boolean
   className?: string
+  onClick?: () => void
 }
 
 interface DefaultProps {
@@ -27,7 +28,7 @@ class NavMenuSubItem extends PureComponent<Props> {
   }
 
   public render() {
-    const {title, path, testID, type, active, className} = this.props
+    const {title, path, testID, type, active, className, onClick} = this.props
 
     if (type === NavMenuType.RouterLink) {
       return (
@@ -44,6 +45,14 @@ class NavMenuSubItem extends PureComponent<Props> {
       )
     }
 
+    if (type === NavMenuType.ShowDropdown) {
+      return (
+        <div className={`nav--sub-item ${className}`} onClick={onClick}>
+          {title}
+        </div>
+      )
+    }
+
     return (
       <a
         className={classnames('nav--sub-item', {

diff --git a/ui/src/pageLayout/containers/Nav.tsx b/ui/src/pageLayout/containers/Nav.tsx
@@ -13,19 +13,34 @@ import {getNavItemActivation} from 'src/pageLayout/utils'
 
 // Types
 import {AppState} from 'src/types'
-import {IconFont} from 'src/clockface'
+import {IconFont, NavMenuType} from 'src/clockface'
+import {Organization} from '@influxdata/influx'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import CloudFeatureFlag from 'src/shared/components/CloudFeatureFlag'
 
-interface OwnProps {
+interface StateProps {
   isHidden: boolean
   me: AppState['me']
+  orgs: Organization[]
 }
 
-type Props = OwnProps & WithRouterProps
+interface State {
+  showOrganizations: boolean
+}
+
+type Props = StateProps & WithRouterProps
 
 @ErrorHandling
-class SideNav extends PureComponent<Props> {
+class SideNav extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      showOrganizations: false,
+    }
+  }
+
   public render() {
     const {
       isHidden,
@@ -41,12 +56,12 @@ class SideNav extends PureComponent<Props> {
     return (
       <NavMenu>
         <NavMenu.Item
-          title={me.name}
-          path={`${orgPrefix}/me`}
+          title={`${me.name} (${this.orgName})`}
+          path={`${orgPrefix}`}
           icon={IconFont.CuboNav}
           active={getNavItemActivation(['me', 'account'], location.pathname)}
         >
-          <NavMenu.SubItem title="Logout" path="/logout" active={false} />
+          {this.accountSubItem}
         </NavMenu.Item>
         <NavMenu.Item
           title="Data Explorer"
@@ -76,13 +91,77 @@ class SideNav extends PureComponent<Props> {
       </NavMenu>
     )
   }
+
+  private get orgName(): string {
+    const {
+      params: {orgID},
+      orgs,
+    } = this.props
+    return orgs.find(org => {
+      return org.id === orgID
+    }).name
+  }
+
+  private get accountSubItem(): JSX.Element[] {
+    const {orgs} = this.props
+    const {showOrganizations} = this.state
+
+    if (showOrganizations) {
+      return orgs.reduce(
+        (acc, org) => {
+          acc.push(
+            <NavMenu.SubItem
+              title={org.name}
+              path={`/orgs/${org.id}`}
+              key={org.id}
+              type={NavMenuType.RouterLink}
+              active={false}
+            />
+          )
+          return acc
+        },
+        [
+          <NavMenu.SubItem
+            title="< Back"
+            onClick={this.toggleOrganizationsView}
+            type={NavMenuType.ShowDropdown}
+            active={false}
+            key="back-button"
+            className="back-button"
+          />,
+        ]
+      )
+    }
+
+    return [
+      <CloudFeatureFlag>
+        <NavMenu.SubItem
+          title="Switch Organizations"
+          onClick={this.toggleOrganizationsView}
+          type={NavMenuType.ShowDropdown}
+          active={false}
+          key="switch-orgs"
+        />
+      </CloudFeatureFlag>,
+      <NavMenu.SubItem
+        title="Logout"
+        path="/logout"
+        active={false}
+        key="logout"
+      />,
+    ]
+  }
+
+  private toggleOrganizationsView = (): void => {
+    this.setState({showOrganizations: !this.state.showOrganizations})
+  }
 }
 
-const mstp = (state: AppState) => {
+const mstp = (state: AppState): StateProps => {
   const isHidden = state.app.ephemeral.inPresentationMode
-  const {me} = state
+  const {me, orgs} = state
 
-  return {isHidden, me}
+  return {isHidden, me, orgs: orgs.items}
 }
 
-export default connect(mstp)(withRouter<OwnProps>(SideNav))
+export default connect<StateProps>(mstp)(withRouter(SideNav))