Studio: Refresh the CTA for users without sites

[katinthehatsite]

Related issues

Closes STU-912

Proposed Changes

This PR adds a modal with call to action for users that don't have any WP.com sites:

Original design: RToz6tIuQ7nlZrikBte4GU-fi-10114_134320 (minus the image on the top as we are not supposed to have the image there.

I made a small change to the design with the modal title:

• firstly, we should not really use the logo in the title, it does not work well as it is too large to use with the default title size and it does not work with that type
• we could do the logo in the title but we need to do some CSS to achieve that look (which I can do if we really want that)
• I was trying to find a simpler solution that features the logo but does not require a whole lot of customizations (this is open for discussion along with the copy)

Testing Instructions

• Pull the changes from this branch
• Apply the following diff

index cc226545..5e39a4cd 100644
--- a/src/hooks/use-fetch-wpcom-sites/index.tsx
+++ b/src/hooks/use-fetch-wpcom-sites/index.tsx
@@ -233,8 +233,9 @@ export const useFetchWpComSites = ( connectedSiteIdsOnlyForSelectedSite: number[
                [ rawSyncSites, memoizedConnectedSiteIds ]
        );
        return {
-               syncSites: syncSitesWithSyncSupportForSelectedSite,
+               syncSites: [],
                isFetching: isFetchingSites.current,
                refetchSites: fetchSites,
        };

• Navigate to Sync tab
• Click on Publish site or Pull site
• See the loading state on either of the buttons (this is new because instead of fetching the WP.com sites in the sync modal and seeing the loading state there right away, we are fetching them first and then deciding which modal to fetch)
• Confirm that you can see the modal for no sites appear
• Remove the diff that you applied
• Click on the button again
• Confirm that you see the sync modal
• Finally, navigate to a Studio site which already has some sites connected
• Click on Connect another site button
• Confirm that you can see the sync modal

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[github-actions]

📊 Performance Test Results

Comparing 4c74834 vs trunk

site-editor

Metric	trunk	4c74834	Diff	Change
load	16433.00 ms	11429.00 ms	-5004.00 ms	🟢 -30.5%

site-startup

Metric	trunk	4c74834	Diff	Change
siteCreation	22281.00 ms	25304.00 ms	+3023.00 ms	🔴 13.6%
siteStartup	9009.00 ms	11018.00 ms	+2009.00 ms	🔴 22.3%

---

Results are median values from multiple test runs.

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

[katinthehatsite]

@sejas I am leaving this as draft for now, just wanted to get your thoughts on design and copy for now. What do you think?

[sejas]

Sounds good! Thanks for working in this issue. I'll give it an early review.

[katinthehatsite]

@sejas One more question - I guess with the new design, we should now display this modal when the user clicks on either of those buttons, right?

[sejas]

Yes! both buttons will trigger the same modal if the user doesn't have any WPcom site.

[sejas]

firstly, we should not really use the logo in the title, it does not work well as it is too large to use with the default title size and it does not work with that type

@katinthehatsite , I think the default title is fine without any customizations, and we can move the WPcom logo to the description. 👍

Could you rebase the branch and move it to ready for review?

[katinthehatsite]

@katinthehatsite , I think the default title is fine without any customizations, and we can move the WPcom logo to the description. 👍
Could you rebase the branch and move it to ready for review?

Awesome, on it 👍

[katinthehatsite]

@sejas Feel free to review, I will test closer tomorrow once again before opening it for the team testing.

[katinthehatsite]

Technically, we don't need this tooltip here but I added it in case it is not clear for the user. We can remove it if not needed

[katinthehatsite]

I removed this fallback since if there are no sites found without searchQuery, we should always get the modal with NoWpcomSitesModal

[nightnei]

Left just 1 small comment

LGTM and works as expected 👍