Migrate to Grid2#188
Conversation
|
Warning Review limit reached
Next review available in: 7 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
📝 WalkthroughWalkthroughMUI ChangesMUI Grid → Grid2 Migration
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
There was a problem hiding this comment.
Pull request overview
This PR migrates multiple UI components/containers from MUI Grid to Grid2 to align with the updated grid API and prop naming (e.g., size, justifyContent) while preserving existing layouts.
Changes:
- Replaced
Gridimports/usages withGrid2 as Gridand updated item sizing fromitem/xstosize. - Updated deprecated layout props (e.g.,
justify→justifyContent) and adjusted some wrappers to ensure full-width grid behavior. - Updated styling selectors to target
MuiGrid2-*classnames and moved some layout styling inline where appropriate.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/containers/ParametersContainer.jsx | Switches dialog layout grids to Grid2 and size props. |
| src/containers/MappingContainer.jsx | Updates grid imports/props for centered controls and tab/header rows. |
| src/components/3-organisms/SetSearch.jsx | Migrates accordion form layout to Grid2 and adjusts wrappers for width/layout. |
| src/components/3-organisms/SetGroupEditor.jsx | Updates editor row layout to Grid2 with size semantics. |
| src/components/3-organisms/SetEditor.jsx | Migrates per-parameter row layout to Grid2 and updated layout props. |
| src/components/3-organisms/RuleStyle.js | Updates style selectors to match Grid2 root classnames. |
| src/components/3-organisms/Rule.jsx | Migrates rule card layout to Grid2, including responsive size objects. |
| src/components/3-organisms/Filter.jsx | Updates filter header/content layout to Grid2 and justifyContent. |
| src/components/3-organisms/AutomatonStyle.js | Updates style selectors to match Grid2 root classnames. |
| src/components/3-organisms/automaton/AutomatonProperties.tsx | Migrates automaton property grid layout to Grid2 and size. |
| src/components/3-organisms/Automaton.jsx | Migrates automaton card layout to Grid2 with responsive sizing. |
| src/components/2-molecules/SetGroupSelect.tsx | Updates selection row layout to Grid2 and size usage. |
| src/components/2-molecules/ModelSelect.jsx | Migrates model selector row to Grid2 with grow/auto sizing. |
| src/components/2-molecules/Header.jsx | Migrates header layout to Grid2 and adjusts width handling. |
| src/components/2-molecules/AttachDialog.jsx | Migrates attach dialog form rows to Grid2 sizing. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Signed-off-by: Thang PHAM <phamthang37@gmail.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/3-organisms/SetEditor.jsx (1)
53-80: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winAdd a stable
keyto each parameter row.
The mappedGridhas no key, so React can reuse the wrong row when this sorted/filtered list changes.definition.namelooks like the natural stable key here.🤖 Prompt for 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. In `@src/components/3-organisms/SetEditor.jsx` around lines 53 - 80, The parameter row rendered in SetEditor’s mapped Grid is missing a stable React key, which can cause incorrect row reuse when the list is sorted or filtered. Add a key to the outer row element in the SetEditor mapping, using the stable identifier already available on each item such as definition.name, so React can track each parameter row correctly.Source: Linters/SAST tools
🤖 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 `@src/components/3-organisms/Automaton.jsx`:
- Around line 55-60: The wrappers in Automaton are using MUI Grid2 as a column
layout, which is not officially supported for this usage. Replace the Grid-based
wrapper(s) in the Automaton component with Stack or another non-Grid layout for
the sections using direction="column", and keep the existing alignment/spacing
behavior intact. Make the same change for the repeated Grid2 wrappers referenced
by the Automaton structure so the layout no longer depends on unsupported Grid2
column direction.
In `@src/components/3-organisms/automaton/AutomatonProperties.tsx`:
- Line 49: The vertical wrapper in AutomatonProperties should not use Grid2 with
direction="column" because it can fall back to row layout; replace the outer
list wrapper and each property block wrapper with Stack so the property rows and
dividers remain vertically stacked. Update the wrappers around the
AutomatonProperties layout and any related property-block container usage to
keep the same spacing/structure while using Stack instead of Grid.
In `@src/components/3-organisms/Filter.jsx`:
- Line 38: The vertical layout in the Filter component is using Grid2 with
direction="column", which is not supported. Replace the wrapper in Filter.jsx
with Stack or Box and keep the same spacing/alignment behavior using the
appropriate layout props. Use the surrounding Filter component structure to
locate the current Grid2 container and update it so the layout relies only on
supported props.
In `@src/components/3-organisms/Rule.jsx`:
- Around line 41-46: The Grid2 containers in Rule.jsx are using column-based
layout props that Grid2 does not support, so these wrappers should be replaced
with a vertical layout component. Update the affected containers in the Rule
component to use Stack or a plain flex column wrapper instead of Grid2 where
direction is set to column or column-reverse, and keep the same child structure
and spacing behavior for the sections around the referenced Grid usages.
---
Outside diff comments:
In `@src/components/3-organisms/SetEditor.jsx`:
- Around line 53-80: The parameter row rendered in SetEditor’s mapped Grid is
missing a stable React key, which can cause incorrect row reuse when the list is
sorted or filtered. Add a key to the outer row element in the SetEditor mapping,
using the stable identifier already available on each item such as
definition.name, so React can track each parameter row correctly.
🪄 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: b6757bf7-3088-4f7f-b1e1-5c04190f633d
📒 Files selected for processing (15)
src/components/2-molecules/AttachDialog.jsxsrc/components/2-molecules/Header.jsxsrc/components/2-molecules/ModelSelect.jsxsrc/components/2-molecules/SetGroupSelect.tsxsrc/components/3-organisms/Automaton.jsxsrc/components/3-organisms/AutomatonStyle.jssrc/components/3-organisms/Filter.jsxsrc/components/3-organisms/Rule.jsxsrc/components/3-organisms/RuleStyle.jssrc/components/3-organisms/SetEditor.jsxsrc/components/3-organisms/SetGroupEditor.jsxsrc/components/3-organisms/SetSearch.jsxsrc/components/3-organisms/automaton/AutomatonProperties.tsxsrc/containers/MappingContainer.jsxsrc/containers/ParametersContainer.jsx
Signed-off-by: Thang PHAM <phamthang37@gmail.com>
|
PR Summary
Using Stack instead of Grid container direction column. However the Stack should be wrapped inside a Grid item if it was inside a Grid container (direction row)