Glitches / errors when changing the audience selection in mobile viewports

[kelvinballoo]

Bug Description

A number of glitches have come to light in the Audience Tiles view. These should be looked at together as it's likely the fixes will be related.

• The audiences ordering can go out of sync between the Audience Tiles and the Selection Panel, or both can be in the wrong order.
• In the mobile viewport, adding audiences to the selection can cause the Audience Tile tabs to glitch / error in a variety of ways.

Steps to reproduce

Audience ordering goes out of sync

1. Given a property is connected where the SK audiences are in the order "new visitors", "returning visitors".
2. Load the dashboard with the "new visitors" audience selected.
3. Open the Selection Panel, add the "returning visitors" audience, and save the selection.
4. The audiences will be in the order "new visitors", "returning visitors" in the Audience Tiles widget, but "returning visitors", "new visitors" in the Selection Panel.

Screen capture

https://github.com/user-attachments/assets/ddd75505-8e00-4b67-b50b-f53807f17fbe

Alternatively:

2. Load the dashboard with the "returning visitors" audience selected.
3. Open the Selection Panel, add the "new visitors" audience, and save the selection.
4. The audiences will be in the order "returning visitors", "new visitors" in both Audience Tiles widget" in the Selection Panel, which is opposite to their order in the API.

Adding audience before the last tab breaks the new audience tab and the last tab

1. Load the dashboard in a mobile viewport with two audiences selected.
2. Open the Selection Panel, add another audience which appears before the last audience in the tab order, and save the selection.
3. The tabs for the newly added audience and the last audience will glitch and open the wrong audiences.

Screen capture

https://github.com/user-attachments/assets/369479fa-4102-422b-9b04-832fe7ff584d

Removing audience does not select the remaining tab

1. Load the dashboard in a mobile viewport with two audiences selected.
2. Open the Selection Panel, remove the second audience, and save the selection.
3. The tab for the remaining audience will not be selected and its tile will not be visible.

Screen capture

https://github.com/user-attachments/assets/fbda7830-fa25-44db-9102-a5407b34511b

Removing the first or second audience with three selected breaks the remaining tabs

1. Load the dashboard in a mobile viewport with three audiences selected.
2. Open the Selection Panel, remove the first or second audience, and save the selection.
3. The tabs for the remaining audiences will glitch and not select properly.

Screen capture

https://github.com/user-attachments/assets/aad12d4e-a99b-4195-b44d-5f5e4efa7cf8

Removing and readding an audience breaks the audience tab. Adding a third audience results in a JS error when clicking the tab.

1. Load the dashboard in a mobile viewport with two audiences selected.
2. Open the Selection Panel, remove second audience, and save the selection.
3. Open the Selection Panel, re-add the audience, and save the selection.
4. The tab for the audience will glitch and not select properly.
5. Open the Selection Panel, add a third audience, and save the selection.
6. Clicking on the tab for the new audience will result in a JS error captured and displayed in the Audience Tiles widget.

Screen capture

https://github.com/user-attachments/assets/771d8a4f-e21a-4158-b5f0-abcdf110c93f

Notes

• It's possible to reproduce some aspects by updating the audience selection through other means, e.g. "temporarily hiding" the audience tiles (see https://github.com/google/site-kit-wp/issues/8877#issuecomment-2273178051), and it's likely that updating the selection via syncing audiences will also have an effect. The fixes should apply when the selection is updated via any mechanism.

Additional Context

• PHP Version: any
• OS: any
• Browser: any
• Plugin Version: pre-release 1.32.0
• Device: any

---

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

Acceptance criteria

• The audiences should be presented in the order described in https://github.com/google/site-kit-wp/issues/8519 at all times, both in the list of Audience Tiles and the Selection Panel.
• The audience tabs in the mobile, tabbed view should continue to function without error when updating the audience selection in any way.
• Specifically, the "steps to reproduce" listed above should no longer result in errors.
• The ordering of the Site Kit created audiences should be updated to provide a consistent order, so "new visitors" always comes before "returning visitors".

Implementation Brief

Audience ordering

• Fix the ordering in Analytics_4::set_available_audiences() so that it defaults to the initial sort order if the order is otherwise equal, and sorts in the order "new audiences", "returning audiences" when the audienceType is SITE_KIT_AUDIENCE.
• Update the ordering in the saveAudienceSettings() action to order the saved audiences by their order in availableAudiences.

Remember the previously active tab when the audience selection changes

• In the AudienceTiles component, store the active audience's name in activeTile rather than its index which can change when the audience selection is updated.
• Ensure activeTile defaults to the first audience if the active audience is removed from the audience selection.

TabBar glitches

The glitchy behaviour outside of the audience ordering is due to the TabBar implementation not handling updates to the tabs very well. This is because it maintains an internal list of tabs which it pushes to when it sees a new child element (see ref: this.pushToTabList in renderTab), but doesn't reorder/update when the children are reordered or removed.

We need to apply the following workarounds in the AudienceTiles component:

• Apply the key visibleAudiences.length to the rendered TabBar. This ensures the TabBar is rerendered when the number of audiences changes.
• Apply the key index instead of audienceResourceName to the rendered Tab instances. This ensures the list of children will correspond to the internal tab list when the tabs are reordered.

Draft PR

There is a draft PR that can be completed: https://github.com/google/site-kit-wp/pull/9228

Test Coverage

• Update the existing tests for the sorting logic to cover the above changes.
• Update any failing tests.

QA Brief

• Run through the various steps to reproduce, and verify the described glitches don't occur.

Changelog entry

• Fix glitches and errors when changing the audience selection in mobile viewports, ensuring audiences are listed in the correct order, and audience tabs function properly without errors.

[kuasha420]

Thanks for the investigation and the IB here @techanvil. All LGTM.

IB :heavy_check_mark:

[kelvinballoo]

QA Update ✅

Verified good on real iPhone 15 Pro Max Safari. Ticket is good to move to approval.

• The audiences is presented in the order described in https://github.com/google/site-kit-wp/issues/8519 at all times, both in the list of Audience Tiles and the Selection Panel. ✅

  Tested for user created audience, site kit created audience and default analytics audience.  

• The audience tabs in the mobile, tabbed view functions without error when updating the audience selection in any way. ✅

• In the tests "new visitors" always comes before "returning visitors". ✅

• The "steps to reproduce" listed in the ticket description no longer result in errors. ✅

  • Audience ordering goes out of sync

    https://github.com/user-attachments/assets/7fff5a79-3ba6-4257-a09b-b1efc3ec7398

  • Adding audience before the last tab breaks the new audience tab and the last tab

    https://github.com/user-attachments/assets/e2a3998d-267e-46a8-9482-fb402138fabf

  • Removing audience does not select the remaining tab

    https://github.com/user-attachments/assets/31f90d19-c888-4f7f-8462-658aa567ecae

  • Removing the first or second audience with three selected breaks the remaining tabs

    https://github.com/user-attachments/assets/e0adc7ea-1f36-46f9-be60-a39dc8660fa8

  • Removing and readding an audience breaks the audience tab. Adding a third audience results in a JS error when clicking the tab.

    https://github.com/user-attachments/assets/9cca014d-25ca-47f9-9ef9-ceee42b19168