Update demo sites to open link in browser instead of copying the link (#790)

* Replace copy demo link with open in browser

* Add test to check the button click

Author: sejas

src/components/content-tab-snapshots.tsx

@@ -15,9 +15,9 @@ import { useSnapshots } from '../hooks/use-snapshots';
 import { useUpdateDemoSite } from '../hooks/use-update-demo-site';
 import { cx } from '../lib/cx';
 import { getIpcApi } from '../lib/get-ipc-api';
+import { ArrowIcon } from './arrow-icon';
 import { Badge } from './badge';
 import Button from './button';
-import { CopyTextButton } from './copy-text-button';
 import offlineIcon from './offline-icon';
 import ProgressBar from './progress-bar';
 import { ScreenshotDemoSite } from './screenshot-demo-site';
@@ -189,13 +189,16 @@ function SnapshotRow( {
 				</div>
 				<Badge>{ __( 'Demo site' ) }</Badge>
 			</div>
-			<CopyTextButton
-				text={ urlWithHTTPS }
-				label={ `${ urlWithHTTPS }, ${ __( 'Copy site url to clipboard' ) }` }
-				copyConfirmation={ __( 'Copied!' ) }
+			<Button
+				variant="link"
+				className="!text-a8c-gray-70 hover:!text-a8c-blueberry max-w-[100%]"
+				onClick={ () => {
+					getIpcApi().openURL( urlWithHTTPS );
+				} }
 			>
-				{ urlWithHTTPS }
-			</CopyTextButton>
+				<span className="truncate">{ urlWithHTTPS }</span>
+				<ArrowIcon />
+			</Button>
 			<div className="mt-2 text-a8c-gray-70 whitespace-nowrap overflow-hidden truncate flex-1">
 				{ sprintf( __( 'Expires in %s' ), countDown ) }
 			</div>

src/components/tests/content-tab-snapshots.test.tsx

@@ -30,9 +30,10 @@ const archiveSite = jest.fn();
 jest.mock( '../../hooks/use-archive-site' );
 
 const mockShowMessageBox = jest.fn();
+const mockOpenURL = jest.fn();
 jest.mock( '../../lib/get-ipc-api', () => ( {
 	getIpcApi: () => ( {
-		openURL: jest.fn(),
+		openURL: mockOpenURL,
 		generateProposedSitePath: jest.fn(),
 		showMessageBox: mockShowMessageBox,
 	} ),
@@ -432,6 +433,30 @@ describe( 'ContentTabSnapshots', () => {
 			expect( clearSnapshotsButton ).not.toBeInTheDocument();
 		} );
 	} );
+
+	test( 'clicking the demo site URL opens the browser', async () => {
+		const user = userEvent.setup();
+		( useSnapshots as jest.Mock ).mockReturnValue( {
+			snapshots: [
+				{
+					url: 'fake-site.fake',
+					atomicSiteId: 150,
+					localSiteId: 'site-id-1',
+					date: new Date().getTime(),
+					deleted: false,
+				},
+			],
+			fetchSnapshotUsage: jest.fn(),
+		} );
+
+		render( <ContentTabSnapshots selectedSite={ selectedSite } /> );
+
+		const urlButton = screen.getByRole( 'button', { name: 'https://fake-site.fake ↗' } );
+		expect( urlButton ).toBeVisible();
+		await user.click( urlButton );
+
+		expect( mockOpenURL ).toHaveBeenCalledWith( 'https://fake-site.fake' );
+	} );
 } );
 
 describe( 'AddDemoSiteWithProgress', () => {