Merge pull request #13127 from influxdata/org-header-name

Org Header receives org name from redux

ui/src/authorizations/containers/TokensIndex.tsx

@@ -29,7 +29,7 @@ class TokensIndex extends Component<StateProps> {
 
     return (
       <Page titleTag={org.name}>
-        <OrgHeader orgID={org.id} />
+        <OrgHeader />
         <Page.Contents fullWidth={false} scrollable={true}>
           <div className="col-xs-12">
             <Tabs>

ui/src/buckets/containers/BucketsIndex.tsx

@@ -29,7 +29,7 @@ class BucketsIndex extends Component<StateProps> {
 
     return (
       <Page titleTag={org.name}>
-        <OrgHeader orgID={org.id} />
+        <OrgHeader />
         <Page.Contents fullWidth={false} scrollable={true}>
           <div className="col-xs-12">
             <Tabs>

ui/src/organizations/containers/OrgDashboardsIndex.tsx

@@ -52,7 +52,7 @@ class OrgDashboardsIndex extends Component<Props, State> {
     return (
       <>
         <Page titleTag={org.name}>
-          <OrgHeader orgID={org.id} />
+          <OrgHeader />
           <Page.Contents fullWidth={false} scrollable={true}>
             <div className="col-xs-12">
               <Tabs>

ui/src/organizations/containers/OrgHeader.tsx

@@ -1,71 +1,35 @@
 import React, {Component} from 'react'
 import {connect} from 'react-redux'
 
+// Components
 import {Page} from 'src/pageLayout'
-import RenamablePageTitle from 'src/pageLayout/components/RenamablePageTitle'
 
+// Types
 import {Organization} from '@influxdata/influx'
 import {AppState} from 'src/types'
 
-import {updateOrg} from 'src/organizations/actions/orgs'
-
-interface OwnProps {
-  orgID: string
-}
-
 interface StateProps {
   org: Organization
 }
 
-interface DispatchProps {
-  onUpdateOrg: typeof updateOrg
-}
-
-type Props = OwnProps & StateProps & DispatchProps
-
-class OrgHeader extends Component<Props> {
+class OrgHeader extends Component<StateProps> {
   public render() {
     const {org} = this.props
 
     return (
       <Page.Header fullWidth={false}>
         <Page.Header.Left>
-          <RenamablePageTitle
-            name={org.name}
-            maxLength={70}
-            placeholder="Name this Organization"
-            onRename={this.handleUpdateOrg}
-          />
+          <Page.Title title={`${org.name} / Settings`} />
         </Page.Header.Left>
         <Page.Header.Right />
       </Page.Header>
     )
   }
-
-  private handleUpdateOrg = (name: string): void => {
-    const {org, onUpdateOrg} = this.props
-
-    const updatedOrg = {...org, name}
-
-    onUpdateOrg(updatedOrg)
-  }
 }
 
-const mstp = (state: AppState, props: OwnProps) => {
-  const {
-    orgs: {items},
-  } = state
-  const org = items.find(o => o.id === props.orgID)
-  return {
-    org,
-  }
-}
+const mstp = ({orgs: {org}}: AppState) => ({org})
 
-const mdtp: DispatchProps = {
-  onUpdateOrg: updateOrg,
-}
-
-export default connect<StateProps, DispatchProps, {}>(
+export default connect<StateProps, {}, {}>(
   mstp,
-  mdtp
+  null
 )(OrgHeader)

ui/src/organizations/containers/OrgMembersIndex.tsx

@@ -61,7 +61,7 @@ class OrgMembersIndex extends Component<Props> {
 
     return (
       <Page titleTag={org.name}>
-        <OrgHeader orgID={org.id} />
+        <OrgHeader />
         <Page.Contents fullWidth={false} scrollable={true}>
           <div className="col-xs-12">
             <Tabs>

ui/src/organizations/containers/OrgScrapersIndex.tsx

@@ -58,7 +58,7 @@ class OrgScrapersIndex extends Component<Props> {
 
     return (
       <Page titleTag={org.name}>
-        <OrgHeader orgID={org.id} />
+        <OrgHeader />
         <Page.Contents fullWidth={false} scrollable={true}>
           <div className="col-xs-12">
             <Tabs>

ui/src/organizations/containers/OrgTasksIndex.tsx

@@ -63,7 +63,7 @@ class OrgTasksIndex extends Component<Props, State> {
     return (
       <>
         <Page titleTag={org.name}>
-          <OrgHeader orgID={org.id} />
+          <OrgHeader />
           <Page.Contents fullWidth={false} scrollable={true}>
             <div className="col-xs-12">
               <Tabs>

ui/src/organizations/containers/OrgTelegrafsIndex.tsx

@@ -78,7 +78,7 @@ class OrgTelegrafsIndex extends Component<Props, State> {
 
     return (
       <Page titleTag={org.name}>
-        <OrgHeader orgID={org.id} />
+        <OrgHeader />
         <Page.Contents fullWidth={false} scrollable={true}>
           <div className="col-xs-12">
             <Tabs>

ui/src/organizations/containers/OrgTemplatesIndex.tsx

@@ -49,7 +49,7 @@ class OrgTemplatesIndex extends Component<Props> {
     return (
       <>
         <Page titleTag={org.name}>
-          <OrgHeader orgID={org.id} />
+          <OrgHeader />
           <Page.Contents fullWidth={false} scrollable={true}>
             <div className="col-xs-12">
               <Tabs>

ui/src/organizations/containers/OrgVariablesIndex.tsx

@@ -44,7 +44,7 @@ class OrgVariablesIndex extends Component<Props> {
     return (
       <>
         <Page titleTag={org.name}>
-          <OrgHeader orgID={org.id} />
+          <OrgHeader />
           <Page.Contents fullWidth={false} scrollable={true}>
             <div className="col-xs-12">
               <Tabs>