PMM-15159 Use Peak Design's Code Block component for code snippets in RTA by pmcf-percona · Pull Request #5629 · percona/pmm

pmcf-percona · 2026-07-10T09:50:08Z

Ticket number: PMM-15159

Feature build: Percona-Lab/pmm-submodules#4466

Summary

Renders all RTA code snippets with the CodeBlock component from Peak Design @percona/percona-ui 1.0.23: the query cells in the overview table, and the query text and raw data in the details pane.

Code snippets now have tuneable, popular syntax highlighting (JavaScript for MongoDB queries, JSON for raw data), automatic light/dark theming and a copy button.

The custom SyntaxHighlighter/CodeBlock components and the react-syntax-highlighter dependency are removed.

Also in this PR:

Overview cells keep the code block frame fully visible and fade out clipped text; the full query remains available in the details pane.
The details pane is redesigned as a full-height sheet, and the overview toolbar and sessions page layouts are polished.
The QAN header is now responsive: tabs wrap under the title when space is short and scroll horizontally beyond that, matching the Settings page behavior.
Update change log: markdown inline code uses the Peak Design inline code style, code fences use CodeBlock.
RTA tables, modals and the details sheet use an 8px corner radius, hardcoded until Peak Design publishes its Shape tokens.

How to test: open QAN > Real-time, check the overview table snippets, open a query's details (query text and raw data tabs, copy buttons), toggle light/dark mode, and narrow the window to see the header tabs wrap and scroll.

No API changes.

Related work:

Add Code Block component + Code (inline) typography percona-ui#30 — CodeBlock component, released in 1.0.23.
Add Shape (border radius) design tokens + docs percona-ui#37 — Shape tokens, pending release. TODOs in code reference it.

Testing screenshots:

Bump @percona/percona-ui to 1.0.23 and render RTA code snippets (overview table query cell, details pane query text and raw data) with its CodeBlock component: syntax highlighting, light/dark theme support and a copy button out of the box. Remove the custom SyntaxHighlighter and CodeBlock components along with the react-syntax-highlighter dependency. MongoDB query text is highlighted as JavaScript since Prism has no MongoDB grammar; raw data uses JSON. Also align the Updates change log markdown rendering: inline code now renders as a native <code> element styled by the Peak Design theme, and code blocks use the shared CodeBlock component. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AKTWQXoMp8mGZaA54vv1v9

Wrap the query cell in a full-width container and clip overflow inside the code block, so its border and rounded frame always render within the table cell instead of getting cut off at the cell edge. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AKTWQXoMp8mGZaA54vv1v9

Add a right-edge fade as a cut-off affordance for truncated queries. The fade is a CSS mask on the code content rather than a gradient overlay, so it needs no knowledge of the prism scheme's background color and works in both light and dark mode. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AKTWQXoMp8mGZaA54vv1v9

…lock-1u0bvv # Conflicts: # ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.utils.ts

Let the tabs-and-actions group wrap under the title when the header runs out of space, and make the tabs scroll horizontally (as on the Settings page) when the group itself no longer fits. The bottom border moves from a separate divider onto the header container so the tabs always sit flush against it in either layout. Actions no longer shrink or get overlapped by the tab scroller, and the layout accommodates additional tabs and icon buttons. Also apply prettier formatting to QueryCell for the new format check. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AKTWQXoMp8mGZaA54vv1v9

…lock-1u0bvv

- Removed unnecessary scrollbar gutter styles from GlobalStyles in Providers.tsx. - Added new icon constants for 'electric-bolt' and 'electric-bolt-off' in Icon.constants.ts. - Updated TextSelect component to accept additional button properties for better customization. - Adjusted padding and margin in RealtimePage and RealtimeOverview components for improved layout. - Enhanced AutoRefreshSelect with new button properties and animation adjustments. - Updated OverviewTable to improve button alignment and spacing. These changes aim to streamline the UI and improve user experience across various components.

