Update Org page to include Dashboards components

CHANGELOG.md

@@ -17,6 +17,8 @@
 1. [11522](https://github.com/influxdata/influxdb/pull/11522): Add plugin information step to allow for config naming and configure one plugin at a time
 
 ### Bug Fixes
+1. [11758](https://github.com/influxdata/influxdb/pull/11758): Update Dashboards tab on Org page to look like Dashboards Page
+## Bug Fixes
 1. [11678](https://github.com/influxdata/influxdb/pull/11678): Update the System Telegraf Plugin bundle to include the swap plugin
 1. [11722](https://github.com/influxdata/influxdb/pull/11722): Revert behavior allowing users to create authorizations on behalf of another user
 

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

@@ -25,6 +25,7 @@ interface Props {
   onEditLabels: (dashboard: Dashboard) => void
   notify: (message: Notification) => void
   searchTerm: string
+  showInlineEdit?: boolean
 }
 
 @ErrorHandling
@@ -41,6 +42,7 @@ export default class DashboardsIndexContents extends Component<Props> {
       onEditLabels,
       searchTerm,
       orgs,
+      showInlineEdit,
     } = this.props
 
     return (
@@ -57,6 +59,7 @@ export default class DashboardsIndexContents extends Component<Props> {
           onUpdateDashboard={onUpdateDashboard}
           onEditLabels={onEditLabels}
           orgs={orgs}
+          showInlineEdit={showInlineEdit}
         />
       </div>
     )

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

@@ -32,6 +32,7 @@ interface Props {
   onSetDefaultDashboard: (dashboardLink: string) => void
   onEditLabels: (dashboard: Dashboard) => void
   orgs: Organization[]
+  showInlineEdit?: boolean
 }
 
 interface DatedDashboard extends Dashboard {
@@ -108,6 +109,7 @@ class DashboardsTable extends PureComponent<Props & WithRouterProps, State> {
       onUpdateDashboard,
       onEditLabels,
       orgs,
+      showInlineEdit,
     } = this.props
 
     const {sortKey, sortDirection} = this.state
@@ -128,6 +130,7 @@ class DashboardsTable extends PureComponent<Props & WithRouterProps, State> {
               onUpdateDashboard={onUpdateDashboard}
               onEditLabels={onEditLabels}
               orgs={orgs}
+              showInlineEdit={showInlineEdit}
             />
           )}
         </SortingHat>

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

@@ -27,6 +27,7 @@ import {
   UPDATED_AT_TIME_FORMAT,
   DEFAULT_DASHBOARD_NAME,
 } from 'src/dashboards/constants'
+import EditableName from 'src/shared/components/EditableName'
 
 interface Props {
   dashboard: Dashboard
@@ -36,6 +37,7 @@ interface Props {
   onExportDashboard: (dashboard: Dashboard) => void
   onUpdateDashboard: (dashboard: Dashboard) => void
   onEditLabels: (dashboard: Dashboard) => void
+  showInlineEdit?: boolean
 }
 
 export default class DashboardsIndexTableRow extends PureComponent<Props> {
@@ -55,9 +57,7 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
               stackChildren={Stack.Columns}
               align={Alignment.Left}
             >
-              <Link className={this.nameClassName} to={`/dashboards/${id}`}>
-                {this.name}
-              </Link>
+              {this.resourceNames}
               {this.labels}
             </ComponentSpacer>
             <EditableDescription
@@ -91,6 +91,28 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
     )
   }
 
+  private get resourceNames(): JSX.Element {
+    const {showInlineEdit, dashboard} = this.props
+    if (showInlineEdit) {
+      return (
+        <EditableName
+          onUpdate={this.handleUpdateDashboard}
+          name={dashboard.name}
+          hrefValue={`/dashboards/${dashboard.id}`}
+        />
+      )
+    }
+    return (
+      <Link className={this.nameClassName} to={`/dashboards/${dashboard.id}`}>
+        {this.name}
+      </Link>
+    )
+  }
+
+  private handleUpdateDashboard = (name: string) => {
+    this.props.onUpdateDashboard({...this.props.dashboard, name})
+  }
+
   private get labels(): JSX.Element {
     const {dashboard} = this.props
 

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

@@ -15,6 +15,7 @@ interface Props {
   onUpdateDashboard: (dashboard: Dashboard) => void
   onEditLabels: (dashboard: Dashboard) => void
   orgs: Organization[]
+  showInlineEdit?: boolean
 }
 
 export default class DashboardsIndexTableRows extends PureComponent<Props> {
@@ -27,6 +28,7 @@ export default class DashboardsIndexTableRows extends PureComponent<Props> {
       onUpdateDashboard,
       onEditLabels,
       orgs,
+      showInlineEdit,
     } = this.props
 
     return dashboards.map(d => (
@@ -39,6 +41,7 @@ export default class DashboardsIndexTableRows extends PureComponent<Props> {
         onUpdateDashboard={onUpdateDashboard}
         onEditLabels={onEditLabels}
         orgs={orgs}
+        showInlineEdit={showInlineEdit}
       />
     ))
   }