diff --git a/ui/.gitignore b/ui/.gitignore index 96fab4fed34..4405a334052 100644 --- a/ui/.gitignore +++ b/ui/.gitignore @@ -26,6 +26,7 @@ coverage out/ build dist +*.tsbuildinfo # Debug diff --git a/ui/apps/pmm/package.json b/ui/apps/pmm/package.json index 679f4ba2917..04f0043c767 100644 --- a/ui/apps/pmm/package.json +++ b/ui/apps/pmm/package.json @@ -30,6 +30,9 @@ "@percona/percona-ui": "1.0.24", "@pmm/shared": "workspace:*", "@reactour/tour": "^3.8.0", + "@sep/api": "workspace:*", + "@sep/framework": "workspace:*", + "@sep/plugins-atw": "workspace:*", "@tanstack/react-query": "^5.100.7", "axios": "^1.13.5", "axios-case-converter": "^1.1.1", @@ -44,6 +47,7 @@ "react-markdown": "^9.0.1", "react-router": "^7.14.0", "react-router-dom": "^7.14.0", + "react-syntax-highlighter": "^16.1.0", "rehype-raw": "^7.0.0", "remark-gfm": "^4.0.0", "vite-plugin-svgr": "^5.2.0", @@ -54,6 +58,7 @@ "@testing-library/react": "^16.3.0", "@types/react": "^19.1.0", "@types/react-dom": "^19.1.0", + "@types/react-syntax-highlighter": "^15.5.13", "@vitejs/plugin-basic-ssl": "^2.3.0", "@vitejs/plugin-react-swc": "^4.3.1", "jsdom": "^29.1.1", diff --git a/ui/apps/pmm/src/components/page/Page.tsx b/ui/apps/pmm/src/components/page/Page.tsx index 029e9e3fd6b..58da10db335 100644 --- a/ui/apps/pmm/src/components/page/Page.tsx +++ b/ui/apps/pmm/src/components/page/Page.tsx @@ -8,9 +8,9 @@ import { Divider, GlobalStyles, Link, - Stack, Typography, } from '@mui/material'; +import { PageContainer } from '@percona/percona-ui'; import { useUser } from 'contexts/user'; import { Messages } from './Page.messages'; import { PMM_HOME_URL } from 'lib/constants'; @@ -23,6 +23,7 @@ export const Page: FC = ({ topBar, footer, children, + maxWidth, fullWidth, surface, roles, @@ -30,6 +31,9 @@ export const Page: FC = ({ const { user } = useUser(); updateDocumentTitle(title); const hasAccess = !roles || roles?.some((role) => user?.orgRole === role); + // Back-compat: `fullWidth` predates `maxWidth`; treat it as `maxWidth="full"` + // unless an explicit `maxWidth` is provided. + const resolvedMaxWidth = maxWidth ?? (fullWidth ? 'full' : undefined); return ( <> @@ -45,24 +49,7 @@ export const Page: FC = ({ })} /> )} - + {topBar} {!!title && {title}} @@ -86,7 +73,7 @@ export const Page: FC = ({ {footer !== undefined ? footer :