- Adjusted padding and margin in QanHeader for improved spacing. - Updated RealtimePage to increase top padding for better layout. - Modified RealtimeOverview to refine gap settings for rows and columns. - Enhanced DetailsPane with new Box component for layout flexibility and improved styling. - Updated OverviewTable to streamline header cell padding. - Refined RealtimeSessionsPage layout with adjusted gap and padding for better visual hierarchy. - Improved SessionsTable top toolbar layout for better alignment and spacing. These changes aim to enhance the overall user experience and visual consistency across the application.

…lock-1u0bvv

The format check introduced on main (PMM-7) flags these files; formatting only, no functional changes. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AKTWQXoMp8mGZaA54vv1v9

Peak Design's borderRadiusMd (8px) isn't published yet; keep the hardcoded value with a pointer to swap once the tokens ship. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AKTWQXoMp8mGZaA54vv1v9

Tables and modals now use the same 8px radius as the details pane, hardcoded until Peak Design publishes the Shape tokens, with pointers to swap to theme.shape.borderRadiusMd once they ship. The modal was previously 4px. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AKTWQXoMp8mGZaA54vv1v9

it-percona-cla · 2026-07-10T09:50:12Z

All committers have signed the CLA.

Copilot

Pull request overview

This PR upgrades the PMM UI to use Peak Design’s CodeBlock from @percona/percona-ui@1.0.23 for Real-time QAN (RTA) query snippets and update release notes, removing the custom syntax-highlighting components and the react-syntax-highlighter dependency. It also includes several RTA/QAN layout and styling refinements (details sheet redesign, toolbar/header responsiveness, and consistent 8px rounding).

Changes:

Upgrade @percona/percona-ui to 1.0.23 and adopt its CodeBlock (copy button, theming, syntax highlighting) across RTA and change log release notes.
Remove the in-repo SyntaxHighlighter/CodeBlock implementations and react-syntax-highlighter dependency.
Refine RTA/QAN layout: responsive header tabs, adjusted toolbars, full-height details sheet, and updated icon usage.

Reviewed changes

