Merge pull request #13212 from influxdata/move-create-org-nav

Move Create Org near Switch Org and alphabetize orgs

ui/src/pageLayout/components/AccountNavSubItem.tsx

@@ -1,76 +1,112 @@
 // Libraries
-import React, {SFC} from 'react'
+import React, {PureComponent} from 'react'
+import {Link} from 'react-router'
 
 // Components
-import NavMenu from 'src/pageLayout/components/NavMenu'
+import {NavMenu} from '@influxdata/clockface'
 import {Organization} from '@influxdata/influx'
-import {NavMenuType} from 'src/clockface'
 import CloudFeatureFlag from 'src/shared/components/CloudFeatureFlag'
+import DapperScrollbars from 'src/shared/components/dapperScrollbars/DapperScrollbars'
+import SortingHat from 'src/shared/components/sorting_hat/SortingHat'
 
 interface Props {
   orgs: Organization[]
-  showOrganizations: boolean
-  toggleOrganizationsView: () => void
+  isShowingOrganizations: boolean
+  showOrganizationsView: () => void
+  closeOrganizationsView: () => void
 }
 
-const AccountNavSubItem: SFC<Props> = ({
-  orgs,
-  showOrganizations,
-  toggleOrganizationsView,
-}) => {
-  if (showOrganizations) {
+class AccountNavSubItem extends PureComponent<Props> {
+  render() {
+    const {orgs, isShowingOrganizations, showOrganizationsView} = this.props
+
+    if (isShowingOrganizations) {
+      return (
+        <SortingHat list={orgs} sortKey="name">
+          {this.orgs}
+        </SortingHat>
+      )
+    }
+
     return (
       <>
+        <CloudFeatureFlag key="feature-flag">
+          {orgs.length > 1 && (
+            <NavMenu.SubItem
+              titleLink={className => (
+                <div onClick={showOrganizationsView} className={className}>
+                  Switch Organizations
+                </div>
+              )}
+              active={false}
+              key="switch-orgs"
+            />
+          )}
+
+          <NavMenu.SubItem
+            titleLink={className => (
+              <Link to="/orgs/new" className={className}>
+                Create Organization
+              </Link>
+            )}
+            active={false}
+          />
+        </CloudFeatureFlag>
+
+        <NavMenu.SubItem
+          titleLink={className => (
+            <Link to="/logout" className={className}>
+              Logout
+            </Link>
+          )}
+          active={false}
+          key="logout"
+        />
+      </>
+    )
+  }
+
+  private orgs = (orgs: Organization[]): JSX.Element => {
+    const {closeOrganizationsView} = this.props
+
+    return (
+      <DapperScrollbars>
         {orgs.reduce(
           (acc, org) => {
             acc.push(
               <NavMenu.SubItem
-                title={org.name}
-                path={`/orgs/${org.id}`}
+                titleLink={className => (
+                  <Link
+                    className={className}
+                    to={`/orgs/${org.id}`}
+                    style={{display: 'block'}}
+                  >
+                    {org.name}
+                  </Link>
+                )}
                 key={org.id}
-                type={NavMenuType.RouterLink}
                 active={false}
               />
             )
             return acc
           },
+
           [
             <NavMenu.SubItem
-              title="< Back"
-              onClick={toggleOrganizationsView}
-              type={NavMenuType.ShowDropdown}
+              titleLink={className => (
+                <div className={className} onClick={closeOrganizationsView}>
+                  {'< Back'}
+                </div>
+              )}
               active={false}
               key="back-button"
               className="back-button"
             />,
           ]
         )}
-      </>
+      </DapperScrollbars>
     )
   }
-
-  return (
-    <>
-      <CloudFeatureFlag key="feature-flag">
-        {orgs.length > 1 && (
-          <NavMenu.SubItem
-            title="Switch Organizations"
-            onClick={toggleOrganizationsView}
-            type={NavMenuType.ShowDropdown}
-            active={false}
-            key="switch-orgs"
-          />
-        )}
-      </CloudFeatureFlag>
-
-      <NavMenu.SubItem
-        title="Logout"
-        path="/logout"
-        active={false}
-        key="logout"
-      />
-    </>
-  )
 }
 
 export default AccountNavSubItem

ui/src/pageLayout/containers/Nav.tsx

@@ -1,13 +1,12 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import {withRouter, WithRouterProps} from 'react-router'
+import {withRouter, WithRouterProps, Link} from 'react-router'
 import {connect} from 'react-redux'
 import _ from 'lodash'
 
 // Components
-import NavMenu from 'src/pageLayout/components/NavMenu'
+import {NavMenu, Icon} from '@influxdata/clockface'
 import CloudNav from 'src/pageLayout/components/CloudNav'
-import CloudExclude from 'src/shared/components/cloud/CloudExclude'
 import AccountNavSubItem from 'src/pageLayout/components/AccountNavSubItem'
 
 // Utils
@@ -29,7 +28,7 @@ interface StateProps {
 }
 
 interface State {
-  showOrganizations: boolean
+  isShowingOrganizations: boolean
 }
 
 type Props = StateProps & WithRouterProps
@@ -40,7 +39,7 @@ class SideNav extends PureComponent<Props, State> {
     super(props)
 
     this.state = {
-      showOrganizations: false,
+      isShowingOrganizations: false,
     }
   }
 
@@ -52,65 +51,104 @@ class SideNav extends PureComponent<Props, State> {
       orgs,
       orgName,
     } = this.props
+
     if (isHidden) {
       return null
     }
 
     const orgPrefix = `/orgs/${orgID}`
+    const dashboardsLink = `${orgPrefix}/dashboards`
+    const dataExplorerLink = `${orgPrefix}/data-explorer`
+    const tasksLink = `${orgPrefix}/tasks`
+    const settingsLink = `${orgPrefix}/settings`
 
     return (
       <NavMenu>
+        <div onMouseLeave={this.closeOrganizationsView} className="find-me">
+          <NavMenu.Item
+            titleLink={className => (
+              <Link className={className} to={orgPrefix}>
+                {`${me.name} (${orgName})`}
+              </Link>
+            )}
+            iconLink={className => (
+              <Link to={orgPrefix} className={className}>
+                <Icon glyph={IconFont.CuboNav} />
+              </Link>
+            )}
+            active={getNavItemActivation(['me', 'account'], location.pathname)}
+          >
+            <AccountNavSubItem
+              orgs={orgs}
+              isShowingOrganizations={this.state.isShowingOrganizations}
+              showOrganizationsView={this.showOrganizationsView}
+              closeOrganizationsView={this.closeOrganizationsView}
+            />
+          </NavMenu.Item>
+        </div>
         <NavMenu.Item
-          title={`${me.name} (${orgName})`}
-          path={`${orgPrefix}`}
-          icon={IconFont.CuboNav}
-          active={getNavItemActivation(['me', 'account'], location.pathname)}
-        >
-          <AccountNavSubItem
-            orgs={orgs}
-            showOrganizations={this.state.showOrganizations}
-            toggleOrganizationsView={this.toggleOrganizationsView}
-          />
-        </NavMenu.Item>
-        <NavMenu.Item
-          title="Data Explorer"
-          path={`${orgPrefix}/data-explorer`}
-          icon={IconFont.GraphLine}
+          titleLink={className => (
+            <Link className={className} to={dataExplorerLink}>
+              Data Explorer
+            </Link>
+          )}
+          iconLink={className => (
+            <Link to={dataExplorerLink} className={className}>
+              <Icon glyph={IconFont.GraphLine} />
+            </Link>
+          )}
           active={getNavItemActivation(['data-explorer'], location.pathname)}
         />
         <NavMenu.Item
-          title="Dashboards"
-          path={`${orgPrefix}/dashboards`}
-          icon={IconFont.Dashboards}
+          titleLink={className => (
+            <Link className={className} to={dashboardsLink}>
+              Dashboards
+            </Link>
+          )}
+          iconLink={className => (
+            <Link to={dashboardsLink} className={className}>
+              <Icon glyph={IconFont.Dashboards} />
+            </Link>
+          )}
           active={getNavItemActivation(['dashboards'], location.pathname)}
         />
         <NavMenu.Item
-          title="Tasks"
-          path={`${orgPrefix}/tasks`}
-          icon={IconFont.Calendar}
+          titleLink={className => (
+            <Link className={className} to={tasksLink}>
+              Tasks
+            </Link>
+          )}
+          iconLink={className => (
+            <Link to={tasksLink} className={className}>
+              <Icon glyph={IconFont.Calendar} />
+            </Link>
+          )}
           active={getNavItemActivation(['tasks'], location.pathname)}
         />
         <NavMenu.Item
-          title={`${orgName} Settings`}
-          path={`${orgPrefix}/settings`}
-          icon={IconFont.Wrench}
+          titleLink={className => (
+            <Link className={className} to={settingsLink}>
+              Settings
+            </Link>
+          )}
+          iconLink={className => (
+            <Link to={settingsLink} className={className}>
+              <Icon glyph={IconFont.Wrench} />
+            </Link>
+          )}
           active={getNavItemActivation(['settings'], location.pathname)}
-        >
-          <CloudExclude>
-            <NavMenu.SubItem
-              title="Create Organization"
-              path="/orgs/new"
-              active={false}
-            />
-          </CloudExclude>
-        </NavMenu.Item>
+        />
         <CloudNav />
       </NavMenu>
     )
   }
 
-  private toggleOrganizationsView = (): void => {
-    this.setState({showOrganizations: !this.state.showOrganizations})
+  private showOrganizationsView = (): void => {
+    this.setState({isShowingOrganizations: true})
+  }
+
+  private closeOrganizationsView = (): void => {
+    this.setState({isShowingOrganizations: false})
   }
 }