PMM-14590 RTA QAN table

ui/apps/pmm/package.json

@@ -24,8 +24,8 @@
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
     "@mui/x-date-pickers": "^7.5.0",
-    "@percona/design": "^1.0.0",
-    "@percona/ui-lib": "^1.0.0",
+    "@percona/design": "^1.1.0",
+    "@percona/ui-lib": "^1.1.0",
     "@pmm/shared": "*",
     "@reactour/tour": "^3.8.0",
     "@tanstack/react-query": "^5.45.1",
@@ -36,18 +36,20 @@
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.23.1",
+    "react-syntax-highlighter": "^16.1.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "vite-plugin-svgr": "^4.3.0"
   },
   "devDependencies": {
-    "@percona/eslint-config-react": "^1.0.0",
-    "@percona/prettier-config": "^1.0.0",
-    "@percona/tsconfig": "^1.0.0",
+    "@percona/eslint-config-react": "^1.1.0",
+    "@percona/prettier-config": "^1.1.0",
+    "@percona/tsconfig": "^1.1.0",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^15.0.7",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
     "@vitejs/plugin-react-swc": "^3.7.0",

ui/apps/pmm/src/components/code-block/CodeBlock.tsx

@@ -0,0 +1,20 @@
+import Stack from '@mui/material/Stack';
+import { SyntaxHighlighter } from 'components/syntax-highlighter';
+import { FC } from 'react';
+import { CodeBlockProps } from './CodeBlock.types';
+
+const CodeBlock: FC<CodeBlockProps> = ({ code, language }) => (
+  <Stack
+    sx={{
+      flex: 1,
+
+      '*': {
+        textOverflow: 'ellipsis',
+      },
+    }}
+  >
+    <SyntaxHighlighter language={language}>{code}</SyntaxHighlighter>
+  </Stack>
+);
+
+export default CodeBlock;

ui/apps/pmm/src/components/code-block/CodeBlock.types.ts

@@ -0,0 +1,6 @@
+import { CodeLanguage } from 'types/util.types';
+
+export interface CodeBlockProps {
+  code: string;
+  language: CodeLanguage;
+}

ui/apps/pmm/src/components/code-block/index.ts

@@ -0,0 +1 @@
+export { default as CodeBlock } from './CodeBlock';

ui/apps/pmm/src/components/icon/Icon.constants.ts

@@ -37,6 +37,9 @@ export const DYNAMIC_ICON_IMPORT_MAP = {
   'my-organization': () => import('icons/my-organization.svg?react'),
   memory: () => import('icons/memory.svg?react'),
   network: () => import('icons/network.svg?react'),
+  'bottom-panel-close': () => import('icons/bottom-panel-close.svg?react'),
+  'collapse-content': () => import('icons/collapse-content.svg?react'),
+  'expand-content': () => import('icons/expand-content.svg?react'),
 };
 
 export const VIEWBOX_MAP: Partial<

ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.tsx

@@ -0,0 +1,45 @@
+import Stack from '@mui/material/Stack';
+import { useTheme } from '@mui/material/styles';
+import { FC } from 'react';
+import { PrismLight as ReactSyntaxHighlighter } from 'react-syntax-highlighter';
+import { getSyntaxHighlighterStyle } from './SyntaxHighlighter.utils';
+
+// Import only used languages to reduce bundle size
+// @ts-ignore
+import mongodb from 'react-syntax-highlighter/dist/esm/languages/prism/mongodb';
+import { SyntaxHighlighterProps } from './SyntaxHighlighter.types';
+
+ReactSyntaxHighlighter.registerLanguage('mongodb', mongodb);
+
+const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
+  language,
+  children,
+  ...props
+}) => {
+  const theme = useTheme();
+  const highlighterStyle = getSyntaxHighlighterStyle(theme, language);
+
+  return (
+    <Stack
+      sx={{
+        overflow: 'hidden',
+        overflowX: 'ellipsis',
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: theme.palette.divider,
+        borderRadius: theme.shape.borderRadius / 2,
+        backgroundColor: theme.palette.surfaces?.elevation1 || 'transparent',
+      }}
+    >
+      <ReactSyntaxHighlighter
+        language={language}
+        style={highlighterStyle}
+        {...props}
+      >
+        {children}
+      </ReactSyntaxHighlighter>
+    </Stack>
+  );
+};
+
+export default SyntaxHighlighter;

ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.types.ts

@@ -0,0 +1,6 @@
+import { SyntaxHighlighterProps as ReactSyntaxHighlighterProps } from 'react-syntax-highlighter';
+import { CodeLanguage } from 'types/util.types';
+
+export interface SyntaxHighlighterProps extends ReactSyntaxHighlighterProps {
+  language: CodeLanguage;
+}

ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.utils.ts