Copilot reviewed 29 out of 31 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
ui/yarn.lock	Locks `@percona/percona-ui@1.0.23` and dependency graph changes (adds `prism-react-renderer`, removes `react-syntax-highlighter` transitive deps).
ui/apps/pmm/src/types/util.types.ts	Removes `CodeLanguage` type no longer needed after dropping the custom highlighter.
ui/apps/pmm/src/Providers.tsx	Removes global `scrollbarGutter` styling.
ui/apps/pmm/src/pages/updates/change-log/release-notes/ReleaseNotes.tsx	Adjusts markdown rendering so fenced code uses the new CodeBlock component without nested `<pre>`.
ui/apps/pmm/src/pages/updates/change-log/code-block/CodeBlock.tsx	Replaces custom Typography-based block with `@percona/percona-ui` CodeBlock and inline `<code>` handling.
ui/apps/pmm/src/pages/updates/change-log/code-block/CodeBlock.test.tsx	Updates tests to match new inline vs block rendering behavior.
ui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.tsx	Toolbar/layout tweaks and hardcoded 8px rounding pending percona-ui shape tokens.
ui/apps/pmm/src/pages/rta/sessions/RealtimeSessions.tsx	Adjusts page header spacing and consolidates help links into description text flow.
ui/apps/pmm/src/pages/rta/overview/table/query-cell/QueryCell.tsx	Uses `@percona/percona-ui` CodeBlock for overview query snippets and applies a fade mask for clipped text.
ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx	Polishes toolbar alignment, container rounding, and cell padding.
ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx	Makes overview header/actions responsive and adjusts button sizing/variants.
ui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.tsx	Replaces query text highlighting with `@percona/percona-ui` CodeBlock (copy + wrap).
ui/apps/pmm/src/pages/rta/overview/details-pane/DetailsPane.tsx	Redesigns details pane as a full-height sheet; swaps raw data highlighting to percona-ui CodeBlock.
ui/apps/pmm/src/pages/rta/overview/auto-refresh-select/AutoRefreshSelect.tsx	Updates animation and icon styling; passes new `buttonProps` into TextSelect.
ui/apps/pmm/src/pages/rta/components/rta-page/RealtimePage.tsx	Adjusts page padding to match updated layouts.
ui/apps/pmm/src/icons/electric-bolt-off.svg	Updates icon fills to use `currentColor` without opacity.
ui/apps/pmm/src/components/text-select/TextSelect.types.ts	Adds `buttonProps` passthrough for configuring the underlying MUI Button.
ui/apps/pmm/src/components/text-select/TextSelect.tsx	Spreads `buttonProps` onto the Button (enables size/color tuning from callers).
ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.utils.ts	Deletes legacy `react-syntax-highlighter` styling helper.
ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.types.ts	Deletes legacy SyntaxHighlighter prop types.
ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.tsx	Deletes legacy SyntaxHighlighter component (copy button + language registration).
ui/apps/pmm/src/components/syntax-highlighter/index.ts	Removes SyntaxHighlighter export.
ui/apps/pmm/src/components/modal/Modal.tsx	Updates modal rounding to hardcoded 8px pending percona-ui shape tokens.
ui/apps/pmm/src/components/main/header/qan-header/QanHeader.tsx	Reworks QAN header layout for responsive wrapping and shared border behavior.
ui/apps/pmm/src/components/main/header/qan-header/qan-header-tabs/QanHeaderTabs.tsx	Makes tabs scrollable and flex to available space.
ui/apps/pmm/src/components/main/header/qan-header/qan-header-actions/QanHeaderActions.tsx	Prevents action area from shrinking and aligns it consistently.
ui/apps/pmm/src/components/icon/Icon.constants.ts	Adds viewBox mappings for electric-bolt icons.
ui/apps/pmm/src/components/code-block/index.ts	Removes export of the legacy CodeBlock wrapper.
ui/apps/pmm/src/components/code-block/CodeBlock.types.ts	Deletes legacy CodeBlock prop types.
ui/apps/pmm/src/components/code-block/CodeBlock.tsx	Deletes legacy CodeBlock wrapper that depended on SyntaxHighlighter.
ui/apps/pmm/package.json	Bumps `@percona/percona-ui` and removes `react-syntax-highlighter` + types dependency.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

fabio-silva · 2026-07-13T09:40:11Z

@cursoragent fix the comments here

cursor · 2026-07-13T09:40:19Z

Fixed both review comments:

Added position: 'relative' to the raw-data wrapper so the absolute CodeBlock fills only that area.
Moved buttonProps before internally controlled Button props so callers cannot override menu behavior.

Validation:

Ran yarn install --frozen-lockfile
Ran yarn lint in ui/apps/pmm successfully

Committed and pushed:

9b14f7380 PMM-15159 Address RTA code block review comments

PR #5629 was updated.

Co-authored-by: Fábio Silva <fabio-silva@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 29 out of 31 changed files in this pull request and generated 3 comments.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

claude and others added 12 commits July 7, 2026 17:21

Merge remote-tracking branch 'origin/main' into claude/pmm-rta-code-b…

78fdd55

…lock-1u0bvv # Conflicts: # ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.utils.ts

Merge remote-tracking branch 'origin/main' into claude/pmm-rta-code-b…

f2c6891

…lock-1u0bvv

Merge remote-tracking branch 'origin/main' into claude/pmm-rta-code-b…

914cdf5

…lock-1u0bvv

pmcf-percona requested a review from a team as a code owner July 10, 2026 09:50

pmcf-percona requested review from fabio-silva and mattiasimonato and removed request for a team July 10, 2026 09:50

fabio-silva and others added 2 commits July 10, 2026 11:54

