Add the Selection Panel happy path view (Storybook)

[techanvil]

Feature Description

Create the Selection Panel component, implementing the happy path view, and add it to Storybook.

This should include the CTAs but not the behaviour for saving the selection, this will be handled separately via https://github.com/google/site-kit-wp/issues/8158.

Additionally it should not include the loading state, the Audience Creation Notice or the Selection Panel Info Notice, these will be also handled separately via https://github.com/google/site-kit-wp/issues/8162, https://github.com/google/site-kit-wp/issues/8164 and https://github.com/google/site-kit-wp/issues/8159.

It should include the logic/behaviour described in the selection panel > available audiences section.

See selection panel in the design doc.

---

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

Acceptance criteria

• The Audience Segmentation Selection Panel component should be created and stories for it added to Storybook.
• It should follow the Figma design, and should also be based on the Key Metrics selection panel.
• The generic components extracted from the KM Selection Panel should be reused (see google/site-kit-wp#8652), with changes to the design for Audience Segmentation applied back to the KM panel (notably the footer layout in the mobile view as mentioned in the design doc).
• The Selection Panel should display the list of available audiences that is cached in the DB (i.e. stored in the availableAudiences setting). Their display names and descriptions should be displayed directly, with the exception of the "All users" default audience which should be shown as "All visitors".
• The “Purchasers” default audience should only be listed if it’s had any users in it since the associated Analytics property was created.
• Audiences should be selectable via checkboxes and, when there is a currently saved selection, grouped into "Current selection" (the currently saved selection) and "Additional groups" groups.
• The user count for an audience should be displayed on the right hand side of it.
• The Selection Panel should display the header text including the link to the Admin Settings tab on the Settings screen.
  • If the Audience Segmentation Settings section is available at implementation time this link should ensure the section is scrolled into view when navigating to the Settings screen. Otherwise, a small followup issue should be created to update the link when the section is available.
• The bottom part of the Selection Panel should include:
  • The "Learn more" text including the Analytics link pointing to the introduction to audiences in Google Analytics article.
  • The footer which includes the selection count and Cancel / Save selection CTAs.
  • As alluded to in the Feature Description, the CTAs don't need to be hooked up here, this will be done via google/site-kit-wp#8158.

---

• Note that the special case for retrieving reports using the newVsReturning dimension to avoid the “partial data” state as discussed in the design doc's selection panel > available audiences section should not be implemented here, this will be handled separately via google/site-kit-wp#8160.
• Note too that the specific ordering of audiences within the selection panel will be handled via the subsequent issue #8519.

Implementation Brief

Please refer POC PR: https://github.com/google/site-kit-wp/pull/8676. Also, this implementation will be done once #8652 is merged.

• [x] Create directory AudiencesSelectionPanel inside assets/js/modules/analytics-4/components/AudienceSegmentation/

  • [x] Create constants.js inside new directory. Add the following constants in it similar to key metrics component.
  • [x] Add AUDIENCES_SELECTION_PANEL_OPENED_KEY, AUDIENCES_SELECTION_FORM, AUDIENCES_SELECTED, MIN_SELECTED_AUDIENCES_COUNT and MAX_SELECTED_AUDIENCES_COUNT.
  • [x] Create index.js which will have AudiencesSelectionPanel component in it.
  • [x] It should use the SelectionPanel component and pass the relevant props to it.
  • [x] Make use of AUDIENCE_SELECTION_PANEL_OPENED_KEY constant to pass isOpen prop to SelectionPanel.
  • [x] onOpen prop should accept a callback function where the callback should add the list of saved audiences to AUDIENCES_SELECTED. List of saved audiences can be retrieved using getConfiguredAudiences selector.
  • [x] closePanel prop should be a callback to set AUDIENCES_SELECTION_PANEL_OPENED_KEY value to false. This callback will also be passed to header component to be triggered on close button's click added in header.
  • [x] Within the SelectionPanel component. Following components needs to be rendered, which would be passed as children to the SelectionPanel component.
    • Header
    • AudienceItems
    • Footer
  • [x] Create Header component inside AudiencesSelectionPanel directory.
  • [x] It should make use of SelectionPanelHeader and pass following props to it.
    • [x] title - Heading text for the selection panel.
    • [x] onCloseClick - Callback to trigger when selection panel is closed. This can be same callback passed to SelectionPanel.
    • [x] children This should display the text under the main heading with the settings link. This is a component created with createInterpolateElement. Refer the figma design for the copy.
  • [ ] Create AudienceItems component inside AudiencesSelectionPanel directory.
  • [x] It should leverage the SelectionPanelItems component and pass the necessary props to it.
  • [x] Pass current selection title and available selection title according to figma designs.
  • [x] availableSavedItems and availableUnsavedItems should be calculated by fetching available audiences using getAvailableAudiences selector which returns the available audiences in property and getConfiguredAudiences which returns the saved audiences in DB.
  • [x] getAvailableAudiences should be modified to check if "Purchasers" audience has had any data. This can be checked with getResourceDataAvailabilityDate from the partial data infra. If there is any data available for the "Purchasers" i.e. getResourceDataAvailabilityDate does not return 0 or undefined, we should keep "Purchasers" in getAvailableAudiences response.
  • [x] If there has never been any data for "Purchasers", filter out the "Purchasers" from getAvailableAudiences response as we do not want to show "Purchasers" audience in this case.

  • [ ] While passing the availableSavedItems and availableUnsavedItems props, they must be mapped to include title, description, subtitle and userCount properties.

    • [x] title would be displayName from audiences response.
    • [ ] description belongs to description property.
    • [ ] subtitle is the text which appears below description. As seen in the figma designs, it will be Created by .... text.
    • [ ] If the audience is "All users" or "Purchasers", subtitle would be "Created by default by Google Analytics"
    • [ ] If the audience is "New visitors" or "Returning visitors", subtitle would be "Created by Site Kit".
    • [ ] For all other audience types, subtitle should be "Already exists in your Analytics property".
    • [x] userCount would be the total number of users in audience for the selected period. This should use the getReport selector from analytics module where the metric would be totalUsers and dimension is audienceResourceName.

      
      const options = {
      startDate: "2024-05-09",
      endDate: "2024-05-15",
      metrics: "totalUsers",
      dimensions: [ 'audienceResourceName' ]
      };

    const result = googlesitekit.data.select('modules/analytics-4').getReport( options );

  • [ ] Purchasers audience should only be listed if it’s had any users in it since the associated Analytics property was created. For the same, we can use the isResourcePartialData selector to check if there "Purchasers" has had any audience.
  • [x] For savedItemSlugs pass the value returned by getConfiguredAudiences which is array of name in audience response.
  • [x] ItemComponent should be AudiencesItem which will be responsible to render individual selection item in the panel.
    • [x] This component will receive title, description, subtitle and userCount props as mentioned above.
    • [x] Note that we need to pass userCount as suffix into (maybe wrapped into some JSX) SelectionPanelItem component. suffix prop is described in below point.
  • [x] Add an additional prop suffix to the component SelectionPanelItem. This should be a react component which should be rendered after the SelectionBox component.
  • [ ] Default value of suffix can be a function which returns false ( suffix = () => false ), so that if nothing is passed, it should not render anything. This is particularly useful in case of KM panel.
  • [x] Create AudiencesItem component inside AudiencesSelectionPanel directory.
  • [x] It should leverage the SelectionPanelItem component and pass the necessary props to it. All these props should already be passed by SelectionPanelItems component down to this component.
  • [ ] We can pass description as react component which encompasses of description of the audience and created by subtitle.
  • [x] Create Footer component inside AudiencesSelectionPanel directory.
  • [ ] This component should use SelectionPanelFooter component to return the new composed component for audience segmentation selection panel footer.
  • [x] savedItemSlugs - These are the items returned from getConfiguredAudiences.
  • [x] selectedItemSlugs - This can be retrieved from AUDIENCES_SELECTED inside AUDIENCES_SELECTION_FORM. Please refer this example here.
  • [x] Refer other props in SelectionPanelFooter and pass them accordingly. A reference of MetricsFooter component can be taken to build other props.
  • [ ] It's worth noting that generic components extracted from the KM Selection Panel should be reused in audience selection panel. Note that footer changes in audience selection panel should also be applied to the KM panel.
  • [ ] In assets/sass/components/global/_googlesitekit-selection-panel.scss, target .googlesitekit-selection-panel-footer__content and make it display block.
  • [ ] .googlesitekit-selection-panel-footer__item-count should be text aligned left and .googlesitekit-selection-panel-footer__actions should be text aligned right with display block.
  • [ ] It's essential that both audience selection panel and KM panel should reflect this change.

Test Coverage

• Add the AudiencesSelectionPanel in storybook with the following scenarios.

  • Default - Where it should show the flat list of all the audiences.
  • SavedSelection - Where it should show the Current selection and Additional groups. Current selection will show the saved items.
  • View-only user - With view only context.

• Write the test for AudienceSegmentation/AudienceSelectionPanel component. Take reference of KM component tests. Not all of the tests in the MetricsSelectionPanel suite will apply to the AudienceSelectionPanel, so copy/modify the tests which are applicable and add any additional tests as needed.

QA Brief

• Open Storybook.
  • Open the Modules -> Analytics4 -> Components -> AudienceSegmentation -> Dashboard -> AudienceSelectionPanel` stories.
  • Verify the audience selection panel looks and behaves according to the Figma designs and the ACs.

Changelog entry

• Add the Audience Selection Panel as a component which is primarily visible in Storybook pending full integration.

[techanvil]

Hey @hussain-t, just a heads up that I've amended the Feature Description here to make it clear that we do want to include the logic described in available audiences as part of this issue.

I've also tweaked that section in the design doc to point out that the implementation can leverage the "partial data" infrastructure, and as a result I've added https://github.com/google/site-kit-wp/issues/8141 to the dependencies for this issue. Cc @ivonac4

[techanvil]

Hi @hussain-t, just a heads up that I've made a small tweak to the AC to make it clear that we should be leveraging the audience cache here, as opposed to retrieving the audiences directly from the audiences API.

[techanvil]

Hi @hussain-t, I've also added a point to the AC to make it clear we don't need to address the specific details of audience ordering in this issue, this will be handled via #8519. This shouldn't actually have any impact on this issue, just want to give a heads up for clarity.

[hussain-t]

@ankitrox, could you set an estimate?

[ankitrox]

@hussain-t Added the estimate. Thank you.

[techanvil]

Hi @ankitrox, thanks for drafting this IB. Here are some points to consider:

• Using the single SELECTION_PANEL_OPENED_KEY key to control the panel's open state is likely to cause problems when there are more than one version of the panel. I can imagine the shared SELECTION_PANEL_HEADING and SELECTION_PANEL_SELECTED_ITEMS potentially being problematic too. I think we should keep separate state for each version of the panel. This could be achieved by passing different key values into the component via props, or potentially via context to facilitate their use in child components. We might want to simplify things a bit by keeping all these values within their own form slice, so we effectively just need to pass a unique value for what's currently SELECTION_PANEL_FORM.
• Additionally the MIN_SELECTED_COUNT and MAX_SELECTED_COUNT values will differ for the audiences selection panel which has a min of 1 and max 3 selected items, so these values will also need to be passed via props/context.
• The passing of a children property in selectedItems and availableItems doesn't look right. Rather we should pass a prop like ItemComponent={Label} which would be the component function rather than a JSX rendered instance. Then we can render the component for each item, passing the item to it via props e.g. <ItemComponent item={item} />.
• Additionally, the shape of the selectable items will be different for each instance - i.e. Key Metrics objects have a different shape to cached audience objects. We'll probably want to map these to a common shape so we'd want to effectively define an interface for a selectable item and map the specific items to it. I also think selectedItems should be a simple array of slugs, while availableItems should most likely be an array of mapped, common objects. I imagine these objects should have a shape along the lines of { slug, title, subtitle, description } (considering the commonalities between the KM selection panel and the audiences selection panel):
  • KM panel:
    
  • Audiences panel:
    
• In fact, taking these commonalities into consideration maybe we don't even need ItemComponent and it should rather be an optional component for rendering a "suffix", e.g. ItemSuffixComponent, or ItemDetailComponent or something, which can then be used just to show the user count for the audiences panel.
• There are a number of Key Metric specific aspects that have been glossed over/missed and will need extracting/abstracting from the appropriate components, for example the saving state, subheader text and behaviour in the Header component are all KM-specific, and there are similar things across all the child components. It's worth considering that by lifting this logic out of the child components we might find ourselves with an overly complex parent so it could be appropriate to extract some reusable "base" child components which we then create instance-specific wrappers in which can encapsulate the logic for those components. E.g. we extract a common Header but also create, say, a MetricsSelectionPanel/Header which contains the KM-specific logic for the header and renders the common Header within it. We don't necessarily need to get too detailed about these aspects in the IB, and we could make a general point about them for awareness rather than defining each and every prop.
• CSS classnames should be renamed to remove/replace the km substrings so as to be generic. We should avoid passing className in unless we actually need it, a key thing we want to get out of this refactor is to keep the styling common as much as possible.
• The IB implies that we'd need to wait for #8158 to be merged in order to retrieve the list of selected widgets. However, #8158 is a dependant of this issue so this issue needs to be merged first. We can simply specify that the list of selected widgets can be retrieved via the configuredAudiences settings for the purpose of this issue.
• There are some minor formatting issues where backticks haven't been applied to variable names, for example selectedItems at the start of point A.3.i and similar. Also it looks like the code snippet in point C.3.i should be using the triple-backtick formatting. There's also a typo that has crept into the IB and POC, "metricss", should obviously be "metrics".
• As a general point it's worth bearing in mind this is quite a complex issue for you to have picked up for IB quite early into your time on the project. It's commendable to be keen to get stuck in, but it might be worth ramping up a bit more slowly, going for some easier issues and building up progressively, if possible. I know we are a bit limited in terms of what's available to be picked up so it might be difficult to apply this so well in practice.

[techanvil]

Note that since my previous comment we've decided to split this issue into two, with https://github.com/google/site-kit-wp/issues/8652 being created for the initial KM Selection Panel refactor.

[ankitrox]

Thank you @techanvil for breaking this task into refactoring and audience segmentation panel. This is helpful to better handle the overall requirement.

I have updated the IB considering the fact that we have a separate task for refactoring and key metrics panel. This IB take reference of your POC PR, but I think that should be fine because we are composing the components using extracted components.

Assigning this to you for review.

Thanks again!

[techanvil]

Hey @ankitrox, thanks for updating the IB. However - you've accidentally removed the AC and replaced the AC section with the new IB. Please can you restore the AC (you can see this in the edit history) and send it back to me to continue the review?

[ankitrox]

@techanvil Extremely sorry for the inconvenience! I have restored the AC from issue's history.

Assigning it over to you to continue the review.

Thanks

[techanvil]

Hi @ankitrox, no worries! These things happen, luckily we have the edit history to help us out here. Thanks for restoring the AC. As to the IB, it's generally looking good - here are a few points to address:

• I'd suggest we name the top-level component AudiencesSelectionPanel which would be more in keeping with the MetricsSelectionPanel naming, with corresponding renames from AudienceSegmentationHeader to AudiencesHeader, etc.

---

If there are no saved audiences, we should always display user created audiences which has non-zero user count, under "Current Selection". User count will be fetched by getReport selector in analytics module.

• This point is not accurate. We should only show saved audiences in the "Current selection" grouping. If there are no saved audiences, the selection panel will be displayed as a flat list, similar to the Key Metrics selection panel when there are no saved metrics, as can be seen here in Storybook. We don't need to filter user created audiences to those with a non-zero user count within the selection panel.

---

"All visitors" (which are "All users" in analytics and renamed in site kit), will be shown under "Additional groups" if not selected.

• The phrasing "will be shown under "Additional groups" if not selected" is a little confusing. In fact, the "All visitors" audience, like any other audience, will be shown under "Current selection" if it's part of the saved selection, otherwise it will be displayed under "Additional groups" (or as part of the flat list if there is no saved selection).
• I'd suggest this point could be tweaked along these lines:
  • "All visitors" (which are "All users" in analytics and renamed in Site Kit), will be initially shown under "Additional groups" (assuming there's a saved selection, otherwise it will be part of the flat, ungrouped list of available audiences).

---

"Purchasers" will be shown in "current selection" if and only if it has user count for past 90 days and has not been archived.

• This needs a correction, and it's worth expanding a bit on the implementation here.
  • Again, there's a bit of confusion as a result of explicitly specifying the "current selection". As discussed above the audience will be displayed in "Current selection", "Additional groups" or the flat list depending on whether it's part of the saved selection (and if there is a saved selection). I'd suggest a similar tweak as the one for "All visitors" above.
  • The AC specifies that the Purchasers audience "should only be listed if it’s had any users in it since the associated Analytics property was created". This is not the same as having a user count over the past 90 days. To check if the audience meets the AC we can make use of the "partial data" data availability state, as this involves caching the earliest event for an audience. So we can make the "partial data" check for the audience and if there is an earliest event, we know the audience has had some data since the property was created.
  • Note that if an audience has been archived, it won't appear in availableAudiences.

---

It should leverage the SelectionPanelItem component and pass the necessary props to it. All these props should already be passed by SelectionPanelItems component down to this component.

• We probably need to extend SelectionPanelItem to include a subtitle prop (as per the related point in this comment), and also some way of passing/rendering the user count (e.g. a "suffix" as we have discussed previously) - or, maybe the user count can be rendered directly via AudiencesItem. It's worth a mention, either way.

---

Create AudienceCreationNotice component which will be displayed only if site kit created audiences i.e. New visitors and Returning visitors are not available in audiences returned by getAvailableAudiences selector.

• We don't actually need to create this component as part of this issue. It can be done as part of the linked issue #8164.

---

Add the AudienceSegmentationPanel in storybook with the following scenarios.

• This point in the Test Coverage section looks incomplete as the scenarios are not specified.

---

• Regarding the following AC point:

• The generic components extracted from the KM Selection Panel should be reused (see google/site-kit-wp#8652), with changes to the design for Audience Segmentation applied back to the KM panel (notably the footer layout in the mobile view as mentioned in the design doc).

• ... it's worth a mention of this somewhere in the IB as it could be easy to miss otherwise.

[ankitrox]

Thank you so much @techanvil for the IB review.

I have made the suggested changes, but I have only one question regarding the following point.

We probably need to extend SelectionPanelItem to include a subtitle prop (as per the related point in this comment), and also some way of passing/rendering the user count (e.g. a "suffix" as we have discussed previously) - or, maybe the user count can be rendered directly via AudiencesItem. It's worth a mention, either way.

As per our extracted component SelectionPanelItem, we can pass react component for description and children, so essentially we can create a component which consist of description and subtitle and pass it to description prop.

Also, for user count we can pass a component as children by slightly modifying the SelectionPanelItems component to accept the children inside ItemComponent.

I have added this in IB, please let me know your thoughts.

Thank you.

[techanvil]

Hey @ankitrox, thanks for iterating on this IB. A few further points:

• AUDIENCE_SELECTION_SETUP_CTA_WIDGET_SLUG is only referenced once in the IB and it's not clear we'll actually need it at this stage. This should be removed.
• AUDIENCE_SELECTION_PANEL_OPENED_KEY, AUDIENCE_SELECTION_FORM should be renamed for consistency with KM plurality, as per the KM constants. So they should be AUDIENCES_SELECTION_PANEL_OPENED_KEY and AUDIENCES_SELECTION_FORM.
• closeFn(), AudiencesHeader, AudiencesItems, AudiencesFooter need renaming due to changes in the implementation for #8652, (see its PR), they should be renamed to closePanel(), Header, AudienceItems and Footer respectively.

---

• The following points (I've just included the start of each of them for brevity) read more like AC for the most part but don't really need including here. They can be removed as from the implementation POV we just need to populate availableUnsavedItems via getAvailableAudiences() but remove Purchasers if it's not had any data. As mentioned these points can be removed but the point about calculating availableUnsavedItems should be expanded on.

• If there are no saved audiences...
• All visitors" (which are "All users" in analytics and renamed in Site Kit), will be initially shown...
• "Purchasers" will also be initially shown under "Additional groups"...

• With regard to the Purchasers audience availability, I realise I was slightly unclear in my previous feedback. We should not use the state returned by isResourcePartialData(), but in fact the underlying state returned by getResourceDataAvailabilityDate(). This is because isResourcePartialData() relates to the current date range, but we want to know if there has ever been any data for the audience.
• I'm wondering if we should take the approach of including this additional Purchasers related logic in the resolver for getAvailableAudiences(), or if we should spec a new selector & resolver for it :thinking:...

---

• Note that we need to change SelectionPanelItems component a bit so that we can pass children to ItemComponent.
• children passed to the ItemComponent can be a react component useful to display the user count for the audience.

• I don't see we need to do this. For one thing, I still think we should allow SelectionPanelItem to be passed e.g. a suffix which can be rendered within .googlesitekit-selection-panel-item but after the SelectionBox. Then, bearing in mind that each item is spread into ItemComponent as props:

https://github.com/google/site-kit-wp/blob/f6ea234136d2ca2e70aaf166e6694c2d0bfbed59/assets/js/components/SelectionPanel/SelectionPanelItems.js#L40-L45

• ... we don't need to update SelectionPanelItems, we can simply ensure that each item has say a subtitle and userCount property, update the props for AudienceItem to be { slug, title, description, subtitle, userCount, savedItemSlugs = [] }, and render SelectionPanelItem within it accordingly with description and subtitle folded into description and userCount passed as suffix (maybe wrapped in a bit of extra JSX).
• Further to the above, the IB hasn't mentioned retrieving the user counts. We don't need to go into too much detail, but essentially we need to make a report for the user counts for all audiences (so retrieve the totalUsers metric by the audienceResourceName dimension for the current date range), and then use the report to populate the userCount property for the audience items.

---

It's worth noting that generic components extracted from the KM Selection Panel should be reused in audience selection panel. We may also need to apply some design changes; for example audience selection panel footer is slightly different than the KM selection panel footer (in mobile view). In such cases, we can target the particular elements by passing appropriate class names and styling them differently in CSS. We may also need slightly different components to be passed, for example; in SelectionItem we may need different components for description and children.

• This should be a bit more specific to make it clear we want to apply the design changes to the footer styling for the Audiences panel back to the generic footer component and thus the KM panel too, ensuring we keep a consistent look and feel to both panels.

---

Please let me know if it would be useful to jump on a call to discuss/clarify any of the above, I realise it's quite a complicated one that might benefit from a sync.

[techanvil]

Thanks for updating the IB, @ankitrox. It's LGTM (please note I made a small tweak to the Test Coverage section which I felt could be a little less explicit).

IB :white_check_mark:

[techanvil]

Hi @nfmohit, nice work here. I've just merged the PR.

However - considering this issue was only intended to be scoped to Storybook, I am questioning if we need to include the integration testing in the QAB. I note that you've rendered AudienceSelectionPanel in DashboardMainApp which I can imagine was useful for additional testing during development, and I've left that in, but really it's a bit out of scope here. Considering the issue has gone over the estimate I'd suggest removing the E2E tests from the QAB and instead use those as a basis for the QAB for #8158 which I see you currently have in execution. WDYT?

[nfmohit]

Hi @nfmohit, nice work here. I've just merged the PR.

However - considering this issue was only intended to be scoped to Storybook, I am questioning if we need to include the integration testing in the QAB. I note that you've rendered AudienceSelectionPanel in DashboardMainApp which I can imagine was useful for additional testing during development, and I've left that in, but really it's a bit out of scope here. Considering the issue has gone over the estimate I'd suggest removing the E2E tests from the QAB and instead use those as a basis for the QAB for #8158 which I see you currently have in execution. WDYT?

That's a good call, thank you @techanvil. I've moved out all the plugin testing from the QAB and just left the parts for Storybook. Let me know what you think, thank you!

[techanvil]

Thanks @nfmohit, that looks great. Over to QA for testing :)

[kelvinballoo]

QA Update ⚠️

Tested and I have a few observations and queries, documented as follows:

ITEM 1: All visitors' should be 'Google Sans Text' instead of 'Google Sans Display'

Storybook: ![Uploading Screenshot 2024-06-06 at 16.11.57.png…]() Figma:

ITEM 2: People who visited the site for the first time font weight should be 400 instead of 500.

Storybook: Figma:

ITEM 3: Font weight for 'Save selection' button should be 500 instead of 400. That said, I did see that the KM panel would be 400. So if this is to keep things consistent with KM, then we can ignore this.

Storybook: Figma:

ITEM 4: There are a few points in the AC that I don't think can be tested in this Storybook ticket as the Storybook data are not real data linked to a real account. I've listed them below. Can you confirm that indeed these are items not to be tested in this ticket

• The Selection Panel should display the list of available audiences that is cached in the DB (i.e. stored in the availableAudiences setting). Their display names and descriptions should be displayed directly, with the exception of the "All users" default audience which should be shown as "All visitors".

• The “Purchasers” default audience should only be listed if it’s had any users in it since the associated Analytics property was created.

• The user count for an audience should be displayed on the right hand side of it.

• The Selection Panel should display the header text including the link to the Admin Settings tab on the Settings screen.

  • If the Audience Segmentation Settings section is available at implementation time this link should ensure the section is scrolled into view when navigating to the Settings screen. Otherwise, a small followup issue should be created to update the link when the section is available."

[nfmohit]

Thank you for sharing your observations, @kelvinballoo !

ITEM 1: All visitors' should be 'Google Sans Text' instead of 'Google Sans Display'

Storybook: ![Uploading Screenshot 2024-06-06 at 16.11.57.png…]() Figma:

This is consistent with what we have in the Key Metrics selection panel. If we should change the font here, I believe we should change it in the KM panel as well for consistency. @sigal-teller Could you confirm if the font should be changed here to Google Sans Text for both KM and audience selection panels?

ITEM 2: People who visited the site for the first time font weight should be 400 instead of 500.

I'm opening a follow-up PR for this.

ITEM 3: Font weight for 'Save selection' button should be 500 instead of 400. That said, I did see that the KM panel would be 400. So if this is to keep things consistent with KM, then we can ignore this.

As you mentioned, this uses the re-usable component that both KM and audience selection panels use, so if we want to change it here, we should change it everywhere else for consistency.. @sigal-teller We need your confirmation here as well to see if this change should be applied for all selection panels. Thanks!

• The Selection Panel should display the list of available audiences that is cached in the DB (i.e. stored in the availableAudiences setting). Their display names and descriptions should be displayed directly, with the exception of the "All users" default audience which should be shown as "All visitors".
• The “Purchasers” default audience should only be listed if it’s had any users in it since the associated Analytics property was created.

As this is a Storybook-only issue, unfortunately, these cannot be tested here, but can be done in #8158. I'll add them in the QAB for #8158.

• The user count for an audience should be displayed on the right hand side of it.

You should be able to see the user count from the mock report data in Storybook.

You'll be able to see actual data in #8158.

The Selection Panel should display the header text including the link to the Admin Settings tab on the Settings screen.

• If the Audience Segmentation Settings section is available at implementation time this link should ensure the section is scrolled into view when navigating to the Settings screen. Otherwise, a small followup issue should be created to update the link when the section is available."

The link is correct, however, unfortunately, you'll not be able to see it in Storybook. It should be verifiable in #8158.

The link doesn't scroll down to the respective section though. @techanvil mentioned he is going to open an issue for it.

Thanks!

[nfmohit]

I have opened a follow-up PR #8829 to address some of the concerns above. For this to move forward, we have two questions for @sigal-teller that we need for confirmation:

1.

ITEM 1: All visitors' should be 'Google Sans Text' instead of 'Google Sans Display'

Storybook: Figma:

This is consistent with what we have in the Key Metrics selection panel. If we should change the font here, I believe we should change it in the KM panel as well for consistency. @sigal-teller Could you confirm if the font should be changed here to Google Sans Text for both KM and audience selection panels?

2.

ITEM 3: Font weight for 'Save selection' button should be 500 instead of 400. That said, I did see that the KM panel would be 400. So if this is to keep things consistent with KM, then we can ignore this.

As you mentioned, this uses the re-usable component that both KM and audience selection panels use, so if we want to change it here, we should change it everywhere else for consistency.. @sigal-teller We need your confirmation here as well to see if this change should be applied for all selection panels. Thanks!

Thank you!

[sigal-teller]

@nfmohit The links you added appears broken for me so I can see exactly what you're referring to. In any case, I'm using the styles that we have in the design system, so I'm not sure why the font is changing for you. Maybe there are missing fonts or styles for you and this is why replaces them? Anyway, group names (if that was what you were referring to) are label medium. LMK if you were referring to something else.

[nfmohit]

Hi @sigal-teller. I have updated the links for you, thank you for pointing that out. In summary, we have two questions:

1st: Should we use "Google Sans Text" for the checkbox labels in the selection panel? The KM panel, when implemented, used the "Google Sans Display" font, but in the current Figma designs for Audience Segmentation, it uses "Google Sans Text".

Screenshots

In the current KM selection panel:  In Audience Segmentation Figma designs: 

2nd: Should the font-weight for the "Save selection" CTA be 400 or 500. In the KM selection panel, it is 400, but in the Audience Segmentation Figma designs, it is 500.

Screenshots

In the current KM selection panel:  In the Audience Segmentation Figma designs: 

[sigal-teller]

Hi @nfmohit

1. Checkboxes labels should be "Google sans text" (this what is used for Label/medium" in Figma).
2. font weight for buttons should be 500 (buttons text are Label/medium as well). you can find them in the design system here. Also attaching a screenshot.

[nfmohit]

Thank you for confirming, @sigal-teller. I'll make these updates accordingly.

[nfmohit]

@kelvinballoo This is now in CR with PR #8829 that addresses your observations: ITEM 1 & ITEM 2.

For ITEM 3, I have opened a new issue #8856.

The other questions have been addressed in my previous comments.

Thanks!

[kuasha420]

@kelvinballoo Back to you for another pass, the ITEM 1 and 2 should now be fixed. As noted by @nfmohit above, the 3rd item is a much bigger change, so it will be fixed in a follow up issue.

[kelvinballoo]

QA Update ✅

All the issues are resolved or have an action in another ticket. Moving this ticket to 'Approval'.

ITEM 1: ✅ All visitors' is now 'Google Sans Text'.

---

ITEM 2: ✅ People who visited the site for the first time font weight is now 400.

---

ITEM 3: ✅ Noted that this will be handled under https://github.com/google/site-kit-wp/issues/8856.

---

ITEM 4: ✅ Noted that this is out of scope for this test.