refactor(ui): settings navigation (#14990)

* refactor(ui): move tokens tab to load data page and update navbar * refactor(ui): prefix all settings page urls with "settings" * refactor(ui): expose settings tabs in navbar as sub-items * chore(ui): update changelog * refactor(ui): fix URLs in e2e tests
influxdata · Sep 5, 2019 · 77a5953 · 77a5953
1 parent e3f31a3
commit 77a5953
Show file tree

Hide file tree

Showing 27 changed files with 168 additions and 107 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,8 @@
 ### Features
 
 ### UI Improvements
+1. [14990](https://github.com/influxdata/influxdb/pull/14990): Move Tokens tab from Settings to Load Data page
+1. [14990](https://github.com/influxdata/influxdb/pull/14990): Expose all Settings tabs in navigation menu
 
 ### Bug Fixes
 1. [14931](https://github.com/influxdata/influxdb/pull/14931): Remove scrollbars blocking onboarding UI step.

diff --git a/ui/cypress/e2e/collectors.test.ts b/ui/cypress/e2e/collectors.test.ts
@@ -11,7 +11,7 @@ describe('Collectors', () => {
       cy.wrap(body.org).as('org')
 
       cy.fixture('routes').then(({orgs}) => {
-        cy.visit(`${orgs}/${id}/telegrafs`)
+        cy.visit(`${orgs}/${id}/load-data/telegrafs`)
       })
     })
   })

diff --git a/ui/cypress/e2e/labels.test.ts b/ui/cypress/e2e/labels.test.ts
@@ -11,7 +11,7 @@ describe('labels', () => {
       cy.wrap(body.org).as('org')
 
       cy.fixture('routes').then(({orgs}) => {
-        cy.visit(`${orgs}/${id}/labels`)
+        cy.visit(`${orgs}/${id}/settings/labels`)
       })
     })
   })

diff --git a/ui/cypress/e2e/tokens.test.ts b/ui/cypress/e2e/tokens.test.ts
@@ -82,7 +82,7 @@ describe('tokens', () => {
         })
 
         cy.fixture('routes').then(({orgs}) => {
-          cy.visit(`${orgs}/${id}/tokens`)
+          cy.visit(`${orgs}/${id}/load-data/tokens`)
         })
       })
     })

diff --git a/ui/cypress/e2e/variables.test.ts b/ui/cypress/e2e/variables.test.ts
@@ -6,7 +6,7 @@ describe('Variables', () => {
 
     cy.signin().then(({body}) => {
       cy.wrap(body.org).as('org')
-      cy.visit(`orgs/${body.org.id}/variables`)
+      cy.visit(`orgs/${body.org.id}/settings/variables`)
     })
   })
 

diff --git a/ui/src/authorizations/components/AllAccessTokenOverlay.tsx b/ui/src/authorizations/components/AllAccessTokenOverlay.tsx
@@ -127,7 +127,7 @@ class AllAccessTokenOverlay extends PureComponent<Props, State> {
       params: {orgID},
     } = this.props
 
-    router.push(`/orgs/${orgID}/tokens`)
+    router.push(`/orgs/${orgID}/load-data/tokens`)
   }
 }
 

diff --git a/ui/src/authorizations/components/BucketsTokenOverlay.tsx b/ui/src/authorizations/components/BucketsTokenOverlay.tsx
@@ -276,7 +276,7 @@ class BucketsTokenOverlay extends PureComponent<Props, State> {
       params: {orgID},
     } = this.props
 
-    router.push(`/orgs/${orgID}/tokens`)
+    router.push(`/orgs/${orgID}/load-data/tokens`)
   }
 }
 

diff --git a/ui/src/authorizations/components/TokensTab.tsx b/ui/src/authorizations/components/TokensTab.tsx
@@ -103,7 +103,7 @@ class TokensTab extends PureComponent<Props, State> {
       params: {orgID},
     } = this.props
 
-    router.push(`/orgs/${orgID}/tokens/generate/all-access`)
+    router.push(`/orgs/${orgID}/load-data/tokens/generate/all-access`)
   }
 
   private handleGenerateReadWrite = () => {
@@ -112,7 +112,7 @@ class TokensTab extends PureComponent<Props, State> {
       params: {orgID},
     } = this.props
 
-    router.push(`/orgs/${orgID}/tokens/generate/buckets`)
+    router.push(`/orgs/${orgID}/load-data/tokens/generate/buckets`)
   }
 }
 

