IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-11 08:32:10 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: Remove bodyScrolling toggle and make it default (#93652)

Browse Source 
* remove bodyScrolling toggle and make it default

* fix e2e tests
This commit is contained in:
Ashley Harrison 2024-09-24 13:23:18 +01:00 committed by GitHub
parent 7f7fed8c3c
commit a54308138f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
24 changed files with 95 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/dashboards-suite/general-dashboards.spec.ts
View File

@ -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,
});

2
e2e/scenes/dashboards-suite/general-dashboards.spec.ts
View File

@ -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,
});

2
e2e/scenes/various-suite/graph-auto-migrate.spec.ts
View File

@ -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')

2
e2e/various-suite/graph-auto-migrate.spec.ts
View File

@ -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')

1
packages/grafana-data/src/types/featureToggles.gen.ts
View File

@ -199,7 +199,6 @@ export interface FeatureToggles {
alertingApiServer?: boolean;
dashboardRestoreUI?: boolean;
cloudWatchRoundUpEndTime?: boolean;
bodyScrolling?: boolean;
cloudwatchMetricInsightsCrossAccount?: boolean;
prometheusAzureOverrideAudience?: boolean;
alertingFilterV2?: boolean;

3
packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx
View File

@ -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,
});
},
})}

20
packages/grafana-ui/src/components/Portal/Portal.tsx
View File

@ -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,
}),
};
};

35
packages/grafana-ui/src/themes/GlobalStyles/elements.ts
View File

@ -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),

45
packages/grafana-ui/src/themes/GlobalStyles/page.ts
View File

@ -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',

11
pkg/services/featuremgmt/registry.go
View File

@ -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",

1
pkg/services/featuremgmt/toggles_gen.csv
View File

@ -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

1 Name Stage Owner requiresDevMode RequiresRestart FrontendOnly
180 alertingApiServer experimental @grafana/alerting-squad false true false
181 dashboardRestoreUI experimental @grafana/grafana-frontend-platform false false false
182 cloudWatchRoundUpEndTime GA @grafana/aws-datasources false false false
bodyScrolling preview @grafana/grafana-frontend-platform false false true
183 cloudwatchMetricInsightsCrossAccount preview @grafana/aws-datasources false false true
184 prometheusAzureOverrideAudience deprecated @grafana/partner-datasources false false false
185 alertingFilterV2 experimental @grafana/alerting-squad false false false

4
pkg/services/featuremgmt/toggles_gen.go
View File

@ -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"

1
pkg/services/featuremgmt/toggles_gen.json
View File

@ -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"
}

89
public/app/core/components/AppChrome/AppChrome.tsx
View File

@ -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) {
)}
<main
className={cx(styles.pageContainer, {
[styles.pageContainerMenuDocked]:
config.featureToggles.bodyScrolling && (menuDockedAndOpen || isScopesDashboardsOpen),
[styles.pageContainerMenuDockedScopes]:
config.featureToggles.bodyScrolling && menuDockedAndOpen && isScopesDashboardsOpen,
[styles.pageContainerMenuDocked]: menuDockedAndOpen || isScopesDashboardsOpen,
[styles.pageContainerMenuDockedScopes]: menuDockedAndOpen && isScopesDashboardsOpen,
})}
id="pageContent"
>
@ -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,

9
public/app/core/components/Login/LoginLayout.tsx
View File

@ -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 (
<Branding.LoginBackground
className={cx(loginStyles.container, startAnim && loginStyles.loginAnim, branding?.loginBackground, {
[loginStyles.containerBodyScrolling]: config.featureToggles.bodyScrolling,
})}
className={cx(loginStyles.container, startAnim && loginStyles.loginAnim, branding?.loginBackground)}
>
<div className={loginStyles.loginMain}>
<div className={cx(loginStyles.loginContent, loginBoxBackground, 'login-content-box')}>
@ -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,

37
public/app/core/components/NativeScrollbar.tsx
View File

@ -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<HTMLDivElement>(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
<div ref={ref} className={cx(styles.nativeScrollbars, 'scrollbar-view')} id={divId}>
{children}
</div>
);
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',
}),
};
}

