Feature Description

The Site Kit Settings -> Connected Services screen displays the module status if a module is connected or prompts to complete setup if the connection is incomplete.

We should add support for custom status, for example, when a module needs attention from the owner.

This is needed at the moment to support for adding a "Action needed" status for the Reader Revenue Manager module.

• Read more in the design doc.

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

Acceptance criteria

• The connection status of a module that appears in Settings -> Connected Services should support any custom component.
• A Storybook story should be added to showcase this customization ability.

Implementation Brief

• In assets/js/googlesitekit/modules/datastore/modules.js:
  • Add a new optional SettingsStatusComponent property to module registration, following the pattern used by SettingsEditComponent and SettingsViewComponent.
• Create assets/js/components/settings/SettingsActiveModule/ModuleStatus.js:
  • It should accept a slug prop.
  • Extract the module status from Header.js and port it to ModuleStatus.

• In assets/js/components/settings/SettingsActiveModule/Header.js:
  • Obtain SettingsStatusComponent from the module data.
  • If SettingsStatusComponent is set, render that replacing moduleStatus and its following connection status icon.
  • If SettingsStatusComponent is not set, render the ModuleStatus component.
• In assets/js/components/settings/SettingsModules.stories.js:
  • In the ConnectedServices variant, create a different state for any two modules:
    • One which is active but not connected, so that it portrays the "Complete setup for {module}" CTA.
    • One with a custom SettingsStatusComponent replacing the module status with a custom component, such as the badge mocked up in the feature description.

Test Coverage

• In assets/js/googlesitekit/modules/datastore/modules.test.js:
  • Add test coverage for SettingsStatusComponent similar to SettingsEditComponent.
• In assets/js/components/settings/SettingsActiveModule/index.test.js:
  • Add a test case validating that a custom module status is displayed when SettingsStatusComponent is used.

QA Brief

• Ensure that the module status ("Connected"/"Complete setup for {module}") appears as expected for all modules without any regressions.
• Go to the Components/SettingsModules/ConnectedServices Storybook story and verify that you can see one connected module (Tag Manager) with a custom status.

Changelog entry

• Add support for custom module connection status in the Settings screen.