Audience group selection warning notice UI issue.

[mohitwp]

Bug Description

In the "Select visitor groups" moda, when a user selects more than 3 visitor groups, a warning appears:

“⚠️ Select up to 3 groups (4 selected)”

This warning notice overlaps with the bottom part of the modal UI, particularly obscuring the “Cancel” and “Apply changes” buttons.

Steps to reproduce

1. Set up Site kit.
2. Create Groups.
3. Open the "Select visitor groups" modal.
4. Select 4 visitor groups from the list.
5. Observe the warning that appears at the bottom of the modal.

Screenshots

Additional Context

• PHP Version:
• OS: [e.g. iOS]
• Browser: [e.g. chrome, safari]
• Plugin Version: [e.g. 22]
• Device: [e.g. iPhone6]

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

Acceptance criteria

• The "on save" and "incorrect number of groups selected" errors in the Audience Segmentation selection panel should be rendered using the same styles as those in the Key Metrics selection panel, i.e. the error should be rendered in a separate bar above the footer as per this Figma mock.

Implementation Brief

• Move the computation of the saveError logic and the itemLimitError logic from assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/Footer.js to assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/ErrorNotice.js.
• In assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/ErrorNotice.js, render the saveError and itemLimitError in addition to the other errors ("data loading failed / insufficient permissions").
  • Update and use the reusable assets/js/components/SelectionPanel/SelectionPanelError.js error instead of rendering <Notice type='error'> directly. This component has a "fix" for scrolling the last item in the selection panel list in the event that the error overlaps the last item.
• In assets/js/components/SelectionPanel/SelectionPanelFooter.js, clean up the saveError and itemLimitError props and rendering logic.

Test Coverage

• No new tests required.

QA Brief

• Setup Audience Segmentation and open the Audience Selection Panel.

• Verify that saving new audience selections work as normal.

• Verify that not selecting the correct amount (>= 1 and <=3) groups shows a better styled error as per the AC.

• Use the tweak browser extension or similar to now mock a few errors:

• Use the below settings to mock an error when SAVING a new audience selection. This error is now also updated to match the new styling as per the AC.
  

• Use the below settings to mock an error when LOADING the audience selection panel. Note that this error has not been modified in styling and is as before. This is just a regression test. Also note that it is acceptable to have two errors stack one above the other when both, a LOADING and SAVING error occur.
  

Changelog entry

• Fix visual bug in visitor group slide-over panel.

[eugene-manuilov]

AC and IB ✔️