feat: use react-unipika library #3186

Raubzeug · 2025-12-06T08:41:35Z

closes #1952

CI Results

Test Status: ⚠️ FLAKY

Total	Passed	Failed	Flaky	Skipped
378	374	0	2	2

Test Changes Summary ⏭️2

⏭️ Skipped Tests (2)

Scroll to row, get shareable link, navigate to URL and verify row is scrolled into view (tenant/diagnostics/tabs/queries.test.ts)
Copy result button copies to clipboard (tenant/queryEditor/queryEditor.test.ts)

Bundle Size: 🔺

Current: 62.48 MB | Main: 62.34 MB
Diff: +0.14 MB (0.23%)

⚠️ 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.

Raubzeug · 2025-12-06T08:42:14Z

@greptile-review

Copilot

Pull request overview

This PR migrates from a custom unipika implementation to the @gravity-ui/react-unipika library (v0.5.0), significantly simplifying the codebase by removing ~1000 lines of custom code. The migration affects the JsonViewer component and all its consumers across the application.

Key Changes:

Replaced custom unipika implementation with @gravity-ui/react-unipika library
Refactored JsonViewer component to use ReactUnipika component as wrapper
Added scrollContainerRef prop to JsonViewer and threading it through component hierarchies

Reviewed changes

Copilot reviewed 25 out of 26 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
package.json	Added `@gravity-ui/react-unipika` v0.5.0 dependency
package-lock.json	Lock file update for new dependency
src/components/JsonViewer/JsonViewer.tsx	Major refactor to use ReactUnipika library, simplified from ~370 to ~140 lines
src/components/JsonViewer/JsonViewer.scss	Updated styles to work with library's class names (g-ru-cell)
src/components/JsonViewer/i18n/en.json	Removed unused i18n keys, added new error message key
src/components/JsonViewer/unipika/*	Deleted custom unipika implementation files (~500 lines)
src/components/JsonViewer/components/*	Deleted custom components replaced by library (Cell, ToggleCollapseButton, etc.)
src/components/JsonViewer/utils.ts	Deleted helper utilities no longer needed
src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.tsx	Added scrollRef for JsonViewer integration
src/containers/Tenant/Diagnostics/Describe/Describe.tsx	Passed scrollContainerRef to JsonViewer
src/containers/Tenant/Diagnostics/TopicData/*	Threading scrollContainerRef through TopicData component hierarchy
src/containers/Configs/components/Config/Config.tsx	Added wrapper structure and scrollContainerRef for JsonViewer
src/containers/Configs/components/Config/Config.scss	New styles for Config wrapper container
src/containers/Configs/Configs.scss	Removed unused CSS variable
src/containers/Tenant/Diagnostics/TopicData/FullValue.tsx	Deleted unused component

src/components/JsonViewer/JsonViewer.tsx

src/containers/Tenant/Diagnostics/Describe/Describe.tsx

src/components/JsonViewer/i18n/en.json

src/containers/Configs/components/Config/Config.tsx

src/components/JsonViewer/JsonViewer.tsx

src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.tsx

src/containers/Configs/components/Config/Config.tsx

greptile-apps

_{24 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

src/components/JsonViewer/i18n/en.json

src/components/JsonViewer/JsonViewer.tsx

greptile-apps

_{24 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

src/containers/Tenant/Diagnostics/TopicData/TopicMessageDetails/components/TopicMessage.tsx

greptile-apps

_{24 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2025-12-06T09:09:17Z

src/components/JsonViewer/i18n/en.json

  "description_search": "Search...",
  "description_matched-rows": "Matched rows",
-  "description_full-value": "Full value",
  "context_case-sensitive-search": "Case sensitive search enadled",


syntax: typo: "enadled" should be "enabled"

Suggested change

"context_case-sensitive-search": "Case sensitive search enadled",

"context_case-sensitive-search": "Case sensitive search enabled",

Prompt To Fix With AI

This is a comment left during a code review. Path: src/components/JsonViewer/i18n/en.json Line: 8:8 Comment: **syntax:** typo: "enadled" should be "enabled" ```suggestion "context_case-sensitive-search": "Case sensitive search enabled", ``` How can I resolve this? If you propose a fix, please make it concise.

Copilot

Pull request overview

Copilot reviewed 25 out of 26 changed files in this pull request and generated 3 comments.

Copilot · 2025-12-08T08:30:17Z

src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.tsx

+                    scrollContainerRef={scrollRef} // key is used to reset JsonViewer state to collapsed due to performance issues on close fullscreen mode if nodes quantity is big enough https://github.com/ydb-platform/ydb-embedded-ui/issues/2265
+                    key={String(isFullscreen)}


The comment explaining the key prop is placed on the wrong line. It should be on line 24 (with the key prop) rather than line 23 (with the scrollContainerRef prop).

Suggested change

scrollContainerRef={scrollRef} // key is used to reset JsonViewer state to collapsed due to performance issues on close fullscreen mode if nodes quantity is big enough https://github.com/ydb-platform/ydb-embedded-ui/issues/2265

key={String(isFullscreen)}

scrollContainerRef={scrollRef}

key={String(isFullscreen)} // key is used to reset JsonViewer state to collapsed due to performance issues on close fullscreen mode if nodes quantity is big enough https://github.com/ydb-platform/ydb-embedded-ui/issues/2265

Copilot · 2025-12-08T08:30:17Z

src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx

    database: string;
    databaseFullPath: string;
-    scrollContainerRef: React.RefObject<HTMLElement>;
+    scrollContainerRef: React.RefObject<HTMLDivElement>;


[nitpick] The scrollContainerRef type was changed from React.RefObject<HTMLElement> to React.RefObject<HTMLDivElement>, but this is passed to JsonViewer which expects React.RefObject<HTMLElement>. While HTMLDivElement extends HTMLElement and is technically compatible, this creates an unnecessary type narrowing that could cause issues if the ref is used in other contexts. Consider keeping the more general React.RefObject<HTMLElement> type for consistency with other components.

Suggested change

scrollContainerRef: React.RefObject<HTMLDivElement>;

scrollContainerRef: React.RefObject<HTMLElement>;

Copilot · 2025-12-08T08:30:17Z

src/components/JsonViewer/JsonViewer.tsx

-            {renderToolbar()}
-            {renderTable()}
-            {renderFullValueModal()}
+            {/* @ts-ignore will be fixed shortly in library*/}


