Merge pull request #17849 from influxdata/refactor/org-nav-items

chore(ui): move users & about nav items

CHANGELOG.md

@@ -31,6 +31,7 @@
 1. [17714](https://github.com/influxdata/influxdb/pull/17714): Cloud environments no longer render markdown images, for security reasons.
 1. [17321](https://github.com/influxdata/influxdb/pull/17321): Improve UI for sorting resources
 1. [17740](https://github.com/influxdata/influxdb/pull/17740): Add single-color color schemes for visualizations
+1. [17849](https://github.com/influxdata/influxdb/pull/17849): Move Organization navigation items to user menu.
 
 ## v2.0.0-beta.8 [2020-04-10]
 

ui/cypress/e2e/orgs.test.ts

@@ -27,7 +27,8 @@ describe('Orgs', () => {
     })
     it('should be able to rename the org', () => {
       const extraText = '_my_renamed_org_in_e2e'
-      cy.getByTestID('nav-item-org').click()
+      cy.getByTestID('user-nav').click()
+      cy.getByTestID('user-nav-item-about').click()
       cy.get('span:contains("About")').click()
       cy.get('span:contains("Rename")').click()
       cy.get('button.cf-button.cf-button-danger').click()

ui/src/organizations/components/OrgNavigation.tsx

@@ -44,7 +44,7 @@ class OrgNavigation extends PureComponent<Props> {
         link: `/orgs/${orgID}/members`,
       },
       {
-        text: 'Members',
+        text: 'Users',
         id: 'members-quartz',
         cloudOnly: true,
         link: `${CLOUD_URL}/organizations/${orgID}${CLOUD_USERS_PATH}`,

ui/src/pageLayout/components/UserWidget.tsx

@@ -16,6 +16,7 @@ import {
   CLOUD_URL,
   CLOUD_USAGE_PATH,
   CLOUD_BILLING_PATH,
+  CLOUD_USERS_PATH,
 } from 'src/shared/constants'
 
 // Types
@@ -24,6 +25,8 @@ import {MeState} from 'src/shared/reducers/me'
 
 // Selectors
 import {getOrg} from 'src/organizations/selectors'
+import {getNavItemActivation} from '../utils'
+import {FeatureFlag} from 'src/shared/utils/featureFlag'
 
 interface StateProps {
   org: Organization
@@ -51,12 +54,15 @@ const UserWidget: FC<Props> = ({
     handleShowOverlay('switch-organizations', {}, handleDismissOverlay)
   }
 
+  const orgPrefix = `/orgs/${org.id}`
+
   return (
-    <TreeNav.User username={me.name} team={org.name}>
+    <TreeNav.User username={me.name} team={org.name} testID="user-nav">
       <CloudOnly>
         <TreeNav.UserItem
           id="usage"
           label="Usage"
+          testID="user-nav-item-usage"
           linkElement={className => (
             <a className={className} href={`${CLOUD_URL}${CLOUD_USAGE_PATH}`} />
           )}
@@ -64,6 +70,7 @@ const UserWidget: FC<Props> = ({
         <TreeNav.UserItem
           id="billing"
           label="Billing"
+          testID="user-nav-item-billing"
           linkElement={className => (
             <a
               className={className}
@@ -71,16 +78,57 @@ const UserWidget: FC<Props> = ({
             />
           )}
         />
+        <FeatureFlag name="multiUser" equals={true}>
+          <TreeNav.UserItem
+            id="users"
+            label="Users"
+            testID="user-nav-item-users"
+            linkElement={className => (
+              <a
+                className={className}
+                href={`${CLOUD_URL}/organizations/${org.id}${CLOUD_USERS_PATH}`}
+              />
+            )}
+          />
+        </FeatureFlag>
+        <TreeNav.UserItem
+          id="about"
+          label="About"
+          testID="user-nav-item-about"
+          linkElement={className => (
+            <Link className={className} to={`${orgPrefix}/about`} />
+          )}
+        />
       </CloudOnly>
       <CloudExclude>
+        <TreeNav.UserItem
+          id="members"
+          label="Members"
+          testID="user-nav-item-members"
+          active={getNavItemActivation(['members'], location.pathname)}
+          linkElement={className => (
+            <Link className={className} to={`${orgPrefix}/members`} />
+          )}
+        />
+        <TreeNav.UserItem
+          id="about"
+          label="About"
+          testID="user-nav-item-about"
+          active={getNavItemActivation(['about'], location.pathname)}
+          linkElement={className => (
+            <Link className={className} to={`${orgPrefix}/about`} />
+          )}
+        />
         <TreeNav.UserItem
           id="switch-orgs"
           label="Switch Organizations"
+          testID="user-nav-item-switch-orgs"
           onClick={handleSwitchOrganizations}
         />
         <TreeNav.UserItem
           id="create-org"
           label="Create Organization"
+          testID="user-nav-item-create-orgs"
           linkElement={className => (
             <Link className={className} to="/orgs/new" />
           )}
@@ -89,6 +137,7 @@ const UserWidget: FC<Props> = ({
       <TreeNav.UserItem
         id="logout"
         label="Logout"
+        testID="user-nav-item-logout"
         linkElement={className => <Link className={className} to="/logout" />}
       />
     </TreeNav.User>

ui/src/pageLayout/constants/navigationHierarchy.ts

@@ -1,6 +1,4 @@
 import {IconFont} from '@influxdata/clockface'
-import {CLOUD_URL, CLOUD_USERS_PATH} from 'src/shared/constants'
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 export interface NavItemLink {
   type: 'link' | 'href'
@@ -36,18 +34,6 @@ export interface NavItem {
 export const generateNavItems = (orgID: string): NavItem[] => {
   const orgPrefix = `/orgs/${orgID}`
 
-  const isMultiUserEnabled = isFlagEnabled('multiUser')
-
-  const quartzMembersHeaderLink: NavItemLink = isMultiUserEnabled
-    ? {
-        type: 'href',
-        location: `${CLOUD_URL}/organizations/${orgID}${CLOUD_USERS_PATH}`,
-      }
-    : {
-        type: 'link',
-        location: `${orgPrefix}/about`,
-      }
-
   return [
     {
       id: 'load-data',
@@ -121,70 +107,6 @@ export const generateNavItems = (orgID: string): NavItem[] => {
       },
       activeKeywords: ['data-explorer'],
     },
-    {
-      id: 'org',
-      testID: 'nav-item-org',
-      icon: IconFont.UsersTrio,
-      label: 'Organization',
-      shortLabel: 'Org',
-      link: {
-        type: 'link',
-        location: `${orgPrefix}/members`,
-      },
-      cloudExclude: true,
-      activeKeywords: ['members', 'about'],
-      menu: [
-        {
-          id: 'members',
-          testID: 'nav-subitem-members',
-          label: 'Members',
-          link: {
-            type: 'link',
-            location: `${orgPrefix}/members`,
-          },
-        },
-        {
-          id: 'about',
-          testID: 'nav-subitem-about',
-          label: 'About',
-          link: {
-            type: 'link',
-            location: `${orgPrefix}/about`,
-          },
-        },
-      ],
-    },
-    {
-      id: 'org-quartz',
-      testID: 'nav-item-quartz-org',
-      icon: IconFont.UsersTrio,
-      label: 'Organization',
-      shortLabel: 'Org',
-      cloudOnly: true,
-      link: quartzMembersHeaderLink,
-      activeKeywords: ['members', 'about'],
-      menu: [
-        {
-          id: 'users',
-          testID: 'nav-subitem-users',
-          label: 'Members',
-          featureFlag: 'multiUser',
-          link: {
-            type: 'href',
-            location: `${CLOUD_URL}/organizations/${orgID}${CLOUD_USERS_PATH}`,
-          },
-        },
-        {
-          id: 'about',
-          testID: 'nav-subitem-about',
-          label: 'About',
-          link: {
-            type: 'link',
-            location: `${orgPrefix}/about`,
-          },
-        },
-      ],
-    },
     {
       id: 'dashboards',
       testID: 'nav-item-dashboards',