From 63e2977837d7bbb373cafcd3f43c25e080426c11 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Wed, 21 Apr 2021 12:24:44 +0100
Subject: [PATCH] DashboardPanel: migrates styling from sass to emotion
 (#33115)

* DashboardPanel: migrates styling from sass to emotion

* fixes frontend test

* removed the theme since it doesn't have any use case in the styles

* updates frontend snapshot test
---
 .../dashboard/dashgrid/DashboardPanel.tsx     | 29 +++++++++++++++----
 public/sass/components/_panel_editor.scss     | 10 -------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
index 5a08dff540d..93e29b0d8b2 100644
--- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
@@ -15,6 +15,8 @@ import { initDashboardPanel } from '../state/actions';
 import { DashboardModel, PanelModel } from '../state';
 import { StoreState } from 'app/types';
 import { PanelPlugin } from '@grafana/data';
+import { stylesFactory } from '@grafana/ui';
+import { css } from 'emotion';
 
 export interface OwnProps {
   panel: PanelModel;
@@ -111,6 +113,7 @@ export class DashboardPanelUnconnected extends PureComponent<Props, State> {
   render() {
     const { isViewing, plugin } = this.props;
     const { isLazy } = this.state;
+    const styles = getStyles();
 
     // If we have not loaded plugin exports yet, wait
     if (!plugin) {
@@ -122,13 +125,27 @@ export class DashboardPanelUnconnected extends PureComponent<Props, State> {
       return null;
     }
 
-    const panelWrapperClass = classNames({
-      'panel-wrapper': true,
-      'panel-wrapper--view': isViewing,
-    });
-
-    return <div className={panelWrapperClass}>{this.renderPanel(plugin)}</div>;
+    return (
+      <div
+        className={isViewing === true ? classNames(styles.panelWrapper, styles.panelWrapperView) : styles.panelWrapper}
+      >
+        {this.renderPanel(plugin)}
+      </div>
+    );
   }
 }
 
+export const getStyles = stylesFactory(() => {
+  return {
+    panelWrapper: css`
+      height: 100%;
+      position: relative;
+    `,
+    panelWrapperView: css`
+      flex: 1 1 0;
+      height: 90%;
+    `,
+  };
+});
+
 export const DashboardPanel = connector(DashboardPanelUnconnected);
diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss
index fdcf35023d4..b193e1ad797 100644
--- a/public/sass/components/_panel_editor.scss
+++ b/public/sass/components/_panel_editor.scss
@@ -1,13 +1,3 @@
-.panel-wrapper {
-  height: 100%;
-  position: relative;
-
-  &--view {
-    flex: 1 1 0;
-    height: 90%;
-  }
-}
-
 .panel-editor__scroll {
   flex-grow: 1;
   min-width: 0;