From 5d3a7686edd64628cfb83a1f3aa89f6b31d33397 Mon Sep 17 00:00:00 2001
From: Paulo Marcos Trentin <paulo@paulotrentin.com.br>
Date: Fri, 15 Nov 2024 16:11:49 -0300
Subject: [PATCH] Improved DataViews usability: (#96465)

- Column with min-width and fixed width
- Hide status filter by default
- Reset filter hides when necessary
---
 .../plugins-list/plugins-list-dataviews.tsx   | 20 +++++++++++++++++--
 .../my-sites/plugins/plugins-list/style.scss  |  4 ++++
 .../plugins/plugins-list/use-fields.tsx       |  2 +-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/client/my-sites/plugins/plugins-list/plugins-list-dataviews.tsx b/client/my-sites/plugins/plugins-list/plugins-list-dataviews.tsx
index 93f01e9d48c86..45ed8dc6b4b83 100644
--- a/client/my-sites/plugins/plugins-list/plugins-list-dataviews.tsx
+++ b/client/my-sites/plugins/plugins-list/plugins-list-dataviews.tsx
@@ -42,6 +42,23 @@ export default function PluginsListDataViews( {
 		perPage: 15,
 		search: initialSearch,
 		fields: [ 'plugins', 'sites', 'update' ],
+		layout: {
+			styles: {
+				plugins: {
+					width: '60%',
+					minWidth: '300px',
+				},
+				sites: {
+					width: '70px',
+				},
+				update: {
+					minWidth: '200px',
+				},
+				actions: {
+					width: '50px',
+				},
+			},
+		},
 	} ) );
 
 	const [ isFilteringUpdates, setIsFilteringUpdates ] = useState( false );
@@ -80,7 +97,6 @@ export default function PluginsListDataViews( {
 		</>
 	);
 
-	// When search changes, notify the parent component
 	useEffect( () => {
 		if ( dataViewsState.search !== initialSearch ) {
 			onSearch && onSearch( dataViewsState.search || '' );
@@ -91,7 +107,7 @@ export default function PluginsListDataViews( {
 		if (
 			dataViewsState.filters?.length === 1 &&
 			dataViewsState.filters[ 0 ].field === 'status' &&
-			dataViewsState.filters[ 0 ].value.includes( PLUGINS_STATUS.UPDATE )
+			dataViewsState.filters[ 0 ].value?.includes( PLUGINS_STATUS.UPDATE )
 		) {
 			setIsFilteringUpdates( true );
 		} else {
diff --git a/client/my-sites/plugins/plugins-list/style.scss b/client/my-sites/plugins/plugins-list/style.scss
index e02e2c699dd7e..f1b9dc71658ce 100644
--- a/client/my-sites/plugins/plugins-list/style.scss
+++ b/client/my-sites/plugins/plugins-list/style.scss
@@ -14,6 +14,10 @@ body.is-section-plugins .plugin-management-wrapper,
                 max-width: 35px;
                 max-height: 35px;
             }
+
+            td:nth-child(2) {
+                white-space: break-spaces;
+            }
         }
     }
 }
diff --git a/client/my-sites/plugins/plugins-list/use-fields.tsx b/client/my-sites/plugins/plugins-list/use-fields.tsx
index ba2096dc63f69..2ec6ac03dbb7d 100644
--- a/client/my-sites/plugins/plugins-list/use-fields.tsx
+++ b/client/my-sites/plugins/plugins-list/use-fields.tsx
@@ -36,7 +36,7 @@ export function useFields(
 				],
 				filterBy: {
 					operators: [ 'isAny' as Operator ],
-					isPrimary: true,
+					isPrimary: false,
 				},
 				enableHiding: false,
 				enableSorting: false,