Add the “New” badges to the Selection Panel

[techanvil]

Feature Description

Add the "New" badge to new audiences in the Selection Panel.

See selection panel, audience creation > "New" badges", and "New" badges in the design doc.

---

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

Acceptance criteria

• This behaviour applies to audiences that were created after the initial setup for the current user. The initial selection of audiences should not have "New" badges applied.
  • When an audience is initially created, it should have a “New” badge shown next to the audience title in the Selection Panel.
  • The badge should be shown to a user for 28 days from the first time the badge is viewed.
  • This applies both to audiences created by Site Kit, and those added directly in Analytics.
  • The badge should be displayed as per the Figma design.

Implementation Brief

Note: This should make use of the "expirable items" API introduced via #8168.

• In assets/js/components/SelectionPanel/SelectionPanelItem.js and assets/js/components/SelectionBox.js, add a badge prop of type PropTypes.node.
  • In SelectionPanelItem, pass badge as a prop to SelectionBox.
  • In SelectionBox, pass badge to the Checkbox after the title prop.
• Update assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceItem.js:
  • Check if the badge has been seen by the user yet using the hasExpirableItem selector, passing the audience-selection-panel-expirable-new-badge-${slug} as the expirable item slug.
    • Check if the new badge has expired using isExpirableItemActive selector, passing the audience-selection-panel-expirable-new-badge-${slug} as the expirable item slug.
    • Pass a NewBadge instance as the badge prop for SelectionPanelItem if the badge has not been seen by the user before, or it has not yet expired.
    • Create a useEffect in this component which calls the setExpirableItemTimers action, only if the user has never seen New badge before, and the title is not either of the pre-defined audiences , with the following object:

      {
         `audience-selection-panel-expirable-new-badge-${slug}`: WEEK_IN_SECONDS * 4
      }
      

      Importing WEEK_IN_SECONDS from assets/js/util/index.js
• Update assets/js/modules/analytics-4/datastore/audiences.js, once the configuredAudiences are successfully saved, dispatch an setExpirableItemTimers action for every configuredAudiences using the slug, and passing a value of 0, which will expire these items immediately.
  This prevents new badges from being shown for all audiences immediately after user setup.
  • Ensure that badges are dismissed, as above, for secondary users. See the implementation of Implement the secondary user setup #8130 for where configuredAudiences is saved for the secondary user setup.
• Tweak the styling as needed to align the badge and match the Figma design, see assets/sass/components/global/_googlesitekit-selection-panel.scss.

Test Coverage

• Update Storybook to include cases with a new badge present for both the generic Selection Panel and the Audience Selection Panel.

QA Brief

• Turn on the audienceSegmentation feature flag from the tester plugin.
• Set up Site Kit with an Analytics property that does not have audiences created yet (apart from audiences available in Analytics by default).
• Connect the Analytics module.
• Using the Audience Segmentation setup CTA widget in the Site Kit dashboard, set up Audience Segmentation.
• Scroll down to the Audience Segmentation widget area and click on "Change groups".
• Verify that no "New" badges show up at this point.
• Go to analytics.google.com, navigate to your Analytics property connected to Site Kit, and add a new custom audience.
• Go back to Site Kit, reload, and open the Audience Selection Panel again. Verify that the "New" badge appears now.

To see "New" badges with the Site Kit audiences

• After the above steps, go to analytics.google.com, navigate to your Analytics property connected to Site Kit, and archive the audiences that Site Kit created.
• Go back to Site Kit, reload, and open the Audience Selection Panel again. You should see a callout to create Site Kit groups. Click to create them.
• Once they are created, verify that you see "New" badges beside the Site Kit audiences as well.

To test expiration of "New" badges

• The "New" badges, once visible, is active for 28 days. It isn't really possible to wait for 28 days for the badges to expire.
• In this case, you can try a script that will force Site Kit to think that the badges have already expired.
• Try running the following script in the browser console:

const { select, dispatch } = googlesitekit.data;

function getExpirableItemSlug( name ) {
    return `audience-selection-panel-expirable-new-badge-${ name }`;
}

const availableAudiences = await select( 'modules/analytics-4' ).getAvailableAudiences();

const items = availableAudiences
    .filter( ( { name } ) => {
        return select( 'core/user' ).hasExpirableItem(
            getExpirableItemSlug( name )
        );
    } )
    .map( ( { name } ) => ( {
        slug: getExpirableItemSlug( name ),
        expiresInSeconds: 1,
    } ) );

