refactor(uikit-playground,deps): Update react-split-pane - #41118
Conversation
|
Looks like this PR is not ready to merge, because of the following issues:
Please fix the issues and try again If you have any trouble, please check the PR guidelines |
|
|
/jira ARCH-2167 |
WalkthroughUpgrades Changesreact-split-pane v3 upgrade
Estimated code review effort🎯 2 (Simple) | ⏱️ ~5 minutes Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@apps/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx`:
- Around line 28-29: `SplitPlaneContainer` computes `maxSize` from
`previewSize.inlineSize` in a way that can go negative on the first render
before `useResizeObserver` populates `contentBoxSize`, which creates an invalid
`<Pane>` constraint. Update the `maxSize` calculation in
`SplitPlaneContainer.tsx` to clamp it to a safe non-negative value and ensure it
never falls below `minSize`, keeping the existing `minSize`/`maxSize`
relationship valid even when `previewSize.inlineSize` is undefined or very
small.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 183b53ed-0d62-4477-9c56-c7e8d6b9bf76
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (2)
apps/uikit-playground/package.jsonapps/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
📜 Review details
⏰ Context from checks skipped due to timeout. (5)
- GitHub Check: 📦 Build Packages
- GitHub Check: cubic · AI code reviewer
- GitHub Check: Hacktron Security Check
- GitHub Check: CodeQL-Build
- GitHub Check: CodeQL-Build
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)
**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation
Files:
apps/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
🧠 Learnings (2)
📚 Learning: 2026-03-27T14:52:56.865Z
Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 39892
File: apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx:150-155
Timestamp: 2026-03-27T14:52:56.865Z
Learning: In Rocket.Chat, there are two different `ModalBackdrop` components with different prop APIs. During review, confirm the import source: (1) `rocket.chat/fuselage` `ModalBackdrop` uses `ModalBackdropProps` based on `BoxProps` (so it supports `onClick` and other Box/DOM props) and does not have an `onDismiss` prop; (2) `rocket.chat/ui-client` `ModalBackdrop` uses a narrower props interface like `{ children?: ReactNode; onDismiss?: () => void }` and handles Escape keypress and outside mouse-up, and it does not forward arbitrary DOM props such as `onClick`. Flag mismatched props (e.g., `onDismiss` passed to the fuselage component or `onClick` passed to the ui-client component) and ensure the usage matches the correct component being imported.
Applied to files:
apps/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
📚 Learning: 2026-05-06T12:21:44.083Z
Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 40256
File: apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx:121-149
Timestamp: 2026-05-06T12:21:44.083Z
Learning: Field wrappers in rocket.chat/fuselage-forms (Field, FieldLabel, FieldRow, FieldError, FieldHint) auto-create htmlFor/id associations, aria-describedby, and role="alert" for errors. Do not manually set htmlFor, id, aria-describedby, or role attributes when using these wrappers. This automatic wiring does not apply to plain rocket.chat/fuselage components, which require explicit ID wiring per the accessibility docs. In code reviews, prefer using fuselage-forms wrappers for form fields and verify there is no unnecessary manual ID/aria wiring in files that use these wrappers. If a component uses plain fuselage components, ensure proper id wiring as per docs.
Applied to files:
apps/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
🔇 Additional comments (2)
apps/uikit-playground/package.json (1)
38-38: LGTM!apps/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx (1)
3-3: LGTM!Also applies to: 37-44
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 3 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="apps/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx">
<violation number="1" location="apps/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx:29">
P1: `maxSize` can be smaller than `minSize`, creating invalid pane constraints. This can break SplitPane sizing on initial/compact renders.</violation>
</file>
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
| allowResize: !isTablet, | ||
| }; | ||
| const minSize = 300; | ||
| const maxSize = (previewSize.inlineSize || 1) - 350; |
There was a problem hiding this comment.
P1: maxSize can be smaller than minSize, creating invalid pane constraints. This can break SplitPane sizing on initial/compact renders.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx, line 29:
<comment>`maxSize` can be smaller than `minSize`, creating invalid pane constraints. This can break SplitPane sizing on initial/compact renders.</comment>
<file context>
@@ -25,22 +25,22 @@ const SplitPlaneContainer = ({ previewSize }: SplitPlaneContainerProps) => {
- allowResize: !isTablet,
- };
+ const minSize = 300;
+ const maxSize = (previewSize.inlineSize || 1) - 350;
return isTablet ? (
</file context>
| const maxSize = (previewSize.inlineSize || 1) - 350; | |
| const maxSize = Math.max(minSize, (previewSize.inlineSize ?? 0) - 350); |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #41118 +/- ##
========================================
Coverage 69.84% 69.84%
========================================
Files 3393 3393
Lines 130748 130748
Branches 22776 22788 +12
========================================
Hits 91326 91326
+ Misses 36071 36068 -3
- Partials 3351 3354 +3
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
2 participants
Proposed changes (including videos or screenshots)
It upgrade
react-split-paneto match React version requirement.Issue(s)
Steps to test or reproduce
Further comments
Task: ARCH-2197
Summary by CodeRabbit