Prevent disabling "Confirm changes" / "Save changes" button when settings are not changed

[jimmymadon]

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

• Under the "Connected Services" tab within Site Kit Settings, when any of the module's settings are edited:
  • The "Confirm Changes" button should be renamed to "Save" and should always be enabled, even if the module's settings within the form that is being edited have changed back to the "original settings".
  • If a module setting has changed, this button should be renamed to "Apply changes" and should be kept enabled as it currently is.

Implementation Brief

In assets/js/components/settings/SettingsActiveModule/Footer.js:

Button Text Modification

• Adjust the text of the SpinnerButton based on the following conditions:
  • Display Saving… when the isSaving flag is set to true as it works currently.
  • Use the canSubmitChanges selector to:
    • Display Save when there are no changes in the settings.
    • Display Apply changes when changes have been made to the settings.

Managing Button's Disabled State

• If we remove the ! canSubmitChanges condition from the disabled prop of the SpinnerButton component, the button would always remain enabled. This poses an issue for modules like Analytics and Tagmanager, which have a loading state indicated by the ProgressBar component. In this scenario, users could potentially click the "Save" button multiple times concurrently with the ProgressBar being active, leading to unintended behaviors. This change could enable the button even when the component is still fetching or processing data.
• To fix this issue, it's essential to ascertain the resolution status of the essential selectors used to set the loading status.
  • Introduce the isLoading flag to track the loading status of necessary data.
  • Determine the resolution state of the selectors related to getAccounts and getMatchedProperties.
  • Specifically:
    • For module slugs 'analytics' OR 'tagmanager', ensure the getAccounts selector has completed its resolution.
    • For the 'search-console' module slug, ascertain that the getMatchedProperties selector has finished resolution.
  • Remove the ! canSubmitChanges condition from the SpinnerButton component's disabled prop.
  • Incorporate the isLoading flag into the disabled property of the SpinnerButton, ensuring the button remains disabled during data loading.

Test Coverage

• Fix any failing tests.
• Update the VRT images if necessary.

QA Brief

1. Initial State Check:

   • Set up Site Kit and navigate to the settings page.
   • Ensure the initial state of the button reads "Save" and isn't disabled.

2. Changing Settings:

   • Modify any settings available on the page.
   • Observe the button text. It should update to "Apply changes".

3. Saving State Check:

   • Click the "Apply changes" or "Save" button.
   • Observe that the button text changes to "Saving…" during the save operation as it works currently.

4. Loading State Check:

   • Refresh the settings page or navigate away and then return.
   • The button should be disabled while the entire settings screen is loading.

Changelog entry

• Allow users to submit/save forms even when no changes have been made.

[tofumatt]

ACs are good, I think this is a good change 👍🏻

[tofumatt]

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 ✅

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified that on initial set up button title is 'Save' button.
• Verified that on changing settings button title gets change to 'Apply Changes'.
• Verified that on clicking 'Apply changes' button text changes to "Saving…" during the save operation as it works currently.
• Verified that button remain disabled while the entire settings screen is loading.

  https://github.com/google/site-kit-wp/assets/94359491/496b4bf0-7b7b-437d-b2aa-624d92cc1d2c https://github.com/google/site-kit-wp/assets/94359491/b80f7a0f-f464-4c07-b20a-8f73af0907e1

[aaemnnosttv]

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.