Explore: Prevents sizing issue when split (#23596)

* Update tests

* Remove imports

public/app/features/explore/Explore.test.tsx

@@ -16,10 +16,9 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { Explore, ExploreProps } from './Explore';
 import { scanStopAction } from './state/actionTypes';
 import { toggleGraph } from './state/actions';
-import { Provider } from 'react-redux';
-import { configureStore } from 'app/store/configureStore';
 import { SecondaryActions } from './SecondaryActions';
 import { TraceView } from './TraceView/TraceView';
+import { getTheme } from '@grafana/ui';
 
 const dummyProps: ExploreProps = {
   changeSize: jest.fn(),
@@ -119,20 +118,7 @@ const dummyProps: ExploreProps = {
   },
   originPanelId: 1,
   addQueryRow: jest.fn(),
-};
-
-const setup = (renderMethod: any, propOverrides?: Partial<ExploreProps>) => {
-  const store = configureStore();
-  return renderMethod(
-    <Provider store={store}>
-      <Explore
-        {...{
-          ...dummyProps,
-          ...propOverrides,
-        }}
-      />
-    </Provider>
-  );
+  theme: getTheme(),
 };
 
 const setupErrors = (hasRefId?: boolean) => {
@@ -148,7 +134,7 @@ const setupErrors = (hasRefId?: boolean) => {
 
 describe('Explore', () => {
   it('should render component', () => {
-    const wrapper = setup(shallow);
+    const wrapper = shallow(<Explore {...dummyProps} />);
     expect(wrapper).toMatchSnapshot();
   });
 

public/app/features/explore/Explore.tsx

@@ -10,7 +10,7 @@ import memoizeOne from 'memoize-one';
 import store from 'app/core/store';
 
 // Components
-import { ErrorBoundaryAlert, stylesFactory } from '@grafana/ui';
+import { ErrorBoundaryAlert, stylesFactory, withTheme } from '@grafana/ui';
 import LogsContainer from './LogsContainer';
 import QueryRows from './QueryRows';
 import TableContainer from './TableContainer';
@@ -39,6 +39,7 @@ import {
   TimeZone,
   LoadingState,
   ExploreMode,
+  GrafanaTheme,
 } from '@grafana/data';
 
 import { ExploreId, ExploreItemState, ExploreUIState, ExploreUpdateState, ExploreUrlState } from 'app/types/explore';
@@ -61,8 +62,9 @@ import { scanStopAction } from './state/actionTypes';
 import { ExploreGraphPanel } from './ExploreGraphPanel';
 import { TraceView } from './TraceView/TraceView';
 import { SecondaryActions } from './SecondaryActions';
+import { compose } from 'redux';
 
-const getStyles = stylesFactory(() => {
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     logsMain: css`
       label: logsMain;
@@ -71,8 +73,15 @@ const getStyles = stylesFactory(() => {
       margin-top: 21px;
     `,
     button: css`
+      label: button;
       margin: 1em 4px 0 0;
     `,
+    queryContainer: css`
+      label: queryContainer;
+      // Need to override normal css class and don't want to count on ordering of the classes in html.
+      height: auto !important;
+      padding: ${theme.panelPadding}px;
+    `,
   };
 });
 
@@ -112,6 +121,7 @@ export interface ExploreProps {
   queryResponse: PanelData;
   originPanelId: number;
   addQueryRow: typeof addQueryRow;
+  theme: GrafanaTheme;
 }
 
 interface ExploreState {
@@ -291,10 +301,11 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
       queryResponse,
       syncedTimes,
       isLive,
+      theme,
     } = this.props;
     const { showRichHistory } = this.state;
     const exploreClass = split ? 'explore explore-split' : 'explore';
-    const styles = getStyles();
+    const styles = getStyles(theme);
     const StartPage = datasourceInstance?.components?.ExploreStartPage;
     const showStartPage = !queryResponse || queryResponse.state === LoadingState.NotStarted;
 
@@ -308,18 +319,16 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
         {datasourceMissing ? this.renderEmptyState() : null}
         {datasourceInstance && (
           <div className="explore-container">
-            <div className="panel-container">
-              <div className="panel-content">
-                <QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
-                <SecondaryActions
-                  addQueryRowButtonDisabled={isLive}
-                  // We cannot show multiple traces at the same time right now so we do not show add query button.
-                  addQueryRowButtonHidden={mode === ExploreMode.Tracing}
-                  richHistoryButtonActive={showRichHistory}
-                  onClickAddQueryRowButton={this.onClickAddQueryRowButton}
-                  onClickRichHistoryButton={this.toggleShowRichHistory}
-                />
-              </div>
+            <div className={cx('panel-container', styles.queryContainer)}>
+              <QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
+              <SecondaryActions
+                addQueryRowButtonDisabled={isLive}
+                // We cannot show multiple traces at the same time right now so we do not show add query button.
+                addQueryRowButtonHidden={mode === ExploreMode.Tracing}
+                richHistoryButtonActive={showRichHistory}
+                onClickAddQueryRowButton={this.onClickAddQueryRowButton}
+                onClickRichHistoryButton={this.toggleShowRichHistory}
+              />
             </div>
             <ErrorContainer queryError={queryError} />
             <AutoSizer onResize={this.onResize} disableHeight>
@@ -491,7 +500,8 @@ const mapDispatchToProps: Partial<ExploreProps> = {
   addQueryRow,
 };
 
-export default hot(module)(
-  // @ts-ignore
-  connect(mapStateToProps, mapDispatchToProps)(Explore)
-) as React.ComponentType<{ exploreId: ExploreId }>;
+export default compose(
+  hot(module),
+  connect(mapStateToProps, mapDispatchToProps),
+  withTheme
+)(Explore) as React.ComponentType<{ exploreId: ExploreId }>;

public/app/features/explore/__snapshots__/Explore.test.tsx.snap

@@ -1,147 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Explore should render component 1`] = `
-<ContextProvider
-  value={
-    Object {
-      "store": Object {
-        "dispatch": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-        Symbol(observable): [Function],
-      },
-      "subscription": Subscription {
-        "handleChangeWrapper": [Function],
-        "listeners": Object {
-          "notify": [Function],
-        },
-        "onStateChange": [Function],
-        "parentSub": undefined,
-        "store": Object {
-          "dispatch": [Function],
-          "getState": [Function],
-          "replaceReducer": [Function],
-          "subscribe": [Function],
-          Symbol(observable): [Function],
-        },
-        "unsubscribe": null,
-      },
-    }
-  }
+<div
+  className="explore"
 >
-  <Explore
-    absoluteRange={
-      Object {
-        "from": 0,
-        "to": 0,
-      }
-    }
-    addQueryRow={[MockFunction]}
-    changeSize={[MockFunction]}
-    datasourceInstance={
-      Object {
-        "components": Object {
-          "ExploreStartPage": Object {},
-        },
-        "meta": Object {
-          "logs": true,
-          "metrics": true,
-        },
-      }
-    }
-    datasourceMissing={false}
+  <Connect(UnConnectedExploreToolbar)
     exploreId="left"
-    graphResult={Array []}
-    initialDatasource="test"
-    initialQueries={Array []}
-    initialRange={
-      Object {
-        "from": "2019-01-01T10:00:00.000Z",
-        "raw": Object {
-          "from": "now-6h",
-          "to": "now",
-        },
-        "to": "2019-01-01T16:00:00.000Z",
-      }
-    }
-    initialUI={
-      Object {
-        "showingGraph": false,
-        "showingLogs": false,
-        "showingTable": false,
-      }
-    }
-    initializeExplore={[MockFunction]}
-    initialized={true}
-    isLive={false}
-    loading={false}
-    mode="Metrics"
-    modifyQueries={[MockFunction]}
-    onHiddenSeriesChanged={[MockFunction]}
-    originPanelId={1}
-    queryKeys={Array []}
-    queryResponse={
-      Object {
-        "error": Object {},
-        "request": Object {
-          "app": "explore",
-          "dashboardId": 0,
-          "interval": "1s",
-          "panelId": 1,
-          "requestId": "1",
-          "scopedVars": Object {
-            "apps": Object {
-              "value": "value",
-            },
-          },
-          "startTime": 0,
-          "targets": Array [
-            Object {
-              "refId": "A",
-            },
-          ],
-          "timezone": "UTC",
-        },
-        "series": Array [],
-        "state": "NotStarted",
-        "timeRange": Object {
-          "from": "2019-01-01T10:00:00.000Z",
-          "raw": Object {
-            "from": "now-6h",
-            "to": "now",
-          },
-          "to": "2019-01-01T16:00:00.000Z",
-        },
-      }
-    }
-    refreshExplore={[MockFunction]}
-    scanRange={
-      Object {
-        "from": "0",
-        "to": "0",
-      }
-    }
-    scanStart={[MockFunction]}
-    scanStopAction={[Function]}
-    scanning={false}
-    setQueries={[MockFunction]}
-    showingGraph={false}
-    showingTable={false}
-    split={false}
-    syncedTimes={false}
-    timeZone="UTC"
-    toggleGraph={[Function]}
-    update={
-      Object {
-        "datasource": false,
-        "mode": false,
-        "queries": false,
-        "range": false,
-        "ui": false,
-      }
-    }
-    updateTimeRange={[MockFunction]}
+    onChangeTime={[Function]}
   />
-</ContextProvider>
+  <div
+    className="explore-container"
+  >
+    <div
+      className="panel-container css-1695s01-queryContainer"
+    >
+      <QueryRows
+        exploreEvents={
+          Emitter {
+            "emitter": EventEmitter {
+              "_events": Object {},
+              "_eventsCount": 0,
+            },
+          }
+        }
+        exploreId="left"
+        queryKeys={Array []}
+      />
+      <SecondaryActions
+        addQueryRowButtonDisabled={false}
+        addQueryRowButtonHidden={false}
+        onClickAddQueryRowButton={[Function]}
+        onClickRichHistoryButton={[Function]}
+        richHistoryButtonActive={false}
+      />
+    </div>
+    <Component
+      queryError={Object {}}
+    />
+    <AutoSizer
+      disableHeight={true}
+      disableWidth={false}
+      onResize={[Function]}
+      style={Object {}}
+    >
+      <Component />
+    </AutoSizer>
+  </div>
+</div>
 `;