[#48799] - [6.3] Add confirmation when navigating away with unsaved component configuration changes
- Pending
- Medium
- Build: 6.3-dev
- # 48799
- Diff
- brianteeman:config_save
User tests: Successful: Unsuccessful:
Pull Request resolves #31495 #23783
- I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.
Summary of Changes
When editing a component's configuration or global configuration in the administrator, navigating to another component using the sidebar would discard any unsaved changes without warning.
This PR adds a confirmation dialog when a user attempts to navigate away from the component or global configuration page with unsaved changes.
The dialog gives the user the choice to stay on the current page or discard their changes and continue navigating.
The implementation detects changes to the form values and only displays the warning when changes have actually been made. Normal navigation, including opening links in a new tab, continues to work as expected.
Testing Instructions
This PR has js changes so you will need to either use a prebuit package or npm i
Go to any component options and make a change and then select another component options from the sidebar menu
AND
Go to global configuration and make a change and then select another component options from the sidebar menu
Confirm that navigating away without making changes does not display a warning.
Confirm that navigating away after changing configuration displays the confirmation dialog.
Confirm that cancelling the dialog keeps the user on the current page with their changes intact.
Confirm that accepting the dialog discards the changes and navigates to the selected component.
Actual result BEFORE applying this Pull Request
Navigating to another component's configuration using the administrator sidebar silently discarded any unsaved changes.
Expected result AFTER applying this Pull Request
When unsaved changes are detected, a confirmation dialog is displayed before navigating away. The user can choose to stay on the current page or discard their changes and continue.
No confirmation is displayed when there are no unsaved changes.
Link to documentations
Please select:
-
Documentation link for guide.joomla.org:
-
No documentation changes for guide.joomla.org needed
-
Pull Request link for manual.joomla.org:
-
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Administration com_config Language & Strings NPM Change JavaScript |
| Labels |
Added:
Language Change
NPM Resource Changed
PR-6.3-dev
|
||
I have tested this item ✅ successfully on 96aa5d2
I have successfully tested this during/after Nov. 6th Happy PR Testing Friday.
Thank you @brianteeman.
This may be out of scope but thinking through the use of this cool enhancement, I'd want a Save button on that modal/window.
Warning
You have made changes that have not been saved. If you continue, your changes will be lost.
Proceed / Save / Cancel
(this would save a user from having to Cancel, and then Save or Cancel and Save/Close)
Just an idea...
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48799.
I have tested this item ✅ successfully on 96aa5d2
I have successfully tested this during/after Nov. 6th Happy PR Testing Friday.
Thank you @brianteeman.
This may be out of scope but thinking through the use of this cool enhancement, I'd want a Save button on that modal/window.
Warning
You have made changes that have not been saved. If you continue, your changes will be lost.
Proceed / Save / Cancel
(this would save a user from having to Cancel, and then Save or Cancel and Save/Close)
Just an idea...
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48799.
Yes that's out of scope
Hmhm, that I bit to much of AI 😄
In Joomla we have submitTask() callback for every button, we could check the form state there.
For the warning popup we can use already existing API https://manual.joomla.org/docs/next/general-concepts/javascript/js-library/joomla-dialog/#alert-and-confirm-usage
I will look later in more details.
I doubt submit.tadk will help as you're not pressing a button.
This is a very old bug that several people tried and failed to fix in the past
Also true.
richard67
-
@brianteeman please check brianteeman#934
Please see the sonarcube quality report in your pull request
Good catch on adding it to the global and not just the components
Please see the sonarcube quality report in your pull request
I seen, and I do not agree with them 😉
Please see the sonarcube quality report in your pull request
I seen, and I do not agree with them 😉
I mean, there no need to await as they wrote "must await", there no point in it.
And other stuff just about way how to code, nothing realy important.
Hm, or maybe I will change that
There are accessibility issues with your code - please review the explanation
I have updated the code here preserves the existing dialog implementation and makes the same script work with both forms. I dont see any reason to change the js to popup - remember joomla-dialog is relatively new so its not used in as many places as it should be
I have tested this item 🔴 unsuccessfully on 05afd61
The sidebar guard works as described (no change → navigates, change → dialog, Cancel/Escape keep the value, Proceed discards, Ctrl/Cmd-click opens a new tab, no false warning on any of the 26 component option pages). One problem:
Permission changes trigger the warning although they are already saved. The jform[rules] selects are in the FormData snapshot, but every change is stored immediately via AJAX. Articles › Options › Permissions, change one setting, click Contacts → "your changes will be lost", while the rule is already in #__assets. Leaving the rules out of the snapshot fixes it (tested):
return JSON.stringify(Array.from(data.entries()).filter(([key]) => !key.startsWith('jform[rules]')));For the same reason this doesn't resolve #23783 (permissions are still saved immediately).
Minor:
- After a failed save (e.g. Smart Search › Image Class =
1 bad<>→ "Invalid field") the form shows the unsaved values, they become the initial state, and the sidebar leaves without a warning. - The dialog is only closed, never destroyed: cancelling 3 times leaves 3
joomla-dialogelements in the DOM.destroy()andJoomla.Modal.setCurrent(null)in the close handler (as inJoomlaDialog.confirm()) fix that.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48799.
I have tested this item 🔴 unsuccessfully on 05afd61
The sidebar guard works as described (no change → navigates, change → dialog, Cancel/Escape keep the value, Proceed discards, Ctrl/Cmd-click opens a new tab, no false warning on any of the 26 component option pages). One problem:
Permission changes trigger the warning although they are already saved. The jform[rules] selects are in the FormData snapshot, but every change is stored immediately via AJAX. Articles › Options › Permissions, change one setting, click Contacts → "your changes will be lost", while the rule is already in #__assets. Leaving the rules out of the snapshot fixes it (tested):
return JSON.stringify(Array.from(data.entries()).filter(([key]) => !key.startsWith('jform[rules]')));For the same reason this doesn't resolve #23783 (permissions are still saved immediately).
Minor:
- After a failed save (e.g. Smart Search › Image Class =
1 bad<>→ "Invalid field") the form shows the unsaved values, they become the initial state, and the sidebar leaves without a warning. - The dialog is only closed, never destroyed: cancelling 3 times leaves 3
joomla-dialogelements in the DOM.destroy()andJoomla.Modal.setCurrent(null)in the close handler (as inJoomlaDialog.confirm()) fix that.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48799.
@Fedik your review of the js would be greatly appreciated