Analytics Storybook stories slightly broken

Bug Description

Various Analytics setup Storybook stories (e.g. https://google.github.io/site-kit-wp/storybook/main/?path=/story/analytics-module-setup--start-with-matched-property) have the “Configure Analytics” button disabled when it should actually be enabled given the circumstances / UI displayed.

This may have been introduced by some of the GA4 enhancements, where checking these scenarios might have been missed.

---

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

Acceptance criteria

• The following Storybook stories should have the “Configure Analytics” button enabled as expected:
  • https://google.github.io/site-kit-wp/storybook/main/?path=/story/analytics-module-setup--start-with-matched-property
  • https://google.github.io/site-kit-wp/storybook/main/?path=/story/analytics-module-setup--create-new-view
  • https://google.github.io/site-kit-wp/storybook/main/?path=/story/analytics-module-setup--existing-tag-w-access
  • https://google.github.io/site-kit-wp/storybook/main/?path=/story/analytics-module-setup--no-tag-gtm-property-w-access
  • https://google.github.io/site-kit-wp/storybook/main/?path=/story/analytics-module-setup--existing-tag-w-access-gtm-property-w-access
  • https://google.github.io/site-kit-wp/storybook/main/?path=/story/analytics-module-setup--existing-tag-w-access-gtm-property-w-o-access

Implementation Brief

• In stories/module-analytics-setup.stories.js:
  • Update all stories that use an empty Analytics settings object to use the default settings (fixture.defaultSettings).

    - registry.dispatch( MODULES_ANALYTICS ).receiveGetSettings( {} );
    + registry.dispatch( MODULES_ANALYTICS ).receiveGetSettings( { ...fixtures.defaultSettings } );
    

  • Add default settings for the GA4 module using the ga4Fixtures.defaultSettings fixture to all stories where it is missing.
  • Set an existing tag for the GA4 module to be null in all stories where it is missing.
  • Add properties for the GA4 module using the receiveGetProperties action to all stories where it is missing.
  • Check all stories to make sure the Configure Analytics button is active where it makes sense to be active. If the button is disabled for a story where it should be active, then it means that something is missing in the setup and you need to fix it. You can see what is wrong by adding console.log( error ) call to the catch section of the following try/catch block: https://github.com/google/site-kit-wp/blob/5dcbb1ecd2ae9d0e98cd7552ef38fcf9e22e5a36/assets/js/googlesitekit/data/utils.js#L372-L377

Test Coverage

• N/A

QA Brief

• Check the first five stories as listed in the AC to ensure the Configure Analytics button has been enabled:
  • https://google.github.io/site-kit-wp/storybook/develop/?path=/story/analytics-module-setup--start-with-matched-property
  • https://google.github.io/site-kit-wp/storybook/develop/?path=/story/analytics-module-setup--create-new-view
  • https://google.github.io/site-kit-wp/storybook/develop/?path=/story/analytics-module-setup--existing-tag-w-access
  • https://google.github.io/site-kit-wp/storybook/develop/?path=/story/analytics-module-setup--no-tag-gtm-property-w-access
  • https://google.github.io/site-kit-wp/storybook/develop/?path=/story/analytics-module-setup--existing-tag-w-access-gtm-property-w-access
• However, the final story listed in the AC should now show the following error message, as per these comments on this issue:
  • https://github.com/google/site-kit-wp/issues/3948#issuecomment-990842038
  • https://github.com/google/site-kit-wp/issues/3948#issuecomment-991153421
  • Story: https://google.github.io/site-kit-wp/storybook/develop/?path=/story/analytics-module-setup--existing-tag-w-access-gtm-property-w-o-access
  • Should now show error:

Changelog entry

• Fix bug where error for an Analytics property in Tag Manager without access would not show up.

[felixarntz]

@aaemnnosttv Ahh, yeah that makes sense. I think we should remove this line, I don’t think it should cause any problems and it will actually fix a bug 🎉

@techanvil Per the above, can you make this one production code change to remove https://github.com/google/site-kit-wp/blob/e66e6901ccccb4a2aeba1bb408af3af727969863/assets/js/modules/analytics/components/setup/SetupMain.js#L111? This should make the button no longer relevant for that story, which is the correct behavior. Please verify this in the story for that scenario, which should then not require further adjustments.

I’m also gonna update the changelog here since now this issue fixes a user-relevant bug and not “just” broken Storybook stories.

[aaemnnosttv]

@felixarntz it looks like the ExistingGTMPropertyError is being bypassed here due to the condition requiring no existing tag (not sure why this is here) https://github.com/google/site-kit-wp/blob/e66e6901ccccb4a2aeba1bb408af3af727969863/assets/js/modules/analytics/components/setup/SetupMain.js#L111

In this situation using the current logic, the user should be blocked the same way as if there was an existing tag that they didn’t have permission/access for. Removing the line above fixes this.

It’s also worth noting that right now the ExistingGTMPropertyNotice is not rendered as part of the GA4 and GA4Transitional setup forms. Since the notice is always for non-blocking scenarios I think this may have been removed (or not migrated) by mistake. We don’t catch GA4 tags in GTM yet which is out of scope for this issue but I think the component should be here also.