Merge branch 'main' into PMM-15159-code-blocks

4d01ebc

Merge branch 'main' into PMM-15159-code-blocks

2c73ef9

pmcf-percona mentioned this pull request Jul 10, 2026

PMM-15159 Use Peak Design's Code Block component for code snippets in RTA Percona-Lab/pmm-submodules#4466

Draft

1 task

Merge branch 'main' into PMM-15159-code-blocks

9b3c510

fabio-silva requested a review from Copilot July 13, 2026 09:32

Copilot started reviewing on behalf of fabio-silva July 13, 2026 09:33 View session

Copilot AI reviewed Jul 13, 2026

View reviewed changes

Comment thread ui/apps/pmm/src/pages/rta/overview/details-pane/DetailsPane.tsx

Comment thread ui/apps/pmm/src/components/text-select/TextSelect.tsx

PMM-15159 Address RTA code block review comments

9b14f73

Co-authored-by: Fábio Silva <fabio-silva@users.noreply.github.com>

fabio-silva requested a review from Copilot July 13, 2026 09:43

Copilot started reviewing on behalf of fabio-silva July 13, 2026 09:44 View session

Copilot AI reviewed Jul 13, 2026

View reviewed changes

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

Comment thread ui/apps/pmm/src/components/text-select/TextSelect.types.ts

Comment thread ui/apps/pmm/src/pages/rta/overview/table/query-cell/QueryCell.tsx

fabio-silva and others added 5 commits July 13, 2026 10:48

fix: permissive regex

7bb644d

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

fix: omit props

186d405

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

fix: mask-repeat strategy

37bb3ed

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

chore: format

7b9240c

fix: formatting

899e358

fabio-silva approved these changes Jul 13, 2026

View reviewed changes

pmcf-percona added 3 commits July 13, 2026 11:33

Merge branch 'main' into PMM-15159-code-blocks

1c9568b

Merge branch 'main' into PMM-15159-code-blocks

5fff248

Merge branch 'main' into PMM-15159-code-blocks

090c50e

mattiasimonato approved these changes Jul 14, 2026

View reviewed changes

pmcf-percona added 9 commits July 14, 2026 11:45

Merge branch 'main' into PMM-15159-code-blocks

1a2dad1

Merge branch 'main' into PMM-15159-code-blocks

64300ce

Merge branch 'main' into PMM-15159-code-blocks

85721ed

Merge branch 'main' into PMM-15159-code-blocks

cfed100

Merge branch 'main' into PMM-15159-code-blocks

d18f1bd

Merge branch 'main' into PMM-15159-code-blocks

2fd52f8

Merge branch 'main' into PMM-15159-code-blocks

5eebae9

Merge branch 'main' into PMM-15159-code-blocks

121aa88

Merge branch 'main' into PMM-15159-code-blocks

b142d48

pmcf-percona merged commit 4d45443 into main Jul 16, 2026
7 checks passed

pmcf-percona deleted the PMM-15159-code-blocks branch July 16, 2026 15:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

PMM-15159 Use Peak Design's Code Block component for code snippets in RTA#5629

PMM-15159 Use Peak Design's Code Block component for code snippets in RTA#5629
pmcf-percona merged 33 commits into
mainfrom
PMM-15159-code-blocks

pmcf-percona commented Jul 10, 2026 •

edited

Loading

Uh oh!

it-percona-cla commented Jul 10, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

fabio-silva commented Jul 13, 2026

Uh oh!

cursor Bot commented Jul 13, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

Uh oh!

Conversation

pmcf-percona commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

it-percona-cla commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

fabio-silva commented Jul 13, 2026

Uh oh!

cursor Bot commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

pmcf-percona commented Jul 10, 2026 •

edited

Loading

it-percona-cla commented Jul 10, 2026 •

edited

Loading

cursor Bot commented Jul 13, 2026 •

edited

Loading