grafana/ui: convert sass to emotion explore classes (#52078)

* refactor: move .explore styling

* refactor: make new theme run

* refactor: convert .explore-split

* refactor: remove .explore and .explore-split

* refactor: cleanup ExplorePaneContainer

* refactor: convert .explore-wrapper

* refactor: move .page-scrollbar-wrapper

* refactor: apply changes from code review

* refactor: add theme to class interface

* refactor: remove typecheck errors

packages/grafana-ui/src/themes/GlobalStyles/page.ts

@@ -26,13 +26,6 @@ export function getPageStyles(theme: GrafanaTheme2) {
       flex: 1 1 0;
     }
 
-    .page-scrollbar-wrapper {
-      width: 100%;
-      flex-grow: 1;
-      width: 100%;
-      min-height: 0;
-    }
-
     .page-scrollbar-content {
       display: flex;
       min-height: 100%;

public/app/features/explore/ExplorePaneContainer.tsx

@@ -1,9 +1,11 @@
+import { css, cx } from '@emotion/css';
 import memoizeOne from 'memoize-one';
 import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
-import { DataQuery, ExploreUrlState, EventBusExtended, EventBusSrv } from '@grafana/data';
+import { DataQuery, ExploreUrlState, EventBusExtended, EventBusSrv, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { Themeable2, withTheme2 } from '@grafana/ui';
 import store from 'app/core/store';
 import {
   DEFAULT_RANGE,
@@ -22,7 +24,23 @@ import Explore from './Explore';
 import { initializeExplore, refreshExplore } from './state/explorePane';
 import { lastSavedUrl, cleanupPaneAction } from './state/main';
 
-interface OwnProps {
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    explore: css`
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      & + & {
+        border-left: 1px dotted ${theme.colors.border.medium};
+      }
+    `,
+    exploreSplit: css`
+      width: 50%;
+    `,
+  };
+};
+
+interface OwnProps extends Themeable2 {
   exploreId: ExploreId;
   urlQuery: string;
   split: boolean;
@@ -87,10 +105,12 @@ class ExplorePaneContainerUnconnected extends React.PureComponent<Props> {
   };
 
   render() {
-    const exploreClass = this.props.split ? 'explore explore-split' : 'explore';
+    const { theme, split, exploreId, initialized } = this.props;
+    const styles = getStyles(theme);
+    const exploreClass = cx(styles.explore, split && styles.exploreSplit);
     return (
       <div className={exploreClass} ref={this.getRef} data-testid={selectors.pages.Explore.General.container}>
-        {this.props.initialized && <Explore exploreId={this.props.exploreId} />}
+        {initialized && <Explore exploreId={exploreId} />}
       </div>
     );
   }
@@ -128,4 +148,4 @@ const mapDispatchToProps = {
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
 
-export const ExplorePaneContainer = connector(ExplorePaneContainerUnconnected);
+export const ExplorePaneContainer = withTheme2(connector(ExplorePaneContainerUnconnected));

public/app/features/explore/Wrapper.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/css';
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
@@ -14,6 +15,18 @@ import { ExploreActions } from './ExploreActions';
 import { ExplorePaneContainer } from './ExplorePaneContainer';
 import { lastSavedUrl, resetExploreAction, richHistoryUpdatedAction } from './state/main';
 
+const styles = {
+  pageScrollbarWrapper: css`
+    width: 100%;
+    flex-grow: 1;
+    min-height: 0;
+  `,
+  exploreWrapper: css`
+    display: flex;
+    height: 100%;
+  `,
+};
+
 interface RouteProps extends GrafanaRouteComponentProps<{}, ExploreQueryParams> {}
 interface OwnProps {}
 
@@ -71,9 +84,9 @@ class WrapperUnconnected extends PureComponent<Props> {
     const hasSplit = Boolean(left) && Boolean(right);
 
     return (
-      <div className="page-scrollbar-wrapper">
+      <div className={styles.pageScrollbarWrapper}>
         <ExploreActions exploreIdLeft={ExploreId.left} exploreIdRight={ExploreId.right} />
-        <div className="explore-wrapper">
+        <div className={styles.exploreWrapper}>
           <ErrorBoundaryAlert style="page">
             <ExplorePaneContainer split={hasSplit} exploreId={ExploreId.left} urlQuery={left} />
           </ErrorBoundaryAlert>

public/sass/pages/_explore.scss

@@ -4,26 +4,6 @@
   color: $orange-dark !important;
 }
 
-// TODO: check if this is used
-.explore {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-}
-
-.explore + .explore {
-  border-left: 1px dotted $table-border;
-}
-
-.explore-wrapper {
-  display: flex;
-  height: 100%;
-
-  > .explore-split {
-    width: 50%;
-  }
-}
-
 // TODO: this is used in Loki & Prometheus, move it
 .explore-input-margin {
   margin-right: 4px;