PMM-15085 Validate Peak Design table and theme updates and bump @percona/percona-ui

ui/apps/pmm/src/components/grafana-page-frame/GrafanaPageFrame.tsx

@@ -1,3 +1,4 @@
+import GlobalStyles from '@mui/material/GlobalStyles';
 import Stack from '@mui/material/Stack';
 import { useHeader } from 'hooks/useHeader';
 import { FC, PropsWithChildren } from 'react';
@@ -6,7 +7,17 @@ const GrafanaPageFrame: FC<PropsWithChildren> = ({ children }) => {
   const { visible: headerVisible } = useHeader();
 
   return (
-    <Stack
+    <>
+      {headerVisible && (
+        <GlobalStyles
+          styles={(theme) => ({
+            'html, body': {
+              backgroundColor: theme.palette.background.paper,
+            },
+          })}
+        />
+      )}
+      <Stack
       sx={[
         {
           flex: 1,
@@ -25,14 +36,15 @@ const GrafanaPageFrame: FC<PropsWithChildren> = ({ children }) => {
           headerVisible && {
             border: '1px solid',
             borderColor: 'divider',
-            borderRadius: 4,
+            borderRadius: '5px',
             overflow: 'hidden',
           },
         ]}
       >
         {children}
       </Stack>
     </Stack>
+    </>
   );
 };
 

ui/apps/pmm/src/components/main/MainWithNav.tsx

@@ -30,9 +30,9 @@ export const MainWithNav = () => {
   }
 
   return (
-    <Stack direction="row" flex={1}>
+    <Stack direction="row" flex={1} sx={{ minWidth: 0 }}>
       {!isFullScreen && !isRenderingServer() && <Sidebar />}
-      <Stack flex={1} direction="column">
+      <Stack flex={1} direction="column" sx={{ minWidth: 0 }}>
         {!isFullScreen && <Header />}
         <Outlet />
         <GrafanaPage />

ui/apps/pmm/src/components/main/header/Header.constants.ts

@@ -1 +1 @@
-export const HEADER_HEIGHT = 64;
+export const HEADER_HEIGHT = 56;

ui/apps/pmm/src/components/main/header/Header.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { useHeader } from 'hooks/useHeader';
 import Stack from '@mui/material/Stack';
-import { HEADER_HEIGHT } from './Header.constants';
+
 
 const Header: FC = () => {
   const { visible, Component } = useHeader();
@@ -11,7 +11,7 @@ const Header: FC = () => {
   }
 
   return (
-    <Stack sx={{ height: HEADER_HEIGHT, justifyContent: 'center' }}>
+    <Stack sx={{ justifyContent: 'center' }}>
       <Component />
     </Stack>
   );

ui/apps/pmm/src/pages/rta/components/rta-page/RealtimePage.tsx

@@ -1,24 +1,35 @@
+import GlobalStyles from '@mui/material/GlobalStyles';
 import Stack, { StackProps } from '@mui/material/Stack';
 import { HEADER_HEIGHT } from 'components/main/header/Header.constants';
 import { FC } from 'react';
 
 const RealtimePage: FC<StackProps> = ({ children }) => (
-  <Stack
-    direction="column"
-    gap={2}
+  <>
+    <GlobalStyles
+      styles={(theme) => ({
+        'html, body': {
+          backgroundColor: theme.palette.background.paper,
+        },
+      })}
+    />
+    <Stack
+      direction="column"
+      gap={2}
     p={2}
-    sx={{
-      flex: 1,
-      height: '100%',
-      minHeight: 0,
-      position: 'relative',
-      maxHeight: `calc(100vh - ${HEADER_HEIGHT}px)`, // Account for header height
-      overflow: 'hidden',
-      display: 'flex',
-    }}
-  >
-    {children}
-  </Stack>
+      sx={{
+        flex: 1,
+        height: '100%',
+        minHeight: 0,
+        position: 'relative',
+        maxHeight: `calc(100vh - ${HEADER_HEIGHT}px)`, // Account for header height
+        // There should be a better way to avoid using maxHeight, or forcing hidden overflow. To be improved.
+        overflow: 'hidden',
+        display: 'flex',
+      }}
+    >
+      {children}
+    </Stack>
+  </>
 );
 
 export default RealtimePage;

ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.constants.tsx

@@ -27,7 +27,6 @@ export const OVERVIEW_TABLE_COLUMNS: MRT_ColumnDef<QueryData>[] = [
     }),
   },
   {
-    size: 150,
     header: Messages.columns.operationId,
     accessorKey: 'queryId',
     enableColumnFilter: false,
@@ -38,7 +37,6 @@ export const OVERVIEW_TABLE_COLUMNS: MRT_ColumnDef<QueryData>[] = [
     }),
   },
   {
-    size: 150,
     header: Messages.columns.elapsedTime,
     accessorKey: 'queryExecutionDurationMs',
     filterVariant: 'range',

ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx

@@ -43,6 +43,7 @@ const OverviewTable: FC<Props> = ({
           },
         },
       }}
