Update demo sites to open link in browser instead of copying the link

[sejas]

Related issues

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

Proposed Changes

• Replace link in demo sites to open the browser instead of copy the link.
• Add tests to check the link opens the browser with the correct link

It follows the same style as Sync links but without tooltip.

studio/src/components/sync-connected-sites.tsx

Lines 225 to 235 in 8176093

	<Tooltip text={ connectedSite.url } className="overflow-hidden">
	<Button
	variant="link"
	className="!text-a8c-gray-70 hover:!text-a8c-blueberry max-w-[100%]"
	onClick={ () => {
	getIpcApi().openURL( connectedSite.url );
	} }
	>
	<span className="truncate">{ connectedSite.url }</span> <ArrowIcon />
	</Button>
	</Tooltip>

Testing Instructions

• Run `npm start``
• Click on Share tab
• Create a new demo site
• Observe the demo site link opens the browser instead of copying it
• Tests should pass

Before	After

Pre-merge Checklist

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

[fredrikekelund]

LGTM 👍 Why did we add the tooltip in the Sync tab again..? There's less horizontal space in the Sync tab compared to the Share tab. Is that it?

[sejas]

LGTM 👍 Why did we add the tooltip in the Sync tab again..? There's less horizontal space in the Sync tab compared to the Share tab. Is that it?

Yes! That’s the reason. We have less space in the Sync tab, and the domains are determined by the user, which means they can be very long and might be truncated. In contrast, the subdomains generated in the Share tab are a combination of 2-3 words.

[wojtekn]

Thanks for the fix, it improves the UX around demo sites.