feat(YDBSyntaxHighlighter): separate component, load languages on demand #2004

artemmufazalov · 2025-03-06T11:57:01Z

Stand: https://nda.ya.ru/t/TMvWvEJo7Cczh9

CI Results

Test Status: ⚠️ FLAKY

Total	Passed	Failed	Flaky	Skipped
264	261	0	2	1

Test Changes Summary ⏭️1

⏭️ Skipped Tests (1)

Streaming query shows some results and banner when stop button is clicked (tenant/queryEditor/queryEditor.test.ts)

Bundle Size: 🔺

Current: 83.30 MB | Main: 80.81 MB
Diff: +2.49 MB (3.08%)

⚠️ Bundle size increased. Please review.

ℹ️ CI Information

Test recordings for failed tests are available in the full report.
Bundle size is measured for the entire 'dist' directory.
📊 indicates links to detailed reports.
🔺 indicates increase, 🔽 decrease, and ✅ no change in bundle size.

artemmufazalov · 2025-03-06T12:34:20Z

src/components/SyntaxHighlighter/YqlHighlighter.tsx

+}
+
+/** SyntaxHighlighter with just YQL for sync load */
+export function YqlHighlighter({children, className}: YqlHighlighterProps) {


Previous YqlHighlighter with little changes to render queries in tables and overview. The reason - we load a lot of other languages in YDBSyntaxHighlighter, so it's loaded with lazy load. However, in tables lazy load works not very good, since there are may loaders and row height changes. So to make it lazy in tables we need first create some loader for queries - it should display query with proper size but without highlight

artemmufazalov · 2025-03-06T16:54:10Z

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx

+    withCopy?: boolean;
+};
+
+export function YDBSyntaxHighlighter({


Named it YDBSyntaxHighlighter to prevent names collision with SyntaxHighlighter

artemmufazalov · 2025-03-06T16:56:14Z

src/components/SyntaxHighlighter/yql.ts


+// eslint-disable-next-line @typescript-eslint/no-explicit-any


I just don't like warnings

There is no proper types for this lib - there are any types in DT

artemmufazalov · 2025-03-06T17:00:33Z

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx

+    transparentBackground?: boolean;
+    withCopy?: boolean;


Added these props to make component customisable

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx

PR Overview

This PR refactors syntax highlighting components to create a separate reusable YDBSyntaxHighlighter and update existing components to use the new highlighter. The changes include:

Introducing new components for syntax highlighting (YDBSyntaxHighlighter, lazy-loaded variant, themes, and types).
Refactoring file imports and selectors to align with the new naming convention.
Removing legacy highlighter components and updating tests and UI components accordingly.

Reviewed Changes

File	Description
src/components/SyntaxHighlighter/YqlHighlighter.tsx	New synchronous highlighter component with updated CSS class names.
src/components/SyntaxHighlighter/types.ts	Added 'yql' to the Language type definition.
src/components/SyntaxHighlighter/i18n/index.ts	New i18n registration for syntax highlighter component.
src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx	Main highlighter component with lazy copy button support and multi-language registration.
src/components/SyntaxHighlighter/shared.ts	Utility file for consistent CSS class name generation.
src/components/SyntaxHighlighter/lazy.ts	Lazy-load helper for the new highlighter component.
src/components/SyntaxHighlighter/themes.ts	Theme definitions and style hooks for syntax highlighter.
src/components/ConnectToDB/ConnectToDBDialog.tsx	Updated to use the lazy-loaded YDBSyntaxHighlighter.
tests/suites/tenant/queryHistory/models/QueriesHistoryTable.ts	Updated CSS selectors to match new highlighter component.
src/containers/Tenant/Info/View/View.ts	Updated import location for YqlHighlighter.
src/components/TruncatedQuery/TruncatedQuery.tsx	Updated import location for YqlHighlighter.
src/containers/Tenant/Diagnostics/Overview/TransferInfo/TransferInfo.tsx	Updated import location for YqlHighlighter.
src/components/SyntaxHighlighter/yql.ts	Removed legacy theme definitions in favor of centralized theming.
src/containers/Tenant/Diagnostics/TopQueries/columns/columns.tsx	Updated import location for YqlHighlighter.
src/components/YqlHighlighter/YqlHighlighter.tsx	Removed legacy YqlHighlighter component.
src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/lazy.ts	Removed legacy lazy loader for ConnectToDB highlighter.
src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/ConnectToDBSyntaxHighlighter.tsx	Removed legacy ConnectToDB syntax highlighter component.

Copilot reviewed 20 out of 20 changed files in this pull request and generated no comments.

Comments suppressed due to low confidence (1)

src/components/SyntaxHighlighter/YqlHighlighter.tsx:15

[nitpick] The component is still named 'YqlHighlighter' while its styling is set with the BEM block 'ydb-syntax-highlighter', which might create confusion with the new YDBSyntaxHighlighter component. Consider renaming the component or adding documentation to clarify its specific role.

export function YqlHighlighter({children, className}: YqlHighlighterProps) {

astandrik

Could you please provide more detailed description of what is to be achieved with these changes?

I suppose that they are for some future changes (db connection highlighting or like that)?
Or the goal is fixing some performance issues?

astandrik · 2025-03-07T06:27:09Z

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx

+ReactSyntaxHighlighter.registerLanguage('javascript', javascript);
+ReactSyntaxHighlighter.registerLanguage('php', php);
+ReactSyntaxHighlighter.registerLanguage('python', python);
+ReactSyntaxHighlighter.registerLanguage('yql', yql);


Maybe its possible to register needed language on demand inside components? Or its library requirement to register on top level?

Updated component, now it registers languages on render

artemmufazalov · 2025-03-10T09:53:34Z

Could you please provide more detailed description of what is to be achieved with these changes?

I suppose that they are for some future changes (db connection highlighting or like that)? Or the goal is fixing some performance issues?

I want to use this component internally (with ydb-embedded-ui as a package), so I made it a components with some customization via props. These changes are not connected with any changes in this package

artemmufazalov · 2025-03-10T10:55:43Z

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx

+    React.useEffect(() => {
+        async function registerLangAndUpdateKey() {
+            await registerLanguage(language);
+            setHighlighterKey(nanoid());


Without component update syntax won't be highlighted

refactor: create separate YDBSyntaxHighlighter component

6ca078b

artemmufazalov force-pushed the refactor-syntax-highlighter branch from f44fbc9 to 6ca078b Compare March 6, 2025 12:28

artemmufazalov commented Mar 6, 2025

View reviewed changes

artemmufazalov requested a review from sareyu March 6, 2025 17:04

artemmufazalov marked this pull request as ready for review March 6, 2025 17:04

astandrik reviewed Mar 7, 2025

View reviewed changes

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx Outdated Show resolved Hide resolved

astandrik requested a review from Copilot March 7, 2025 06:07

Copilot AI reviewed Mar 7, 2025

View reviewed changes

astandrik self-requested a review March 7, 2025 06:20

astandrik requested changes Mar 7, 2025

View reviewed changes

astandrik reviewed Mar 7, 2025

View reviewed changes

artemmufazalov mentioned this pull request Mar 10, 2025

Show hint for overloaded shards #1923

Closed

fix(YDBSyntaxHighlighter): register languages on demand

d8adcdb

artemmufazalov changed the title ~~refactor: create separate YDBSyntaxHighlighter component~~ feat: create separate YDBSyntaxHighlighter component, load languages on demand Mar 10, 2025

artemmufazalov commented Mar 10, 2025

View reviewed changes

artemmufazalov changed the title ~~feat: create separate YDBSyntaxHighlighter component, load languages on demand~~ feat(YDBSyntaxHighlighter): separate component, load languages on demand Mar 10, 2025

artemmufazalov requested a review from astandrik March 10, 2025 10:58

fix tests

8b42084

sareyu approved these changes Mar 10, 2025

View reviewed changes

artemmufazalov enabled auto-merge March 10, 2025 14:50

astandrik removed their request for review March 10, 2025 14:53

astandrik approved these changes Mar 10, 2025

View reviewed changes

artemmufazalov added this pull request to the merge queue Mar 10, 2025

Merged via the queue into main with commit a544def Mar 10, 2025
7 checks passed

artemmufazalov deleted the refactor-syntax-highlighter branch March 10, 2025 14:59

ydb-platform-bot mentioned this pull request Mar 10, 2025

chore(main): release 8.15.0 #2006

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(YDBSyntaxHighlighter): separate component, load languages on demand #2004

feat(YDBSyntaxHighlighter): separate component, load languages on demand #2004

artemmufazalov commented Mar 6, 2025 •

edited by github-actions bot

Loading

artemmufazalov Mar 6, 2025 •

edited

Loading

artemmufazalov Mar 6, 2025

artemmufazalov Mar 6, 2025

artemmufazalov Mar 6, 2025

astandrik left a comment •

edited

Loading

astandrik Mar 7, 2025

artemmufazalov Mar 10, 2025

artemmufazalov commented Mar 10, 2025

artemmufazalov Mar 10, 2025


		// eslint-disable-next-line @typescript-eslint/no-explicit-any

feat(YDBSyntaxHighlighter): separate component, load languages on demand #2004

feat(YDBSyntaxHighlighter): separate component, load languages on demand #2004

Conversation

artemmufazalov commented Mar 6, 2025 • edited by github-actions bot Loading

CI Results

Test Status: ⚠️ FLAKY

⏭️ Skipped Tests (1)

Bundle Size: 🔺

artemmufazalov Mar 6, 2025 • edited Loading

Choose a reason for hiding this comment

artemmufazalov Mar 6, 2025

Choose a reason for hiding this comment

artemmufazalov Mar 6, 2025

Choose a reason for hiding this comment

artemmufazalov Mar 6, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PR Overview

Reviewed Changes

astandrik left a comment • edited Loading

Choose a reason for hiding this comment

astandrik Mar 7, 2025

Choose a reason for hiding this comment

artemmufazalov Mar 10, 2025

Choose a reason for hiding this comment

artemmufazalov commented Mar 10, 2025

artemmufazalov Mar 10, 2025

Choose a reason for hiding this comment

artemmufazalov commented Mar 6, 2025 •

edited by github-actions bot

Loading

artemmufazalov Mar 6, 2025 •

edited

Loading

astandrik left a comment •

edited

Loading