site-kit-wp: Inconsistent behavior for Apply Changes button in selection panel

Bug Description

Update: This is not a bug but behaviour that is consistent with some other Module Settings forms where the Save action button is disabled if nothing on the form has actually changed, ie. the same settings are being selected or reselected as the settings that were present when opening the settings panel.

Original Description: As reported by @bethanylang in Bug Bash:

The behavior for the selection panel’s Apply Changes button can be inconsistent; even if I have more than two metrics selected, sometimes it does not allow me to apply changes. See video: https://app.screencast.com/jyYWzJUXqQDKs

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• When the Key Metrics selection panel is opened for the first time, the save button text should continue to be “Save selection”.
• When the selection panel is opened again with a set of selected metrics, the save button text should also be “Save selection”. As soon as the user makes any changes to their selection, the save button text should change to “Apply changes”. If the user ends up reselecting the exact same metrics that were selected when the panel was first opened (i.e. the metrics haven’t changed), the button text should again be changed to “Save selection”.
• This save button should not be disabled if the user has not updated the key metrics selection or if the user updated the selection but eventually selected the same key metrics that the panel opened with.

Implementation Brief

Within assets/js/components/KeyMetrics/MetricsSelectionPanel/Footer.js:

• Update the rendered SpinnerButton as follows.
  • Remove the check for haveSettingsChanged from the disabled condition.
  • Update the condition that determines the label (i.e. its children):
    • If there are saved metrics and the settings have changed - i.e., savedMetrics?.length > 0 && haveSettingsChanged, then the label should be Apply changes.
    • Otherwise, it should be Save selection.

Test Coverage

• Update any failing JS/VRT tests.

QA Brief

• Setup analytics
• Enable ga4reporting and userInput feature flags
• Setup suggested key metrics and after saving go back to dashboard
• Click on Change metrics link
• Verify that save button label is Save selection
• Change selection, by unchecking selected values and changing to different options
• Verify that button label is Apply changes
• Select back the options that were originally saved
• Verify that button label is Save selection again
• Verify that button stays disabled while panel is closing, there shouldn’t be any flickering

Changelog entry

• Improve copy in “Change metrics” sidebar panel.