site-kit-wp: Adjust verbiage from 'Cancel' to 'Back' where user is presented an expected error message

Bug Description

While testing https://github.com/google/site-kit-wp/issues/433 I noticed during the error flow the verbiage on the lower call to action is labeled ‘Cancel’ although the user’s action was already canceled due to an error.

Steps to reproduce

1. Adjust tag manager permissions after placing snipped on FE
2. Run through Tag Manager service setup

Notice the expected error occurs and the user is presented a cancel button

---

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

Acceptance criteria

• The “Cancel” link in the footer of the module set up wrapper (ModuleSetup) should use alternate text content in the case where the user is blocked from proceeding (such as when there is an existing tag that the user does not have access to)
• In this case, the link should have the text content “Back”
• This should be implemented via a new piece of centralized infrastructure that could be used for every module. However, for now it should only be implemented specifically for the AdSense module, when an ad blocker is active and therefore prevents the setup.

Implementation Brief

• Using assets/js/googlesitekit/data/utils.js,
  • Update createValidationSelector, add a second parameter which is an object with negate : false as default value, which indicates whether to negate the boolean result or not.
    • Instead of returning true or false, return the appopriate boolean value based on negate.
• Using assets/js/googlesitekit/modules/create-module-store.js,
  • Update createModuleStore:
    • to add another key, validateIsSetupBlocked for any options which is a function to validate whether module setup is terminally blocked from continuing.
    • If requiresSetup is true and validateIsSetupBlocked is defined, call createValidationSelector, with negate: true and add the results to the list of selectors. They should be:
      • isSetupBlocked for the safe selector
      • __dangerousIsSetupBlocked for the unsafe one.

• All those changes above can be viewed in the following branch: poc/1045-is-setup-blocked

• Using assets/js/modules/adsense/datastore/base.js,
  • When creating the module store, i.e when calling Modules.createModuleStore, define validateIsSetupBlocked in the options object and using the adsense data store.
    • check if there is an ad blocker active via the isAdBlockerActive selector. If this is the case, throw an error.
• Create assets/js/components/setup/ModuleSetupFooter.js which renders the same markup within googlesitekit-setup__footer in assets/js/components/setup/ModuleSetup.js with the following changes:
  • It accepts the module prop.
  • Use Grid, Row and Cell for the grid layout.
  • Query whether the setup is blocked via the isSetupBlocked selector. The module store name can be obtained via module.storeName and since not all modules have this selector defined, it can be queried as such:

  const isSetupBlocked = useSelect( ( select ) =>
  	select( module.storeName )?.isSetupBlocked?.()
  )
  

  • If the selector returns true, display Back, else display Cancel as it is currently.
• Update assets/js/components/setup/ModuleSetup.js:
  • to use ModuleSetupFooter.
  • to use Grid, Row and Cell for the grid layout.

Test Coverage

• No new tests to be added.

Visual Regression Changes

QA Brief

• Disconnect AdSense module.
• Enable your AdBlocker and proceed to setup AdSense module.
• Instead of displaying “Cancel”, the verbiage should be “Back” when the AdSense AdBlocker error is displayed.
• Disable your AdBlocker, the link should be: “Cancel”

Changelog entry

• Update the cancel button on the module setup form to have a Back label when the setup process can’t proceed.