Replace site component with dataview combined fields

[lsl]

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

Proposed changes:

Reworks the SiteField component to split site icon away from site title. Site icon is then combined with site-title on the table view and made the primary on list view with icon becoming the media field.

This change allows removal of the css overrides to hide the media and primary fields with display none.

Also fixes styling and disables onclick for deleted sites which was previously opening site stats (the fallback site home url) and taking you out of the sites dashboard with a broken browser back button.

Before

After

Testing

• Load /sites
• Confirm sorting has no new properties shown in the dataviews settings pop over
• Confirm clicking title opens and switches sites as before
• Confirm clicking on the icon opens and switches sites as before
• Confirm clicking deleted site titles and icons does nothing
• Confirm resizing the window maintains all columns until mobile which drops all but site title and action columns
• Confirm loading the page on a mobile screen works as expected
• Confirm switching sites works as expected on mobile

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

Sections (~31 bytes added 📈 [gzipped])

name                parsed_size           gzip_size
staging-site             +215 B  (+0.0%)      +31 B  (+0.0%)
sites-dashboard          +215 B  (+0.0%)      +31 B  (+0.0%)
site-tools               +215 B  (+0.0%)      +31 B  (+0.0%)
site-settings            +215 B  (+0.0%)      +31 B  (+0.0%)
site-performance         +215 B  (+0.0%)      +31 B  (+0.0%)
site-overview            +215 B  (+0.0%)      +31 B  (+0.0%)
site-monitoring          +215 B  (+0.0%)      +31 B  (+0.0%)
site-marketing           +215 B  (+0.0%)      +31 B  (+0.0%)
site-logs                +215 B  (+0.0%)      +31 B  (+0.0%)
hosting-features         +215 B  (+0.0%)      +31 B  (+0.0%)
hosting                  +215 B  (+0.0%)      +31 B  (+0.0%)
github-deployments       +215 B  (+0.0%)      +31 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.

[okmttdhr]

Would it make sense to make this a non-button element? Because:

• The Site Title is already a focusable element, so having two focusable elements for the same action seems unnecessary.
• Ensuring the focus state is visible on mobile view seems somewhat tricky (it's not visible currently).

[lsl]

Works for me.

[matticbot]

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

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

• notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/dv-primary on your sandbox.

[okmttdhr]

I left a comment, but it looks to be working pretty well!

[okmttdhr]

LGTM 👍

I noticed elements are vertically aligned in the list view, which differs from production & Core, but I can follow up on it in #96719.

[okmttdhr]

I'm merging this PR since it streamlines subsequent changes. If you have any feedback later, @oandregal, we can address it in a follow-up!