Skip to content

[UI][Admin Portal] Improve validation feedback in Governance Action Dialog #1314

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Perera1325 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[UI][Admin Portal] Improve validation feedback in Governance Action Dialog #1314

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 20 additions & 3 deletions ...dmin/src/main/webapp/source/src/app/components/Governance/Policies/ActionConfigDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import {
Radio,
Grid,
Alert,
FormHelperText,
} from '@mui/material';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import { FormattedMessage, useIntl } from 'react-intl';
Expand All @@ -51,6 +52,7 @@ export default function ActionConfigDialog({
info: CONSTS.GOVERNANCE_ACTIONS.NOTIFY,
},
});
const [isSubmitted, setIsSubmitted] = useState(false);

@coderabbitai coderabbitai Bot Apr 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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).


useEffect(() => {
setFormState(editAction || {
Expand All @@ -76,8 +78,11 @@ export default function ActionConfigDialog({
};

const handleSave = () => {
onSave(formState);
handleClose(); // Reset the form after saving
setIsSubmitted(true);
if (isValid()) {
onSave(formState);
handleClose(); // Reset the form after saving
}
Comment on lines +81 to +85

@coderabbitai coderabbitai Bot Apr 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

};
Comment on lines 80 to 86

Copilot AI Apr 11, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.

const isValid = () => {
Expand All @@ -101,7 +106,11 @@ export default function ActionConfigDialog({
</DialogTitle>
<DialogContent sx={{ p: 3 }}>
<Box mb={3} mt={1}>
<FormControl fullWidth size='small'>
<FormControl
fullWidth
size='small'
error={isSubmitted && !formState.governedState}
>
<InputLabel>
<FormattedMessage
id='Governance.Policies.AddEdit.enforcement.state.label'
Expand Down Expand Up @@ -148,6 +157,14 @@ export default function ActionConfigDialog({
</MenuItem>
))}
</Select>
{isSubmitted && !formState.governedState && (
<FormHelperText>
<FormattedMessage
id='Governance.Policies.AddEdit.enforcement.state.required'
defaultMessage='This field is required'
/>
</FormHelperText>
)}
</FormControl>
</Box>

Expand Down
Loading