From ebc6d3a63ce6ed71c4a9bc73d60bf52506141d4f Mon Sep 17 00:00:00 2001
From: Laura <48948963+L-M-K-B@users.noreply.github.com>
Date: Mon, 23 May 2022 10:55:04 +0200
Subject: [PATCH] Laura/chore/refactor styling of explore container (#49324)

* Chore: convert styling from sass to emotion

* Chore: delete sass styling
---
 public/app/features/explore/Explore.tsx | 15 +++++++++++----
 public/sass/pages/_explore.scss         |  8 --------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 8993e49d98c..0a25babfd79 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -58,6 +58,13 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: unset !important;
       padding: ${theme.spacing(1)};
     `,
+    exploreContainer: css`
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      padding: ${theme.spacing(2)};
+      padding-top: 0;
+    `,
   };
 };
 
@@ -208,9 +215,9 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
     });
   };
 
-  renderEmptyState() {
+  renderEmptyState(exploreContainerStyles: string) {
     return (
-      <div className="explore-container">
+      <div className={cx(exploreContainerStyles)}>
         <NoDataSourceCallToAction />
       </div>
     );
@@ -358,9 +365,9 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
         scrollRefCallback={(scrollElement) => (this.scrollElement = scrollElement || undefined)}
       >
         <ExploreToolbar exploreId={exploreId} onChangeTime={this.onChangeTime} topOfViewRef={this.topOfViewRef} />
-        {datasourceMissing ? this.renderEmptyState() : null}
+        {datasourceMissing ? this.renderEmptyState(styles.exploreContainer) : null}
         {datasourceInstance && (
-          <div className="explore-container">
+          <div className={cx(styles.exploreContainer)}>
             <div className={cx('panel-container', styles.queryContainer)}>
               <QueryRows exploreId={exploreId} />
               <SecondaryActions
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index ff6f7d6062d..5ed23a6996e 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -15,14 +15,6 @@
   border-left: 1px dotted $table-border;
 }
 
-.explore-container {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  padding: $dashboard-padding;
-  padding-top: 0;
-}
-
 .explore-wrapper {
   display: flex;
   height: 100%;