Chore: Migrate _dashboard SCSS styles to emotion (#90604)

migrate dashboard.scss styles to emotion

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

@@ -333,6 +333,10 @@ export function getElementStyles(theme: GrafanaTheme2) {
       color: theme.components.textHighlight.text,
       padding: 0,
     },
+
+    '.template-variable': {
+      color: theme.colors.primary.text,
+    },
   });
 }
 

public/app/features/dashboard-scene/solo/SoloPanelPage.tsx

@@ -1,7 +1,9 @@
 // Libraries
+import { css } from '@emotion/css';
 import { useEffect } from 'react';
 
-import { Alert, Spinner } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Alert, Spinner, useStyles2 } from '@grafana/ui';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
 import { EntityNotFound } from 'app/core/components/PageNotFound/EntityNotFound';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
@@ -42,6 +44,7 @@ export default SoloPanelPage;
 
 export function SoloPanelRenderer({ dashboard, panelId }: { dashboard: DashboardScene; panelId: string }) {
   const [panel, error] = useSoloPanel(dashboard, panelId);
+  const styles = useStyles2(getStyles);
 
   if (error) {
     return <Alert title={error} />;
@@ -56,8 +59,21 @@ export function SoloPanelRenderer({ dashboard, panelId }: { dashboard: Dashboard
   }
 
   return (
-    <div className="panel-solo">
+    <div className={styles.container}>
       <panel.Component model={panel} />
     </div>
   );
 }
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    position: 'fixed',
+    bottom: 0,
+    right: 0,
+    margin: 0,
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+  }),
+});

public/app/features/dashboard/components/AddLibraryPanelWidget/AddLibraryPanelWidget.tsx

@@ -41,7 +41,7 @@ export const AddLibraryPanelWidget = ({ panel, dashboard }: Props) => {
 
   return (
     <div className={styles.wrapper}>
-      <div className={cx('panel-container', styles.callToAction)}>
+      <div className={styles.callToAction}>
         <div className={cx(styles.headerRow, 'grid-drag-handle')}>
           <span>
             <Trans i18nKey="library-panel.add-widget.title">Add panel from panel library</Trans>
@@ -100,10 +100,19 @@ const getStyles = (theme: GrafanaTheme2) => {
       },
     }),
     callToAction: css({
-      overflow: 'hidden',
+      backgroundColor: theme.components.panel.background,
+      border: `1px solid ${theme.components.panel.borderColor}`,
+      borderRadius: theme.shape.radius.default,
+      display: 'flex',
+      flex: '1 1 0',
+      flexDirection: 'column',
+      height: '100%',
+      position: 'relative',
+      width: '100%',
       outline: '2px dotted transparent',
       outlineOffset: '2px',
-      boxShadow: '0 0 0 2px black, 0 0 0px 4px #1f60c4',
+      overflow: 'hidden',
+
       [theme.transitions.handleMotion('no-preference', 'reduce')]: {
         animation: `${pulsate} 2s ease infinite`,
       },

public/app/features/dashboard/containers/SoloPanelPage.tsx

@@ -1,8 +1,10 @@
+import { css } from '@emotion/css';
 import { Component } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
-import { Alert } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Alert, useStyles2 } from '@grafana/ui';
 import { GrafanaContext, GrafanaContextType } from 'app/core/context/GrafanaContext';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
@@ -106,6 +108,7 @@ export interface SoloPanelProps extends State {
 }
 
 export const SoloPanel = ({ dashboard, notFound, panel, panelId, timezone }: SoloPanelProps) => {
+  const styles = useStyles2(getStyles);
   if (notFound) {
     return <Alert severity="error" title={`Panel with id ${panelId} not found`} />;
   }
@@ -115,7 +118,7 @@ export const SoloPanel = ({ dashboard, notFound, panel, panelId, timezone }: Sol
   }
 
   return (
-    <div className="panel-solo">
+    <div className={styles.container}>
       <AutoSizer>
         {({ width, height }) => {
           if (width === 0) {
@@ -142,3 +145,16 @@ export const SoloPanel = ({ dashboard, notFound, panel, panelId, timezone }: Sol
 };
 
 export default connector(SoloPanelPage);
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    position: 'fixed',
+    bottom: 0,
+    right: 0,
+    margin: 0,
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+  }),
+});

public/app/routes/routes.tsx

@@ -83,7 +83,6 @@ export function getAppRoutes(): RouteDescriptor[] {
     },
     {
       path: '/d-solo/:uid/:slug?',
-      pageClass: 'dashboard-solo',
       routeName: DashboardRoutes.Normal,
       chromeless: true,
       component: SafeDynamicImport(() =>
@@ -95,7 +94,6 @@ export function getAppRoutes(): RouteDescriptor[] {
     // This route handles embedding of snapshot/scripted dashboard panels
     {
       path: '/dashboard-solo/:type/:slug',
-      pageClass: 'dashboard-solo',
       routeName: DashboardRoutes.Normal,
       chromeless: true,
       component: SafeDynamicImport(

public/sass/_angular.scss

@@ -2150,3 +2150,24 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
 .drop-element.drop-popover.drop-function-def .drop-content {
   max-width: 416px;
 }
+
+.panel-height-helper {
+  display: block;
+  height: 100%;
+}
+
+.panel-content {
+  padding: $panel-padding;
+  width: 100%;
+  flex-grow: 1;
+  contain: size layout;
+  height: calc(100% - #{$panel-header-height});
+
+  &--no-padding {
+    padding: 0;
+  }
+}
+
+div.flot-text {
+  color: $text-color !important;
+}

public/sass/_grafana.scss

@@ -19,7 +19,6 @@
 @import 'components/dashboard_grid';
 
 // PAGES
-@import 'pages/dashboard';
 @import 'pages/history';
 
 // ANGULAR

public/sass/pages/_dashboard.scss

@@ -1,90 +0,0 @@
-.panel {
-  height: 100%;
-}
-
-.panel-height-helper {
-  display: block;
-  height: 100%;
-}
-
-.panel-container {
-  background-color: $panel-bg;
-  border: $panel-border;
-  position: relative;
-  border-radius: 2px;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 0;
-  box-shadow: $panel-box-shadow;
-
-  &--transparent {
-    background-color: transparent;
-    border: 1px solid transparent;
-    box-shadow: none;
-  }
-
-  &:hover {
-    .panel-menu-toggle {
-      visibility: visible;
-      transition: opacity 0.1s ease-in 0.2s;
-      opacity: 1;
-    }
-  }
-
-  &--is-editing {
-    height: auto;
-  }
-
-  &--absolute {
-    position: absolute;
-  }
-}
-
-.panel-content {
-  padding: $panel-padding;
-  width: 100%;
-  flex-grow: 1;
-  contain: size layout;
-  height: calc(100% - #{$panel-header-height});
-
-  &--no-padding {
-    padding: 0;
-  }
-}
-
-div.flot-text {
-  color: $text-color !important;
-}
-
-.dashboard-solo {
-  .footer,
-  .sidemenu {
-    display: none;
-  }
-}
-
-.template-variable {
-  color: $variable;
-}
-
-.panel-solo {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  margin: 0;
-  left: 0;
-  top: 0;
-  width: '100%';
-  height: '100%';
-
-  .panel-container {
-    border: none;
-  }
-
-  .panel-menu-toggle,
-  .panel-menu {
-    display: none;
-  }
-}