Global Sidebar - prevent collapsed state from bleeding into other areas.

[Addison-Stavlo]

Related to a bug we noticed while testing # #90229

Proposed Changes

• Ensures we are on the sites dashboard before returning true from getShouldShowCollapsedGlobalSidebar

This fixes a weird bug that is semi difficult to repro. But if you go to the reader -> conversations (maybe not required this specific tab but it seemed to happen more here for me) -> reduce the width to mobile -> slowly expand width. You can see a point where the sidebar gets stuck in a collapsed state that it should never be in.

This PR resolves this issue. The getShouldShowCollapsedGlobalSidebar would return true simply for having the redesign flag and being under a specific breakpoint. It doesn't seem like it should ever return true if we aren't in section groups that require this behavior (I think that is limited to sites-dashboard and sites ?) .

Testing Instructions

• Smoke test the sites dashboard and verify the collapsed mode works as expected.
• Verify you can not repro the above noted bug in the reader.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-106365

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-106365&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-106365&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• command-palette-wp-admin
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/collapsed-sidebar-bleeding-outside-sites-dashboard on your sandbox.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~8 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
entry-stepper        +40 B  (+0.0%)       +8 B  (+0.0%)
entry-main           +40 B  (+0.0%)       +8 B  (+0.0%)
entry-login          +40 B  (+0.0%)       +8 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[davemart-in]

Looks like it resolves the issue in my testing!

[Addison-Stavlo]

I think i clearly messed something up 😅 ...

[Addison-Stavlo]

Pushed a fix dc762ea - this should be good for testing again.

[davemart-in]

Hmm... I was able to see another instance of this on the conversations screen by increasing and decreasing the browser screen over and over:

[Addison-Stavlo]

Hrm, was that on this live link and not accidently for another PR? 😕 I am unable to repro now on live or local. With the current logic the collapsed sidebar selectors are always returning false in the reader as well.

[Addison-Stavlo]

I can consistently reproduce the bug on Horizon by:

• Go to /read/conversations
• Reduce the screen width to mobile
• RELOAD the page, so everything mounts with that screen width initialized.
• Slowly expand the viewport width until you see the sidebar appear, it appears in the collapsed mode first.

I can't seem to get it to happen on the live link or localhost for this branch.

[davemart-in]

Just retested. That may have been the case because now I can't seem to be able to replicate it.