26
public/app/core/components/Page/Page.tsx
View File

@ -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,

6
public/app/core/components/Page/types.ts
View File

@ -23,11 +23,7 @@ export interface PageProps extends HTMLAttributes<HTMLDivElement> {
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;
}

4
public/app/core/context/GrafanaContext.ts
View File

@ -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;

18
public/app/core/navigation/GrafanaRouteLoading.tsx
View File

@ -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 (
<div
className={cx({
[styles.loadingPage]: !config.featureToggles.bodyScrolling,
[styles.loadingPageBodyScrolling]: config.featureToggles.bodyScrolling,
})}
>
<div className={styles.loadingPage}>
<BouncingLoader />
</div>
);
@ -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',

4
public/app/features/connections/tabs/ConnectData/Search/Search.tsx
View File

@ -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 (
<div className={styles.searchContainer}>

5
public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx
View File

@ -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<PanelEditor>)
<NavToolbarActions dashboard={dashboard} />
<div
{...containerProps}
className={cx(containerProps.className, {
[styles.content]: config.featureToggles.bodyScrolling,
})}
className={cx(containerProps.className, styles.content)}
data-testid={selectors.components.PanelEditor.General.content}
>
<div {...primaryProps} className={cx(primaryProps.className, styles.body)}>

21
public/app/features/plugins/admin/components/PluginDetailsBody.tsx
View File

@ -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 (
<div
className={cx(styles.readme, styles.container)}
className={styles.readme}
dangerouslySetInnerHTML={{
__html: plugin.details?.readme ?? 'No plugin help or readme markdown file was found',
}}
@ -55,7 +55,7 @@ export function PluginDetailsBody({ plugin, queryParams, pageId }: Props): JSX.E
if (pageId === PluginTabIds.VERSIONS) {
return (
<div className={styles.container}>
<div>
<VersionList versions={plugin.details?.versions} installedVersion={plugin.installedVersion} />
</div>
);
@ -67,7 +67,7 @@ export function PluginDetailsBody({ plugin, queryParams, pageId }: Props): JSX.E
if (pageId === PluginTabIds.CONFIG && pluginConfig?.angularConfigCtrl) {
return (
<div className={styles.container}>
<div>
<AppConfigCtrlWrapper app={pluginConfig as AppPlugin} />
</div>
);
@ -102,7 +102,7 @@ export function PluginDetailsBody({ plugin, queryParams, pageId }: Props): JSX.E
for (const configPage of pluginConfig.configPages) {
if (pageId === configPage.id) {
return (
<div className={styles.container}>
<div>
<PluginContextProvider meta={pluginConfig.meta}>
<configPage.body plugin={pluginConfig} query={queryParams} />
</PluginContextProvider>
@ -114,7 +114,7 @@ export function PluginDetailsBody({ plugin, queryParams, pageId }: Props): JSX.E
if (pageId === PluginTabIds.USAGE && pluginConfig) {
return (
<div className={styles.container}>
<div>
<PluginUsage plugin={pluginConfig?.meta} />
</div>
);
@ -122,25 +122,20 @@ export function PluginDetailsBody({ plugin, queryParams, pageId }: Props): JSX.E
if (pageId === PluginTabIds.DASHBOARDS && pluginConfig) {
return (
<div className={styles.container}>
<div>
<PluginDashboards plugin={pluginConfig?.meta} />
</div>
);
}
return (
<div className={styles.container}>
<div>
<p>Page not found.</p>
</div>
);
}
export const getStyles = (theme: GrafanaTheme2) => ({
container: config.featureToggles.bodyScrolling
? css({})
: css({
height: '100%',
}),
readme: css({
'& img': {
maxWidth: '100%',

12
public/app/features/plugins/admin/components/PluginDetailsPage.tsx
View File

@ -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',
}),
};
};