Simplify experience when additional scopes are required to view the dashboard

[aaemnnosttv]

Feature Description

Currently when additional scopes are required for simply displaying the dashboard, the experience is a bit disjointed, with multiple notices/errors/CTAs appearing simultaneously which makes for a bit of a chaotic UI:

This is easy to recreate:

1. Setup Site Kit with no extra modules
2. Sign in with a second admin, and connect Analytics
3. Sign in with the first admin again, see above

---

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

Acceptance criteria

• In the event of the user not having satisfied scopes, the permissions modal should not be displayed if the unsatisfied scopes that triggered the modal exactly match the unsatisfied scopes that are preloaded within _googlesitekitLegacyData.setup.unsatisfiedScopes.

Implementation Brief

• Inside assets/js/components/PermissionsModal/AuthenticatedPermissionsModal.js:
  • Get unsatisfiedScopes by using getUnsatisfiedScopes selector
  • Return null early if all permissionsError.data.scopes exists in unsatisfiedScopes
  • If at least one scope from the permissionsError.data.scopes does not exist in the unsatisfiedScopes, then the permission modal should still be shown.

Test Coverage

• VRT may need an update

QA Brief

• Using recreate steps from AC make the errro occur again - the modal should not appear now

Changelog entry

• Simplify experience when additional scopes are required to view the dashboard.

[FlicHollis]

Hi @aaemnnosttv if you are not actively working on this, could you un-assign yourself so someone else can pick up? Thanks!

[jimmymadon]

@marrrmarrr @aaemnnosttv As I thought, we do have multiple "red box" errors if this happens. The UI is chaotic with the Dialog box (popup), a banner in the header and the red boxes all showing at once. We can definitely get rid of the Banner - even though it has some more detail, it pretty much conveys the same message as the error boxes. We could also get rid of the default popup that shows (although this behaviour is standard throughout the app if there is a lack of scope and we'll have to make a special case here). Then we can simply add a CTA within the error boxes. But there will be multiple CTAs in multiple error boxes - so not sure if that is "less overwhelming / disjointed".

On a side note, the "Get help" link on this error simply takes us to the "Using the Troubleshooting mode plugin" page. Since scopes and permissions is a common error, perhaps we should have a dedicated section in the "Fixing common issues with Site Kit page". Saying this, the fix is explained in the error and is simply clicking a CTA. So simply hiding the "Get help" link here or linking it to something more generic than "Troubleshooting mode" such as "Site Kit support" may make more sense.

[jimmymadon]

@marrrmarrr We discussed this again in our AC Sync and decided to hide the modal and keep everything else as it is. So the banner will have a CTA and the red boxes remain unchanged.

c.c. @aaemnnosttv

[tofumatt]

ACs 👍🏻

[eugene-manuilov]

• Return null early If unsatisfiedScopes === permissionsError.data.scopes

@sashadoes since both variables are arrays, we need to check whether all scopes from the permissions error exist in the unsatisfied scopes array. If at least one scope from the error does not exist in the unsatisfied scopes, then the permission modal should still be shown.

[eugene-manuilov]

IB ✔️

[wpdarren]

QA Update: ✅

Verified:

• Using steps from AC the modal does not appear now