From 501d5fbcc2f3a3d4f65b1c254820c7edf4830375 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Thu, 15 Apr 2021 10:44:25 +0200
Subject: [PATCH] Explore: Scroll split panes in Explore independently (#32978)

* Change default prometheus to latest and prometheus v1 to prometheus1

* Update README

* Remove prometheus1 block as not used

* Explore: Separatae scrolling in split view

* Update snapshot
---
 public/app/features/explore/Explore.tsx       |  6 +++---
 public/app/features/explore/Wrapper.tsx       | 20 +++++++++----------
 .../__snapshots__/Explore.test.tsx.snap       |  6 ++++--
 public/sass/pages/_explore.scss               |  1 +
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index ae3b7400d6d..5e5285d464e 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import memoizeOne from 'memoize-one';
 import { selectors } from '@grafana/e2e-selectors';
-import { ErrorBoundaryAlert, stylesFactory, withTheme } from '@grafana/ui';
+import { ErrorBoundaryAlert, stylesFactory, withTheme, CustomScrollbar } from '@grafana/ui';
 import {
   AbsoluteTimeRange,
   DataQuery,
@@ -317,7 +317,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     const showQueryInspector = openDrawer === ExploreDrawer.QueryInspector;
 
     return (
-      <>
+      <CustomScrollbar autoHeightMin={'100%'}>
         <ExploreToolbar exploreId={exploreId} onChangeTime={this.onChangeTime} />
         {datasourceMissing ? this.renderEmptyState() : null}
         {datasourceInstance && (
@@ -376,7 +376,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
             </AutoSizer>
           </div>
         )}
-      </>
+      </CustomScrollbar>
     );
   }
 }
diff --git a/public/app/features/explore/Wrapper.tsx b/public/app/features/explore/Wrapper.tsx
index ef2a80d3af4..946388a9af3 100644
--- a/public/app/features/explore/Wrapper.tsx
+++ b/public/app/features/explore/Wrapper.tsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { ExploreId, ExploreQueryParams } from 'app/types/explore';
-import { CustomScrollbar, ErrorBoundaryAlert } from '@grafana/ui';
+import { ErrorBoundaryAlert } from '@grafana/ui';
 import { lastSavedUrl, resetExploreAction, richHistoryUpdatedAction } from './state/main';
 import { getRichHistory } from '../../core/utils/richHistory';
 import { ExplorePaneContainer } from './ExplorePaneContainer';
@@ -31,18 +31,16 @@ export class Wrapper extends Component<WrapperProps> {
 
     return (
       <div className="page-scrollbar-wrapper">
-        <CustomScrollbar autoHeightMin={'100%'}>
-          <div className="explore-wrapper">
+        <div className="explore-wrapper">
+          <ErrorBoundaryAlert style="page">
+            <ExplorePaneContainer split={hasSplit} exploreId={ExploreId.left} urlQuery={left} />
+          </ErrorBoundaryAlert>
+          {hasSplit && (
             <ErrorBoundaryAlert style="page">
-              <ExplorePaneContainer split={hasSplit} exploreId={ExploreId.left} urlQuery={left} />
+              <ExplorePaneContainer split={hasSplit} exploreId={ExploreId.right} urlQuery={right} />
             </ErrorBoundaryAlert>
-            {hasSplit && (
-              <ErrorBoundaryAlert style="page">
-                <ExplorePaneContainer split={hasSplit} exploreId={ExploreId.right} urlQuery={right} />
-              </ErrorBoundaryAlert>
-            )}
-          </div>
-        </CustomScrollbar>
+          )}
+        </div>
       </div>
     );
   }
diff --git a/public/app/features/explore/__snapshots__/Explore.test.tsx.snap b/public/app/features/explore/__snapshots__/Explore.test.tsx.snap
index 4b33a28eb09..abc9452ba4c 100644
--- a/public/app/features/explore/__snapshots__/Explore.test.tsx.snap
+++ b/public/app/features/explore/__snapshots__/Explore.test.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Explore should render component 1`] = `
-<Fragment>
+<CustomScrollbar
+  autoHeightMin="100%"
+>
   <Connect(UnConnectedExploreToolbar)
     exploreId="left"
     onChangeTime={[Function]}
@@ -38,5 +40,5 @@ exports[`Explore should render component 1`] = `
       <Component />
     </AutoSizer>
   </div>
-</Fragment>
+</CustomScrollbar>
 `;
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 19d30a3fd01..7a43cdc82c9 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -141,6 +141,7 @@
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
+  height: 100vh;
 }
 
 .explore.explore-live {