+      enableStickyHeader
       enableGlobalFilter={false}
       enableHiding={false}
       enableRowHoverAction
@@ -53,6 +54,14 @@ const OverviewTable: FC<Props> = ({
         timeRangeFilterFn: (row, id, filterValue) =>
           filterElapsedTime(row as MRT_Row<QueryData>, id, filterValue),
       }}
+      muiTableContainerProps={{
+        sx: {
+          flex: 1,
+          borderRadius: 2,
+          border: '1px solid',
+          borderColor: 'divider',
+        },
+      }}
       muiTableBodyRowProps={({ row }) => ({
         onMouseEnter: onRowHover,
         'data-testid': `query-${row.original.queryId}-row`,

ui/apps/pmm/src/pages/rta/selection/RealtimeSelection.tsx

@@ -35,7 +35,7 @@ export const RealtimeSelection: FC = () => {
 
   if (isLoading || isLoadingSessions) {
     return (
-      <Page footer={null}>
+      <Page footer={null} surface="paper">
         <Stack
           sx={{
             maxWidth: 392,
@@ -63,7 +63,7 @@ export const RealtimeSelection: FC = () => {
   }
 
   return (
-    <Page footer={null}>
+    <Page footer={null} surface="paper">
       <Stack
         gap={4}
         sx={{

ui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.tsx

@@ -142,6 +142,16 @@ const SessionsTable: FC = () => {
         enableGlobalFilter={false}
         enableRowSelection
         onRowSelectionChange={setRowSelection}
+        displayColumnDefOptions={{
+          'mrt-row-select': {
+            size: 40,
+            muiTableHeadCellProps: { sx: { flex: '0 0 40px !important' } },
+            muiTableBodyCellProps: { sx: { flex: '0 0 40px !important' } },
+          },
+          'mrt-row-expand': {
+            size: 40,
+          },
+        }}
         enableStickyHeader
         enableSubRowSelection
         enableExpanding
@@ -161,17 +171,11 @@ const SessionsTable: FC = () => {
         }
         getSubRows={(row) => row.serviceSessions}
         muiTableContainerProps={{
-          sx: (theme) => ({
-            flex: 1,
-            backgroundColor: 'inherit',
-            borderTopLeftRadius: theme.shape.borderRadius,
-            borderTopRightRadius: theme.shape.borderRadius,
-            borderBottom: 0,
-          }),
-        }}
-        muiTableHeadProps={{
           sx: {
-            backgroundColor: 'inherit',
+            flex: 1,
+            borderRadius: 2,
+            border: '1px solid',
+            borderColor: 'divider',
           },
         }}
         muiTopToolbarProps={{

ui/apps/pmm/src/pages/updates/change-log/code-block/CodeBlock.tsx

@@ -12,6 +12,7 @@ export const CodeBlock: FC<PropsWithChildren> = ({ children }) => {
           color: (theme) => theme.palette.action.hover,
           fontFamily: 'Roboto Mono, monospace',
           whiteSpace: 'pre',
+          overflowX: 'auto',
         },
         (theme) =>
           isSingleLine

ui/apps/pmm/src/pages/updates/change-log/release-notes/ReleaseNotes.tsx

@@ -19,6 +19,10 @@ export const ReleaseNotes: FC<ReleaseNotesProps> = ({ content }) => {
           height: 'auto',
           maxWidth: '100%',
         },
+        table: {
+          display: 'block',
+          overflowX: 'auto',
+        },
         'table, tr, th, td': {
           p: 1,
           textAlign: 'left',