You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by "vanshaj2023 (via GitHub)" <gi...@apache.org> on 2026/03/13 09:26:38 UTC
[I] fix(ux): unsaved plugin config changes are silently discarded when closing the editor drawer [apisix-dashboard]
vanshaj2023 opened a new issue, #3326:
URL: https://github.com/apache/apisix-dashboard/issues/3326
### Issue description
## Description
When a user edits a plugin configuration in the Plugin Editor Drawer and closes
it without saving, all changes are silently lost with no warning or confirmation
dialog. This is a poor UX experience and can lead to accidental data loss.
## Location
`src/components/form-slice/FormItemPlugins/PluginEditorDrawer.tsx`, line 49–52
## Current Behavior
```tsx
const handleClose = () => {
onClose();
methods.reset(); // silently discards all unsaved edits
};
### Expected behavior
## Expected Behavior
If the user has made changes to the plugin config (dirty state), a confirmation
dialog should appear asking:
"You have unsaved changes. Are you sure you want to close?"
If no changes were made, the drawer should close normally without any prompt.
### How to Reproduce
## Steps to Reproduce
1. Open the dashboard and navigate to any page that supports plugins (e.g., Routes)
2. Open an existing route and click the edit plugin button on any configured plugin
3. Modify the plugin configuration in the editor
4. Click the close/X button on the drawer without saving
5. Reopen the plugin editor — all changes are lost with no warning shown
### Screenshots
_No response_
### Environment
- apisix version (cmd: `apisix version`):
- OS (cmd: `uname -a`):
- OpenResty / Nginx version (cmd: `nginx -V` or `openresty -V`):
- etcd version, if have (cmd: run `etcd --version`):
- apisix-dashboard version, if have:
- Browser version, if have:
### Additional context
_No response_
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] fix(ux): unsaved plugin config changes are silently discarded when closing the editor drawer [apisix-dashboard]
Posted by "moonming (via GitHub)" <gi...@apache.org>.
moonming closed issue #3326: fix(ux): unsaved plugin config changes are silently discarded when closing the editor drawer
URL: https://github.com/apache/apisix-dashboard/issues/3326
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] fix(ux): unsaved plugin config changes are silently discarded when closing the editor drawer [apisix-dashboard]
Posted by "vanshaj2023 (via GitHub)" <gi...@apache.org>.
vanshaj2023 commented on issue #3326:
URL: https://github.com/apache/apisix-dashboard/issues/3326#issuecomment-4053840882
Hi @Baoyuantop ,
I'm thinking of fixing this by checking `methods.formState.isDirty` before closing, if the form is dirty, show a confirmation dialog using Mantine's `modals.openConfirmModal`.
Does this approach sound good to you?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] fix(ux): unsaved plugin config changes are silently discarded when closing the editor drawer [apisix-dashboard]
Posted by "Baoyuantop (via GitHub)" <gi...@apache.org>.
Baoyuantop commented on issue #3326:
URL: https://github.com/apache/apisix-dashboard/issues/3326#issuecomment-4066702041
Thanks for raising this @vanshaj2023.
This is more of a UX enhancement than a bug — closing without saving is a common default behavior in editor/form UIs. Re-labeling accordingly.
That said, the direction you mentioned (dirty check + confirm modal) is reasonable. Before starting a PR, could you put together a more concrete technical proposal? A few things to address:
1. **`isDirty` reliability** — The plugin editor uses `setValue` in a `useEffect` to sync the config prop. You'll need to verify that `formState.isDirty` accurately reflects *user* edits after that sync. If it doesn't, a fallback like comparing `getValues("config")` against the original prop value may be needed.
2. **Scope** — Should only apply when `mode` is `add` or `edit` (not `view`).
3. **i18n** — New translation keys are needed for all supported languages (en, zh, de, es, tr).
Once you have a concrete plan, feel free to open a PR.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] fix(ux): unsaved plugin config changes are silently discarded when closing the editor drawer [apisix-dashboard]
Posted by "vanshaj2023 (via GitHub)" <gi...@apache.org>.
vanshaj2023 commented on issue #3326:
URL: https://github.com/apache/apisix-dashboard/issues/3326#issuecomment-4069717725
Hi @Baoyuantop,
I'd like to work on this!
One thing worth noting: `isDirty` won't work reliably here since `useEffect` calls `setValue` (not `reset`), marking the form dirty before the user touches anything. A direct comparison is safer:
```ts
methods.getValues('config') !== toConfigStr(config)
```
I'll use the existing `modals.openConfirmModal` pattern from `DeleteResourceBtn.tsx`, guard it to add/edit modes only, and add `info.unsaved.*` i18n keys across all 5 locales.
Can I go ahead and open a PR?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] fix(ux): unsaved plugin config changes are silently discarded when closing the editor drawer [apisix-dashboard]
Posted by "Baoyuantop (via GitHub)" <gi...@apache.org>.
Baoyuantop commented on issue #3326:
URL: https://github.com/apache/apisix-dashboard/issues/3326#issuecomment-4071959521
> methods.getValues('config') !== toConfigStr(config)
This comparison method seems more reasonable.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] fix(ux): unsaved plugin config changes are silently discarded when closing the editor drawer [apisix-dashboard]
Posted by "Mayankaggarwal8055 (via GitHub)" <gi...@apache.org>.
Mayankaggarwal8055 commented on issue #3326:
URL: https://github.com/apache/apisix-dashboard/issues/3326#issuecomment-4068641971
Hi @Baoyuantop, thanks for the clarification.
I took a look at your points, and this is the approach I’m planning to follow:
Unsaved changes detection
I’ll first check whether methods.formState.isDirty works reliably after the current setValue inside the useEffect that syncs the config prop. If it correctly reflects only user-made changes, I’ll use that directly.
If it turns out not to be reliable because of the sync logic, then I’ll fall back to comparing the current form value (for example getValues("config")) with the original config value that was synced into the form.
Scope
I’ll keep this behavior limited to add and edit modes only.
In view mode, the drawer should continue closing normally without any confirmation.
Closing flow
When the user tries to close the drawer:
if there are no unsaved changes, it will close normally
if there are unsaved changes, a confirmation modal will be shown
On confirm, the drawer will close and the form will reset.
On cancel, the drawer will remain open.
i18n
I’ll add the required translation keys for all supported languages mentioned:
en, zh, de, es, and tr.
Implementation
The main changes should be in src/components/form-slice/FormItemPlugins/PluginEditorDrawer.tsx. I’ll also check whether there’s already an existing pattern for unsaved-changes confirmation elsewhere in the dashboard and reuse it if appropriate.
If this sounds good, I’ll move ahead with the implementation and open a PR.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org