await dispatch( 'core/user' ).setExpirableItemTimers( items );

• Reload the page.
• Open the Audience Selection Panel.
• Verify that the "New" badges no longer appear.

Changelog entry

• Add "New" badges to newly created audiences in the Selection Panel, which will be visible for 28 days after the first viewing.

[tofumatt]

Looks like this is also blocked by a tile like #8136 being implemented, because adding a relatively concrete IB here isn't possible until those components are implemented so we know where they'll go. I looked through all of the issues to see if anything was moved along enough to add a good IB here but not yet, so I've added #8136 as another blocker to making the IB 🤔

[techanvil]

Hey @benbowler, while reviewing the IB here I've realised I left an important detail out of the AC.

The "New" badges should only appear for audiences which have been created subsequent to the initial setup for the current user.

The implication is we should expire the corresponding "New" badge items for the list of audiences in configuredAudiences once they have been successfully saved in the enableAudienceGroup() action

It further implies we should do the same thing once configuredAudiences has been saved as part of the setup for a secondary user. This is being specced in #8130, as a result I've added that issue as a dependency for this one.

Apologies for the lack of clarity in the AC. I've amended it accordingly - please take a look.

Further to the above, here are a couple of additional points for this IB:

• The following point can be removed, as we do want to display a "New" badge for these audiences if a user has created them via the CTA in the Selection Panel. Also, please note as a general point, and as per my comment on Handle the special case for “new visitors” and “returning visitors” to retrieve their metrics for the Selection Panel #8160, we don't want to be identifying these audiences via a string comparison of their displayName as the display name is mutable.

• Also, prevent the badge from being rendered if the the title is either of the pre-defined audiences "All visitors" or "Returning visitors" using simple string comparison.

• A trivial one, but I'd consider a slight simplification of the expirable item ID. Rather than audience-selector-new-audience-expirable-new-badge-${slug} which contains "new" twice, the repetition of which feels somewhat redundant, how about audience-selection-panel-expirable-new-badge-${slug}?

[techanvil]

Thanks @benbowler. The IB LGTM ✅

Please note, I made a small tweak to remove the reference to enableAudienceGroup() for the secondary users aspect, as I don't think we will end up using this action for secondary users, rather we'll extract part of it to a new action and use that.

[techanvil]

Note that I've further updated the IB in response to the observations made here, #9096 (comment), as the generic Selection Panel should indeed not know anything about audiences.

[kelvinballoo]

QA Update ⚠️

Hi @nfmohit , is there a fast way to test the AC point The badge should be shown to a user for 28 days from the first time the badge is viewed. ?
I did not see the steps in the QAB for that specifically.

• Is that controlled through a cookie or something for me to verify the expiry date?
• Or I should be waiting for 28 days to verify it?

---

Other than that, the rest was verified good ✅

• The initial selection of audiences does not have "New" badges applied.

• When an audience is initially created in analytics, it has a “New” badge shown next to the audience title in the Selection Panel after reloading the SK dashboard.

  8170.test.720p.mov

• This also applies to audiences created by Site Kit (New and Returning visitors) that are created and added directly to Analytics

  SK.audiences.8170.mov

[nfmohit]

@kelvinballoo Added a new section in the QAB, please let me know if that works for you, thanks!

[kelvinballoo]

QA Update ⚠️

Thanks for the script @nfmohit .

ITEM 1:
I tested this and after running the script, the 'New' badge for the audience selection for 'New visitors' and 'Returning visitors' are gone.
However, there was still a 'New' badge for my created audience. I would assume this should also disappear?

Screen recording available below:

Badge.remained.mov

---

ITEM 2:
Are we supposed to hide the 'New' badge at the top of the tiles also or that would be part of a different ticket?
Details added below.

[kelvinballoo]

QA Update ✅

Noted on item 2 that we are only checking on the badge inside the selection panel. I've set up a thread in Slack to check if it's being handled or should in fact be.

Item 1 was tested good with the new script for the 28 day scenario and it's working fine:

28.days.script.works.720p.mov

____________________________________________________________________________________

Other than that, the rest was verified good ✅
Moving ticket to approval

• The initial selection of audiences does not have "New" badges applied.

• When an audience is initially created in analytics, it has a “New” badge shown next to the audience title in the Selection Panel after reloading the SK dashboard.

  8170.test.720p.mov

• This also applies to audiences created by Site Kit (New and Returning visitors) that are created and added directly to Analytics

  SK.audiences.8170.mov