refactor(voltage-level-creation): remove CreateSwitchesDialog and replace it with a simplified inline form (#1101)#1124
Conversation
…eplace it with a simplified inline form (#1101) Signed-off-by: Joris Mancini <joris.mancini_externe@rte-france.com>
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThis PR removes the modal dialog workflow for creating switches between voltage-level sections. The SwitchesBetweenSections component is refactored to render inline EnumInput controls via useFieldArray instead of delegating to a separate dialog. Supporting dialog components and validation utilities are deleted; MAX_SECTIONS_COUNT and translations are added and used to cap section-count validation. ChangesSwitch Creation UI Refactor
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.tsx (1)
22-39:⚠️ Potential issue | 🟠 Major | ⚡ Quick win
SWITCHES_BETWEEN_SECTIONSbecomes stale when users change inlineEnumInputvalues and is not consumed by form submission.
setSwitchesKinds(which syncsSWITCHES_BETWEEN_SECTIONSto a formatted string) is only called when section count changes. When a user selects a different switch type via the inlineEnumInputdropdowns, onlySWITCH_KINDS[i].switchKindupdates in the form—SWITCHES_BETWEEN_SECTIONSremains frozen at its last reset value. Although the field is not currently displayed to users or sent to the backend (onlySWITCH_KINDSis extracted during form submission), it is part of the form schema and watched by this component, creating unnecessary complexity and a potential source of bugs if the field is later repurposed.Remove the
useWatchon line 22–24 and thesetValue(FieldConstants.SWITCHES_BETWEEN_SECTIONS, ...)call insetSwitchesKindsto eliminate the staleness issue and dead code, unless this field is actively displayed or consumed elsewhere.🤖 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/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.tsx` around lines 22 - 39, The watched field watchSwitchesBetweenSections and the redundant write to SWITCHES_BETWEEN_SECTIONS are causing a stale/unused field; remove the useWatch call that defines watchSwitchesBetweenSections and delete the setValue(FieldConstants.SWITCHES_BETWEEN_SECTIONS, ...) line inside setSwitchesKinds so setSwitchesKinds only updates FieldConstants.SWITCH_KINDS (keep intl formatting and the setValue(FieldConstants.SWITCH_KINDS, ...) call), ensuring no other code relies on SWITCHES_BETWEEN_SECTIONS before removing.
🧹 Nitpick comments (1)
src/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.tsx (1)
44-60: ⚡ Quick winThe
switchesBetweenSectionsRefguard inuseEffectis now a no-op.The second condition —
switchesBetweenSectionsRef.current === watchSwitchesBetweenSections— was designed to prevent a reset when the user had just updatedSWITCHES_BETWEEN_SECTIONSvia the dialog. With the dialog gone, nothing updatesSWITCHES_BETWEEN_SECTIONSthrough user interaction, so the refs are always in sync and the condition always evaluates totrue. The guard adds complexity without providing any protection.If the intent after the refactor is simply "reset on section count change," the condition and the related
switchesBetweenSectionsRefref (lines 42, 48, 59) can be removed:♻️ Proposed simplification
const sectionCountRef = useRef<number>(watchSectionCount); - const switchesBetweenSectionsRef = useRef<string>(watchSwitchesBetweenSections); useEffect(() => { - if ( - sectionCountRef.current !== watchSectionCount && - switchesBetweenSectionsRef.current === watchSwitchesBetweenSections - ) { + if (sectionCountRef.current !== watchSectionCount) { const initialKindDisconnector: SwitchKindFormData = { switchKind: SwitchKind.DISCONNECTOR }; let list = []; if (watchSectionCount >= 1) { list = new Array(watchSectionCount - 1).fill(initialKindDisconnector); } const data: CreateSwitchesFormData = { switchKinds: list }; setSwitchesKinds(data); } sectionCountRef.current = watchSectionCount; - switchesBetweenSectionsRef.current = watchSwitchesBetweenSections; - }, [watchSectionCount, watchSwitchesBetweenSections, setSwitchesKinds]); + }, [watchSectionCount, setSwitchesKinds]);🤖 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/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.tsx` around lines 44 - 60, Remove the now-unused guard that compares switchesBetweenSectionsRef.current to watchSwitchesBetweenSections and the switchesBetweenSectionsRef ref itself: inside the useEffect that watches watchSectionCount and watchSwitchesBetweenSections (function containing the section count reset logic), simplify the condition to only check for a section count change (sectionCountRef.current !== watchSectionCount) and always reset switch kinds when that occurs; delete references to switchesBetweenSectionsRef.current and any code that updates switchesBetweenSectionsRef (lines referencing switchesBetweenSectionsRef, the ref declaration, and its assignment), keeping sectionCountRef, watchSectionCount, watchSwitchesBetweenSections, and setSwitchesKinds intact.
🤖 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/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.tsx`:
- Line 20: Replace usages of setValue for the SWITCH_KINDS array with the
replace method returned by useFieldArray: locate the useFieldArray call that
destructures fields as rows and use its replace(fnOrArray) to update the entire
FieldConstants.SWITCH_KINDS array instead of calling setValue; also add an
onChange handler (or watch + effect) tied to the SWITCH_KINDS entries (the
inline EnumInput edits) to recompute and update SWITCHES_BETWEEN_SECTIONS
whenever individual switch kinds change so SWITCHES_BETWEEN_SECTIONS doesn't go
stale after edits.
---
Outside diff comments:
In
`@src/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.tsx`:
- Around line 22-39: The watched field watchSwitchesBetweenSections and the
redundant write to SWITCHES_BETWEEN_SECTIONS are causing a stale/unused field;
remove the useWatch call that defines watchSwitchesBetweenSections and delete
the setValue(FieldConstants.SWITCHES_BETWEEN_SECTIONS, ...) line inside
setSwitchesKinds so setSwitchesKinds only updates FieldConstants.SWITCH_KINDS
(keep intl formatting and the setValue(FieldConstants.SWITCH_KINDS, ...) call),
ensuring no other code relies on SWITCHES_BETWEEN_SECTIONS before removing.
---
Nitpick comments:
In
`@src/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.tsx`:
- Around line 44-60: Remove the now-unused guard that compares
switchesBetweenSectionsRef.current to watchSwitchesBetweenSections and the
switchesBetweenSectionsRef ref itself: inside the useEffect that watches
watchSectionCount and watchSwitchesBetweenSections (function containing the
section count reset logic), simplify the condition to only check for a section
count change (sectionCountRef.current !== watchSectionCount) and always reset
switch kinds when that occurs; delete references to
switchesBetweenSectionsRef.current and any code that updates
switchesBetweenSectionsRef (lines referencing switchesBetweenSectionsRef, the
ref declaration, and its assignment), keeping sectionCountRef,
watchSectionCount, watchSwitchesBetweenSections, and setSwitchesKinds intact.
🪄 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: 6bd2cb98-1d4f-4f76-b89c-613d8c8186ad
📒 Files selected for processing (6)
src/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.tsxsrc/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/creation/CreateSwitchesDialog.tsxsrc/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/creation/CreateSwitchesDialogSubmitButton.tsxsrc/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/creation/CreateSwitchesForm.tsxsrc/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/creation/createSwitchesDialog.utils.tssrc/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/creation/index.ts
💤 Files with no reviewable changes (5)
- src/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/creation/CreateSwitchesDialogSubmitButton.tsx
- src/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/creation/index.ts
- src/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/creation/createSwitchesDialog.utils.ts
- src/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/creation/CreateSwitchesDialog.tsx
- src/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/creation/CreateSwitchesForm.tsx
| const [openCreateSwitchesDialog, setOpenCreateSwitchesDialog] = useState(false); | ||
|
|
||
| const { setValue } = useFormContext(); | ||
| const { fields: rows } = useFieldArray({ name: `${FieldConstants.SWITCH_KINDS}` }); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n src/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.tsx | head -70Repository: gridsuite/commons-ui
Length of output: 3673
🌐 Web query:
React Hook Form useFieldArray replace method documentation
💡 Result:
The replace method from React Hook Form's useFieldArray hook replaces the entire field array with a new array of objects. Its signature is replace(obj: object[]) => void [1][2]. It fully replaces the field array values in one action, useful for loading new initial values or completely resetting the array [1][3][4]. Example usage from the official docs: const { fields, replace } = useFieldArray({ control, name: "test" }); const handleReplace = () => { replace([{ value: 'dolor' }, { value: 'sit' }]); }; This clears existing fields and sets the new array, with each object receiving an auto-generated id for React keys [1][2][5]. Note: Data must be complete objects (not partial), similar to append/prepend/insert/update [1]. The method was added in v7.15.0 via PR #6304 [3].
Citations:
- 1: https://react-hook-form.com/docs/usefieldarray
- 2: https://www.react-hook-form.com/api/usefieldarray/
- 3: [useFieldArray] new method
replace()react-hook-form/react-hook-form#6304 - 4: https://www.linkedin.com/posts/margaiwangara_when-using-usefieldarray-with-react-hook-form-activity-7272313433553829889-e3Lz
- 5: https://github.com/react-hook-form/react-hook-form/blob/master/src/useFieldArray.ts
🏁 Script executed:
rg "SWITCHES_BETWEEN_SECTIONS" --type ts --type tsx -nRepository: gridsuite/commons-ui
Length of output: 92
🏁 Script executed:
cat -n src/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.tsx | sed -n '40,62p'Repository: gridsuite/commons-ui
Length of output: 1320
🏁 Script executed:
rg "SWITCHES_BETWEEN_SECTIONS" -nRepository: gridsuite/commons-ui
Length of output: 1206
🏁 Script executed:
cat -n src/components/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.tsx | sed -n '60,90p'Repository: gridsuite/commons-ui
Length of output: 1286
🏁 Script executed:
rg "EnumInput" --type-list | head -20Repository: gridsuite/commons-ui
Length of output: 454
🏁 Script executed:
fd "EnumInput" --extension ts --extension tsx | head -5Repository: gridsuite/commons-ui
Length of output: 127
🏁 Script executed:
cat -n src/components/network-modifications/voltageLevel/creation/voltageLevel.constants.ts | sed -n '35,45p'Repository: gridsuite/commons-ui
Length of output: 521
🏁 Script executed:
cat -n src/components/inputs/reactHookForm/selectInputs/EnumInput.tsx | head -50Repository: gridsuite/commons-ui
Length of output: 2095
🌐 Web query:
React Hook Form setValue field array deprecation changelog v8
💡 Result:
In React Hook Form versions prior to v8 (current stable is v7.74.0 as of April 2026 [1][2]), using setValue to update an entire field array (e.g., setValue("fieldArray", [{...}, {...}])) is supported but causes the targeted field array fields to unmount and remount [3][4]. The official docs recommend using replace from useFieldArray instead and warn: "update entire field array with setValue will be removed in the next major version" [3]. This warning has appeared in the setValue documentation [3] and aligns with v8 being the next major version. For v8 (currently at beta.1 released Jan 11, 2026 [5], no stable release yet [6][7][1]), this becomes a breaking change: "setValue no longer direct update useFieldArray, instead use replace api" [5][8]. Developers must migrate to useFieldArray's replace method for entire field array updates to avoid unmounting issues and ensure compatibility with v8 [4]. No full v8 changelog for stable exists yet, as it's in beta [9][10]. Recent v7 issues discuss setValue field array bugs [11], but the deprecation path is clear from docs and v8 beta notes [3][5].
Citations:
- 1: https://www.npmjs.com/package/react-hook-form
- 2: https://www.npmjs.com/package/react-hook-form/v/7.48.2
- 3: https://react-hook-form.com/docs/useform/setvalue
- 4: https://react-hook-form.com/docs/usefieldarray
- 5: https://github.com/react-hook-form/react-hook-form/releases/tag/v8.0.0-beta.1
- 6: https://github.com/react-hook-form/react-hook-form/releases
- 7: https://releasealert.dev/github/react-hook-form/react-hook-form
- 8: 🔬 V8 (#12309) react-hook-form/react-hook-form#12333
- 9: https://github.com/react-hook-form/react-hook-form/releases/tag/v8.0.0-beta.0
- 10: https://react.libhunt.com/react-hook-form-latest-version
- 11: issue: field values in useFieldArray does not get updated when using setValue react-hook-form/react-hook-form#13260
Replace setValue on SWITCH_KINDS with useFieldArray's replace method.
React Hook Form v8 (currently in beta) breaks setValue for entire field arrays. The docs explicitly recommend using replace from useFieldArray instead. Additionally, SWITCHES_BETWEEN_SECTIONS becomes stale after inline EnumInput edits since it's only updated when the section count resets, not when users modify individual switch kinds directly.
🔧 Proposed changes
- const { fields: rows } = useFieldArray({ name: `${FieldConstants.SWITCH_KINDS}` });
+ const { fields: rows, replace } = useFieldArray({ name: `${FieldConstants.SWITCH_KINDS}` });- setValue(FieldConstants.SWITCH_KINDS, data[FieldConstants.SWITCH_KINDS]);
+ replace(data[FieldConstants.SWITCH_KINDS]);Consider adding an onChange listener to SWITCH_KINDS to regenerate SWITCHES_BETWEEN_SECTIONS whenever individual switch kinds change, keeping the display consistent.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { fields: rows } = useFieldArray({ name: `${FieldConstants.SWITCH_KINDS}` }); | |
| const { fields: rows, replace } = useFieldArray({ name: `${FieldConstants.SWITCH_KINDS}` }); |
🤖 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/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.tsx`
at line 20, Replace usages of setValue for the SWITCH_KINDS array with the
replace method returned by useFieldArray: locate the useFieldArray call that
destructures fields as rows and use its replace(fnOrArray) to update the entire
FieldConstants.SWITCH_KINDS array instead of calling setValue; also add an
onChange handler (or watch + effect) tied to the SWITCH_KINDS entries (the
inline EnumInput edits) to recompute and update SWITCHES_BETWEEN_SECTIONS
whenever individual switch kinds change so SWITCHES_BETWEEN_SECTIONS doesn't go
stale after edits.
…ops for compatibility with MUI v5 Signed-off-by: Joris Mancini <joris.mancini_externe@rte-france.com>
…anslations Signed-off-by: Joris Mancini <joris.mancini_externe@rte-france.com>
Signed-off-by: Joris Mancini <joris.mancini_externe@rte-france.com>
|
2 participants
PR Summary