From 80f201026f9ae01bf7668b72d3cdafb04dfc029a Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Tue, 23 Jul 2024 11:02:18 +0100 Subject: [PATCH] Chore: Migrate `_dashboard` SCSS styles to emotion (#90604) migrate dashboard.scss styles to emotion --- .../src/themes/GlobalStyles/elements.ts | 4 + .../dashboard-scene/solo/SoloPanelPage.tsx | 20 ++++- .../AddLibraryPanelWidget.tsx | 15 +++- .../dashboard/containers/SoloPanelPage.tsx | 20 ++++- public/app/routes/routes.tsx | 2 - public/sass/_angular.scss | 21 +++++ public/sass/_grafana.scss | 1 - public/sass/pages/_dashboard.scss | 90 ------------------- 8 files changed, 73 insertions(+), 100 deletions(-) delete mode 100644 public/sass/pages/_dashboard.scss diff --git a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts index bf7cdb6bf22..800a79b2b03 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts +++ b/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, + }, }); } diff --git a/public/app/features/dashboard-scene/solo/SoloPanelPage.tsx b/public/app/features/dashboard-scene/solo/SoloPanelPage.tsx index 29ec4dcdcbb..6fe49965f4d 100644 --- a/public/app/features/dashboard-scene/solo/SoloPanelPage.tsx +++ b/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 ; @@ -56,8 +59,21 @@ export function SoloPanelRenderer({ dashboard, panelId }: { dashboard: Dashboard } return ( -
+
); } + +const getStyles = (theme: GrafanaTheme2) => ({ + container: css({ + position: 'fixed', + bottom: 0, + right: 0, + margin: 0, + left: 0, + top: 0, + width: '100%', + height: '100%', + }), +}); diff --git a/public/app/features/dashboard/components/AddLibraryPanelWidget/AddLibraryPanelWidget.tsx b/public/app/features/dashboard/components/AddLibraryPanelWidget/AddLibraryPanelWidget.tsx index 99bda00dfd0..bd2543e2269 100644 --- a/public/app/features/dashboard/components/AddLibraryPanelWidget/AddLibraryPanelWidget.tsx +++ b/public/app/features/dashboard/components/AddLibraryPanelWidget/AddLibraryPanelWidget.tsx @@ -41,7 +41,7 @@ export const AddLibraryPanelWidget = ({ panel, dashboard }: Props) => { return (
-
+
Add panel from panel library @@ -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`, }, diff --git a/public/app/features/dashboard/containers/SoloPanelPage.tsx b/public/app/features/dashboard/containers/SoloPanelPage.tsx index 4238b4f073a..76e38b778c8 100644 --- a/public/app/features/dashboard/containers/SoloPanelPage.tsx +++ b/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 ; } @@ -115,7 +118,7 @@ export const SoloPanel = ({ dashboard, notFound, panel, panelId, timezone }: Sol } return ( -
+
{({ 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%', + }), +}); diff --git a/public/app/routes/routes.tsx b/public/app/routes/routes.tsx index ae471afb03a..ecb47f368d5 100644 --- a/public/app/routes/routes.tsx +++ b/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( diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss index f273ba5944f..2b3a07c87cc 100644 --- a/public/sass/_angular.scss +++ b/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; +} diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 61e86b1ebca..318e4388da1 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -19,7 +19,6 @@ @import 'components/dashboard_grid'; // PAGES -@import 'pages/dashboard'; @import 'pages/history'; // ANGULAR diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss deleted file mode 100644 index 437894154fe..00000000000 --- a/public/sass/pages/_dashboard.scss +++ /dev/null @@ -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; - } -}