[UI][Admin Portal] Improve validation feedback in Governance Action Dialog#1314
[UI][Admin Portal] Improve validation feedback in Governance Action Dialog#1314Perera1325 wants to merge 1 commit into
Conversation
Perera1325
requested review from
Krishanx92,
lasanthaS,
piyumaldk and
tharikaGitHub
as code owners
WalkthroughA single-file change to ActionConfigDialog.jsx that adds form validation to the save workflow. Introduces an Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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
Adds inline validation feedback to the Admin Portal Governance “Action Configuration” dialog so users understand why “Save” can’t proceed when required fields are missing.
Changes:
- Introduces an
isSubmittedstate flag to drive validation UI after a save attempt. - Marks the “Governed State”
FormControlas error and shows a localizedFormHelperTextwhen missing.
Comments suppressed due to low confidence (1)
portals/admin/src/main/webapp/source/src/app/components/Governance/Policies/ActionConfigDialog.jsx:60
isSubmittedis set to true on a failed save attempt, but it’s never reset when the dialog is closed or reopened (or when switching between create/edit viaeditAction). This can cause the field to render in an error state immediately on the next open. ResetisSubmittedinhandleCloseand/or in an effect keyed onopen/editAction.
const [isSubmitted, setIsSubmitted] = useState(false);
useEffect(() => {
setFormState(editAction || {
governedState: '',
actions: {
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const handleSave = () => { | ||
| onSave(formState); | ||
| handleClose(); // Reset the form after saving | ||
| setIsSubmitted(true); | ||
| if (isValid()) { | ||
| onSave(formState); | ||
| handleClose(); // Reset the form after saving | ||
| } | ||
| }; |
There was a problem hiding this comment.
handleSave sets isSubmitted to true to trigger validation UI, but the Save button is still disabled={!isValid()} (later in this component). When the form is invalid, the button can’t be clicked, so handleSave never runs and the inline error will never appear. Consider keeping Save enabled and gating the actual save inside handleSave, or change the disabled logic so the first click is allowed to set isSubmitted and show errors.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@portals/admin/src/main/webapp/source/src/app/components/Governance/Policies/ActionConfigDialog.jsx`:
- Line 55: The isSubmitted state in ActionConfigDialog.jsx can stay true across
dialog sessions; reset it whenever the dialog closes or is reset by calling
setIsSubmitted(false) in the dialog close/reset flow (e.g., in the onClose
handler and/or the form reset logic) and/or add a useEffect that watches the
dialog open prop to clear isSubmitted when open becomes false or when reopening;
update the functions that reset the form or handle dialog close (the component's
onClose, resetForm, or similar handlers referenced in ActionConfigDialog) to
call setIsSubmitted(false).
- Around line 81-85: The Save button is currently disabled when the form is
invalid so users can never trigger handleSave and setIsSubmitted(true), blocking
inline validation; fix by making the primary Save button enabled (remove or
change the disabled prop that uses isValid()) and ensure handleSave starts with
setIsSubmitted(true) and then returns early if !isValid(), keeping
onSave(formState) and handleClose() only when valid; update references in the
component to handleSave, isValid, isSubmitted and the Save button render so
validation state is exposed on first save attempt.
🪄 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: ff6b7b6a-072c-4fe1-a053-5b75e9a336b2
📒 Files selected for processing (1)
portals/admin/src/main/webapp/source/src/app/components/Governance/Policies/ActionConfigDialog.jsx
| info: CONSTS.GOVERNANCE_ACTIONS.NOTIFY, | ||
| }, | ||
| }); | ||
| const [isSubmitted, setIsSubmitted] = useState(false); |
There was a problem hiding this comment.
Reset isSubmitted when the dialog is closed/reset.
isSubmitted can remain true across opens, causing stale validation UI on subsequent dialog sessions.
💡 Proposed fix
const handleClose = () => {
+ setIsSubmitted(false);
setFormState({
governedState: '',
actions: {
error: CONSTS.GOVERNANCE_ACTIONS.NOTIFY,
warn: CONSTS.GOVERNANCE_ACTIONS.NOTIFY,
info: CONSTS.GOVERNANCE_ACTIONS.NOTIFY,
},
});
onClose();
};
useEffect(() => {
+ setIsSubmitted(false);
setFormState(editAction || {
governedState: '',
actions: {
error: CONSTS.GOVERNANCE_ACTIONS.NOTIFY,
warn: CONSTS.GOVERNANCE_ACTIONS.NOTIFY,
info: CONSTS.GOVERNANCE_ACTIONS.NOTIFY,
},
});
}, [editAction]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@portals/admin/src/main/webapp/source/src/app/components/Governance/Policies/ActionConfigDialog.jsx`
at line 55, The isSubmitted state in ActionConfigDialog.jsx can stay true across
dialog sessions; reset it whenever the dialog closes or is reset by calling
setIsSubmitted(false) in the dialog close/reset flow (e.g., in the onClose
handler and/or the form reset logic) and/or add a useEffect that watches the
dialog open prop to clear isSubmitted when open becomes false or when reopening;
update the functions that reset the form or handle dialog close (the component's
onClose, resetForm, or similar handlers referenced in ActionConfigDialog) to
call setIsSubmitted(false).
| setIsSubmitted(true); | ||
| if (isValid()) { | ||
| onSave(formState); | ||
| handleClose(); // Reset the form after saving | ||
| } |
There was a problem hiding this comment.
Validation feedback path is blocked by the disabled Save button.
isSubmitted is set only in handleSave, but invalid forms cannot call handleSave because Save is disabled (Line 280). This prevents the new inline error state from appearing in the primary invalid path.
💡 Proposed fix
const handleSave = () => {
setIsSubmitted(true);
- if (isValid()) {
- onSave(formState);
- handleClose(); // Reset the form after saving
- }
+ if (!isValid()) {
+ return;
+ }
+ onSave(formState);
+ handleClose(); // Reset the form after saving
};
...
<Button
onClick={handleSave}
variant='contained'
color='primary'
- disabled={!isValid()}
+ disabled={isSubmitted && !isValid()}
size='small'
>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@portals/admin/src/main/webapp/source/src/app/components/Governance/Policies/ActionConfigDialog.jsx`
around lines 81 - 85, The Save button is currently disabled when the form is
invalid so users can never trigger handleSave and setIsSubmitted(true), blocking
inline validation; fix by making the primary Save button enabled (remove or
change the disabled prop that uses isValid()) and ensure handleSave starts with
setIsSubmitted(true) and then returns early if !isValid(), keeping
onSave(formState) and handleClose() only when valid; update references in the
component to handleSave, isValid, isSubmitted and the Save button render so
validation state is exposed on first save attempt.
Problem
In the Admin Portal governance policy configuration, the "Action Configuration" dialog disables the "Save" button when mandatory fields (like "Governed State") are missing, but it fails to provide visual feedback or error messages to the user. This creates a confusing user experience where the user has to guess why they cannot proceed.
Solution
Implemented inline validation feedback for the "Governed State" field:
isSubmittedstate to track when the user first attempts to save.FormControlto display anerrorstate and aFormHelperTextwhen validation fails.FormattedMessagefor localized error messages, adhering to WSO2 standards.Impact
Improves the usability and self-service capability of the Governance features in the Admin Portal by providing immediate, clear feedback during configuration.
Summary by CodeRabbit