PanelEditor: use splitpane for new editor (#22022)

* use splitpane for new editor

* change header

* use back button icon

* adding react split

package.json

@@ -253,6 +253,7 @@
     "react-popper": "1.3.3",
     "react-redux": "7.1.1",
     "react-sizeme": "2.5.2",
+    "react-split-pane": "0.1.89",
     "react-transition-group": "2.6.1",
     "react-use": "12.8.0",
     "react-virtualized-auto-sizer": "1.0.2",

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) => ({
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  wrapper: css`
+  const resizer = css`
-    width: 100%;
+    padding: 3px;
-    height: 100%;
+    font-style: italic;
-    position: fixed;
+    background: ${theme.colors.panelBg};
-    z-index: ${theme.zIndex.modal};
+    &:hover {
-    top: 0;
+      background: ${theme.colors.headingColor};
-    left: 0;
+    }
-    right: 0;
+  `;
-    bottom: 0;
+
-    background: ${theme.colors.pageBg};
+  return {
-    display: flex;
+    wrapper: css`
-    padding: ${theme.spacing.md};
+      width: 100%;
-    flex-direction: row;
+      height: 100%;
-  `,
+      position: fixed;
-  leftPane: css`
+      z-index: ${theme.zIndex.modal};
-    flex-grow: 1;
+      top: 0;
-    height: 100%;
+      left: 0;
-  `,
+      right: 0;
-  rightPane: css`
+      bottom: 0;
-    width: 450px;
+      background: ${theme.colors.pageBg};
-    height: 100%;
+    `,
-    flex-grow: 0;
+    fill: css`
-  `,
+      width: 100%;
-  leftPaneViz: css`
+      height: 100%;
-    width: 100%;
+    `,
-    height: 50%;
+    resizerV: cx(
-  `,
+      resizer,
-  leftPaneData: css`
+      css`
-    width: 100%;
+        cursor: col-resize;
-    height: 50%;
+      `
-    padding-top: ${theme.spacing.md};
+    ),
-  `,
+    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.wrapper}>
+        <div>
-          <div className={styles.leftPane}>
+          <button className="navbar-edit__back-btn" onClick={this.onPanelExit}>
-            <div className={styles.leftPaneViz}>
+            <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}>
+        </SplitPane>
-            <Forms.Button variant="destructive" onClick={this.onDiscard}>
+      </div>
-              Discard
-            </Forms.Button>
-            <Forms.Button onClick={this.onPanelExit}>Exit</Forms.Button>
-          </div>
-        </div>
-      </>
     );
   }
 }

yarn.lock

@@ -19048,7 +19048,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@15.7.2, prop-types@15.x, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@15.x, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -19930,6 +19930,15 @@ react-sizeme@^2.6.7:
     shallowequal "^1.1.0"
     throttle-debounce "^2.1.0"
 
+react-split-pane@0.1.89:
+  version "0.1.89"
+  resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.89.tgz#e111e5f7e6e1cd3c86a5aa0d9ddf987c2165f0d0"
+  integrity sha512-bGEiOevi6nBE1evEJOsZjd5A7plLboFAU4+HGASWWVm94XUg7QdsuPInGOB+5Ym4RtY3TZCpmUvLe6qQmrZUOg==
+  dependencies:
+    prop-types "^15.5.10"
+    react-lifecycles-compat "^3.0.4"
+    react-style-proptype "^3.0.0"
+
 react-storybook-addon-props-combinations@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-storybook-addon-props-combinations/-/react-storybook-addon-props-combinations-1.1.0.tgz#22a61794cc3c106bf44be809af3c3241f6988e72"
@@ -19938,6 +19947,13 @@ react-storybook-addon-props-combinations@1.1.0:
     object-hash "^1.1.8"
     pretty-format "^21.2.1"
 
+react-style-proptype@^3.0.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.2.tgz#d8e998e62ce79ec35b087252b90f19f1c33968a0"
+  integrity sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ==
+  dependencies:
+    prop-types "^15.5.4"
+
 react-syntax-highlighter@^11.0.2:
   version "11.0.2"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-11.0.2.tgz#4e3f376e752b20d2f54e4c55652fd663149e4029"