Add "temporarily hidden" badge to hidden audiences in the Selection Panel

[techanvil]

Feature Description

When an Audience Tile has been temporarily hidden, we should show a badge to clarify its status in the Selection Panel.

---

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

Acceptance criteria

• When an Audience Tile has been temporarily hidden (see Implement the zero data state of an Audience Tile #8143):
  • The audience should display a "Temporarily hidden" badge in the Selection Panel.
    • The badge should follow the Figma design.
    • Clicking/hovering the badge's info icon should display a tooltip, which should follow the Figma design with the following copy:
      • Site Kit is collecting data for this group. Once data is available the group will be added to your dashboard.
  • An audience should only display one badge in the Selection Panel; if the audience is eligible to display a "New" badge (see Add the “New” badges to the Selection Panel #8170), the "Temporarily hidden" badge should take precedence and the "New" badge should not be displayed.

Implementation Brief

• Create a component BadgeWithTooltip in assets/js/components.
  • Accept label and tooltipTitle as props. Both should be of type string.
  • It should also use className props to add additional class names to the component wrapper. Use googlesitekit-badge-with-tooltip class as a generic one.
  • Return a span element from the component which should output label and for tooltipTitle use InfoTooltip component with title prop set to tooltipTitle. Refer PartialDataBadge component which does the same.
  • Update all instances of PartialDataBadge usage which should use BadgeWithTooltip component.
    • Pass label prop as Partial data.
    • tooltipTitle should already be there, so use same one.
    • Pass className as googlesitekit-audience-segmentation-partial-data-badge to retain the existing styles.
    • Remove PartialDataBadge component from codebase as it is no longer needed.
• In assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceItem.js
  • Use isItemDismissed selector, pass audience-tile-${slug} to the selector. Collect result in temporarilyHiddenconstant.
  • Pass BadgeWithTooltip component as a badge prop to SelectionPanelItem component (refer Add the “New” badges to the Selection Panel #8170) when temporarilyHidden is true.
    • Pass label as "Temporarily hidden" to BadgeWithTooltip.
    • Pass tooltipTitle as
      Site Kit is collecting data for this group. Once data is available the group will be added to your dashboard.
    • Pass className as googlesitekit-audience-segmentation-temporary-hidden-badge

Test coverage

• Update tests which may get failed due to update in PartialDataBadge component.

• Add tests for temporarily hidden badge check by setting the audience tile to be dismissed and zero data.

QA Brief

1. Enable audience segmentation feature and enable the visitor groups. Add the non Site Kit created audience to audience tile like "All visitors".

2. In the tester plugin, set Analytics > Force Analytics report data to Zero. Also, set Analytics Partial Data > Force Analytics audience partial data state to last-28-days. Save changes.

3. Go to Site Kit dashboard and to audience tile section. You will see the tile in collecting data status with the link to hide the tile temporarily ( "Temporarily hide" ).

4. Click on the "Temporarily hide" link for "All Visitors", that will hide the tile.

5. Open the audience selection panel. There should be a "Temporarily Hidden" badge with a tooltip.

6. Ensure it matches the Figma Design and the text is according to AC.

Changelog entry

• Add support for the "Temporary hidden" badge in the audience selection panel.

[eugene-manuilov]

Create a new component assets/js/modules/analytics-4/components/audience-segmentation/TemporaryHiddenBadge.js.

@ankitrox why do we need it? Your IB says that we need to create it but nothing where we should use it. If we don't need to use it, then we shouldn't add it.

In assets/js/components/SelectionPanel/SelectionPanelItem.js ... Render a BadgeWithTooltip component in the widget header if ... The audience is hidden.

The SelectionPanelItem component should know nothing about audiences.

PS: also not need to use the checkbox for each sub item in your IB, use it for top level groups of action items, for sub items that are part of those groups just use ordered/unordered list, for example:

• Foo
  • sub item 1
  • sub item 2
• Bar
  • Sub bar 1
    • sub item 1
    • sub item 2
  • Sub bar 1
    • sub item 1
    • sub item 2

[ankitrox]

Thank you for reviewing the IB @eugene-manuilov and highlighting the issues. I've updated the IB according to the mentioned points.

Also, I agree with your point that SelectionPanelItem should not be concerned about anything related to audience as it is a generic component, but as I took the reference of #8170 for this one, I found that this is also doing the same, which we can update IMO.

Maybe, @techanvil can comment about #8170.
Thanks

[techanvil]

Thanks @eugene-manuilov and @ankitrox. That's a great point that SelectionPanelItem shouldn't know about audiences, and a detail I missed when reviewing the IB for #8170.

I have therefore tweaked the IB for #8170 to avoid this. As part of the amendment I've specified adding a badge prop to SelectionPanelItem which can be referenced in the IB for this issue.

[eugene-manuilov]

@ankitrox could you please fix the structure of your IB because right now it feels like changes in AudienceItem are a subtask of PartialDataBadge?

Refer PartialDataBadge component. A common component can be extracted out of it as BadgeWithTooltip which should accept label and tooltipTitle as props.

We need to be concrete what exactly needs to be done, if this is something that not really necessary, then no need to include it in IB.

A common component can be extracted out of it as BadgeWithTooltip which should accept label and tooltipTitle as props.

Why not to change the existing one to accept label and class name?

[ankitrox]

Thank you @eugene-manuilov . I have updated the IB and formatting.

In the IB I have mentioned to replace PartialDataBadge component with the more generic BadgeWithTooltip component and remove PartialDataBadge component.

[eugene-manuilov]

Ok, thanks, IB ✔️

[nfmohit]

Hi @techanvil. Question about the tooltip copy in the ACs:

Site Kit is collecting data for this group. once data is available the this group will be added to your dashboard.

I believe the text is grammatically incorrect. I think the correct version would be:

Site Kit is collecting data for this group. Once data is available this group will be added to your dashboard.

Would you agree?

[techanvil]

Hi @nfmohit, thanks for spotting that! I didn't notice it when I copied the text from Figma. I've fixed the text in the AC/IB, and also asked Sigal to fix it over in Figma.

[ankitrox]

Thank you @nfmohit and @techanvil

I've updated the tooltip text and pushed the changes.

[nfmohit]

Hi @techanvil. The text still has a "the this", which I think is incorrect. Could you recheck?

[techanvil]

Apologies @nfmohit, I missed that part! I've amended accordingly. Thanks for the 🦅 👀!

[kelvinballoo]

QA Update ⚠️

There is only one thing to flag related to the AC which states:
Clicking/hovering the badge's info icon should display a tooltip, which should follow the [Figma design] etc...

• Focusing on 'Clicking', currently when we click the badge's info icon, it does bring up the tool tip but also selects or deselects the corresponding checkbox. Is that expected? ⚠️

  9096.clicking.on.temporary.hide.mov

Other than that, it's working as expected: ✅

• When an Audience Tile has been temporarily hidden, the audience displays a "Temporarily hidden" badge in the Selection Panel and the badge follows figma.

  9096.Main.use.case.mov

• Clicking/hovering the badge's info icon should display a tooltip which follows Figma with the copy:
  "Site Kit is collecting data for this group. Once data is available the group will be added to your dashboard."

  

• An audience only displays one badge in the Selection Panel; if the audience is eligible to display a "New" badge, the "Temporarily hidden" badge takes precedence and the "New" badge is not be displayed.

  9096.Badge.precedence.mov

[kelvinballoo]

QA Update ✅

New issue raised for the UX on clicking the badge here: #9421
Also added a mobile UX issue in the ticket.

Since the main use-case is working as expected for this ticket, we are moving this to approval ✅

• When an Audience Tile has been temporarily hidden, the audience displays a "Temporarily hidden" badge in the Selection Panel and the badge follows figma.

  9096.Main.use.case.mov

• Clicking/hovering the badge's info icon should display a tooltip which follows Figma with the copy:
  "Site Kit is collecting data for this group. Once data is available the group will be added to your dashboard."

  

• An audience only displays one badge in the Selection Panel; if the audience is eligible to display a "New" badge, the "Temporarily hidden" badge takes precedence and the "New" badge is not be displayed.

  9096.Badge.precedence.mov