Add filter for dataview list

projects/packages/my-jetpack/_inc/components/product-cards-section/index.tsx

@@ -1,6 +1,6 @@
 import { Container, Col, Text, AdminSectionHero } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import { PRODUCT_SLUGS } from '../../data/constants';
 import useProductsByOwnership from '../../data/products/use-products-by-ownership';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
@@ -104,7 +104,7 @@ const ProductCardsSection: FC< ProductCardsSectionProps > = ( { noticeMessage }
 			: __( 'Discover all Jetpack Products', 'jetpack-my-jetpack' );
 	}, [ ownedProducts.length ] );
 
-	const filterProducts = ( products: JetpackModule[] ) => {
+	const filterProducts = useCallback( ( products: JetpackModule[] ) => {
 		const productsWithNoCard = [
 			'extras',
 			'scan',
@@ -124,7 +124,7 @@ const ProductCardsSection: FC< ProductCardsSectionProps > = ( { noticeMessage }
 			}
 			return true;
 		} );
-	};
+	}, [] );
 
 	const filteredOwnedProducts = filterProducts( ownedProducts );
 	const filteredUnownedProducts = filterProducts( unownedProducts );

projects/packages/my-jetpack/_inc/components/products-table-view/index.tsx

@@ -22,7 +22,14 @@ import StatsIcon from './icons/stats';
 import VideopressIcon from './icons/videopress';
 import type { ProductsTableViewProps, ProductData } from './types';
 import type { ProductCamelCase } from '../../data/types';
-import type { ViewList, SupportedLayouts, SortDirection, View } from '@wordpress/dataviews';
+import type {
+	ViewList,
+	SupportedLayouts,
+	SortDirection,
+	View,
+	Operator,
+	Option,
+} from '@wordpress/dataviews';
 import type { FC } from 'react';
 
 import './style.scss';
@@ -63,6 +70,29 @@ const compileData: (
 	return data;
 };
 
+const getCategories: (
+	products: JetpackModule[],
+	allProductData: {
+		[ key: string ]: ProductCamelCase;
+	}
+) => Option[] = ( products, allProductData ) => {
+	const categories = [
+		...new Set(
+			products.map( product => {
+				const productData = allProductData[ product ];
+				return productData.category;
+			} )
+		),
+	];
+
+	const categoryOptions = categories.map( category => ( {
+		value: category,
+		label: category.charAt( 0 ).toUpperCase() + category.slice( 1 ),
+	} ) );
+
+	return categoryOptions;
+};
+
 const ProductsTableView: FC< ProductsTableViewProps > = ( { products } ) => {
 	const getItemId = useCallback( ( item: ProductData ) => item.product.slug, [] );
 	const onChangeView = useCallback( ( newView: View ) => {
@@ -92,6 +122,11 @@ const ProductsTableView: FC< ProductsTableViewProps > = ( { products } ) => {
 		},
 	};
 
+	const categories = useMemo(
+		() => getCategories( products, allProductData ),
+		[ products, allProductData ]
+	);
+
 	const fields = useMemo( () => {
 		return [
 			{
@@ -125,6 +160,11 @@ const ProductsTableView: FC< ProductsTableViewProps > = ( { products } ) => {
 				label: __( 'Category', 'jetpack-my-jetpack' ),
 				enableGlobalSearch: true,
 				enableHiding: true,
+				filterBy: {
+					isPrimary: true,
+					operators: [ 'is' ] as Operator[],
+				},
+				elements: categories.length > 1 ? categories : [],
 				isVisible: () => false,
 				getValue( { item }: { item: ProductData } ) {
 					return item.product.category;
@@ -157,6 +197,10 @@ const ProductsTableView: FC< ProductsTableViewProps > = ( { products } ) => {
 				},
 			},
 		];
+		// Having this re-calculate on every change of "categories" was causing unnecessary re-renders
+		// and a 'jumping' of the CTA buttons. Having categories as a dependency here is unnecessary
+		// and leaving it out doesn't cause the values to be incorrect.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	const [ view, setView ] = useState< View >( {

projects/packages/my-jetpack/_inc/components/products-table-view/style.scss

@@ -15,7 +15,7 @@ svg.table-view-icon {
     height: 52px;
 }
 
-div.components-dropdown {
+button[aria-controls="dataviews-view-config-dropdown-0"] {
     display: none;
 }
 
@@ -26,6 +26,10 @@ div.dataviews__view-actions {
     align-items: center;
 }
 
+div.dataviews-filters__container {
+    padding-left: 24px;
+}
+
 button.components-button.is-secondary {
     padding: calc( var(--spacing-base) / 2 ) var(--spacing-base) !important;
     font-weight: normal;
@@ -62,3 +66,20 @@ div.dataviews-view-list {
         }
     }
 }
+
+div.dataviews-filters__search-widget-listitem:hover,
+div.dataviews-filters__search-widget-listitem[data-active-item] {
+    background-color: var(--tag-color);
+    color: var(--jp-gray-70);
+}
+
+div.dataviews-filters__search-widget-listitem:hover {
+    span.dataviews-filters__search-widget-listitem-check {
+        fill: var(--jp-gray-70);
+    }
+}
+div.dataviews-filters__summary-chip-container div.dataviews-filters__summary-chip.has-values[aria-expanded=true],
+div.dataviews-filters__summary-chip-container div.dataviews-filters__summary-chip.has-values:hover,
+div.dataviews-filters__summary-chip-container button.dataviews-filters__summary-chip-remove.has-values:hover {
+    background-color: var(--tag-color);
+}

projects/packages/my-jetpack/changelog/add-filter-to-unowned-list

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add filter to unowned list of products