feat(Versions): redesign #2707

artemmufazalov · 2025-08-14T09:55:58Z

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

CI Results

Test Status: ⚠️ FLAKY

Total	Passed	Failed	Flaky	Skipped
358	352	0	4	2

Test Changes Summary ✨1 ⏭️2 🗑️11

✨ New Tests (1)

Info tab shows healthcheck status (tenant/diagnostics/tabs/info.test.ts)

⏭️ 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)

🗑️ Deleted Tests (11)

off: no Pile Name column and no group-by option (bridge/bridge.test.ts)
on: shows Pile Name column (bridge/bridge.test.ts)
on: shows Pile Name (bridge/bridge.test.ts)
off: hides Pile Name (bridge/bridge.test.ts)
on: shows Pile Name and group-by option (bridge/bridge.test.ts)
off: hides Pile Name and group-by option (bridge/bridge.test.ts)
off: does not show Bridge piles section (bridge/bridge.test.ts)
on: shows Bridge piles section with data (bridge/bridge.test.ts)
Info tab shows healthcheck status when there are issues (tenant/diagnostics/tabs/info.test.ts)
Info tab hides healthcheck status when status is GOOD with no issues (tenant/diagnostics/tabs/info.test.ts)
Info tab shows healthcheck status when status is GOOD but has issues (tenant/diagnostics/tabs/info.test.ts)

Bundle Size: 🔺

Current: 85.36 MB | Main: 85.35 MB
Diff: +0.01 MB (0.01%)

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

Copilot

Pull Request Overview

This PR implements a redesign of the Versions component, improving the user interface and adding new functionality for better version management visualization. The redesign introduces tabbed navigation, better grouping controls, and enhanced visual components.

Key changes:

Refactored version data types from VersionValue to PreparedVersion with enhanced data structure
Added node type filtering with tabbed navigation (Storage, Database, Other nodes)
Replaced tree-based UI with expandable block components for better UX
Enhanced the VersionsBar component with improved sizing and title display options

Reviewed Changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
`src/utils/versions/types.ts`	Removed deprecated `VersionValue` interface
`src/utils/versions/parseNodesToVersionsValues.ts`	Refactored functions to use `PreparedVersion` type and removed value normalization logic
`src/containers/Versions/utils.ts`	Updated hook names and removed total parameter from parsing functions
`src/containers/Versions/types.ts`	Updated interface to use `PreparedVersion` and added `isDatabase` flag
`src/containers/Versions/i18n/en.json`	Added new internationalization keys for redesigned interface
`src/containers/Versions/groupNodes.ts`	Updated to use new type and added `isDatabase` property
`src/containers/Versions/constants.ts`	Added node type constants and titles
`src/containers/Versions/VersionsBlock/`	New expandable block component replacing tree view
`src/containers/Versions/Versions.tsx`	Major redesign with URL parameter management and tabbed navigation
`src/containers/Versions/Versions.scss`	Updated styles for new layout
`src/containers/Versions/NodesTreeTitle/`	Enhanced title component with better icons and layout
`src/containers/Versions/GroupedNodesTree/`	Refactored to use new block component instead of tree view
`src/containers/Cluster/VersionsBar/`	Removed old VersionsBar implementation
`src/components/VersionsBar/`	Enhanced VersionsBar with improved sizing and title options

_{You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.}

src/containers/Versions/Versions.tsx

src/containers/Versions/VersionsBlock/VersionsBlock.tsx

src/containers/Versions/constants.ts

src/components/VersionsBar/VersionsBar.tsx

artemmufazalov · 2025-08-14T10:23:00Z

bugbot run
/claude_review

cursor · 2025-08-14T10:23:02Z

Skipping Bugbot: Unable to authenticate your request. Please make sure Bugbot is properly installed and configured for this repository.

claude · 2025-08-14T10:23:30Z

Claude finished @artemmufazalov's task —— View job

Code Review for feat(Versions): redesign

I've completed my review of this PR that redesigns the Versions component. Here's my comprehensive feedback:

Review Tasks:

Review TypeScript type safety and interface naming conventions
Check React patterns and Gravity UI component usage
Verify Redux Toolkit and RTK Query patterns
Ensure all user-facing text uses i18n
Check API calls go through window.api
Verify BEM naming convention
Look for performance and security issues

✅ Strengths

Excellent i18n implementation: All user-facing text properly uses i18n keys following the naming convention (action_, title_, etc.)
Strong TypeScript usage: Proper use of Zod schemas for URL parameter validation with fallbacks
Good React patterns: Proper use of useMemo and useCallback for performance optimization
BEM naming convention: Consistent use of cn() utility across all components
Gravity UI integration: Proper use of Gravity UI components throughout
URL parameter management: Excellent implementation using use-query-params with Zod validation

🔍 Issues Found

1. Hardcoded String in Select Label

File: src/containers/Versions/Versions.tsx:138

The Select component has a hardcoded label that should use i18n:

label={i18n('group-by')}  // Currently: "Group by:"

The i18n key exists (group-by), but the format should follow the naming convention (e.g., field_group_by or label_group_by).

2. Missing JSDoc Documentation

As noted by Copilot, several interfaces lack JSDoc documentation:

VersionsBlockProps in src/containers/Versions/VersionsBlock/VersionsBlock.tsx:10
NODE_TYPES constant in src/containers/Versions/constants.ts:9
VersionTitleProps in src/components/VersionsBar/VersionsBar.tsx:163
VersionCircleProps in src/components/VersionsBar/VersionsBar.tsx:202

3. Type Naming Convention

The types follow the project convention correctly - API types use 'T' prefix (e.g., TClusterInfo), while internal types don't (e.g., PreparedVersion). ✅

📊 Performance Considerations