The @ts-ignore comment indicates a type issue with the ReactUnipika component. While the comment mentions "will be fixed shortly in library", it would be better to use @ts-expect-error instead of @ts-ignore so that TypeScript will error if the issue is already fixed in the library. Additionally, consider adding a more specific explanation of what type issue is being suppressed.

Suggested change

{/* @ts-ignore will be fixed shortly in library*/}

{/* @ts-expect-error Type mismatch: ReactUnipika props do not match expected types due to library issue. Remove when library is updated. */}

greptile-apps

_{24 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

Copilot AI review requested due to automatic review settings December 6, 2025 08:41

Raubzeug requested review from adameat, artemmufazalov and astandrik as code owners December 6, 2025 08:41

Copilot started reviewing on behalf of Raubzeug December 6, 2025 08:42 View session

feat: use react-unipika library

fb22b0d

Raubzeug force-pushed the react-unipika branch from 8b78d04 to fb22b0d Compare December 6, 2025 08:44

Copilot AI reviewed Dec 6, 2025

View reviewed changes

greptile-apps bot reviewed Dec 6, 2025

View reviewed changes

src/components/JsonViewer/i18n/en.json Outdated Show resolved Hide resolved

src/components/JsonViewer/JsonViewer.tsx Outdated Show resolved Hide resolved

greptile-apps bot reviewed Dec 6, 2025

View reviewed changes

src/containers/Tenant/Diagnostics/TopicData/TopicMessageDetails/components/TopicMessage.tsx Outdated Show resolved Hide resolved

fixes

2830759

Raubzeug force-pushed the react-unipika branch from 7e7fc92 to 2830759 Compare December 6, 2025 09:06

greptile-apps bot reviewed Dec 6, 2025

View reviewed changes

astandrik requested a review from Copilot December 8, 2025 08:24

Copilot started reviewing on behalf of astandrik December 8, 2025 08:25 View session

Copilot AI reviewed Dec 8, 2025

View reviewed changes

artemmufazalov previously approved these changes Dec 8, 2025

View reviewed changes

fix: review

8461e51

Raubzeug dismissed artemmufazalov’s stale review via 8461e51 December 8, 2025 11:07

greptile-apps bot reviewed Dec 8, 2025

View reviewed changes

artemmufazalov approved these changes Dec 8, 2025

View reviewed changes

Raubzeug added this pull request to the merge queue Dec 8, 2025

Merged via the queue into main with commit c8c5241 Dec 8, 2025
9 checks passed

Raubzeug deleted the react-unipika branch December 8, 2025 11:32

ydb-platform-bot mentioned this pull request Dec 8, 2025

chore(main): release 12.26.0 #3182

Merged

	"context_case-sensitive-search": "Case sensitive search enadled",
	"context_case-sensitive-search": "Case sensitive search enabled",

		scrollContainerRef={scrollRef} // key is used to reset JsonViewer state to collapsed due to performance issues on close fullscreen mode if nodes quantity is big enough https://github.com/ydb-platform/ydb-embedded-ui/issues/2265
		key={String(isFullscreen)}

	scrollContainerRef: React.RefObject<HTMLDivElement>;
	scrollContainerRef: React.RefObject<HTMLElement>;

	{/* @ts-ignore will be fixed shortly in library*/}
	{/* @ts-expect-error Type mismatch: ReactUnipika props do not match expected types due to library issue. Remove when library is updated. */}

feat: use react-unipika library #3186

feat: use react-unipika library #3186

Uh oh!

Conversation

Raubzeug commented Dec 6, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CI Results

Test Status: ⚠️ FLAKY

⏭️ Skipped Tests (2)

Bundle Size: 🔺

Uh oh!

Raubzeug commented Dec 6, 2025

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Dec 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Raubzeug commented Dec 6, 2025 •

edited by github-actions bot

Loading