Improved DataViews usability: (#96465)

- Column with min-width and fixed width
- Hide status filter by default
- Reset filter hides when necessary

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 {

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;
+            }
         }
     }
 }

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,