From a495aeadb8a85e2e1026475a3799f62bbcbec680 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Fri, 9 May 2025 11:38:58 +0200
Subject: [PATCH] Make the whole primary column clickable

---
 client/dashboard/sites/index.tsx                       |  8 ++------
 client/dashboard/sites/site-icon/style.scss            |  1 -
 packages/dataviews/src/components/dataviews/style.scss | 10 +++++++---
 .../src/dataviews-layouts/table/column-primary.tsx     |  7 +++----
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/client/dashboard/sites/index.tsx b/client/dashboard/sites/index.tsx
index 755bbbf8bcaf..430ed5dd3f30 100644
--- a/client/dashboard/sites/index.tsx
+++ b/client/dashboard/sites/index.tsx
@@ -1,7 +1,7 @@
 import { DataViews, filterSortAndPaginate } from '@automattic/dataviews';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
-import { Button, ExternalLink } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { useResizeObserver } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Icon, check } from '@wordpress/icons';
@@ -41,11 +41,7 @@ const DEFAULT_FIELDS: Field< Site >[] = [
 		id: 'URL',
 		label: __( 'URL' ),
 		enableGlobalSearch: true,
-		render: ( { item }: { item: Site } ) => (
-			<ExternalLink href={ item.URL } style={ { overflowWrap: 'anywhere' } }>
-				{ new URL( item.URL ).hostname }
-			</ExternalLink>
-		),
+		getValue: ( { item } ) => new URL( item.URL ).hostname,
 	},
 	{
 		id: 'icon.ico',
diff --git a/client/dashboard/sites/site-icon/style.scss b/client/dashboard/sites/site-icon/style.scss
index be085e67d534..366563ca422e 100644
--- a/client/dashboard/sites/site-icon/style.scss
+++ b/client/dashboard/sites/site-icon/style.scss
@@ -8,7 +8,6 @@
     background-color: #f5f7f7;
     border: 1px solid #eee;
     color: var(--wp-admin-theme-color);
-    cursor: default;
     display: flex;
     flex-shrink: 0;
     font-size: 24px;
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index b44d5b2543f4..7be0324b3423 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -88,11 +88,15 @@
 	}
 }
 
-.dataviews-title-field--clickable {
+.dataviews-column-primary--clickable {
 	cursor: pointer;
-	color: $gray-800;
+	.dataviews-title-field {
+		color: $gray-800;
+	}
 	&:hover {
-		color: var(--wp-admin-theme-color);
+		.dataviews-title-field {
+			color: var(--wp-admin-theme-color);
+		}
 	}
 	@include link-reset();
 }
diff --git a/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx b/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
index e482fd882c6a..f974bbf00f97 100644
--- a/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
@@ -33,11 +33,10 @@ function ColumnPrimary< Item >( {
 		item,
 		isItemClickable,
 		onClickItem,
-		className:
-			'dataviews-view-table__cell-content-wrapper dataviews-title-field',
+		className: 'dataviews-column-primary',
 	} );
 	return (
-		<HStack spacing={ 3 } justify="flex-start">
+		<HStack spacing={ 3 } justify="flex-start" { ...clickableProps }>
 			{ mediaField && (
 				<div className="dataviews-view-table__cell-content-wrapper dataviews-column-primary__media">
 					<mediaField.render item={ item } field={ mediaField } />
@@ -45,7 +44,7 @@ function ColumnPrimary< Item >( {
 			) }
 			<VStack spacing={ 0 }>
 				{ titleField && (
-					<div { ...clickableProps }>
+					<div className="dataviews-view-table__cell-content-wrapper dataviews-title-field">
 						{ level !== undefined && (
 							<span className="dataviews-view-table__level">
 								{ '—'.repeat( level ) }&nbsp;