New panel editor: Add title editor (#22030)

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { GrafanaTheme, FieldConfigSource, PanelData, LoadingState, DefaultTimeRange, PanelEvents } from '@grafana/data';
-import { stylesFactory, Forms, FieldConfigEditor, CustomScrollbar } from '@grafana/ui';
+import { stylesFactory, Forms, FieldConfigEditor, CustomScrollbar, selectThemeVariant } from '@grafana/ui';
 import { css, cx } from 'emotion';
 import config from 'app/core/config';
 
@@ -13,14 +13,23 @@ import { StoreState } from '../../../../types/store';
 import { connect } from 'react-redux';
 import { updateLocation } from '../../../../core/reducers/location';
 import { Unsubscribable } from 'rxjs';
+import { PanelTitle } from './PanelTitle';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  const handleColor = selectThemeVariant(
+    {
+      dark: theme.colors.dark9,
+      light: theme.colors.gray6,
+    },
+    theme.type
+  );
+
   const resizer = css`
     padding: 3px;
     font-style: italic;
     background: ${theme.colors.panelBg};
     &:hover {
-      background: ${theme.colors.headingColor};
+      background: ${handleColor};
     }
   `;
 
@@ -54,8 +63,23 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     ),
     noScrollPaneContent: css`
       height: 100%;
+      width: 100%;
       overflow: hidden;
     `,
+    toolbar: css`
+      padding: ${theme.spacing.sm};
+      height: 48px;
+      display: flex;
+      justify-content: space-between;
+    `,
+    panes: css`
+      height: calc(100% - 48px);
+      position: relative;
+    `,
+    toolbarLeft: css`
+      display: flex;
+      align-items: center;
+    `,
   };
 });
 
@@ -204,6 +228,11 @@ export class PanelEditor extends PureComponent<Props, State> {
     console.log('TODO, save splitter settings');
   };
 
+  onPanelTitleChange = (title: string) => {
+    this.state.panel.title = title;
+    this.forceUpdate();
+  };
+
   render() {
     const { dashboard } = this.props;
     const { panel } = this.state;
@@ -215,15 +244,20 @@ export class PanelEditor extends PureComponent<Props, State> {
 
     return (
       <div className={styles.wrapper}>
-        <div>
+        <div className={styles.toolbar}>
+          <div className={styles.toolbarLeft}>
             <button className="navbar-edit__back-btn" onClick={this.onPanelExit}>
               <i className="fa fa-arrow-left"></i>
             </button>
-          {panel.title}
+            <PanelTitle value={panel.title} onChange={this.onPanelTitleChange} />
+          </div>
+          <div>
             <Forms.Button variant="destructive" onClick={this.onDiscard}>
               Discard
             </Forms.Button>
           </div>
+        </div>
+        <div className={styles.panes}>
           <SplitPane
             split="vertical"
             primary="second"
@@ -266,6 +300,7 @@ export class PanelEditor extends PureComponent<Props, State> {
             </div>
           </SplitPane>
         </div>
+      </div>
     );
   }
 }

public/app/features/dashboard/components/PanelEditor/PanelTitle.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { css } from 'emotion';
+import { Forms, useTheme } from '@grafana/ui';
+
+interface PanelTitleProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const PanelTitle: React.FC<PanelTitleProps> = ({ value, onChange }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const theme = useTheme();
+  return (
+    <>
+      {isEditing ? (
+        <Forms.Input
+          value={value || ''}
+          onChange={e => onChange(e.currentTarget.value)}
+          onBlur={() => setIsEditing(false)}
+          placeholder="Panel Title"
+        />
+      ) : (
+        <span
+          className={css`
+            font-size: ${theme.typography.size.lg};
+            margin-left: ${theme.spacing.sm};
+          `}
+          onClick={() => setIsEditing(true)}
+        >
+          {value}
+        </span>
+      )}
+    </>
+  );
+};