Good use of React.memo: The code properly uses useMemo for:
- Filtering nodes by type (tenantNodes, storageNodes, otherNodes)
- Computing displayed versions
- Debounced hover handlers
Potential improvement: Consider memoizing the render functions in Versions.tsx (e.g., renderStorageNodes, renderDatabaseNodes) if they become performance bottlenecks with large datasets.

🔒 Security & Best Practices

No security issues found: No hardcoded secrets, proper data handling
Error handling: Component handles undefined/null data gracefully
API calls: Correctly uses RTK Query hooks (no direct API calls found)

💡 Suggestions

Consider extracting magic numbers in VersionsBar.tsx:
```
const TRUNCATION_THRESHOLD = 4;
const MAX_DISPLAYED_VERSIONS = TRUNCATION_THRESHOLD - 1;
```
These could be made configurable props if different views need different thresholds.
Bundle size increase: The PR increases bundle size by ~10KB. While not critical, consider if any dependencies can be optimized or if code splitting could help.

Conclusion

This is a well-implemented redesign that follows the project's coding standards and best practices. The main issue is the i18n key naming convention for the "Group by" label. The missing JSDoc comments are minor but would improve code documentation.

The redesign improves UX with better visualization through the enhanced VersionsBar, cleaner organization with tabbed navigation, and maintains good performance characteristics.

astandrik · 2025-08-15T13:07:54Z

bugbot run

cursor

✅ Bugbot reviewed your changes and found no bugs!

astandrik

Some minor issues, but generally approve

astandrik · 2025-08-15T13:09:13Z

src/components/VersionsBar/VersionsBar.tsx

+                            size={size}
+                        />
+                    ))}
+                    <Flex>{renderButton()}</Flex>


renderButton renders one element - why do we need Flex here?

It's needed to limit button width. Replaced it with css width: max-content

astandrik · 2025-08-15T13:10:14Z

src/components/VersionsBar/VersionsBar.tsx

+    count?: number;
+    isDimmed: boolean;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;


VoidFunction type

astandrik · 2025-08-15T13:12:30Z

src/containers/Versions/GroupedNodesTree/GroupedNodesTree.tsx


    React.useEffect(() => {
-        toggleBlock(expanded);
+        setIsOpened(expanded);


whats the difference between isOpened and expanded here?

Maybe better to pass setExpanded from props and remove local state and useEffect

expanded here is external state, it is applied to all blocks, it is changed when I click "Expand all" or "Collapse all"

isOpened - state of the specific block, I change it by clicking on header, state of other blocks is not changed

feat(Versions): redesign

698a376

artemmufazalov force-pushed the 2477-rework-versions branch from 2add476 to 698a376 Compare August 14, 2025 10:11

artemmufazalov requested a review from Copilot August 14, 2025 10:11

Copilot AI reviewed Aug 14, 2025

View reviewed changes

fix: copilot review

4a11936

artemmufazalov marked this pull request as ready for review August 14, 2025 10:37

artemmufazalov requested review from astandrik, Raubzeug and adameat as code owners August 14, 2025 10:37

cursor bot reviewed Aug 15, 2025

View reviewed changes

astandrik previously approved these changes Aug 15, 2025

View reviewed changes

fix: review

2302736

artemmufazalov dismissed astandrik’s stale review via 2302736 August 15, 2025 13:40

artemmufazalov requested a review from astandrik August 15, 2025 13:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(Versions): redesign #2707

feat(Versions): redesign #2707

Uh oh!

artemmufazalov commented Aug 14, 2025 •

edited by github-actions bot

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

artemmufazalov commented Aug 14, 2025

Uh oh!

cursor bot commented Aug 14, 2025

Uh oh!

claude bot commented Aug 14, 2025 •

edited

Loading

Uh oh!

astandrik commented Aug 15, 2025

Uh oh!

cursor bot left a comment

Uh oh!

astandrik left a comment

Uh oh!

astandrik Aug 15, 2025

Uh oh!

artemmufazalov Aug 15, 2025

Uh oh!

astandrik Aug 15, 2025

Uh oh!

astandrik Aug 15, 2025

Uh oh!

artemmufazalov Aug 15, 2025

Uh oh!

Uh oh!

feat(Versions): redesign #2707

Are you sure you want to change the base?

feat(Versions): redesign #2707

Uh oh!

Conversation

artemmufazalov commented Aug 14, 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

✨ New Tests (1)

⏭️ Skipped Tests (2)

🗑️ Deleted Tests (11)

Bundle Size: 🔺

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!

artemmufazalov commented Aug 14, 2025

Uh oh!

cursor bot commented Aug 14, 2025

Uh oh!

claude bot commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review for feat(Versions): redesign

Review Tasks:

✅ Strengths

🔍 Issues Found

1. Hardcoded String in Select Label

2. Missing JSDoc Documentation

3. Type Naming Convention

📊 Performance Considerations

🔒 Security & Best Practices

💡 Suggestions

Conclusion

Uh oh!

astandrik commented Aug 15, 2025

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

✅ Bugbot reviewed your changes and found no bugs!

Uh oh!

astandrik left a comment

Choose a reason for hiding this comment

Uh oh!

astandrik Aug 15, 2025

Choose a reason for hiding this comment

Uh oh!

artemmufazalov Aug 15, 2025

Choose a reason for hiding this comment

Uh oh!

astandrik Aug 15, 2025

Choose a reason for hiding this comment

Uh oh!

astandrik Aug 15, 2025

Choose a reason for hiding this comment

Uh oh!

artemmufazalov Aug 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

artemmufazalov commented Aug 14, 2025 •

edited by github-actions bot

Loading

claude bot commented Aug 14, 2025 •

edited

Loading