@@ -0,0 +1,77 @@
+import vscDarkPlus from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
+import { Theme } from '@mui/material/styles';
+import { PEAK_DARK_THEME, PEAK_LIGHT_THEME } from '@pmm/shared';
+import { CodeLanguage } from 'types/util.types';
+
+export const getSyntaxHighlighterStyle = (
+  theme: Theme,
+  language: CodeLanguage
+) => {
+  const isLight = theme.palette.mode === 'light';
+
+  const tokens = {
+    fontFamily: 'Roboto Mono, monospace',
+    background: 'transparent',
+    base: isLight ? PEAK_LIGHT_THEME.text.sky : PEAK_DARK_THEME.text.sky,
+    attrValue: isLight ? PEAK_LIGHT_THEME.text.aqua : PEAK_DARK_THEME.text.aqua,
+    string: isLight ? PEAK_LIGHT_THEME.text.aqua : PEAK_DARK_THEME.text.aqua,
+    number: isLight
+      ? PEAK_LIGHT_THEME.text.primary
+      : PEAK_DARK_THEME.text.primary,
+    property: isLight
+      ? PEAK_LIGHT_THEME.text.lavender
+      : PEAK_DARK_THEME.text.sky,
+    function: isLight
+      ? PEAK_LIGHT_THEME.text.lavender
+      : PEAK_DARK_THEME.text.lavender,
+    operator: isLight ? PEAK_LIGHT_THEME.text.aqua : PEAK_DARK_THEME.text.aqua,
+    punctuation: theme.palette.text.secondary,
+  };
+
+  if (language === 'text') {
+    tokens.base = theme.palette.text.primary;
+  }
+
+  // Define your custom styles to override the base VSC Dark Plus colors
+  const customStyle = {
+    ...vscDarkPlus,
+    'pre[class*="language-"]': {
+      margin: 0,
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      paddingTop: theme.spacing(1),
+      paddingBottom: theme.spacing(1),
+      background: tokens.background,
+      fontFamily: tokens.fontFamily,
+    },
+    'code[class*="language-"]': {
+      ...vscDarkPlus['code[class*="language-"]'],
+      background: tokens.background,
+      color: tokens.base,
+      fontFamily: tokens.fontFamily,
+    },
+    'attr-value': {
+      color: tokens.attrValue,
+    },
+    function: {
+      color: tokens.function,
+    },
+    property: {
+      color: tokens.property,
+    },
+    string: {
+      color: tokens.string,
+    },
+    number: {
+      color: tokens.number,
+    },
+    operator: {
+      color: tokens.operator,
+    },
+    punctuation: {
+      color: tokens.punctuation,
+    },
+  };
+
+  return customStyle;
+};

ui/apps/pmm/src/components/syntax-highlighter/index.ts

@@ -0,0 +1 @@
+export { default as SyntaxHighlighter } from './SyntaxHighlighter';

ui/apps/pmm/src/components/table/Table.tsx

@@ -0,0 +1,79 @@
+import { useTheme } from '@mui/material/styles';
+import { Table as PeakTable, TableProps } from '@percona/ui-lib';
+
+const Table = <T extends Record<string, any>>(props: TableProps<T>) => {
+  const theme = useTheme();
+  const backgroundColor = theme.palette.background.default;
+
+  return (
+    <PeakTable
+      muiTablePaperProps={{
+        sx: {
+          flex: '1 1 0',
+          display: 'flex',
+          flexFlow: 'column',
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: theme.palette.divider,
+          borderRadius: theme.shape.borderRadius,
+          overflow: 'hidden',
+        },
+      }}
+      muiTableContainerProps={{
+        sx: {
+          flex: '1 1 0',
+          backgroundColor,
+        },
+        ...props.muiTableContainerProps,
+      }}
+      muiTableHeadProps={{
+        sx: {
+          tr: {
+            boxShadow: 'none',
+          },
+
+          th: {
+            backgroundColor,
+          },
+        },
+      }}
+      muiTableHeadCellProps={{
+        sx: {
+          p: 2,
+          py: 1.75,
+          backgroundColor,
+        },
+      }}
+      muiTableHeadRowProps={{
+        sx: {
+          backgroundColor,
+        },
+      }}
+      muiTableBodyRowProps={{
+        sx: {
+          backgroundColor,
+        },
+      }}
+      muiTableFooterProps={{
+        sx: {
+          backgroundColor,
+        },
+      }}
+      muiBottomToolbarProps={{
+        sx: {
+          backgroundColor,
+        },
+      }}
+      muiTableHeadCellFilterTextFieldProps={{
+        variant: 'outlined',
+        size: 'small',
+        sx: {
+          marginTop: 1,
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export default Table;

ui/apps/pmm/src/components/table/index.ts

@@ -0,0 +1 @@
+export { default as Table } from './Table';