Merge pull request #13141 from influxdata/feat/org-name-page-titles

Add org name to page titles

ui/src/configuration/components/ConfigurationPage.tsx

@@ -13,6 +13,7 @@ import Settings from 'src/me/components/account/Settings'
 import Telegrafs from 'src/configuration/components/Telegrafs'
 import Variables from 'src/configuration/components/Variables'
 import Scrapers from 'src/configuration/components/Scrapers'
+import PageTitleWithOrg from 'src/shared/components/PageTitleWithOrg'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -36,7 +37,7 @@ class ConfigurationPage extends Component<Props> {
       <Page titleTag="Configuration">
         <Page.Header fullWidth={false}>
           <Page.Header.Left>
-            <Page.Title title="Configuration" />
+            <PageTitleWithOrg title="Configuration" />
           </Page.Header.Left>
           <Page.Header.Right />
         </Page.Header>

ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx

@@ -8,6 +8,7 @@ import DashboardsIndexContents from 'src/dashboards/components/dashboard_index/D
 import {Page} from 'src/pageLayout'
 import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
 import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
+import PageTitleWithOrg from 'src/shared/components/PageTitleWithOrg'
 
 // APIs
 import {createDashboard, cloneDashboard} from 'src/dashboards/apis/'
@@ -85,7 +86,7 @@ class DashboardIndex extends PureComponent<Props, State> {
         <Page titleTag="Dashboards">
           <Page.Header fullWidth={false}>
             <Page.Header.Left>
-              <Page.Title title="Dashboards" />
+              <PageTitleWithOrg title="Dashboards" />
             </Page.Header.Left>
             <Page.Header.Right>
               <AddResourceDropdown

ui/src/dataExplorer/components/DataExplorerPage.tsx

@@ -7,6 +7,7 @@ import {Page} from 'src/pageLayout'
 import SaveAsButton from 'src/dataExplorer/components/SaveAsButton'
 import VisOptionsButton from 'src/timeMachine/components/VisOptionsButton'
 import ViewTypeDropdown from 'src/timeMachine/components/view_options/ViewTypeDropdown'
+import PageTitleWithOrg from 'src/shared/components/PageTitleWithOrg'
 
 const DataExplorerPage: SFC = ({children}) => {
   return (
@@ -14,7 +15,7 @@ const DataExplorerPage: SFC = ({children}) => {
       {children}
       <Page.Header fullWidth={true}>
         <Page.Header.Left>
-          <Page.Title title="Data Explorer" />
+          <PageTitleWithOrg title="Data Explorer" />
         </Page.Header.Left>
         <Page.Header.Right>
           <ViewTypeDropdown />

ui/src/me/components/account/Account.tsx

@@ -7,6 +7,7 @@ import {Page} from 'src/pageLayout'
 import TabbedPage from 'src/shared/components/tabbed_page/TabbedPage'
 import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
 import Settings from 'src/me/components/account/Settings'
+import PageTitleWithOrg from 'src/shared/components/PageTitleWithOrg'
 
 export enum Tabs {
   Settings = 'settings',
@@ -20,7 +21,7 @@ export default class Account extends PureComponent<WithRouterProps> {
       <Page titleTag="Account">
         <Page.Header fullWidth={false}>
           <Page.Header.Left>
-            <Page.Title title="Account" />
+            <PageTitleWithOrg title="Account" />
           </Page.Header.Left>
           <Page.Header.Right />
         </Page.Header>

ui/src/me/components/account/__snapshots__/Account.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`Account rendering renders! 1`] = `
     <PageHeaderLeft
       offsetPixels={0}
     >
-      <PageTitle
+      <Connect(PageTitleWithOrg)
         title="Account"
       />
     </PageHeaderLeft>

ui/src/organizations/containers/OrgHeader.tsx

@@ -1,25 +1,15 @@
 import React, {Component} from 'react'
-import {connect} from 'react-redux'
 
 // Components
 import {Page} from 'src/pageLayout'
+import PageTitleWithOrg from 'src/shared/components/PageTitleWithOrg'
 
-// Types
-import {Organization} from '@influxdata/influx'
-import {AppState} from 'src/types'
-
-interface StateProps {
-  org: Organization
-}
-
-class OrgHeader extends Component<StateProps> {
+class OrgHeader extends Component {
   public render() {
-    const {org} = this.props
-
     return (
       <Page.Header fullWidth={false}>
         <Page.Header.Left>
-          <Page.Title title={`${org.name} / Settings`} />
+          <PageTitleWithOrg title="Settings" />
         </Page.Header.Left>
         <Page.Header.Right />
       </Page.Header>
@@ -27,9 +17,4 @@ class OrgHeader extends Component<StateProps> {
   }
 }
 
-const mstp = ({orgs: {org}}: AppState) => ({org})
-
-export default connect<StateProps, {}, {}>(
-  mstp,
-  null
-)(OrgHeader)
+export default OrgHeader

ui/src/shared/components/PageTitleWithOrg.tsx

@@ -0,0 +1,41 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
+import {startCase} from 'lodash'
+
+// Components
+import PageTitle from 'src/pageLayout/components/PageTitle'
+
+// Types
+import {AppState} from 'src/types'
+
+// Decorators
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+interface OwnProps {
+  title: string
+  altText?: string
+}
+
+interface StateProps {
+  orgName: string
+}
+
+type Props = OwnProps & StateProps
+
+@ErrorHandling
+class PageTitleWithOrg extends PureComponent<Props> {
+  render() {
+    const {orgName, title, altText} = this.props
+
+    return (
+      <PageTitle title={`${startCase(orgName)} / ${title}`} altText={altText} />
+    )
+  }
+}
+
+const mstp = ({orgs: {org}}: AppState) => {
+  return {orgName: org.name}
+}
+
+export default connect<StateProps>(mstp)(PageTitleWithOrg)

ui/src/tasks/components/TaskHeader.tsx

@@ -1,6 +1,11 @@
+// Libraries
 import React, {PureComponent} from 'react'
 
+// Components
 import {Page} from 'src/pageLayout'
+import PageTitleWithOrg from 'src/shared/components/PageTitleWithOrg'
+
+// Types
 import {ComponentColor, Button, ComponentStatus} from '@influxdata/clockface'
 
 interface Props {
@@ -15,7 +20,7 @@ export default class TaskHeader extends PureComponent<Props> {
     return (
       <Page.Header fullWidth={true}>
         <Page.Header.Left>
-          <Page.Title title={this.props.title} />
+          <PageTitleWithOrg title={this.props.title} />
         </Page.Header.Left>
         <Page.Header.Right>
           <Button

ui/src/tasks/components/TaskRunsPage.tsx

@@ -5,6 +5,7 @@ import {connect} from 'react-redux'
 // Components
 import {Page} from 'src/pageLayout'
 import TaskRunsList from 'src/tasks/components/TaskRunsList'
+import PageTitleWithOrg from 'src/shared/components/PageTitleWithOrg'
 
 // Types
 import {AppState} from 'src/types'
@@ -48,7 +49,7 @@ class TaskRunsPage extends PureComponent<Props> {
         <Page titleTag="Runs">
           <Page.Header fullWidth={false}>
             <Page.Header.Left>
-              <Page.Title title="Runs" />
+              <PageTitleWithOrg title="Runs" />
             </Page.Header.Left>
             <Page.Header.Right>
               <Button

ui/src/tasks/components/TasksHeader.tsx

@@ -6,6 +6,7 @@ import {Page} from 'src/pageLayout'
 import {SlideToggle, ComponentSize} from '@influxdata/clockface'
 import {Tabs, ComponentSpacer, Alignment, Stack} from 'src/clockface'
 import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
+import PageTitleWithOrg from 'src/shared/components/PageTitleWithOrg'
 
 interface Props {
   onCreateTask: () => void
@@ -40,7 +41,7 @@ export default class TasksHeader extends PureComponent<Props> {
       return (
         <Page.Header fullWidth={false}>
           <Page.Header.Left>
-            <Page.Title title={this.pageTitle} />
+            <PageTitleWithOrg title={this.pageTitle} />
           </Page.Header.Left>
           <Page.Header.Right>
             <SlideToggle.Label text="Show Inactive" />

ui/src/templates/components/TemplatesHeader.tsx

@@ -1,6 +1,9 @@
 // Libraries
 import React, {PureComponent} from 'react'
+
+// Components
 import {Page} from 'src/pageLayout'
+import PageTitleWithOrg from 'src/shared/components/PageTitleWithOrg'
 
 // Components
 import {Tabs, ComponentSpacer, Alignment, Stack} from 'src/clockface'
@@ -29,7 +32,7 @@ export default class TemplatesHeader extends PureComponent<Props> {
       return (
         <Page.Header fullWidth={false}>
           <Page.Header.Left>
-            <Page.Title title={this.pageTitle} />
+            <PageTitleWithOrg title={this.pageTitle} />
           </Page.Header.Left>
           <Page.Header.Right>{this.importButton}</Page.Header.Right>
         </Page.Header>