Untangling prod and staging sites

[nightnei]

Fixes STU-907

Proposed Changes

We want to display each site separately in the Sync dialog, so we no longer group production and staging together. We need this to be consistent with the "create site from wpcom" stepper.

Currently WPcom sites group production and staging sites under the same row. So with this PR we split them, so each row has only a site. That's the current behaviour for Pressable sites.

Also, I analyzed the code, and I don't see the necessity to have any migration. We just stopped using stagingSiteIds, and they will be cleaned up automatically over time.

Testing Instructions

1. Open wordpress.com and create site and staging site
2. Checkout out to trunk (don't apply this patch)
3. Open Sync tab in studio and connect that site
   
4. git checkout add/untanglingProdAndStagingSites
5. Open Sync tab and assert that now you see prod and staging sites as separate entities
   
6. Click on "Connect another site" and assert that you see both sites as separate entities and both of them "Already connected" and disabled
   
7. Try to push/pull and assert that it still works well after untangling
8. Open wordpress.com and delete staging site
9. Open Studio and assert that you see:
   
10. Click on "Disconnect" button
11. Open wordpress.com and delete main site
12. Open wordpress.com and delete staging site:
    
13. Open wordpress.com and create new site and staging site
14. Open Sync tab in studio, click on "Connect another site"
15. Assert that you see both prod and staging sites, created in 14-th step
16. Connect one and then the second one
17. Assert that everything went well
18. Try to push/pull and assert that it still works well

[github-actions]

📊 Performance Test Results

Comparing 26cf0a7 vs trunk

site-editor

Metric	trunk	26cf0a7	Diff	Change
load	14150.00 ms	11815.00 ms	-2335.00 ms	🟢 -16.5%

site-startup

Metric	trunk	26cf0a7	Diff	Change
siteCreation	24424.00 ms	23222.00 ms	-1202.00 ms	🟢 -4.9%
siteStartup	7012.00 ms	7050.00 ms	+38.00 ms	🔴 0.5%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change

[katinthehatsite]

Looks like unintended change :)

[katinthehatsite]

This worked well for me 👍 I did not spot any regressions. Also, the code looked good on my end and I don't have any further concerns:

Two questions that I had were:

• is this change something that we want to ship behind the feature flag or should this be available right away to the user?
• I am finding the grouping of sites a bit messy in the modal to connect sites now that they are separate. I am wondering if we should improve how the sites are organized in there e.g. perhaps first showing all production sites and then all staging sites etc. It does not need to be handled as a part of this PR though, just something to consider further in this project 👍

[nightnei]

@katinthehatsite

is this change something that we want to ship behind the feature flag or should this be available right away to the user?

Yep, we are going to ship it w/o feature flag.

I am finding the grouping of sites a bit messy in the modal to connect sites now that they are separate. I am wondering if we should improve how the sites are organized in there e.g. perhaps first showing all production sites and then all staging sites etc. It does not need to be handled as a part of this PR though, just something to consider further in this project 👍

I was also thinking that we should reconsider the design, for example, we can make sections narrower, at least remove the gray line between the site name and the URL, since now it makes feeling like it's 2 different items. But as you menthioned and I agree - it should be a separate issue. This PR is preety big, so I would keep it focused on one thing - untangling.

[katinthehatsite]

But as you menthioned and I agree - it should be a separate issue. This PR is preety big, so I would keep it focused on one thing - untangling.

Sounds good, we can open a separate issue to handle this and to ask for design input 👍

[nightnei]

@katinthehatsite created issue in Linear STU-918
@sejas when you get a chance, could you please also take a look at this PR and at the created issue

[sejas]

Great work! I confirm that the Staging and Production sites are now treated equally, and users can connect to them independently.
I confirm that existing connections were ported correctly to separate blocks, and connecting to and disconnecting sites work as expected.

I just left a suggestion to simplify the logic on src/modules/sync/components/sync-sites-modal-selector.tsx:284

Before	After

[sejas]

Wow! this simplified the logic a lot! 🥳

[sejas]

Now Pressable and WPcom sites can use the same code. Let's unify the logic.

				<div className="flex gap-2">
					<EnvironmentBadge type={ getSiteEnvironment( site ) } selected={ isSelected } />
				</div>

[nightnei]

Oh, yeah, missed it, thanks 👍