Add is-selected to /sites on initial open preview pane

[candy02058912]

Fixes https://github.com/Automattic/dotcom-forge/issues/6782

Proposed Changes

This PR does direct DOM manipulation to add the is-selected class.

Before
See video in https://github.com/Automattic/dotcom-forge/issues/6782

After
See video in https://github.com/Automattic/dotcom-forge/issues/6782#issuecomment-2082467258

This is to prevent leakage of internal P2 URLs.

Notes

• This is a very hacky proposal as it isn't supported in the @wordpress/dataviews package located here.
• Even if we get a fix into the package mentioned above, our package.json is locked to a specific version of the @wordpress/dataviews, probably due to upgrading it might cause issues (Jetpack Manage: Lock the package "@wordpress/dataviews" to version 0.4.1 #87956)

Know Issues

Will need to wait until https://github.com/Automattic/dotcom-forge/issues/6803 is fixed for pagination-related issues.

Testing Instructions

• Go to /sites?flags=layout/dotcom-nav-redesign-v2
• Click on a site
• See if the site is highlighted in the sidebar of the flyout panel

Try to break it.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md 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:commit-f7767c260666b564a6963b44086b7443f58a5091

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

Sections (~332 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
sites-dashboard              +547 B  (+0.0%)     +163 B  (+0.0%)
site-monitoring              +547 B  (+0.0%)     +163 B  (+0.0%)
hosting                      +547 B  (+0.0%)     +163 B  (+0.0%)
github-deployments           +547 B  (+0.0%)     +163 B  (+0.0%)
a8c-for-agencies-sites       +547 B  (+0.0%)     +169 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

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]

@candy02058912 it looks like something in here might be breaking the transition effect. I'll ping you in the issue with a few screenshots.

[candy02058912]

Closing this PR as per the comment mentioned https://github.com/Automattic/dotcom-forge/issues/6782#issuecomment-2084257168

TL;DR, this seems possible to be fixed with a @wordpress/dataviews package update that we will be aiming for in the near future. #89739