Add Error Handling to `ModuleRecoveryAlert` and show error message to the user.

Feature Description

Currently, when one or more modules fails to recover for any reason, the backend spits out error(s) but we do not show it anywhere to the user and the failure happens silently. We should add the error message to the UI so users are not confused.

---

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

Acceptance criteria

• In the ModuleRecoveryAlert component, when one or more modules fail to recover the error message(s) should be displayed.
• The message(s) should be displayed above the Recover button as red text using the standard error color, #d53e36.
• When there is only a single module to recover which fails, the message format should be:

  Error: {error message}

• When there are multiple module errors, the message format should be as follows:

  The following modules failed to be recovered:
  • {module name}: {API error message}
  • {module name}: {API error message}

• The errors should be cleared when Recover is pressed again.

Implementation Brief

• Move the <ModuleRecoveryAlert /> component to its own folder (making it easy to create sub-components).
• Create an <Error /> component as a sub-component of <ModuleRecoveryAlert /> which accepts recoverableModules and error as props.
• In the <ModuleRecoveryAlert /> component:
  • Check the response of recoverModules and see if the response object contains an error object.
  • If so, store the error object in a new component state named error.
  • Clear this error state when handleRecoverModules is called (only if it is populated).
  • Only in cases where the current user can recover modules, i.e. the “Recover” button is visible, check if the error state is populated and if so, show the new <Error /> component just before the “Recover” button.
  • Pass the recoverableModules variable as the recoverableModules prop to the <Error /> component.
  • Pass the error state value as the error prop to the <Error /> component.
• In the <Error /> component:
  • Add the necessary JSX and styling to match the format mentioned in the AC.
  • Use the value of the error prop to determine if there is one or multiple errors and use the appropriate format as depicted in the AC.
  • To get the name of the module (it is not mentioned in the error object, only the slug is provided), use the recoverableModules prop object with the provided slug.
  • Make sure the errors are displayed in red text using the standard error color, #d53e36.

Test Coverage

• No tests need to be added/updated.

QA Brief

• Ensure that the dashboardSharing feature flag is enabled in the tester plugin.
• Go to the Site Kit Dashboard.
• Using the Dashboard Sharing settings modal, provide access to the “Administrator” role for all modules.
• With a private browser window, sign in to the site as another admin and authenticate your Google account with Site Kit.
• Disconnect the first admin from Site Kit.
• As the second admin, you should now be able to see the Module Recovery Alert with a list of modules that can be recovered.
• Now we need to simulate an error on recovering the modules. This can be done by turning your Wi-Fi or internet connection off after the Module Recovery Alert has loaded.
• Try to recover one and multiple modules and make sure the errors show up as described in the AC.

Changelog entry

• Update module recovery notification to display feedback for errors.

[nfmohit]

@wpdarren You’re right. After GM2+, the error styles have been updated globally and have been reflected here as well.

[aaemnnosttv]

IB ✅