feat(ui): Add orgname to dashboard page title

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Features
 1. [13423](https://github.com/influxdata/influxdb/pull/13423): Set autorefresh of dashboard to pause if absolute time range is selected
 1. [13493](https://github.com/influxdata/influxdb/pull/13493): Add org profile tab with ability to edit organization name
+1. [13510](https://github.com/influxdata/influxdb/pull/13510): Add org name to dahboard page title 
 
 ### Bug Fixes
 

ui/src/dashboards/components/DashboardHeader.tsx

@@ -1,5 +1,6 @@
 // Libraries
 import React, {Component} from 'react'
+import _ from 'lodash'
 
 // Components
 import {Page} from 'src/pageLayout'
@@ -25,10 +26,11 @@ import {
 // Types
 import * as AppActions from 'src/types/actions/app'
 import * as QueriesModels from 'src/types/queries'
-import {Dashboard} from '@influxdata/influx'
+import {Dashboard, Organization} from '@influxdata/influx'
 import {AutoRefresh, AutoRefreshStatus} from 'src/types'
 
 interface Props {
+  org: Organization
   activeDashboard: string
   dashboard: Dashboard
   timeRange: QueriesModels.TimeRange
@@ -57,6 +59,7 @@ export default class DashboardHeader extends Component<Props> {
 
   public render() {
     const {
+      org,
       handleChooseAutoRefresh,
       onManualRefresh,
       timeRange: {upper, lower},
@@ -74,6 +77,7 @@ export default class DashboardHeader extends Component<Props> {
       <Page.Header fullWidth={true} inPresentationMode={isHidden}>
         <Page.Header.Left>
           <RenamablePageTitle
+            prefix={_.get(org, 'name', '')}
             maxLength={DASHBOARD_NAME_MAX_LENGTH}
             onRename={onRenameDashboard}
             name={activeDashboard}

ui/src/dashboards/components/DashboardPage.tsx

@@ -54,8 +54,10 @@ import * as AppActions from 'src/types/actions/app'
 import * as ColorsModels from 'src/types/colors'
 import * as NotificationsActions from 'src/types/actions/notifications'
 import {toggleShowVariablesControls} from 'src/userSettings/actions'
+import {Organization} from '@influxdata/influx'
 
 interface StateProps {
+  org: Organization
   links: Links
   zoomedTimeRange: TimeRange
   timeRange: TimeRange
@@ -162,6 +164,7 @@ class DashboardPage extends Component<Props, State> {
 
   public render() {
     const {
+      org,
       timeRange,
       zoomedTimeRange,
       dashboard,
@@ -179,6 +182,7 @@ class DashboardPage extends Component<Props, State> {
       <Page titleTag={this.pageTitle}>
         <HoverTimeProvider>
           <DashboardHeader
+            org={org}
             dashboard={dashboard}
             timeRange={timeRange}
             autoRefresh={autoRefresh}
@@ -353,6 +357,7 @@ const mstp = (state: AppState, {params: {dashboardID}}): StateProps => {
     dashboards,
     views: {views},
     userSettings: {showVariablesControls},
+    orgs: {org},
   } = state
 
   const timeRange =
@@ -363,6 +368,7 @@ const mstp = (state: AppState, {params: {dashboardID}}): StateProps => {
   const dashboard = dashboards.list.find(d => d.id === dashboardID)
 
   return {
+    org,
     links,
     views,
     zoomedTimeRange: {lower: null, upper: null},

ui/src/pageLayout/components/RenamablePageTitle.scss

@@ -5,16 +5,18 @@
 
 @import 'src/style/modules';
 
-$rename-dash-title-padding: 8px;
+$rename-dash-title-padding: 4px;
 
 .renamable-page-title {
   height: $form-sm-height;
   width: 100%;
   min-width: 29vw;
   max-width: 42vw;
+  display: flex;
 }
 
 .renamable-page-title--title,
+.renamable-page-title--input-prefix,
 .input.renamable-page-title--input > input {
   font-size: $page-title-size;
   font-weight: $page-title-weight;
@@ -70,6 +72,18 @@ $rename-dash-title-padding: 8px;
   }
 }
 
+.renamable-page-title--input-prefix {
+  border-radius: $radius;
+  position: relative;
+  white-space: nowrap;
+  @include no-user-select();
+  color: $g17-whisper;
+  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
+  border: $ix-border solid transparent;
+  height: $form-sm-height;
+  line-height: $form-sm-height - ($ix-border * 2);
+}
+
 /* Ensure placeholder text matches font weight of title */
 .input.renamable-page-title--input > input {
   &::-webkit-input-placeholder {

ui/src/pageLayout/components/RenamablePageTitle.tsx

@@ -1,19 +1,21 @@
 // Libraries
-import React, {Component, KeyboardEvent, ChangeEvent} from 'react'
+import React, {PureComponent, KeyboardEvent, ChangeEvent} from 'react'
 import classnames from 'classnames'
 
 // Components
-import {Input} from '@influxdata/clockface'
+import {Input, PageTitle, Icon} from '@influxdata/clockface'
 import {ClickOutside} from 'src/shared/components/ClickOutside'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {IconFont} from 'src/clockface'
 
 interface Props {
   onRename: (name: string) => void
   name: string
   placeholder: string
   maxLength: number
+  prefix: string
 }
 
 interface State {
@@ -22,7 +24,11 @@ interface State {
 }
 
 @ErrorHandling
-class RenamablePageTitle extends Component<Props, State> {
+class RenamablePageTitle extends PureComponent<Props, State> {
+  public static defaultProps = {
+    prefix: '',
+  }
+
   constructor(props: Props) {
     super(props)
 
@@ -33,12 +39,13 @@ class RenamablePageTitle extends Component<Props, State> {
   }
 
   public render() {
-    const {isEditing} = this.state
     const {name, placeholder} = this.props
+    const {isEditing} = this.state
 
     if (isEditing) {
       return (
         <div className="renamable-page-title">
+          {this.prefix}
           <ClickOutside onClickOutside={this.handleStopEditing}>
             {this.input}
           </ClickOutside>
@@ -48,14 +55,24 @@ class RenamablePageTitle extends Component<Props, State> {
 
     return (
       <div className="renamable-page-title">
+        {this.prefix}
         <div className={this.titleClassName} onClick={this.handleStartEditing}>
-          {name || placeholder}
-          <span className="icon pencil" />
+          <PageTitle title={name || placeholder} />
+          <Icon glyph={IconFont.Pencil} />
         </div>
       </div>
     )
   }
 
+  private get prefix(): JSX.Element {
+    const {prefix} = this.props
+    if (prefix) {
+      return (
+        <div className="renamable-page-title--input-prefix">{`${prefix} /`}</div>
+      )
+    }
+  }
+
   private get input(): JSX.Element {
     const {placeholder, maxLength} = this.props
     const {workingName} = this.state