React console error appearing on module pages

Bug Description

It looks like this commit exposed an issue: https://github.com/google/site-kit-wp/commit/9baf1d0ba8ed7c4007a3bf29f355661192842d9e

Header now renders on every cycle (which is important), but this means that the ModuleIcon it contains is undefined while the getModuleIcon selector is resolving.

https://github.com/google/site-kit-wp/blob/9fcd85ae5db9313317a6bae808c42df40f8b65a7/assets/js/components/module/ModuleHeader.js#L41

This means that the following error is now appearing in the console on module pages:

react.development.js:167 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `ModuleHeader`.
    in ModuleHeader (created by getModuleHeader)
    in getModuleHeader (created by WidgetContextRenderer)
    in div (created by Cell)
    in Cell (created by WidgetContextRenderer)
    in div (created by Row)
    in Row (created by WidgetContextRenderer)
    in div (created by Grid)
...

It seems like a possible fix might be to default ModuleIcon to Null:

+    import Null from '../../components/Null';
// ...
+    const ModuleIcon = useSelect( ( select ) => select( CORE_MODULES ).getModuleIcon( moduleSlug ) ) || Null;

Note: Care should be taken while addressing this issue to make sure no regressions occur on the page dashboard, since this was the reason for the changes in https://github.com/google/site-kit-wp/commit/9baf1d0ba8ed7c4007a3bf29f355661192842d9e in the first place (see issue https://github.com/google/site-kit-wp/issues/3493).

Steps to reproduce

1. Enable the widgets.moduleScreens feature
2. Browse to a module page, e.g. /wp-admin/admin.php?page=googlesitekit-module-analytics
3. See the error in the console.

Additional Context

• Plugin Version: 1.34.0

---

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

Acceptance criteria

• No React errors or warnings should be displayed when rendering assets/js/components/module/ModuleHeader.js including the following cases:
  • Module does not exist for the given moduleSlug
  • Module has not been fully loaded/resolved yet

Implementation Brief

In assets/js/components/module/ModuleHeader.js,

• Refactor the getModule call so that it returns the whole module object, rather than destructuring name straight away. If the returned module is undefined, return null early. This should catch scenarios where the module doesn’t exist or has not fully loaded yet. If the module is defined, proceed to destructure name as before.
• Conditionally include the ModuleIcon prop if it resolves. Not all modules are required to provide an icon, so one should only be included in the PageHeader if it exists / has loaded. This should fix the console error where React is trying to render an undefined component.

Test Coverage

• None needed

Visual Regression Changes

• VRT images are unlikely to need updating.

QA Brief

Set up

• Enable the widgets.pageDashboard and widgets.moduleScreens features

Console error

• Navigate to a module page, e.g. /admin.php?page=googlesitekit-module-search-console
• Verify that the error no longer appears in the console

Non-existant modules / modules without a ModuleIcon

• Edit ModuleApp.js so that the value of moduleSlug is hard-coded to something that doesn’t exist, e.g. :

function ModuleApp(/* { moduleSlug } */) {	
+  const moduleSlug = 'non-existant';
  // ...

• Visit a module page again and verify that nothing is rendered.
• Now revert your changes and edit ModuleHeader so that ModuleIcon is undefined.
• Visit a module page and verify that it renders correctly without a module icon by the title.

Check page dashboard for regressions

We need to check that there are no regressions for issue https://github.com/google/site-kit-wp/issues/3493

• Visit a working page dashboard and verify there are no regressions.
• Visit a page dashboard for a page that doesn’t exist (e.g. /wp-admin/admin.php?page=googlesitekit-dashboard&permaLink=non-existant) and verify that there are no regressions.

Changelog entry

• Fix a React console error when viewing widget-based module screens.

[aaemnnosttv]

@johnPhillips would you please add a QAB?

[aaemnnosttv]

@johnPhillips it’s more/less the same as unresolved but basically <ModuleHeader moduleSlug="non-existent" />.