From 6c1f8b9c345bb32b913b8cb597fce81cfcaaef0e Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peterholmberg@users.noreply.github.com>
Date: Thu, 17 Dec 2020 16:11:12 +0100
Subject: [PATCH] Ng Alerting: Remove scroll and fix SplitPane limiters
 (#29906)

* some layout fixes

* use built in limiter
---
 .../SplitPaneWrapper/SplitPaneWrapper.tsx     | 10 ++-
 .../features/alerting/NextGenAlertingPage.tsx | 67 ++++++++++++-------
 .../components/AlertingQueryEditor.tsx        |  2 +
 3 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx b/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
index 8f5fa8cedb0..e5f3421a303 100644
--- a/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
+++ b/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
@@ -76,15 +76,14 @@ export class SplitPaneWrapper extends PureComponent<Props> {
       panel toolbar and editor toolbar (~120px). This is to prevent resizing
       the preview window beyond the browser window.
      */
-    const maxHeight = window.innerHeight - 120;
 
     if (Array.isArray(leftPaneComponents)) {
       return (
         <SplitPane
           split="horizontal"
-          maxSize={maxHeight}
+          maxSize={-200}
           primary="first"
-          size={topPaneSize < 200 ? 200 : topPaneSize}
+          size={topPaneSize}
           pane2Style={{ minHeight: 0 }}
           resizerClassName={styles.resizerH}
           onDragStarted={this.onDragStarted}
@@ -101,7 +100,6 @@ export class SplitPaneWrapper extends PureComponent<Props> {
   render() {
     const { rightPaneVisible, rightPaneComponents, uiState } = this.props;
     // Limit options pane width to 90% of screen.
-    const maxWidth = window.innerWidth * 0.9;
     const styles = getStyles(config.theme);
 
     // Need to handle when width is relative. ie a percentage of the viewport
@@ -117,8 +115,8 @@ export class SplitPaneWrapper extends PureComponent<Props> {
     return (
       <SplitPane
         split="vertical"
-        maxSize={maxWidth}
-        size={rightPaneSize >= 300 ? rightPaneSize : 300}
+        maxSize={-300}
+        size={rightPaneSize}
         primary="second"
         resizerClassName={styles.resizerV}
         onDragStarted={() => (document.body.style.cursor = 'col-resize')}
diff --git a/public/app/features/alerting/NextGenAlertingPage.tsx b/public/app/features/alerting/NextGenAlertingPage.tsx
index 4eba752094b..79fc6f19696 100644
--- a/public/app/features/alerting/NextGenAlertingPage.tsx
+++ b/public/app/features/alerting/NextGenAlertingPage.tsx
@@ -66,12 +66,12 @@ class NextGenAlertingPage extends PureComponent<Props, State> {
       <Button variant="destructive" key="discard" onClick={this.onDiscard}>
         Discard
       </Button>,
-      <Button variant="primary" key="save" onClick={this.onSaveAlert}>
-        Save
-      </Button>,
       <Button variant="secondary" key="test" onClick={this.onTest}>
         Test
       </Button>,
+      <Button variant="primary" key="save" onClick={this.onSaveAlert}>
+        Save
+      </Button>,
     ];
   }
 
@@ -93,21 +93,23 @@ class NextGenAlertingPage extends PureComponent<Props, State> {
           actions={this.renderToolbarActions()}
           titlePadding="sm"
         />
-        <SplitPaneWrapper
-          leftPaneComponents={[
-            <AlertingQueryPreview key="queryPreview" queryRunner={queryRunner} />,
-            <AlertingQueryEditor key="queryEditor" />,
-          ]}
-          uiState={uiState}
-          updateUiState={updateAlertDefinitionUiState}
-          rightPaneComponents={
-            <AlertDefinitionOptions
-              alertDefinition={alertDefinition}
-              onChange={this.onChangeAlertOption}
-              notificationChannelTypes={notificationChannelTypes}
-            />
-          }
-        />
+        <div className={styles.splitPanesWrapper}>
+          <SplitPaneWrapper
+            leftPaneComponents={[
+              <AlertingQueryPreview key="queryPreview" queryRunner={queryRunner} />,
+              <AlertingQueryEditor key="queryEditor" />,
+            ]}
+            uiState={uiState}
+            updateUiState={updateAlertDefinitionUiState}
+            rightPaneComponents={
+              <AlertDefinitionOptions
+                alertDefinition={alertDefinition}
+                onChange={this.onChangeAlertOption}
+                notificationChannelTypes={notificationChannelTypes}
+              />
+            }
+          />
+        </div>
       </div>
     );
   }
@@ -131,10 +133,25 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(NextGenAlertingPage));
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  return {
-    wrapper: css`
-      background-color: ${theme.colors.dashboardBg};
-    `,
-  };
-});
+const getStyles = stylesFactory((theme: GrafanaTheme) => ({
+  wrapper: css`
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: ${theme.zIndex.sidemenu};
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: ${theme.colors.dashboardBg};
+    display: flex;
+    flex-direction: column;
+  `,
+  splitPanesWrapper: css`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    position: relative;
+  `,
+}));
diff --git a/public/app/features/alerting/components/AlertingQueryEditor.tsx b/public/app/features/alerting/components/AlertingQueryEditor.tsx
index e625d65e332..08ebd952d51 100644
--- a/public/app/features/alerting/components/AlertingQueryEditor.tsx
+++ b/public/app/features/alerting/components/AlertingQueryEditor.tsx
@@ -78,10 +78,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     wrapper: css`
       padding-left: ${theme.spacing.md};
+      height: 100%;
     `,
     container: css`
       padding: ${theme.spacing.md};
       background-color: ${theme.colors.panelBg};
+      height: 100%;
     `,
     editorWrapper: css`
       border: 1px solid ${theme.colors.panelBorder};