fix(Versions): replace radio with sections

[artemmufazalov]

Closes #2772

• Replaced radio button tabs with sections
• Added link to database Nodes tab
• Expand all button is now for every section, it affects only its section

Stand: https://nda.ya.ru/t/OV4kCgL-7JC3nR

Before:

After:

CI Results

Test Status: ⚠️ FLAKY

📊 Full Report

Total	Passed	Failed	Flaky	Skipped
378	373	0	3	2

Test Changes Summary ⏭️2

⏭️ Skipped Tests (2)

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

Bundle Size: ✅

Current: 85.37 MB | Main: 85.38 MB
Diff: 2.68 KB (-0.00%)

✅ Bundle size unchanged.

ℹ️ 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]

Button has href prop, but href makes page reload. Used button to align with design, but wrapped it with InternalLink to make spa-link

[Raubzeug]

Let's better use onClick property for Button.

button inside a is a bad practice: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element (see [Content model](https://html.spec.whatwg.org/multipage/dom.html#concept-element-content-model) block)

To speed up, let's merge this PR as is and fix in the next.

[artemmufazalov]

bugbot run
/claude_review

[claude]

Claude finished @artemmufazalov's task —— View job

---

Code Review for PR #2773: fix(Versions): replace radio with sections

I've completed my review of the changes in this PR. Here's my analysis:

Review Checklist

• Read repository guidelines (CLAUDE.md)
• Review TypeScript type safety and interfaces
• Check React patterns and Gravity UI usage
• Verify i18n usage for user-facing strings
• Review API call patterns and Redux usage
• Check performance and security aspects
• Provide comprehensive feedback

Summary

The PR successfully replaces radio button tabs with collapsible sections in the Versions page, improving the UI organization and user experience. The implementation is clean and follows project conventions well.

✅ Positive Aspects

1. Clean Refactoring: The removal of the radio button pattern and replacement with sections simplifies the component structure significantly (-175/+106 lines).

2. Proper React Patterns:

   • Good use of useMemo for expensive computations (src/containers/Versions/Versions.tsx:73-81)
   • Proper component composition with VersionsSection

3. i18n Compliance: All user-facing strings use the i18n system correctly (e.g., i18n('title_overall'), i18n('action_expand')).

4. BEM Naming Convention: Proper use of cn() utility with consistent class naming (b = cn('ydb-versions')).

5. Type Safety: Good TypeScript usage with proper interface definitions and type imports.

🔍 Areas for Improvement

1. Performance Optimization Missing (src/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx:40-49):

   const handleClick = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(
       (event) => {
           const shouldSkip = event.nativeEvent.composedPath().some(isActiveButtonTarget);
           if (!shouldSkip) {
               onClick?.();
           }
       },
       [onClick], // ✅ Good - proper dependency
   );

   However, the isActiveButtonTarget function at line 121 should also be wrapped in React.useCallback to avoid recreation on each render.

2. Inline Function in Render (src/containers/Versions/Versions.tsx:139):

   <Button onClick={() => setExpanded((value) => !value)}>

   This should use useCallback for better performance:

   const handleExpandToggle = useCallback(() => {
       setExpanded((value) => !value);
   }, []);

3. InternalLink Wrapper Pattern (src/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx:67-78):
   The author mentioned wrapping Button with InternalLink to avoid page reload. This is a valid approach, but ensure the link is keyboard accessible and follows accessibility best practices.

4. Missing Error Boundaries: Consider adding error boundaries around the sections to gracefully handle potential rendering errors.

📋 Recommendations

1. Memoize Helper Functions: Consider memoizing isActiveButtonTarget and other helper functions that are used in render methods.

2. Section State Persistence: Consider persisting the expanded/collapsed state of sections in URL params or local storage for better UX across page refreshes.

3. Accessibility: Ensure proper ARIA attributes are added to the expandable sections for screen reader users.

4. Testing: Add unit tests for the new VersionsSection component to ensure expand/collapse functionality works correctly.

✅ Security & Best Practices

• No hardcoded secrets or exposed authentication tokens ✓
• No direct API calls (uses RTK Query properly) ✓
• Proper error handling with LoaderWrapper ✓
• No state mutations detected ✓

Conclusion

The PR successfully achieves its goals and follows most project conventions. The code is clean and maintainable. With the minor performance optimizations suggested above, this would be ready for merge.

[astandrik]

bugbot run

[cursor]

✅ Bugbot reviewed your changes and found no bugs!

---

[Raubzeug]

Let's better use onClick property for Button.

button inside a is a bad practice: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element (see [Content model](https://html.spec.whatwg.org/multipage/dom.html#concept-element-content-model) block)

To speed up, let's merge this PR as is and fix in the next.