NewPanelEditor: Panel edit tweaks (#22415)

* NewPanelEditor: Alternative edit layout

* Fixed full height issue

* panel-edit-tabs experiment

* minor tweaks

* PanelEditor: Minor tweaks

public/app/core/components/BackButton/BackButton.tsx

@@ -21,7 +21,7 @@ export const BackButton: React.FC<Props> = props => {
 BackButton.displayName = 'BackButton';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const hoverColor = selectThemeVariant({ dark: theme.colors.gray25, light: theme.colors.gray85 }, theme.type);
+  const hoverColor = selectThemeVariant({ dark: theme.colors.gray15, light: theme.colors.gray85 }, theme.type);
 
   return {
     wrapper: css`
@@ -56,7 +56,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       }
 
       .gicon {
-        opacity: 0.9;
         font-size: 26px;
       }
 
@@ -68,11 +67,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
           opacity: 1;
           transform: scale(0.8);
         }
-
-        .gicon {
-          opacity: 1;
-          transition: opacity 0.2s ease-in-out;
-        }
       }
     `,
   };

public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx

@@ -24,7 +24,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     container: css`
       position: relative;
       display: flex;
-      padding: 2px 2px;
     `,
   };
 });

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

@@ -213,23 +213,18 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
             }}
           </AutoSizer>
         </div>
-        <div className={styles.noScrollPaneContent}>
+        <div className={styles.tabsWrapper}>
           <PanelEditorTabs panel={panel} dashboard={dashboard} tabs={tabs} onChangeTab={this.onChangeTab} data={data} />
         </div>
       </SplitPane>
     );
   }
 
-  render() {
-    const { dashboard, location, panel, uiState, initDone } = this.props;
+  renderToolbar() {
+    const { dashboard, location, uiState, panel } = this.props;
     const styles = getStyles(config.theme);
 
-    if (!initDone) {
-      return null;
-    }
-
     return (
-      <div className={styles.wrapper}>
       <div className={styles.toolbar}>
         <div className={styles.toolbarLeft}>
           <BackButton onClick={this.onPanelExit} />
@@ -237,12 +232,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
         </div>
         <div className={styles.toolbarLeft}>
           <div className={styles.toolbarItem}>
-              <Forms.Button
-                className={styles.toolbarItem}
-                icon="fa fa-remove"
-                variant="destructive"
-                onClick={this.onDiscard}
-              />
+            <Forms.Button className={styles.toolbarItem} variant="secondary" onClick={this.onDiscard}>
+              Discard changes
+            </Forms.Button>
           </div>
           <div className={styles.toolbarItem}>
             <Forms.Select
@@ -252,6 +244,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
             />
           </div>
           <div className={styles.toolbarItem}>
+            <DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
+          </div>
+          <div className={styles.toolbarItem}>
             <Forms.Button
               className={styles.toolbarItem}
               icon="fa fa-sliders"
@@ -259,13 +254,26 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
               onClick={this.onTogglePanelOptions}
             />
           </div>
-            <div>
-              <DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
         </div>
       </div>
+    );
+  }
+
+  renderOptionsPane(styles: any) {
+    return (
+      <div className={styles.panelOptionsPane}>
+        <CustomScrollbar>
+          {this.renderFieldOptions()}
+          <OptionsGroup title="Old settings">{this.renderVisSettings()}</OptionsGroup>
+        </CustomScrollbar>
       </div>
-        <div className={styles.editorBody}>
-          {uiState.isPanelOptionsVisible ? (
+    );
+  }
+
+  renderWithOptionsPane(styles: any) {
+    const { uiState } = this.props;
+
+    return (
       <SplitPane
         split="vertical"
         minSize={100}
@@ -277,16 +285,24 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
         onDragFinished={size => this.onDragFinished(Pane.Right, size)}
       >
         {this.renderHorizontalSplit(styles)}
-              <div className={styles.panelOptionsPane}>
-                <CustomScrollbar>
-                  {this.renderFieldOptions()}
-                  <OptionsGroup title="Old settings">{this.renderVisSettings()}</OptionsGroup>
-                </CustomScrollbar>
-              </div>
+        {this.renderOptionsPane(styles)}
       </SplitPane>
-          ) : (
-            this.renderHorizontalSplit(styles)
-          )}
+    );
+  }
+
+  render() {
+    const { initDone, uiState } = this.props;
+    const styles = getStyles(config.theme);
+
+    if (!initDone) {
+      return null;
+    }
+
+    return (
+      <div className={styles.wrapper}>
+        {this.renderToolbar()}
+        <div className={styles.panesWrapper}>
+          {uiState.isPanelOptionsVisible ? this.renderWithOptionsPane(styles) : this.renderHorizontalSplit(styles)}
         </div>
       </div>
     );
@@ -352,10 +368,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       right: 0;
       bottom: 0;
       background: ${background};
-      padding: ${theme.spacing.sm};
+      display: flex;
+      flex-direction: column;
+    `,
+    panesWrapper: css`
+      flex: 1 1 0;
+      min-height: 0;
+      width: 100%;
+      position: relative;
     `,
     panelWrapper: css`
       width: 100%;
+      padding-left: ${theme.spacing.sm};
       height: 100%;
     `,
     resizerV: cx(
@@ -377,7 +401,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
         border-top-width: 1px;
       `
     ),
-    noScrollPaneContent: css`
+    tabsWrapper: css`
       height: 100%;
       width: 100%;
     `,
@@ -385,18 +409,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       height: 100%;
       width: 100%;
       background: ${theme.colors.pageBg};
-      border: 1px solid ${theme.colors.pageHeaderBorder};
       border-bottom: none;
     `,
     toolbar: css`
       display: flex;
-      padding-bottom: ${theme.spacing.sm};
+      padding: ${theme.spacing.sm};
       justify-content: space-between;
     `,
-    editorBody: css`
-      height: calc(100% - 55px);
-      position: relative;
-    `,
     toolbarLeft: css`
       padding-left: ${theme.spacing.sm};
       display: flex;
@@ -404,6 +423,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     toolbarItem: css`
       margin-right: ${theme.spacing.sm};
+
+      &:last-child {
+        margin-right: 0;
+      }
     `,
     centeringContainer: css`
       display: flex;

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

@@ -62,7 +62,9 @@ const getPanelEditorTabsStyles = stylesFactory(() => {
       flex-direction: column;
       height: 100%;
     `,
-    tabBar: css``,
+    tabBar: css`
+      padding-left: ${theme.spacing.sm};
+    `,
     tabContent: css`
       padding: 0;
       display: flex;
@@ -70,8 +72,6 @@ const getPanelEditorTabsStyles = stylesFactory(() => {
       flex-grow: 1;
       min-height: 0;
       background: ${theme.colors.pageBg};
-      border-right: 1px solid ${theme.colors.pageHeaderBorder};
-      border-left: 1px solid ${theme.colors.pageHeaderBorder};
 
       .toolbar {
         background: transparent;