Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(ui): include link to non-multi-user members cloud page (#17459) 

* fix(ui): include link to non-multi-user members cloud page

* refactor(ui): conditionally render anchors or router links depending on whether the destination is cloud or internal

* refactor(ui): ensure old /profile route is supported

* refactor(ui): consolidate multi-user quartz links
pull/17525/head
alexpaxton 2020-03-31 14:50:24 -07:00 committed by GitHub
parent f617657e8d
commit 0e4289c595
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 175 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/index.tsx
View File

@ -421,6 +421,12 @@ class Root extends PureComponent {
component={RenameOrgOverlay}
/>
</Route>
<Route path="profile" component={OrgProfilePage}>
<Route
path="rename"
component={RenameOrgOverlay}
/>
</Route>
</Route>
<Route path="alerting" component={AlertingIndex}>
<Route

13
ui/src/organizations/components/OrgNavigation.tsx
View File

@ -28,6 +28,7 @@ interface OrgPageTab {
href?: string
link?: string
featureFlag?: string
featureFlagValue?: boolean
}
@ErrorHandling
@ -44,10 +45,10 @@ class OrgNavigation extends PureComponent<Props> {
},
{
text: 'Members',
id: 'members-cloud',
featureFlag: 'multiUser',
id: 'members-quartz',
cloudOnly: true,
href: `${CLOUD_URL}/organizations/${orgID}${CLOUD_USERS_PATH}`,
link: `${CLOUD_URL}/organizations/${orgID}${CLOUD_USERS_PATH}`,
featureFlag: 'multiUser',
},
{
text: 'About',
@ -103,7 +104,11 @@ class OrgNavigation extends PureComponent<Props> {
if (t.featureFlag) {
tab = (
<FeatureFlag key={t.id} name={t.featureFlag}>
<FeatureFlag
key={t.id}
name={t.featureFlag}
equals={t.featureFlagValue}
>
{tab}
</FeatureFlag>
)

158
ui/src/pageLayout/constants/navigationHierarchy.ts
View File

@ -1,14 +1,21 @@
import {IconFont} from '@influxdata/clockface'
import {CLOUD, CLOUD_URL, CLOUD_USERS_PATH} from 'src/shared/constants'
import {CLOUD_URL, CLOUD_USERS_PATH} from 'src/shared/constants'
import {isFlagEnabled} from 'src/shared/utils/featureFlag'
export interface NavItemLink {
type: 'link' | 'href'
location: string
}
export interface NavSubItem {
id: string
testID: string
label: string
link: string
link: NavItemLink
cloudExclude?: boolean
cloudOnly?: boolean
featureFlag?: string
featureFlagValue?: boolean
}
export interface NavItem {
@ -16,11 +23,12 @@ export interface NavItem {
testID: string
label: string
shortLabel?: string
link: string
link: NavItemLink
icon: IconFont
cloudExclude?: boolean
cloudOnly?: boolean
featureFlag?: string
featureFlagValue?: boolean
menu?: NavSubItem[]
activeKeywords: string[]
}
@ -28,6 +36,18 @@ 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',
@ -35,39 +55,57 @@ export const generateNavItems = (orgID: string): NavItem[] => {
icon: IconFont.DisksNav,
label: 'Load Data',
shortLabel: 'Data',
link: `${orgPrefix}/load-data/buckets`,
link: {
type: 'link',
location: `${orgPrefix}/load-data/buckets`,
},
activeKeywords: ['load-data'],
menu: [
{
id: 'buckets',
testID: 'nav-subitem-buckets',
label: 'Buckets',
link: `${orgPrefix}/load-data/buckets`,
link: {
type: 'link',
location: `${orgPrefix}/load-data/buckets`,
},
},
{
id: 'telegrafs',
testID: 'nav-subitem-telegrafs',
label: 'Telegraf',
link: `${orgPrefix}/load-data/telegrafs`,
link: {
type: 'link',
location: `${orgPrefix}/load-data/telegrafs`,
},
},
{
id: 'scrapers',
testID: 'nav-subitem-scrapers',
label: 'Scrapers',
link: `${orgPrefix}/load-data/scrapers`,
link: {
type: 'link',
location: `${orgPrefix}/load-data/scrapers`,
},
cloudExclude: true,
},
{
id: 'tokens',
testID: 'nav-subitem-tokens',
label: 'Tokens',
link: `${orgPrefix}/load-data/tokens`,
link: {
type: 'link',
location: `${orgPrefix}/load-data/tokens`,
},
},
{
id: 'client-libraries',
testID: 'nav-subitem-client-libraries',
label: 'Client Libraries',
link: `${orgPrefix}/load-data/client-libraries`,
link: {
type: 'link',
location: `${orgPrefix}/load-data/client-libraries`,
},
},
],
},
@ -77,7 +115,10 @@ export const generateNavItems = (orgID: string): NavItem[] => {
icon: IconFont.GraphLine,
label: 'Data Explorer',
shortLabel: 'Explore',
link: `${orgPrefix}/data-explorer`,
link: {
type: 'link',
location: `${orgPrefix}/data-explorer`,
},
activeKeywords: ['data-explorer'],
},
{
@ -86,30 +127,61 @@ export const generateNavItems = (orgID: string): NavItem[] => {
icon: IconFont.UsersTrio,
label: 'Organization',
shortLabel: 'Org',
link: CLOUD
? `${CLOUD_URL}/organizations/${orgID}${CLOUD_USERS_PATH}`
: `${orgPrefix}/members`,
link: {
type: 'link',
location: `${orgPrefix}/members`,
},
cloudExclude: true,
activeKeywords: ['members', 'about'],
menu: [
{
id: 'members',
testID: 'nav-subitem-members',
label: 'Members',
link: `${orgPrefix}/members`,
cloudExclude: true,
},
{
id: 'multi-user-members',
testID: 'nav-subitem-multi-user-members',
label: 'Members',
featureFlag: 'multiUser',
link: `${CLOUD_URL}/organizations/${orgID}${CLOUD_USERS_PATH}`,
link: {
type: 'link',
location: `${orgPrefix}/members`,
},
},
{
id: 'about',
testID: 'nav-subitem-about',
label: 'About',
link: `${orgPrefix}/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`,
},
},
],
},
@ -119,7 +191,10 @@ export const generateNavItems = (orgID: string): NavItem[] => {
icon: IconFont.Dashboards,
label: 'Dashboards',
shortLabel: 'Boards',
link: `${orgPrefix}/dashboards`,
link: {
type: 'link',
location: `${orgPrefix}/dashboards`,
},
activeKeywords: ['dashboards'],
},
{
@ -127,7 +202,10 @@ export const generateNavItems = (orgID: string): NavItem[] => {
testID: 'nav-item-tasks',
icon: IconFont.Calendar,
label: 'Tasks',
link: `${orgPrefix}/tasks`,
link: {
type: 'link',
location: `${orgPrefix}/tasks`,
},
activeKeywords: ['tasks'],
},
{
@ -135,14 +213,20 @@ export const generateNavItems = (orgID: string): NavItem[] => {
testID: 'nav-item-alerting',
icon: IconFont.Bell,
label: 'Alerts',
link: `${orgPrefix}/alerting`,
link: {
type: 'link',
location: `${orgPrefix}/alerting`,
},
activeKeywords: ['alerting'],
menu: [
{
id: 'history',
testID: 'nav-subitem-history',
label: 'Alert History',
link: `${orgPrefix}/alert-history`,
link: {
type: 'link',
location: `${orgPrefix}/alert-history`,
},
},
],
},
@ -151,26 +235,38 @@ export const generateNavItems = (orgID: string): NavItem[] => {
testID: 'nav-item-settings',
icon: IconFont.WrenchNav,
label: 'Settings',
link: `${orgPrefix}/settings/variables`,
link: {
type: 'link',
location: `${orgPrefix}/settings/variables`,
},
activeKeywords: ['settings'],
menu: [
{
id: 'variables',
testID: 'nav-subitem-variables',
label: 'Variables',
link: `${orgPrefix}/settings/variables`,
link: {
type: 'link',
location: `${orgPrefix}/settings/variables`,
},
},
{
id: 'templates',
testID: 'nav-subitem-templates',
label: 'Templates',
link: `${orgPrefix}/settings/templates`,
link: {
type: 'link',
location: `${orgPrefix}/settings/templates`,
},
},
{
id: 'labels',
testID: 'nav-subitem-labels',
label: 'Labels',
link: `${orgPrefix}/settings/labels`,
link: {
type: 'link',
location: `${orgPrefix}/settings/labels`,
},
},
],
},

40
ui/src/pageLayout/containers/TreeNav.tsx
View File

@ -75,6 +75,13 @@ class TreeSidebar extends PureComponent<Props> {
bannerElement={<CloudUpgradeNavBanner />}
>
{navItems.map(item => {
const linkElement = (className: string): JSX.Element => {
if (item.link.type === 'href') {
return <a href={item.link.location} className={className} />
}
return <Link to={item.link.location} className={className} />
}
let navItemElement = (
<TreeNav.Item
key={item.id}
@ -87,13 +94,29 @@ class TreeSidebar extends PureComponent<Props> {
item.activeKeywords,
location.pathname
)}
linkElement={className => (
<Link className={className} to={item.link} />
)}
linkElement={linkElement}
>
{Boolean(item.menu) && (
<TreeNav.SubMenu>
{item.menu.map(menuItem => {
const linkElement = (className: string): JSX.Element => {
if (menuItem.link.type === 'href') {
return (
<a
href={menuItem.link.location}
className={className}
/>
)
}
return (
<Link
to={menuItem.link.location}
className={className}
/>
)
}
let navSubItemElement = (
<TreeNav.SubItem
key={menuItem.id}
@ -104,9 +127,7 @@ class TreeSidebar extends PureComponent<Props> {
location.pathname
)}
label={menuItem.label}
linkElement={className => (
<Link className={className} to={menuItem.link} />
)}
linkElement={linkElement}
/>
)
@ -131,6 +152,7 @@ class TreeSidebar extends PureComponent<Props> {
<FeatureFlag
key={menuItem.id}
name={menuItem.featureFlag}
equals={menuItem.featureFlagValue}
>
{navSubItemElement}
</FeatureFlag>
@ -158,7 +180,11 @@ class TreeSidebar extends PureComponent<Props> {
if (item.featureFlag) {
navItemElement = (
<FeatureFlag key={item.id} name={item.featureFlag}>
<FeatureFlag
key={item.id}
name={item.featureFlag}
equals={item.featureFlagValue}
>
{navItemElement}
</FeatureFlag>
)