Closed jimmymadon closed 11 months ago
ACs are good, I think this is a good change 👍🏻
Good idea on the change of behaviour for when to disable the "Save" button. Nice work, I think that's gonna be a better user experience 👍🏻
IB ✅
Approving since this is defined as specific to the module settings views, but the same pattern should be applied consistently and currently we're still using the previous pattern in user input (post setup) and dashboard sharing settings. @jimmymadon let's open a new issue to address these additional cases unless it was decided not to for some reason.
Feature Description
If a user modifies settings within a form but then ends up selecting the same settings as when the UI panel / form was initially opened, i.e. the settings have not changed, then the "Confirm Changes" button is disabled. This behaviour can be confusing to the user as explained in this comment.
Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
Implementation Brief
In
assets/js/components/settings/SettingsActiveModule/Footer.js
:Button Text Modification
SpinnerButton
based on the following conditions:Saving…
when theisSaving
flag is set totrue
as it works currently.canSubmitChanges
selector to:Save
when there are no changes in the settings.Apply changes
when changes have been made to the settings.Managing Button's Disabled State
! canSubmitChanges
condition from the disabled prop of theSpinnerButton
component, the button would always remain enabled. This poses an issue for modules like Analytics and Tagmanager, which have a loading state indicated by theProgressBar
component. In this scenario, users could potentially click the "Save" button multiple times concurrently with theProgressBar
being active, leading to unintended behaviors. This change could enable the button even when the component is still fetching or processing data.isLoading
flag to track the loading status of necessary data.getAccounts
andgetMatchedProperties
.getAccounts
selector has completed its resolution.getMatchedProperties
selector has finished resolution.! canSubmitChanges
condition from theSpinnerButton
component'sdisabled
prop.isLoading
flag into thedisabled
property of theSpinnerButton
, ensuring the button remains disabled during data loading.Test Coverage
QA Brief
Initial State Check:
Changing Settings:
Saving State Check:
Loading State Check:
Changelog entry