Implement the zero data state of an Audience Tile

[techanvil]

Feature Description

Implement the zero data state of an audience. This includes the “temporarily hide” behavior.

See audience tiles > zero data in the design doc.

---

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

Acceptance criteria

• Given that a selected audience is in the "partial data" state, and it has zero data for the current date range:
  • Its Audience Tile should be displayed in the "zero data" variant.
  • It should be implemented as per the Figma design.
  • If there is only one audience in the audience selection, the copy for the descriptive text should be:
    • Site Kit is collecting data for this group
  • If there are multiple audiences in the audience selection:
    • The copy for the descriptive text should be:
      • Site Kit is collecting data for this group. You can hide this group until data is available.
    • The tile should have a Temporarily hide CTA.
    • Clicking on Temporarily hide will hide the tile, until the audience is determined to be in a non-zero data state on a subsequent page load.

Implementation Brief

• [ ] Update AudienceTileNoData component inside assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTile

  • [ ] This should accept an additional prop displayHideCTA which should be boolean.
  • [ ] If displayHideCTA is true, it should display Temporarily hide CTA.
    • [ ] Clicking the Temporarily hide CTA should dispatch an action to dismiss the item with item name as audience_tile_${audienceResourceName} as slug and 0 as the expiration. audienceResourceName should be normalised with underscrores by replacing / with _. This may need an utility function like hyphenCaseToPascalCase here -[ ] Action to dismiss the action can be dispatch with dismissItem selector in user data store.
  • [ ] AudienceTileNoData should display the the svg icon for no data as per the figma design.
  • Also display the text as mentioned in AC according to the value of displayHideCTA prop.

• [ ] In AudienceTiles component inside assets/js/modules/analytics-4/components/audience-segmentation/dashboard/, before rendering the AudienceTile component.

  • [ ] Get the report for all audiences in configuredAudiences using the getReportForAllAudiences selector of analytics-4 module.
  • [ ] Check if the audience is in the partial state using the isResourcePartialData selector of analytics-4 module.
  • [ ] If the given audience is in partial data state and it has zero data (using hasZeroData selector), render the AudienceTileNoData component instead of AudienceTile component. Before rendering the AudienceTileNoData, also check if the tile has been dismissed with Temporarily hide CTA.
    • [ ] Pass displayHideCTA prop as true if the above condition is met and length of configuredAudiences is more than 1.
    • [ ] Pass displayHideCTA prop as false if the above condition is met, but length of configuredAudiences is only 1.

Test Coverage

1. Remove the AudienceTileNoData test from AudienceTile story as AudienceTileNoData will never be rendered from within the AudienceTile component.
2. Update the storybook test for AudienceTiles component where one of the component should return the zero data for one of the audience.
3. Add the story where there's only one audience so that it should not render "Temorarily hide" CTA.

QA Brief

Changelog entry