diff --git a/e2e/dashboards-suite/general-dashboards.spec.ts b/e2e/dashboards-suite/general-dashboards.spec.ts index f450f698e98..1d01c82267c 100644 --- a/e2e/dashboards-suite/general-dashboards.spec.ts +++ b/e2e/dashboards-suite/general-dashboards.spec.ts @@ -12,7 +12,7 @@ describe('Dashboards', () => { e2e.components.Panels.Panel.title('Panel #1').should('be.visible'); // scroll to the bottom - cy.get('#page-scrollbar').scrollTo('bottom', { + cy.scrollTo('bottom', { timeout: 5 * 1000, }); diff --git a/e2e/scenes/dashboards-suite/general-dashboards.spec.ts b/e2e/scenes/dashboards-suite/general-dashboards.spec.ts index 6291c787320..bc1b2a306be 100644 --- a/e2e/scenes/dashboards-suite/general-dashboards.spec.ts +++ b/e2e/scenes/dashboards-suite/general-dashboards.spec.ts @@ -12,7 +12,7 @@ describe('Dashboards', () => { e2e.components.Panels.Panel.title('Panel #1').should('be.visible'); // scroll to the bottom - cy.get('#page-scrollbar').scrollTo('bottom', { + cy.scrollTo('bottom', { timeout: 5 * 1000, }); diff --git a/e2e/scenes/various-suite/graph-auto-migrate.spec.ts b/e2e/scenes/various-suite/graph-auto-migrate.spec.ts index eedb7a043e6..edbfd0ecab0 100644 --- a/e2e/scenes/various-suite/graph-auto-migrate.spec.ts +++ b/e2e/scenes/various-suite/graph-auto-migrate.spec.ts @@ -64,7 +64,7 @@ describe('Auto-migrate graph panel', () => { e2e.pages.Dashboard.Annotations.marker().should('exist'); }); - cy.get('#pageContent .scrollbar-view').first().scrollTo('bottom'); + cy.scrollTo('bottom'); e2e.components.Panels.Panel.title('05:00') .should('exist') diff --git a/e2e/various-suite/graph-auto-migrate.spec.ts b/e2e/various-suite/graph-auto-migrate.spec.ts index eedb7a043e6..edbfd0ecab0 100644 --- a/e2e/various-suite/graph-auto-migrate.spec.ts +++ b/e2e/various-suite/graph-auto-migrate.spec.ts @@ -64,7 +64,7 @@ describe('Auto-migrate graph panel', () => { e2e.pages.Dashboard.Annotations.marker().should('exist'); }); - cy.get('#pageContent .scrollbar-view').first().scrollTo('bottom'); + cy.scrollTo('bottom'); e2e.components.Panels.Panel.title('05:00') .should('exist') diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts index d9997e00dc7..fe6aceaadec 100644 --- a/packages/grafana-data/src/types/featureToggles.gen.ts +++ b/packages/grafana-data/src/types/featureToggles.gen.ts @@ -199,7 +199,6 @@ export interface FeatureToggles { alertingApiServer?: boolean; dashboardRestoreUI?: boolean; cloudWatchRoundUpEndTime?: boolean; - bodyScrolling?: boolean; cloudwatchMetricInsightsCrossAccount?: boolean; prometheusAzureOverrideAudience?: boolean; alertingFilterV2?: boolean; diff --git a/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx b/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx index 65f33539936..2f145e26baf 100644 --- a/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx +++ b/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx @@ -15,7 +15,6 @@ export interface WithContextMenuProps { export const WithContextMenu = ({ children, renderMenuItems, focusOnOpen = true }: WithContextMenuProps) => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 }); - const isBodyScrolling = window.grafanaBootData?.settings.featureToggles.bodyScrolling; return ( <> {children({ @@ -23,7 +22,7 @@ export const WithContextMenu = ({ children, renderMenuItems, focusOnOpen = true setIsMenuOpen(true); setMenuPosition({ x: e.pageX, - y: isBodyScrolling ? e.pageY - window.scrollY : e.pageY, + y: e.pageY - window.scrollY, }); }, })} diff --git a/packages/grafana-ui/src/components/Portal/Portal.tsx b/packages/grafana-ui/src/components/Portal/Portal.tsx index df94e4b9d92..67cf3caf5d4 100644 --- a/packages/grafana-ui/src/components/Portal/Portal.tsx +++ b/packages/grafana-ui/src/components/Portal/Portal.tsx @@ -55,21 +55,13 @@ export function PortalContainer() { } const getStyles = (theme: GrafanaTheme2) => { - const isBodyScrolling = window.grafanaBootData?.settings.featureToggles.bodyScrolling; return { - grafanaPortalContainer: css( - isBodyScrolling - ? { - position: 'fixed', - top: 0, - width: '100%', - zIndex: theme.zIndex.portal, - } - : { - position: 'absolute', - width: '100%', - } - ), + grafanaPortalContainer: css({ + position: 'fixed', + top: 0, + width: '100%', + zIndex: theme.zIndex.portal, + }), }; }; diff --git a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts index 0d2c2880f32..1550a7c19da 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts @@ -5,9 +5,6 @@ import { GrafanaTheme2, ThemeTypographyVariant } from '@grafana/data'; import { getFocusStyles } from '../mixins'; export function getElementStyles(theme: GrafanaTheme2) { - // TODO can we get the feature toggle in a better way? - const isBodyScrolling = window.grafanaBootData?.settings.featureToggles.bodyScrolling; - return css({ '*, *::before, *::after': { boxSizing: 'inherit', @@ -40,26 +37,24 @@ export function getElementStyles(theme: GrafanaTheme2) { body: { height: '100%', width: '100%', - position: isBodyScrolling ? 'unset' : 'absolute', + position: 'unset', color: theme.colors.text.primary, backgroundColor: theme.colors.background.canvas, + // 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', + paddingRight: '0 !important', + '@media print': { + overflow: 'visible', + }, + '@page': { + margin: 0, + size: 'auto', + padding: 0, + }, ...theme.typography.body, - ...(isBodyScrolling && { - // 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', - paddingRight: '0 !important', - '@media print': { - overflow: 'visible', - }, - '@page': { - margin: 0, - size: 'auto', - padding: 0, - }, - }), }, 'h1, .h1': getVariantStyles(theme.typography.h1), diff --git a/packages/grafana-ui/src/themes/GlobalStyles/page.ts b/packages/grafana-ui/src/themes/GlobalStyles/page.ts index 95f25fe6584..cea9781abda 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/page.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/page.ts @@ -5,42 +5,21 @@ import { GrafanaTheme2 } from '@grafana/data'; export function getPageStyles(theme: GrafanaTheme2) { const maxWidthBreakpoint = theme.breakpoints.values.xxl + theme.spacing.gridSize * 2 + theme.components.sidemenu.width; - const isBodyScrolling = window.grafanaBootData?.settings.featureToggles.bodyScrolling; return css({ - '.grafana-app': isBodyScrolling - ? { - display: 'flex', - flexDirection: 'column', - height: '100vh', - } - : { - display: 'flex', - alignItems: 'stretch', - position: 'absolute', - width: '100%', - height: '100%', - top: 0, - left: 0, - }, + '.grafana-app': { + display: 'flex', + flexDirection: 'column', + height: '100vh', + }, - '.main-view': isBodyScrolling - ? { - display: 'flex', - flexDirection: 'column', - flexGrow: 1, - position: 'relative', - minWidth: 0, - } - : { - position: 'relative', - display: 'flex', - flexDirection: 'column', - flexGrow: 1, - height: '100%', - flex: '1 1 0', - minWidth: 0, - }, + '.main-view': { + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + position: 'relative', + minWidth: 0, + }, '.page-scrollbar-content': { display: 'flex', diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go index ceb2cf91357..ba60f9270c8 100644 --- a/pkg/services/featuremgmt/registry.go +++ b/pkg/services/featuremgmt/registry.go @@ -1371,17 +1371,6 @@ var ( Owner: awsDatasourcesSquad, Expression: "true", }, - { - Name: "bodyScrolling", - Description: "Adjusts Page to make body the scrollable element", - Stage: FeatureStagePublicPreview, - Owner: grafanaFrontendPlatformSquad, - Expression: "false", // enabled by default - FrontendOnly: true, - AllowSelfServe: true, - HideFromDocs: true, - HideFromAdminPage: false, - }, { Name: "cloudwatchMetricInsightsCrossAccount", Description: "Enables cross account observability for Cloudwatch Metric Insights query builder", diff --git a/pkg/services/featuremgmt/toggles_gen.csv b/pkg/services/featuremgmt/toggles_gen.csv index 34ced336d25..15adc71435a 100644 --- a/pkg/services/featuremgmt/toggles_gen.csv +++ b/pkg/services/featuremgmt/toggles_gen.csv @@ -180,7 +180,6 @@ passScopeToDashboardApi,experimental,@grafana/dashboards-squad,false,false,false alertingApiServer,experimental,@grafana/alerting-squad,false,true,false dashboardRestoreUI,experimental,@grafana/grafana-frontend-platform,false,false,false cloudWatchRoundUpEndTime,GA,@grafana/aws-datasources,false,false,false -bodyScrolling,preview,@grafana/grafana-frontend-platform,false,false,true cloudwatchMetricInsightsCrossAccount,preview,@grafana/aws-datasources,false,false,true prometheusAzureOverrideAudience,deprecated,@grafana/partner-datasources,false,false,false alertingFilterV2,experimental,@grafana/alerting-squad,false,false,false diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go index 68939c99530..d1bcec7d3d0 100644 --- a/pkg/services/featuremgmt/toggles_gen.go +++ b/pkg/services/featuremgmt/toggles_gen.go @@ -731,10 +731,6 @@ const ( // Round up end time for metric queries to the next minute to avoid missing data FlagCloudWatchRoundUpEndTime = "cloudWatchRoundUpEndTime" - // FlagBodyScrolling - // Adjusts Page to make body the scrollable element - FlagBodyScrolling = "bodyScrolling" - // FlagCloudwatchMetricInsightsCrossAccount // Enables cross account observability for Cloudwatch Metric Insights query builder FlagCloudwatchMetricInsightsCrossAccount = "cloudwatchMetricInsightsCrossAccount" diff --git a/pkg/services/featuremgmt/toggles_gen.json b/pkg/services/featuremgmt/toggles_gen.json index 21b8b4cf14d..4c8ad4a0a3f 100644 --- a/pkg/services/featuremgmt/toggles_gen.json +++ b/pkg/services/featuremgmt/toggles_gen.json @@ -595,6 +595,7 @@ "name": "bodyScrolling", "resourceVersion": "1721723807004", "creationTimestamp": "2024-07-01T10:28:39Z", + "deletionTimestamp": "2024-09-24T09:17:00Z", "annotations": { "grafana.app/updatedTimestamp": "2024-07-23 08:36:47.004393 +0000 UTC" } diff --git a/public/app/core/components/AppChrome/AppChrome.tsx b/public/app/core/components/AppChrome/AppChrome.tsx index de24b3fd5be..64d9b0bb058 100644 --- a/public/app/core/components/AppChrome/AppChrome.tsx +++ b/public/app/core/components/AppChrome/AppChrome.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import { PropsWithChildren, useEffect } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { config, locationSearchToObject, locationService } from '@grafana/runtime'; +import { locationSearchToObject, locationService } from '@grafana/runtime'; import { useStyles2, LinkButton, useTheme2 } from '@grafana/ui'; import { useGrafana } from 'app/core/context/GrafanaContext'; import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange'; @@ -121,10 +121,8 @@ export function AppChrome({ children }: Props) { )}
@@ -148,7 +146,7 @@ const getStyles = (theme: GrafanaTheme2, searchBarHidden: boolean) => { flexDirection: 'column', paddingTop: TOP_BAR_LEVEL_HEIGHT * 2, flexGrow: 1, - height: config.featureToggles.bodyScrolling ? 'auto' : '100%', + height: 'auto', }), contentNoSearchBar: css({ paddingTop: TOP_BAR_LEVEL_HEIGHT, @@ -167,27 +165,17 @@ const getStyles = (theme: GrafanaTheme2, searchBarHidden: boolean) => { display: 'block', }, }, - config.featureToggles.bodyScrolling - ? { - position: 'fixed', - height: `calc(100% - ${searchBarHidden ? TOP_BAR_LEVEL_HEIGHT : TOP_BAR_LEVEL_HEIGHT * 2}px)`, - zIndex: 2, - } - : { - zIndex: theme.zIndex.navbarFixed, - } - ), - scopesDashboardsContainer: css( - config.featureToggles.bodyScrolling - ? { - position: 'fixed', - height: `calc(100% - ${searchBarHidden ? TOP_BAR_LEVEL_HEIGHT : TOP_BAR_LEVEL_HEIGHT * 2}px)`, - zIndex: 1, - } - : { - zIndex: theme.zIndex.navbarFixed, - } + { + position: 'fixed', + height: `calc(100% - ${searchBarHidden ? TOP_BAR_LEVEL_HEIGHT : TOP_BAR_LEVEL_HEIGHT * 2}px)`, + zIndex: 2, + } ), + scopesDashboardsContainer: css({ + position: 'fixed', + height: `calc(100% - ${searchBarHidden ? TOP_BAR_LEVEL_HEIGHT : TOP_BAR_LEVEL_HEIGHT * 2}px)`, + zIndex: 1, + }), scopesDashboardsContainerDocked: css({ left: MENU_WIDTH, }), @@ -200,49 +188,24 @@ const getStyles = (theme: GrafanaTheme2, searchBarHidden: boolean) => { background: theme.colors.background.primary, flexDirection: 'column', }), - panes: css( - { - display: 'flex', - flexDirection: 'column', - flexGrow: 1, - label: 'page-panes', - }, - !config.featureToggles.bodyScrolling && { - height: '100%', - minHeight: 0, - width: '100%', - [theme.breakpoints.up('md')]: { - flexDirection: 'row', - }, - } - ), + panes: css({ + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + label: 'page-panes', + }), pageContainerMenuDocked: css({ paddingLeft: MENU_WIDTH, }), pageContainerMenuDockedScopes: css({ paddingLeft: `calc(${MENU_WIDTH} * 2)`, }), - pageContainer: css( - { - label: 'page-container', - display: 'flex', - flexDirection: 'column', - flexGrow: 1, - }, - !config.featureToggles.bodyScrolling && { - minHeight: 0, - minWidth: 0, - overflow: 'auto', - '@media print': { - overflow: 'visible', - }, - '@page': { - margin: 0, - size: 'auto', - padding: 0, - }, - } - ), + pageContainer: css({ + label: 'page-container', + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + }), skipLink: css({ position: 'fixed', top: -1000, diff --git a/public/app/core/components/Login/LoginLayout.tsx b/public/app/core/components/Login/LoginLayout.tsx index 9ad2737b3e1..5973c96994f 100644 --- a/public/app/core/components/Login/LoginLayout.tsx +++ b/public/app/core/components/Login/LoginLayout.tsx @@ -3,7 +3,6 @@ import { useEffect, useState } from 'react'; import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { config } from '@grafana/runtime'; import { useStyles2 } from '@grafana/ui'; import { Branding } from '../Branding/Branding'; @@ -37,9 +36,7 @@ export const LoginLayout = ({ children, branding, isChangingPassword }: React.Pr return (
@@ -89,6 +86,7 @@ export const getLoginStyles = (theme: GrafanaTheme2) => { minHeight: '100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', + flex: 1, minWidth: '100%', marginLeft: 0, display: 'flex', @@ -96,9 +94,6 @@ export const getLoginStyles = (theme: GrafanaTheme2) => { alignItems: 'center', justifyContent: 'center', }), - containerBodyScrolling: css({ - flex: 1, - }), loginAnim: css({ ['&:before']: { opacity: 1, diff --git a/public/app/core/components/NativeScrollbar.tsx b/public/app/core/components/NativeScrollbar.tsx index 26d68c9e361..cdf0fdfc07b 100644 --- a/public/app/core/components/NativeScrollbar.tsx +++ b/public/app/core/components/NativeScrollbar.tsx @@ -1,9 +1,4 @@ -import { css, cx } from '@emotion/css'; import { useEffect, useRef } from 'react'; - -import { config } from '@grafana/runtime'; -import { useStyles2 } from '@grafana/ui'; - export interface Props { children: React.ReactNode; onSetScrollRef?: (ref: ScrollRefElement) => void; @@ -16,30 +11,16 @@ export interface ScrollRefElement { } // Shim to provide API-compatibility for Page's scroll-related props -// when bodyScrolling is enabled, this is a no-op -// TODO remove this shim completely when bodyScrolling is enabled export default function NativeScrollbar({ children, onSetScrollRef, divId }: Props) { - const styles = useStyles2(getStyles); const ref = useRef(null); useEffect(() => { - if (config.featureToggles.bodyScrolling && onSetScrollRef) { + if (onSetScrollRef) { onSetScrollRef(new DivScrollElement(document.documentElement)); } - - if (!config.featureToggles.bodyScrolling && ref.current && onSetScrollRef) { - onSetScrollRef(new DivScrollElement(ref.current)); - } }, [ref, onSetScrollRef]); - return config.featureToggles.bodyScrolling ? ( - children - ) : ( - // Set the .scrollbar-view class to help e2e tests find this, like in CustomScrollbar -
- {children} -
- ); + return children; } class DivScrollElement { @@ -61,17 +42,3 @@ class DivScrollElement { this.element.scrollTo(x, y); } } - -function getStyles() { - return { - nativeScrollbars: css({ - label: 'native-scroll-container', - minHeight: `calc(100% + 0px)`, // I don't know, just copied from custom scrollbars - maxHeight: `calc(100% + 0px)`, // I don't know, just copied from custom scrollbars - display: 'flex', - flexDirection: 'column', - flexGrow: 1, - overflow: 'auto', - }), - }; -} diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx index 0f82fd4ba8c..cd29bbfb556 100644 --- a/public/app/core/components/Page/Page.tsx +++ b/public/app/core/components/Page/Page.tsx @@ -2,7 +2,6 @@ import { css, cx } from '@emotion/css'; import { useLayoutEffect } from 'react'; import { GrafanaTheme2, PageLayoutType } from '@grafana/data'; -import { config } from '@grafana/runtime'; import { useStyles2 } from '@grafana/ui'; import { useGrafana } from 'app/core/context/GrafanaContext'; @@ -94,24 +93,13 @@ Page.Contents = PageContents; const getStyles = (theme: GrafanaTheme2) => { return { - wrapper: css( - config.featureToggles.bodyScrolling - ? { - label: 'page-wrapper', - display: 'flex', - flex: '1 1 0', - flexDirection: 'column', - position: 'relative', - } - : { - label: 'page-wrapper', - height: '100%', - display: 'flex', - flex: '1 1 0', - flexDirection: 'column', - minHeight: 0, - } - ), + wrapper: css({ + label: 'page-wrapper', + display: 'flex', + flex: '1 1 0', + flexDirection: 'column', + position: 'relative', + }), pageContent: css({ label: 'page-content', flexGrow: 1, diff --git a/public/app/core/components/Page/types.ts b/public/app/core/components/Page/types.ts index cc83c18aade..f83f00e77f3 100644 --- a/public/app/core/components/Page/types.ts +++ b/public/app/core/components/Page/types.ts @@ -23,11 +23,7 @@ export interface PageProps extends HTMLAttributes { subTitle?: React.ReactNode; /** Control the page layout. */ layout?: PageLayoutType; - /** - * TODO: Not sure we should deprecated it given the sidecar project? - * @deprecated this will be removed when bodyScrolling is enabled by default - * Can be used to get the scroll container element to access scroll position - * */ + /** Can be used to get the scroll container element to access scroll position */ onSetScrollRef?: (ref: ScrollRefElement) => void; } diff --git a/public/app/core/context/GrafanaContext.ts b/public/app/core/context/GrafanaContext.ts index b3920f47969..068f55b48e0 100644 --- a/public/app/core/context/GrafanaContext.ts +++ b/public/app/core/context/GrafanaContext.ts @@ -1,7 +1,7 @@ import { createContext, useCallback, useContext } from 'react'; import { GrafanaConfig } from '@grafana/data'; -import { LocationService, locationService, BackendSrv, config } from '@grafana/runtime'; +import { LocationService, locationService, BackendSrv } from '@grafana/runtime'; import { AppChromeService } from '../components/AppChrome/AppChromeService'; import { NewFrontendAssetsChecker } from '../services/NewFrontendAssetsChecker'; @@ -48,7 +48,7 @@ export function useChromeHeaderHeight() { const { chrome } = useGrafana(); const { kioskMode, searchBarHidden, chromeless } = chrome.useState(); - if (kioskMode || chromeless || !config.featureToggles.bodyScrolling) { + if (kioskMode || chromeless) { return 0; } else if (searchBarHidden) { return SINGLE_HEADER_BAR_HEIGHT; diff --git a/public/app/core/navigation/GrafanaRouteLoading.tsx b/public/app/core/navigation/GrafanaRouteLoading.tsx index 374087a3958..5882c0181f1 100644 --- a/public/app/core/navigation/GrafanaRouteLoading.tsx +++ b/public/app/core/navigation/GrafanaRouteLoading.tsx @@ -1,7 +1,6 @@ -import { css, cx } from '@emotion/css'; +import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -import { config } from '@grafana/runtime'; import { useStyles2 } from '@grafana/ui'; import { BouncingLoader } from '../components/BouncingLoader/BouncingLoader'; @@ -10,12 +9,7 @@ export function GrafanaRouteLoading() { const styles = useStyles2(getStyles); return ( -
+
); @@ -23,14 +17,6 @@ export function GrafanaRouteLoading() { const getStyles = (theme: GrafanaTheme2) => ({ loadingPage: css({ - backgroundColor: theme.colors.background.primary, - height: '100%', - flexDrection: 'column', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }), - loadingPageBodyScrolling: css({ backgroundColor: theme.colors.background.primary, flex: 1, flexDrection: 'column', diff --git a/public/app/features/connections/tabs/ConnectData/Search/Search.tsx b/public/app/features/connections/tabs/ConnectData/Search/Search.tsx index 0e8e5435b9e..ce5f25a538f 100644 --- a/public/app/features/connections/tabs/ConnectData/Search/Search.tsx +++ b/public/app/features/connections/tabs/ConnectData/Search/Search.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { config, useChromeHeaderHeight } from '@grafana/runtime'; +import { useChromeHeaderHeight } from '@grafana/runtime'; import { Icon, Input, useStyles2 } from '@grafana/ui'; import { t } from 'app/core/internationalization'; @@ -28,7 +28,7 @@ export interface Props { export const Search = ({ onChange, value }: Props) => { const chromeHeaderHeight = useChromeHeaderHeight(); - const styles = useStyles2(getStyles, config.featureToggles.bodyScrolling ? (chromeHeaderHeight ?? 0) : 0); + const styles = useStyles2(getStyles, chromeHeaderHeight ?? 0); return (
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx b/public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx index 1ac75e7e274..50f259d12ff 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx @@ -2,7 +2,6 @@ import { css, cx } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { config } from '@grafana/runtime'; import { SceneComponentProps } from '@grafana/scenes'; import { Button, ToolbarButton, useStyles2 } from '@grafana/ui'; @@ -35,9 +34,7 @@ export function PanelEditorRenderer({ model }: SceneComponentProps)
diff --git a/public/app/features/plugins/admin/components/PluginDetailsBody.tsx b/public/app/features/plugins/admin/components/PluginDetailsBody.tsx index a905dbe30ee..1a76902203c 100644 --- a/public/app/features/plugins/admin/components/PluginDetailsBody.tsx +++ b/public/app/features/plugins/admin/components/PluginDetailsBody.tsx @@ -1,4 +1,4 @@ -import { css, cx } from '@emotion/css'; +import { css } from '@emotion/css'; import { useMemo } from 'react'; import { AppPlugin, GrafanaTheme2, PluginContextProvider, UrlQueryMap } from '@grafana/data'; @@ -45,7 +45,7 @@ export function PluginDetailsBody({ plugin, queryParams, pageId }: Props): JSX.E if (pageId === PluginTabIds.OVERVIEW) { return (
+
); @@ -67,7 +67,7 @@ export function PluginDetailsBody({ plugin, queryParams, pageId }: Props): JSX.E if (pageId === PluginTabIds.CONFIG && pluginConfig?.angularConfigCtrl) { return ( -
+
); @@ -102,7 +102,7 @@ export function PluginDetailsBody({ plugin, queryParams, pageId }: Props): JSX.E for (const configPage of pluginConfig.configPages) { if (pageId === configPage.id) { return ( -
+
@@ -114,7 +114,7 @@ export function PluginDetailsBody({ plugin, queryParams, pageId }: Props): JSX.E if (pageId === PluginTabIds.USAGE && pluginConfig) { return ( -
+
); @@ -122,25 +122,20 @@ export function PluginDetailsBody({ plugin, queryParams, pageId }: Props): JSX.E if (pageId === PluginTabIds.DASHBOARDS && pluginConfig) { return ( -
+
); } return ( -
+

Page not found.

); } export const getStyles = (theme: GrafanaTheme2) => ({ - container: config.featureToggles.bodyScrolling - ? css({}) - : css({ - height: '100%', - }), readme: css({ '& img': { maxWidth: '100%', diff --git a/public/app/features/plugins/admin/components/PluginDetailsPage.tsx b/public/app/features/plugins/admin/components/PluginDetailsPage.tsx index 61903f80ed2..8aca36f54fa 100644 --- a/public/app/features/plugins/admin/components/PluginDetailsPage.tsx +++ b/public/app/features/plugins/admin/components/PluginDetailsPage.tsx @@ -113,15 +113,9 @@ export const getStyles = (theme: GrafanaTheme2) => { gap: theme.spacing(1), }), // Needed due to block formatting context - tabContent: config.featureToggles.bodyScrolling - ? css({ - paddingLeft: '5px', - }) - : css({ - overflow: 'auto', - height: '100%', - paddingLeft: '5px', - }), + tabContent: css({ + paddingLeft: '5px', + }), }; };