PanelEditor: use splitpane for new editor (#22022)

* use splitpane for new editor

* change header

* use back button icon

* adding react split

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

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css } from 'emotion';
+import { css, cx } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, Forms } from '@grafana/ui';
 import config from 'app/core/config';
@@ -8,44 +8,51 @@ import { PanelModel } from '../../state/PanelModel';
 import { DashboardModel } from '../../state/DashboardModel';
 import { DashboardPanel } from '../../dashgrid/DashboardPanel';
 import { QueriesTab } from '../../panel_editor/QueriesTab';
+import SplitPane from 'react-split-pane';
 import { StoreState } from '../../../../types/store';
 import { connect } from 'react-redux';
 import { updateLocation } from '../../../../core/reducers/location';
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => ({
-  wrapper: css`
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: ${theme.zIndex.modal};
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: ${theme.colors.pageBg};
-    display: flex;
-    padding: ${theme.spacing.md};
-    flex-direction: row;
-  `,
-  leftPane: css`
-    flex-grow: 1;
-    height: 100%;
-  `,
-  rightPane: css`
-    width: 450px;
-    height: 100%;
-    flex-grow: 0;
-  `,
-  leftPaneViz: css`
-    width: 100%;
-    height: 50%;
-  `,
-  leftPaneData: css`
-    width: 100%;
-    height: 50%;
-    padding-top: ${theme.spacing.md};
-  `,
-}));
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  const resizer = css`
+    padding: 3px;
+    font-style: italic;
+    background: ${theme.colors.panelBg};
+    &:hover {
+      background: ${theme.colors.headingColor};
+    }
+  `;
+
+  return {
+    wrapper: css`
+      width: 100%;
+      height: 100%;
+      position: fixed;
+      z-index: ${theme.zIndex.modal};
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: ${theme.colors.pageBg};
+    `,
+    fill: css`
+      width: 100%;
+      height: 100%;
+    `,
+    resizerV: cx(
+      resizer,
+      css`
+        cursor: col-resize;
+      `
+    ),
+    resizerH: cx(
+      resizer,
+      css`
+        cursor: row-resize;
+      `
+    ),
+  };
+});
 
 interface Props {
   dashboard: DashboardModel;
@@ -87,6 +94,11 @@ export class PanelEditor extends PureComponent<Props, State> {
     });
   };
 
+  onDragFinished = () => {
+    document.body.style.cursor = 'auto';
+    console.log('TODO, save splitter settings');
+  };
+
   render() {
     const { dashboard } = this.props;
     const { dirtyPanel } = this.state;
@@ -98,10 +110,33 @@ export class PanelEditor extends PureComponent<Props, State> {
     }
 
     return (
-      <>
-        <div className={styles.wrapper}>
-          <div className={styles.leftPane}>
-            <div className={styles.leftPaneViz}>
+      <div className={styles.wrapper}>
+        <div>
+          <button className="navbar-edit__back-btn" onClick={this.onPanelExit}>
+            <i className="fa fa-arrow-left"></i>
+          </button>
+          {this.props.panel.title}
+          <Forms.Button variant="destructive" onClick={this.onDiscard}>
+            Discard
+          </Forms.Button>
+        </div>
+        <SplitPane
+          split="vertical"
+          minSize={50}
+          defaultSize={'80%'}
+          resizerClassName={styles.resizerV}
+          onDragStarted={() => (document.body.style.cursor = 'col-resize')}
+          onDragFinished={this.onDragFinished}
+        >
+          <SplitPane
+            split="horizontal"
+            minSize={50}
+            defaultSize={'60%'}
+            resizerClassName={styles.resizerH}
+            onDragStarted={() => (document.body.style.cursor = 'row-resize')}
+            onDragFinished={this.onDragFinished}
+          >
+            <div className={styles.fill}>
               <DashboardPanel
                 dashboard={dashboard}
                 panel={dirtyPanel}
@@ -111,18 +146,15 @@ export class PanelEditor extends PureComponent<Props, State> {
                 isInView={true}
               />
             </div>
-            <div className={styles.leftPaneData}>
+            <div>
               <QueriesTab panel={dirtyPanel} dashboard={dashboard} />
             </div>
+          </SplitPane>
+          <div>
+            <div>TODO: viz settings</div>
           </div>
-          <div className={styles.rightPane}>
-            <Forms.Button variant="destructive" onClick={this.onDiscard}>
-              Discard
-            </Forms.Button>
-            <Forms.Button onClick={this.onPanelExit}>Exit</Forms.Button>
-          </div>
-        </div>
-      </>
+        </SplitPane>
+      </div>
     );
   }
 }