diff --git a/ui/src/authorizations/containers/TokensIndex.tsx b/ui/src/authorizations/containers/TokensIndex.tsx
@@ -5,8 +5,8 @@ import {connect} from 'react-redux'
 // Components
 import {Page} from '@influxdata/clockface'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import SettingsTabbedPage from 'src/settings/components/SettingsTabbedPage'
-import SettingsHeader from 'src/settings/components/SettingsHeader'
+import LoadDataTabbedPage from 'src/settings/components/LoadDataTabbedPage'
+import LoadDataHeader from 'src/settings/components/LoadDataHeader'
 import GetResources, {ResourceTypes} from 'src/shared/components/GetResources'
 import TokensTab from 'src/authorizations/components/TokensTab'
 
@@ -27,13 +27,13 @@ class TokensIndex extends Component<StateProps> {
 
     return (
       <>
-        <Page titleTag={pageTitleSuffixer(['Tokens', 'Settings'])}>
-          <SettingsHeader />
-          <SettingsTabbedPage activeTab="tokens" orgID={org.id}>
+        <Page titleTag={pageTitleSuffixer(['Tokens', 'Load Data'])}>
+          <LoadDataHeader />
+          <LoadDataTabbedPage activeTab="tokens" orgID={org.id}>
             <GetResources resource={ResourceTypes.Authorizations}>
               <TokensTab />
             </GetResources>
-          </SettingsTabbedPage>
+          </LoadDataTabbedPage>
         </Page>
         {children}
       </>

diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -215,11 +215,20 @@ class Root extends PureComponent {
                             </Route>
                           </Route>
                           <Route path="me" component={MePage} />
-                          <Route path="settings">
-                            <IndexRoute component={MembersIndex} />
-                          </Route>
                           <Route path="load-data">
                             <IndexRoute component={BucketsIndex} />
+                            <Route path="tokens" component={TokensIndex}>
+                              <Route path="generate">
+                                <Route
+                                  path="all-access"
+                                  component={AllAccessTokenOverlay}
+                                />
+                                <Route
+                                  path="buckets"
+                                  component={BucketsTokenOverlay}
+                                />
+                              </Route>
+                            </Route>
                             <Route path="buckets" component={BucketsIndex}>
                               <Route path=":bucketID">
                                 <Route
@@ -272,73 +281,59 @@ class Root extends PureComponent {
                               />
                             </FeatureFlag>
                           </Route>
-                          <Route path="tokens" component={TokensIndex}>
-                            <Route path="generate">
+                          <Route path="settings">
+                            <IndexRoute component={MembersIndex} />
+                            <Route path="members" component={MembersIndex}>
+                              <Route path="new" component={AddMembersOverlay} />
+                            </Route>
+                            <Route path="templates" component={TemplatesIndex}>
+                              <Route
+                                path="import"
+                                component={TemplateImportOverlay}
+                              />
+                              <Route
+                                path=":id/export"
+                                component={TemplateExportOverlay}
+                              />
                               <Route
-                                path="all-access"
-                                component={AllAccessTokenOverlay}
+                                path=":id/view"
+                                component={TemplateViewOverlay}
                               />
                               <Route
-                                path="buckets"
-                                component={BucketsTokenOverlay}
+                                path=":id/static/view"
+                                component={StaticTemplateViewOverlay}
+                              />
+                            </Route>
+                            <Route path="variables" component={VariablesIndex}>
+                              <Route
+                                path="import"
+                                component={VariableImportOverlay}
+                              />
+                              <Route
+                                path=":id/export"
+                                component={VariableExportOverlay}
+                              />
+                              <Route
+                                path="new"
+                                component={CreateVariableOverlay}
+                              />
+                              <Route
+                                path=":id/rename"
+                                component={RenameVariableOverlay}
+                              />
+                              <Route
+                                path=":id/edit"
+                                component={UpdateVariableOverlay}
+                              />
+                            </Route>
+                            <Route path="labels" component={LabelsIndex} />
+                            <Route path="profile" component={OrgProfilePage}>
+                              <Route
+                                path="rename"
+                                component={RenameOrgOverlay}
                               />
                             </Route>
                           </Route>
-                          <Route path="members" component={MembersIndex}>
-                            <Route path="new" component={AddMembersOverlay} />
-                          </Route>
-                          <Route path="telegrafs" component={TelegrafsPage}>
-                            <Route
-                              path=":id/view"
-                              component={TelegrafConfigOverlay}
-                            />
-                            <Route
-                              path=":id/instructions"
-                              component={TelegrafInstructionsOverlay}
-                            />
-                            <Route path="new" component={CollectorsWizard} />
-                          </Route>
-                          <Route path="templates" component={TemplatesIndex}>
-                            <Route
-                              path="import"
-                              component={TemplateImportOverlay}
-                            />
-                            <Route
-                              path=":id/export"
-                              component={TemplateExportOverlay}
-                            />
-                            <Route
-                              path=":id/view"
-                              component={TemplateViewOverlay}
-                            />
-                            <Route
-                              path=":id/static/view"
-                              component={StaticTemplateViewOverlay}
-                            />
-                          </Route>
-                          <Route path="variables" component={VariablesIndex}>
-                            <Route
-                              path="import"
-                              component={VariableImportOverlay}
-                            />
-                            <Route
-                              path=":id/export"
-                              component={VariableExportOverlay}
-                            />
-                            <Route
-                              path="new"
-                              component={CreateVariableOverlay}
-                            />
-                            <Route
-                              path=":id/rename"
-                              component={RenameVariableOverlay}
-                            />
-                            <Route
-                              path=":id/edit"
-                              component={UpdateVariableOverlay}
-                            />
-                          </Route>
-                          <Route path="labels" component={LabelsIndex} />
                           <FeatureFlag name="alerting">
                             <Route path="alerting" component={AlertingIndex}>
                               <Route path="checks/new" component={NewCheckEO} />
@@ -368,9 +363,6 @@ class Root extends PureComponent {
                               component={AlertHistoryIndex}
                             />
                           </FeatureFlag>
-                          <Route path="profile" component={OrgProfilePage}>
-                            <Route path="rename" component={RenameOrgOverlay} />
-                          </Route>
                         </Route>
                       </Route>
                     </Route>

diff --git a/ui/src/members/components/AddMembersOverlay.tsx b/ui/src/members/components/AddMembersOverlay.tsx
@@ -125,7 +125,7 @@ class AddMembersOverlay extends PureComponent<Props, State> {
       params: {orgID},
     } = this.props
 
-    router.push(`/orgs/${orgID}/members`)
+    router.push(`/orgs/${orgID}/settings/members`)
   }
 
   private handleSave = () => {

diff --git a/ui/src/members/components/Members.tsx b/ui/src/members/components/Members.tsx
@@ -103,7 +103,7 @@ class Members extends PureComponent<Props & WithRouterProps, State> {
       params: {orgID},
     } = this.props
 
-    router.push(`/orgs/${orgID}/members/new`)
+    router.push(`/orgs/${orgID}/settings/members/new`)
   }
 
   private handleFilterChange = (searchTerm: string): void => {

diff --git a/ui/src/organizations/components/OrgProfileTab.tsx b/ui/src/organizations/components/OrgProfileTab.tsx
@@ -76,7 +76,7 @@ class OrgProfileTab extends PureComponent<Props> {
       router,
     } = this.props
 
-    router.push(`/orgs/${orgID}/profile/rename`)
+    router.push(`/orgs/${orgID}/settings/profile/rename`)
   }
 }
 

diff --git a/ui/src/organizations/components/RenameOrgForm.tsx b/ui/src/organizations/components/RenameOrgForm.tsx
@@ -117,7 +117,7 @@ class RenameOrgForm extends PureComponent<Props, State> {
   }
 
   private handleGoBack = () => {
-    this.props.router.push(`/orgs/${this.props.startOrg.id}/profile`)
+    this.props.router.push(`/orgs/${this.props.startOrg.id}/settings/profile`)
   }
 
   private handleValidation = (orgName: string): string | null => {

diff --git a/ui/src/organizations/components/RenameOrgOverlay.tsx b/ui/src/organizations/components/RenameOrgOverlay.tsx
@@ -47,7 +47,7 @@ class RenameOrgOverlay extends PureComponent<WithRouterProps> {
       params: {orgID},
     } = this.props
 
-    router.push(`/orgs/${orgID}/profile`)
+    router.push(`/orgs/${orgID}/settings/profile`)
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -82,7 +82,7 @@ describe('tokens', () => { @@
             })
             cy.fixture('routes').then(({orgs}) => {
-              cy.visit(`${orgs}/${id}/tokens`)
+              cy.visit(`${orgs}/${id}/load-data/tokens`)
             })
           })
         })
@@ Expand Down @@