Extensions sidebar: Fix remounting of all global styles on open/close (#112321)

don't rerender all global styles when extension sidebar is opened

packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx

@@ -24,14 +24,9 @@ import { getSlateStyles } from './slate';
 import { getUplotStyles } from './uPlot';
 import { getUtilityClassStyles } from './utilityClasses';
 
-interface GlobalStylesProps {
-  isExtensionSidebarOpen?: boolean;
-}
-
 /** @internal */
-export function GlobalStyles(props: GlobalStylesProps) {
+export function GlobalStyles() {
   const theme = useTheme2();
-  const { isExtensionSidebarOpen } = props;
 
   return (
     <Global
@@ -41,7 +36,7 @@ export function GlobalStyles(props: GlobalStylesProps) {
         getCodeStyles(theme),
         getDashDiffStyles(theme),
         getDashboardGridStyles(theme),
-        getElementStyles(theme, isExtensionSidebarOpen),
+        getElementStyles(theme),
         getExtraStyles(theme),
         getFilterTableStyles(theme),
         getFontStyles(theme),

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

@@ -5,13 +5,7 @@ import { GrafanaTheme2, ThemeTypographyVariant } from '@grafana/data';
 import { getFeatureToggle } from '../../utils/featureToggle';
 import { getFocusStyles } from '../mixins';
 
-export function getElementStyles(theme: GrafanaTheme2, isExtensionSidebarOpen?: boolean) {
-  // in case the sidebar is closed, we want the body to scroll
-  // react select tries prevent scrolling by setting overflow/padding-right on the body
-  // Need type assertion here due to the use of !important
-  // see https://github.com/frenic/csstype/issues/114#issuecomment-697201978
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  const bodyOverflow = isExtensionSidebarOpen ? {} : { overflowY: 'auto !important' as 'auto' };
+export function getElementStyles(theme: GrafanaTheme2) {
   return css({
     '*, *::before, *::after': {
       boxSizing: 'inherit',
@@ -56,12 +50,16 @@ export function getElementStyles(theme: GrafanaTheme2, isExtensionSidebarOpen?:
         size: 'auto',
         padding: 0,
       },
+      // react select tries prevent scrolling by setting overflow/padding-right on the body
+      // Need type assertion here due to the use of !important
+      // see https://github.com/frenic/csstype/issues/114#issuecomment-697201978
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      overflowY: 'auto !important' as 'auto',
       // disable contextual font ligatures. otherwise, in firefox and safari,
       // an "x" between 2 numbers is replaced by a multiplication ligature
       // see https://github.com/rsms/inter/issues/222
       fontVariantLigatures: 'no-contextual',
       ...theme.typography.body,
-      ...bodyOverflow,
       fontVariantNumeric: getFeatureToggle('tabularNumbers') ? 'tabular-nums' : 'initial',
     },
 

public/app/AppWrapper.tsx

@@ -6,13 +6,12 @@ import { Provider } from 'react-redux';
 import { Route, Routes } from 'react-router-dom-v5-compat';
 
 import { config, navigationLogger, reportInteraction } from '@grafana/runtime';
-import { ErrorBoundaryAlert, getPortalContainer, PortalContainer, TimeRangeProvider } from '@grafana/ui';
+import { ErrorBoundaryAlert, getPortalContainer, GlobalStyles, PortalContainer, TimeRangeProvider } from '@grafana/ui';
 import { getAppRoutes } from 'app/routes/routes';
 import { store } from 'app/store/store';
 
 import { GrafanaApp } from './app';
 import { ExtensionSidebarContextProvider } from './core/components/AppChrome/ExtensionSidebar/ExtensionSidebarProvider';
-import { GlobalStylesWrapper } from './core/components/AppChrome/ExtensionSidebar/GlobalStylesWrapper';
 import { GrafanaContext } from './core/context/GrafanaContext';
 import { GrafanaRouteWrapper } from './core/navigation/GrafanaRoute';
 import { RouteDescriptor } from './core/navigation/types';
@@ -121,7 +120,7 @@ export class AppWrapper extends Component<AppWrapperProps, AppWrapperState> {
                       <ExtensionRegistriesProvider registries={pluginExtensionRegistries}>
                         <ExtensionSidebarContextProvider>
                           <UNSAFE_PortalProvider getContainer={getPortalContainer}>
-                            <GlobalStylesWrapper />
+                            <GlobalStyles />
                             <div className="grafana-app">
                               <RouterWrapper {...routerWrapperProps} />
                               <LiveConnectionWarning />

public/app/core/components/AppChrome/ExtensionSidebar/ExtensionSidebar.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import { css as cssReact, Global } from '@emotion/react';
 
 import { GrafanaTheme2, PluginExtensionPoints } from '@grafana/data';
 import { usePluginComponents } from '@grafana/runtime';
@@ -41,6 +42,11 @@ export function ExtensionSidebar() {
   return (
     <div className={styles.sidebarWrapper}>
       <div className={styles.content}>
+        {/* When the sidebar is open, we don't want the body to scroll */}
+        {/* Need type assertion here due to the use of !important */}
+        {/* see https://github.com/frenic/csstype/issues/114#issuecomment-697201978 */}
+        {/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */}
+        <Global styles={[cssReact({ body: { overflowY: 'unset !important' as 'unset' } })]} />
         <ExtensionComponent {...props} />
       </div>
     </div>

public/app/core/components/AppChrome/ExtensionSidebar/GlobalStylesWrapper.tsx

@@ -1,13 +0,0 @@
-import { GlobalStyles } from '@grafana/ui';
-
-import { useExtensionSidebarContext } from './ExtensionSidebarProvider';
-
-/**
- * This component is used to wrap the GlobalStyles component and pass the isExtensionSidebarOpen prop to it.
- * Since GlobalStyles is imported from @grafana/ui, we need to wrap it in a component to use the useExtensionSidebarContext hook.
- */
-export const GlobalStylesWrapper = () => {
-  const { isOpen } = useExtensionSidebarContext();
-
-  return <GlobalStyles isExtensionSidebarOpen={isOpen} />;
-};