From 6c8c2ec0641e9883def7fcc7ad42b17592db3aba Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 5 Sep 2019 15:06:06 -0700 Subject: [PATCH 1/5] refactor(ui): move tokens tab to load data page and update navbar --- ui/cypress/e2e/tokens.test.ts | 2 +- .../components/AllAccessTokenOverlay.tsx | 2 +- .../components/BucketsTokenOverlay.tsx | 2 +- .../authorizations/components/TokensTab.tsx | 4 ++-- .../authorizations/containers/TokensIndex.tsx | 12 +++++----- ui/src/index.tsx | 24 +++++++++---------- ui/src/pageLayout/containers/Nav.tsx | 10 ++++++++ .../components/LoadDataNavigation.tsx | 6 +++++ .../components/SettingsNavigation.tsx | 5 ---- 9 files changed, 39 insertions(+), 28 deletions(-) diff --git a/ui/cypress/e2e/tokens.test.ts b/ui/cypress/e2e/tokens.test.ts index 062fd40cb9f..f529fb2508b 100644 --- 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/src/authorizations/components/AllAccessTokenOverlay.tsx b/ui/src/authorizations/components/AllAccessTokenOverlay.tsx index 873c0bc8d26..3631dec65e5 100644 --- a/ui/src/authorizations/components/AllAccessTokenOverlay.tsx +++ b/ui/src/authorizations/components/AllAccessTokenOverlay.tsx @@ -127,7 +127,7 @@ class AllAccessTokenOverlay extends PureComponent { 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 index ce51d036860..61b0fce28e2 100644 --- a/ui/src/authorizations/components/BucketsTokenOverlay.tsx +++ b/ui/src/authorizations/components/BucketsTokenOverlay.tsx @@ -276,7 +276,7 @@ class BucketsTokenOverlay extends PureComponent { 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 index 86a878fbfa4..f6129408b3b 100644 --- a/ui/src/authorizations/components/TokensTab.tsx +++ b/ui/src/authorizations/components/TokensTab.tsx @@ -103,7 +103,7 @@ class TokensTab extends PureComponent { 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 { 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 index 4bd90285970..24bc7e7cf0f 100644 --- 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 { return ( <> - - - + + + - + {children} diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 9908a385e50..9366a3f6cf9 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -220,6 +220,18 @@ class Root extends PureComponent { + + + + + + - - - - - - diff --git a/ui/src/pageLayout/containers/Nav.tsx b/ui/src/pageLayout/containers/Nav.tsx index 60e4488ba0c..6cf3bc46eca 100644 --- a/ui/src/pageLayout/containers/Nav.tsx +++ b/ui/src/pageLayout/containers/Nav.tsx @@ -67,6 +67,7 @@ class SideNav extends PureComponent { const loadDataLink = `${orgPrefix}/load-data/buckets` const bucketsLink = `${orgPrefix}/load-data/buckets` const telegrafsLink = `${orgPrefix}/load-data/telegrafs` + const tokensLink = `${orgPrefix}/load-data/tokens` const scrapersLink = `${orgPrefix}/load-data/scrapers` const clientLibrariesLink = `${orgPrefix}/load-data/client-libraries` const settingsLink = `${orgPrefix}/settings` @@ -207,6 +208,15 @@ class SideNav extends PureComponent { key="scrapers" /> + ( + + Tokens + + )} + active={getNavItemActivation(['tokens'], location.pathname)} + key="tokens" + /> ( diff --git a/ui/src/settings/components/LoadDataNavigation.tsx b/ui/src/settings/components/LoadDataNavigation.tsx index a39fe2f7d9b..854b20d1cd8 100644 --- a/ui/src/settings/components/LoadDataNavigation.tsx +++ b/ui/src/settings/components/LoadDataNavigation.tsx @@ -52,6 +52,12 @@ class LoadDataNavigation extends PureComponent { cloudExclude: true, featureFlag: null, }, + { + text: 'Tokens', + id: 'tokens', + cloudExclude: false, + featureFlag: null, + }, { text: 'Client Libraries', id: 'client-libraries', diff --git a/ui/src/settings/components/SettingsNavigation.tsx b/ui/src/settings/components/SettingsNavigation.tsx index f180698c985..cce6f22b908 100644 --- a/ui/src/settings/components/SettingsNavigation.tsx +++ b/ui/src/settings/components/SettingsNavigation.tsx @@ -53,11 +53,6 @@ class SettingsNavigation extends PureComponent { id: 'labels', cloudExclude: false, }, - { - text: 'Tokens', - id: 'tokens', - cloudExclude: false, - }, { text: 'Org Profile', id: 'profile', From e71ca504ba1f0ca7b26f48ff17bae425866653da Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 5 Sep 2019 15:25:08 -0700 Subject: [PATCH 2/5] refactor(ui): prefix all settings page urls with "settings" --- ui/cypress/e2e/variables.test.ts | 2 +- ui/src/index.tsx | 112 ++++++++---------- .../members/components/AddMembersOverlay.tsx | 2 +- ui/src/members/components/Members.tsx | 2 +- .../components/OrgProfileTab.tsx | 2 +- .../components/RenameOrgForm.tsx | 2 +- .../components/RenameOrgOverlay.tsx | 2 +- .../components/SettingsNavigation.tsx | 2 +- .../components/StaticTemplateCard.tsx | 2 +- ui/src/templates/components/TemplateCard.tsx | 2 +- .../TemplateBrowserEmpty.tsx | 2 +- .../templates/containers/TemplatesIndex.tsx | 2 +- .../components/CreateVariableOverlay.tsx | 2 +- .../components/RenameVariableOverlay.tsx | 2 +- .../components/UpdateVariableOverlay.tsx | 2 +- ui/src/variables/components/VariableCard.tsx | 6 +- ui/src/variables/components/VariablesTab.tsx | 4 +- 17 files changed, 71 insertions(+), 79 deletions(-) diff --git a/ui/cypress/e2e/variables.test.ts b/ui/cypress/e2e/variables.test.ts index 3ed96b57c79..8b851597d71 100644 --- 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/index.tsx b/ui/src/index.tsx index 9366a3f6cf9..c5ebfe1279b 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -215,9 +215,6 @@ class Root extends PureComponent { - - - @@ -284,61 +281,59 @@ class Root extends PureComponent { /> - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + - @@ -368,9 +363,6 @@ class Root extends PureComponent { component={AlertHistoryIndex} /> - - - diff --git a/ui/src/members/components/AddMembersOverlay.tsx b/ui/src/members/components/AddMembersOverlay.tsx index 04b51ac5e8b..112f4858b45 100644 --- a/ui/src/members/components/AddMembersOverlay.tsx +++ b/ui/src/members/components/AddMembersOverlay.tsx @@ -125,7 +125,7 @@ class AddMembersOverlay extends PureComponent { 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 index 94f3b922045..cc54b34c28b 100644 --- a/ui/src/members/components/Members.tsx +++ b/ui/src/members/components/Members.tsx @@ -103,7 +103,7 @@ class Members extends PureComponent { 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 index b3cb8857598..54bbd0eb987 100644 --- a/ui/src/organizations/components/OrgProfileTab.tsx +++ b/ui/src/organizations/components/OrgProfileTab.tsx @@ -76,7 +76,7 @@ class OrgProfileTab extends PureComponent { 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 index ab7c6482dae..33ba2065a6d 100644 --- a/ui/src/organizations/components/RenameOrgForm.tsx +++ b/ui/src/organizations/components/RenameOrgForm.tsx @@ -117,7 +117,7 @@ class RenameOrgForm extends PureComponent { } 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 index 15facea0f4b..9f3da4b64bf 100644 --- a/ui/src/organizations/components/RenameOrgOverlay.tsx +++ b/ui/src/organizations/components/RenameOrgOverlay.tsx @@ -47,7 +47,7 @@ class RenameOrgOverlay extends PureComponent { params: {orgID}, } = this.props - router.push(`/orgs/${orgID}/profile`) + router.push(`/orgs/${orgID}/settings/profile`) } } diff --git a/ui/src/settings/components/SettingsNavigation.tsx b/ui/src/settings/components/SettingsNavigation.tsx index cce6f22b908..fcf2252901a 100644 --- a/ui/src/settings/components/SettingsNavigation.tsx +++ b/ui/src/settings/components/SettingsNavigation.tsx @@ -29,7 +29,7 @@ class SettingsNavigation extends PureComponent { const {activeTab, orgID, router} = this.props const handleTabClick = (id: string): void => { - router.push(`/orgs/${orgID}/${id}`) + router.push(`/orgs/${orgID}/settings/${id}`) } const tabs = [ diff --git a/ui/src/templates/components/StaticTemplateCard.tsx b/ui/src/templates/components/StaticTemplateCard.tsx index 9bda8d5dc4d..0d84f38057f 100644 --- a/ui/src/templates/components/StaticTemplateCard.tsx +++ b/ui/src/templates/components/StaticTemplateCard.tsx @@ -114,7 +114,7 @@ class StaticTemplateCard extends PureComponent { private handleViewTemplate = () => { const {router, org, name} = this.props - router.push(`/orgs/${org.id}/templates/${name}/static/view`) + router.push(`/orgs/${org.id}/settings/templates/${name}/static/view`) } } diff --git a/ui/src/templates/components/TemplateCard.tsx b/ui/src/templates/components/TemplateCard.tsx index 33474ac4f60..9ea76e3a3ab 100644 --- a/ui/src/templates/components/TemplateCard.tsx +++ b/ui/src/templates/components/TemplateCard.tsx @@ -200,7 +200,7 @@ class TemplateCard extends PureComponent { private handleViewTemplate = () => { const {router, template, org} = this.props - router.push(`/orgs/${org.id}/templates/${template.id}/view`) + router.push(`/orgs/${org.id}/settings/templates/${template.id}/view`) } private handleAddLabel = (label: ILabel): void => { diff --git a/ui/src/templates/components/createFromTemplateOverlay/TemplateBrowserEmpty.tsx b/ui/src/templates/components/createFromTemplateOverlay/TemplateBrowserEmpty.tsx index 6a1be529a4d..ae07f0bebfb 100644 --- a/ui/src/templates/components/createFromTemplateOverlay/TemplateBrowserEmpty.tsx +++ b/ui/src/templates/components/createFromTemplateOverlay/TemplateBrowserEmpty.tsx @@ -43,7 +43,7 @@ class TemplateBrowserEmpty extends PureComponent { private handleButtonClick = (): void => { const {router, org} = this.props - router.push(`/orgs/${org.id}/templates`) + router.push(`/orgs/${org.id}/settings/templates`) } } diff --git a/ui/src/templates/containers/TemplatesIndex.tsx b/ui/src/templates/containers/TemplatesIndex.tsx index aeb9327e282..f47d38fa4ba 100644 --- a/ui/src/templates/containers/TemplatesIndex.tsx +++ b/ui/src/templates/containers/TemplatesIndex.tsx @@ -43,7 +43,7 @@ class TemplatesIndex extends Component { private handleImport = () => { const {router, org} = this.props - router.push(`/orgs/${org.id}/templates/import`) + router.push(`/orgs/${org.id}/settings/templates/import`) } } diff --git a/ui/src/variables/components/CreateVariableOverlay.tsx b/ui/src/variables/components/CreateVariableOverlay.tsx index 992402ab789..030948555da 100644 --- a/ui/src/variables/components/CreateVariableOverlay.tsx +++ b/ui/src/variables/components/CreateVariableOverlay.tsx @@ -59,7 +59,7 @@ class CreateVariableOverlay extends PureComponent { params: {orgID}, } = this.props - router.push(`/orgs/${orgID}/variables`) + router.push(`/orgs/${orgID}/settings/variables`) } } diff --git a/ui/src/variables/components/RenameVariableOverlay.tsx b/ui/src/variables/components/RenameVariableOverlay.tsx index 27a26ec2848..61ddaeabecb 100644 --- a/ui/src/variables/components/RenameVariableOverlay.tsx +++ b/ui/src/variables/components/RenameVariableOverlay.tsx @@ -41,7 +41,7 @@ class RenameVariableOverlay extends PureComponent { params: {orgID}, } = this.props - router.push(`/orgs/${orgID}/variables`) + router.push(`/orgs/${orgID}/settings/variables`) } } diff --git a/ui/src/variables/components/UpdateVariableOverlay.tsx b/ui/src/variables/components/UpdateVariableOverlay.tsx index 4e1cb1a12f0..a2810b7c62c 100644 --- a/ui/src/variables/components/UpdateVariableOverlay.tsx +++ b/ui/src/variables/components/UpdateVariableOverlay.tsx @@ -251,7 +251,7 @@ class UpdateVariableOverlay extends PureComponent { params: {orgID}, } = this.props - router.push(`/orgs/${orgID}/variables`) + router.push(`/orgs/${orgID}/settings/variables`) } } diff --git a/ui/src/variables/components/VariableCard.tsx b/ui/src/variables/components/VariableCard.tsx index f525ba906a3..e6c48355b29 100644 --- a/ui/src/variables/components/VariableCard.tsx +++ b/ui/src/variables/components/VariableCard.tsx @@ -76,7 +76,7 @@ class VariableCard extends PureComponent { router, } = this.props - router.push(`/orgs/${orgID}/variables/${variable.id}/edit`) + router.push(`/orgs/${orgID}/settings/variables/${variable.id}/edit`) } private get labels(): JSX.Element { @@ -122,7 +122,7 @@ class VariableCard extends PureComponent { variable, params: {orgID}, } = this.props - router.push(`/orgs/${orgID}/variables/${variable.id}/export`) + router.push(`/orgs/${orgID}/settings/variables/${variable.id}/export`) } private handleRenameVariable = async () => { @@ -132,7 +132,7 @@ class VariableCard extends PureComponent { params: {orgID}, } = this.props - router.push(`/orgs/${orgID}/variables/${variable.id}/rename`) + router.push(`/orgs/${orgID}/settings/variables/${variable.id}/rename`) } } diff --git a/ui/src/variables/components/VariablesTab.tsx b/ui/src/variables/components/VariablesTab.tsx index 8d1f7bd8132..df2449cd465 100644 --- a/ui/src/variables/components/VariablesTab.tsx +++ b/ui/src/variables/components/VariablesTab.tsx @@ -143,7 +143,7 @@ class VariablesTab extends PureComponent { params: {orgID}, } = this.props - router.push(`/orgs/${orgID}/variables/import`) + router.push(`/orgs/${orgID}/settings/variables/import`) } private handleOpenCreateOverlay = (): void => { @@ -152,7 +152,7 @@ class VariablesTab extends PureComponent { params: {orgID}, } = this.props - router.push(`/orgs/${orgID}/variables/new`) + router.push(`/orgs/${orgID}/settings/variables/new`) } private handleUpdateVariable = (variable: Partial): void => { From 50119e39ff077494a889f715d2d2ca887d043e34 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 5 Sep 2019 15:25:28 -0700 Subject: [PATCH 3/5] refactor(ui): expose settings tabs in navbar as sub-items --- ui/src/pageLayout/containers/Nav.tsx | 64 ++++++++++++++++++++++++++-- 1 file changed, 60 insertions(+), 4 deletions(-) diff --git a/ui/src/pageLayout/containers/Nav.tsx b/ui/src/pageLayout/containers/Nav.tsx index 6cf3bc46eca..61de07d8a0c 100644 --- a/ui/src/pageLayout/containers/Nav.tsx +++ b/ui/src/pageLayout/containers/Nav.tsx @@ -58,19 +58,29 @@ class SideNav extends PureComponent { return null } + // Home page const orgPrefix = `/orgs/${orgID}` - const dashboardsLink = `${orgPrefix}/dashboards` + // Top level nav links const dataExplorerLink = `${orgPrefix}/data-explorer` + const dashboardsLink = `${orgPrefix}/dashboards` const tasksLink = `${orgPrefix}/tasks` const alertingLink = `${orgPrefix}/alerting` const alertHistoryLink = `${orgPrefix}/alert-history` + // Load data const loadDataLink = `${orgPrefix}/load-data/buckets` const bucketsLink = `${orgPrefix}/load-data/buckets` const telegrafsLink = `${orgPrefix}/load-data/telegrafs` - const tokensLink = `${orgPrefix}/load-data/tokens` const scrapersLink = `${orgPrefix}/load-data/scrapers` + const tokensLink = `${orgPrefix}/load-data/tokens` const clientLibrariesLink = `${orgPrefix}/load-data/client-libraries` - const settingsLink = `${orgPrefix}/settings` + // Settings + const settingsLink = `${orgPrefix}/settings/members` + const membersLink = `${orgPrefix}/settings/members` + const variablesLink = `${orgPrefix}/settings/variables` + const templatesLink = `${orgPrefix}/settings/templates` + const labelsLink = `${orgPrefix}/settings/labels` + const profileLink = `${orgPrefix}/settings/profile` + // Feedback const feedbackLink = 'https://docs.google.com/forms/d/e/1FAIpQLSdGJpnIZGotN1VFJPkgZEhrt4t4f6QY1lMgMSRUnMeN3FjCKA/viewform?usp=sf_link' @@ -244,7 +254,53 @@ class SideNav extends PureComponent { )} active={getNavItemActivation(['settings'], location.pathname)} - /> + > + ( + + Members + + )} + active={getNavItemActivation(['members'], location.pathname)} + key="members" + /> + ( + + Variables + + )} + active={getNavItemActivation(['variables'], location.pathname)} + key="variables" + /> + ( + + Templates + + )} + active={getNavItemActivation(['templates'], location.pathname)} + key="templates" + /> + ( + + Labels + + )} + active={getNavItemActivation(['labels'], location.pathname)} + key="labels" + /> + ( + + Profile + + )} + active={getNavItemActivation(['profile'], location.pathname)} + key="profile" + /> + ( From 92265f8d85fe3c0d4b5d00e56b2e85a8b4241348 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 5 Sep 2019 15:31:14 -0700 Subject: [PATCH 4/5] chore(ui): update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 35701527f99..9c5d0e27028 100644 --- 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. From 63adc8c90b72aee62859c3b3fde4a398a541072a Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 5 Sep 2019 15:47:19 -0700 Subject: [PATCH 5/5] refactor(ui): fix URLs in e2e tests --- ui/cypress/e2e/collectors.test.ts | 2 +- ui/cypress/e2e/labels.test.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/cypress/e2e/collectors.test.ts b/ui/cypress/e2e/collectors.test.ts index 4aa44f721e0..b55daf8bf1d 100644 --- 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 index 025b46ac4df..6a3eed59ec7 100644 --- 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`) }) }) })