From 263930e776e396a69bcad72e4880ec222e6be570 Mon Sep 17 00:00:00 2001
From: Dylan Munson <65001528+CodeyGuyDylan@users.noreply.github.com>
Date: Fri, 7 Feb 2025 09:20:21 -0700
Subject: [PATCH] Update/unowned section to list (#41312)

* Add redbubble and notice when paid plan is missing plugin(s).

* Add activate-multiple-plugins endpoint & logic.

* Delay last-backup-failed red-bubble until 30 min after purchase. Also fix $not_shown_products.

* Refactor how we derive shown_products & not_shown_products.

* Cleanup & add GlobalNotice after successfull activation/installation.

* Remove single product endpoints from mj REST_Products.

* Update unowned section to list

* changelog

* Remove filter
:

* Add text domain for dataviews

* Remove print statement

* Add missing text domain package"

* Update lockfile

* Fix package versions

* Fix bug where hook was being used in a loop

* Memoize fields to avoid CTA 'jumping'

* Add filter for dataview list (#41483)

* Add filter for dataview list

* Add changelog

* Update filter styling

* Change how category label is capitlized

* Styling tweaks

* Update lockfile

---------

Co-authored-by: Bryan Elliott <bryan@elliottprogrammer.com>
---
 pnpm-lock.yaml                                |  41 ++-
 .../_inc/components/action-button/index.tsx   |   9 +-
 .../_inc/components/product-card/index.tsx    |   2 +-
 .../components/product-cards-section/all.ts   |   1 +
 .../product-cards-section/index.tsx           |  38 +--
 .../products-table-view/constants.ts          |   5 +
 .../products-table-view/icons/anti-spam.tsx   |  37 +++
 .../products-table-view/icons/backup.tsx      |  20 ++
 .../products-table-view/icons/boost.tsx       |  20 ++
 .../products-table-view/icons/crm.tsx         |  34 +++
 .../products-table-view/icons/jetpack-ai.tsx  |  26 ++
 .../products-table-view/icons/protect.tsx     |  20 ++
 .../products-table-view/icons/search.tsx      |  20 ++
 .../products-table-view/icons/social.tsx      |  22 ++
 .../products-table-view/icons/stats.tsx       |  17 ++
 .../products-table-view/icons/videopress.tsx  |  20 ++
 .../components/products-table-view/index.tsx  | 236 ++++++++++++++++++
 .../components/products-table-view/style.scss | 100 ++++++++
 .../components/products-table-view/types.ts   |  14 ++
 .../changelog/add-filter-to-unowned-list      |   4 +
 .../changelog/update-unowned-section-to-list  |   4 +
 projects/packages/my-jetpack/global.d.ts      |  15 +-
 projects/packages/my-jetpack/package.json     |   2 +
 .../my-jetpack/src/class-rest-products.php    |   1 +
 .../src/products/class-anti-spam.php          |   7 +
 .../my-jetpack/src/products/class-backup.php  |   7 +
 .../my-jetpack/src/products/class-boost.php   |   7 +
 .../my-jetpack/src/products/class-crm.php     |   7 +
 .../src/products/class-jetpack-ai.php         |   7 +
 .../src/products/class-newsletter.php         |   7 +
 .../my-jetpack/src/products/class-product.php |   8 +
 .../my-jetpack/src/products/class-protect.php |   7 +
 .../src/products/class-related-posts.php      |   7 +
 .../my-jetpack/src/products/class-scan.php    |   7 +
 .../my-jetpack/src/products/class-search.php  |   7 +
 .../src/products/class-site-accelerator.php   |   7 +
 .../my-jetpack/src/products/class-social.php  |   7 +
 .../my-jetpack/src/products/class-stats.php   |  11 +
 .../src/products/class-videopress.php         |   7 +
 .../packages/my-jetpack/webpack.config.js     |  14 ++
 .../changelog/update-unowned-section-to-list  |   4 +
 .../changelog/update-unowned-section-to-list  |   4 +
 .../changelog/update-unowned-section-to-list  |   4 +
 .../changelog/update-unowned-section-to-list  |   4 +
 .../changelog/update-unowned-section-to-list  |   4 +
 .../changelog/update-unowned-section-to-list  |   4 +
 .../changelog/update-unowned-section-to-list  |   4 +
 .../changelog/update-unowned-section-to-list  |   4 +
 48 files changed, 837 insertions(+), 27 deletions(-)
 create mode 100644 projects/packages/my-jetpack/_inc/components/products-table-view/constants.ts
 create mode 100644 projects/packages/my-jetpack/_inc/components/products-table-view/icons/anti-spam.tsx
 create mode 100644 projects/packages/my-jetpack/_inc/components/products-table-view/icons/backup.tsx
 create mode 100644 projects/packages/my-jetpack/_inc/components/products-table-view/icons/boost.tsx
 create mode 100644 projects/packages/my-jetpack/_inc/components/products-table-view/icons/crm.tsx
 create mode 100644 projects/packages/my-jetpack/_inc/components/products-table-view/icons/jetpack-ai.tsx
 create mode 100644 projects/packages/my-jetpack/_inc/components/products-table-view/icons/protect.tsx
 create mode 100644 projects/packages/my-jetpack/_inc/components/products-table-view/icons/search.tsx
 create mode 100644 projects/packages/my-jetpack/_inc/components/products-table-view/icons/social.tsx
 create mode 100644 projects/packages/my-jetpack/_inc/components/products-table-view/icons/stats.tsx
 create mode 100644 projects/packages/my-jetpack/_inc/components/products-table-view/icons/videopress.tsx
 create mode 100644 projects/packages/my-jetpack/_inc/components/products-table-view/index.tsx
 create mode 100644 projects/packages/my-jetpack/_inc/components/products-table-view/style.scss
 create mode 100644 projects/packages/my-jetpack/_inc/components/products-table-view/types.ts
 create mode 100644 projects/packages/my-jetpack/changelog/add-filter-to-unowned-list
 create mode 100644 projects/packages/my-jetpack/changelog/update-unowned-section-to-list
 create mode 100644 projects/plugins/backup/changelog/update-unowned-section-to-list
 create mode 100644 projects/plugins/boost/changelog/update-unowned-section-to-list
 create mode 100644 projects/plugins/jetpack/changelog/update-unowned-section-to-list
 create mode 100644 projects/plugins/protect/changelog/update-unowned-section-to-list
 create mode 100644 projects/plugins/search/changelog/update-unowned-section-to-list
 create mode 100644 projects/plugins/social/changelog/update-unowned-section-to-list
 create mode 100644 projects/plugins/starter-plugin/changelog/update-unowned-section-to-list
 create mode 100644 projects/plugins/videopress/changelog/update-unowned-section-to-list

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c795514741650..108e5ab1b09b7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2778,6 +2778,9 @@ importers:
 
   projects/packages/my-jetpack:
     dependencies:
+      '@automattic/babel-plugin-replace-textdomain':
+        specifier: workspace:*
+        version: link:../../js-packages/babel-plugin-replace-textdomain
       '@automattic/format-currency':
         specifier: 1.0.1
         version: 1.0.1
@@ -2820,6 +2823,9 @@ importers:
       '@wordpress/data':
         specifier: 10.17.0
         version: 10.17.0(react@18.3.1)
+      '@wordpress/dataviews':
+        specifier: 4.12.0
+        version: 4.12.0(patch_hash=uzs6glhpt3sq2uqjvqzk6vk2ze)(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@wordpress/date':
         specifier: 5.17.0
         version: 5.17.0
@@ -8462,6 +8468,12 @@ packages:
     peerDependencies:
       react: ^18.0.0
 
+  '@wordpress/dataviews@4.12.0':
+    resolution: {integrity: sha512-hxUJ7OyXL131r1nY0Fm5PiN12+oMclCVooON3hwlh5/x0t/FydcsMp0toGrLmtQQz38VVKl9dIpjjLgUmpSbEw==}
+    engines: {node: '>=18.12.0', npm: '>=8.19.2'}
+    peerDependencies:
+      react: ^18.0.0
+
   '@wordpress/dataviews@4.13.0':
     resolution: {integrity: sha512-fJyHzNBvI/mivZh5z5+XC3tOSHojNOYVbSA9ifPB6hNcZjFJ+fsNt/I8tmOQdmOOb4dUESkOOKmk6RlPKCjErg==}
     engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -14597,6 +14609,9 @@ packages:
   third-party-web@0.26.2:
     resolution: {integrity: sha512-taJ0Us0lKoYBqcbccMuDElSUPOxmBfwlHe1OkHQ3KFf+RwovvBHdXhbFk9XJVQE2vHzxbTwvwg5GFsT9hbDokQ==}
 
+  third-party-web@0.26.4:
+    resolution: {integrity: sha512-cH8Y2deNWtUan3u7DM8Z9aPIMll3ATwFBpuYFo7IXfz58X/hwz3Re+nUEpu6stViCeDvgkuR7RjeyNr495cULA==}
+
   thread-loader@3.0.4:
     resolution: {integrity: sha512-ByaL2TPb+m6yArpqQUZvP+5S1mZtXsEP7nWKKlAUTm7fCml8kB5s1uI3+eHRP2bk5mVYfRSBI7FFf+tWEyLZwA==}
     engines: {node: '>= 10.13.0'}
@@ -17327,7 +17342,7 @@ snapshots:
 
   '@paulirish/trace_engine@0.0.39':
     dependencies:
-      third-party-web: 0.26.2
+      third-party-web: 0.26.4
 
   '@pkgjs/parseargs@0.11.0':
     optional: true
@@ -20627,6 +20642,28 @@ snapshots:
       rememo: 4.0.2
       use-memo-one: 1.1.3(react@18.3.1)
 
+  '@wordpress/dataviews@4.12.0(patch_hash=uzs6glhpt3sq2uqjvqzk6vk2ze)(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@ariakit/react': 0.4.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@babel/runtime': 7.25.7
+      '@wordpress/components': 29.3.0(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@wordpress/compose': 7.17.0(react@18.3.1)
+      '@wordpress/data': 10.17.0(react@18.3.1)
+      '@wordpress/element': 6.17.0
+      '@wordpress/i18n': 5.17.0
+      '@wordpress/icons': 10.17.0(react@18.3.1)
+      '@wordpress/primitives': 4.17.0(react@18.3.1)
+      '@wordpress/private-apis': 1.17.0
+      '@wordpress/warning': 3.17.0
+      clsx: 2.1.1
+      react: 18.3.1
+      remove-accents: 0.5.0
+    transitivePeerDependencies:
+      - '@emotion/is-prop-valid'
+      - '@types/react'
+      - react-dom
+      - supports-color
+
   '@wordpress/dataviews@4.13.0(patch_hash=uzs6glhpt3sq2uqjvqzk6vk2ze)(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@ariakit/react': 0.4.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -29231,6 +29268,8 @@ snapshots:
 
   third-party-web@0.26.2: {}
 
+  third-party-web@0.26.4: {}
+
   thread-loader@3.0.4(webpack@5.94.0):
     dependencies:
       json-parse-better-errors: 1.0.2
diff --git a/projects/packages/my-jetpack/_inc/components/action-button/index.tsx b/projects/packages/my-jetpack/_inc/components/action-button/index.tsx
index 7b20c13bc6991..37219a19268a0 100644
--- a/projects/packages/my-jetpack/_inc/components/action-button/index.tsx
+++ b/projects/packages/my-jetpack/_inc/components/action-button/index.tsx
@@ -138,7 +138,7 @@ const ActionButton: FC< ActionButtonProps > = ( {
 		installStandalonePlugin();
 	}, [ slug, installStandalonePlugin, recordEvent, tracksIdentifier ] );
 
-	const getStatusAction = useCallback( (): SecondaryButtonProps => {
+	const statusAction: SecondaryButtonProps = useMemo( () => {
 		switch ( status ) {
 			case PRODUCT_STATUSES.ABSENT: {
 				const buttonText = __( 'Learn more', 'jetpack-my-jetpack' );
@@ -322,9 +322,8 @@ const ActionButton: FC< ActionButtonProps > = ( {
 	] );
 
 	const allActions = useMemo(
-		() =>
-			hasAdditionalActions ? [ ...additionalActions, getStatusAction() ] : [ getStatusAction() ],
-		[ additionalActions, getStatusAction, hasAdditionalActions ]
+		() => ( hasAdditionalActions ? [ ...additionalActions, statusAction ] : [ statusAction ] ),
+		[ additionalActions, statusAction, hasAdditionalActions ]
 	);
 
 	const recordDropdownStateChange = useCallback( () => {
@@ -374,7 +373,7 @@ const ActionButton: FC< ActionButtonProps > = ( {
 	const dropdown = hasAdditionalActions && (
 		<div ref={ dropdownRef } className={ styles[ 'action-button-dropdown' ] }>
 			<ul className={ styles[ 'dropdown-menu' ] }>
-				{ [ ...additionalActions, getStatusAction() ].map( ( { label, isExternalLink }, index ) => {
+				{ [ ...additionalActions, statusAction ].map( ( { label, isExternalLink }, index ) => {
 					const onDropdownMenuItemClick = () => {
 						setCurrentAction( allActions[ index ] );
 						setIsDropdownOpen( false );
diff --git a/projects/packages/my-jetpack/_inc/components/product-card/index.tsx b/projects/packages/my-jetpack/_inc/components/product-card/index.tsx
index 108d08bbbd338..f6f3f41a313a0 100644
--- a/projects/packages/my-jetpack/_inc/components/product-card/index.tsx
+++ b/projects/packages/my-jetpack/_inc/components/product-card/index.tsx
@@ -19,7 +19,7 @@ import type { FC, MouseEventHandler, ReactNode, MouseEvent } from 'react';
 export type ProductCardProps = {
 	children?: ReactNode;
 	name: string;
-	Description: FC;
+	Description: FC | string;
 	admin: boolean;
 	recommendation?: boolean;
 	isDataLoading?: boolean;
diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/all.ts b/projects/packages/my-jetpack/_inc/components/product-cards-section/all.ts
index 19a5c3cf4fd5a..70cae5812fa87 100644
--- a/projects/packages/my-jetpack/_inc/components/product-cards-section/all.ts
+++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/all.ts
@@ -36,6 +36,7 @@ export const JetpackModuleToProductCard: {
 	extras: null,
 	scan: null,
 	creator: null,
+	'brute-force': null,
 	// Features:
 	newsletter: NewsletterCard,
 	'related-posts': RelatedPostsCard,
diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/index.tsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/index.tsx
index bf9f9724c6a16..05b63ea5138fd 100644
--- a/projects/packages/my-jetpack/_inc/components/product-cards-section/index.tsx
+++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/index.tsx
@@ -1,9 +1,10 @@
 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';
+import ProductsTableView from '../products-table-view';
 import StatsSection from '../stats-section';
 import AiCard from './ai-card';
 import AntiSpamCard from './anti-spam-card';
@@ -27,19 +28,7 @@ type DisplayItemType = Record<
 	// 'jetpack-ai' is the official slug for the AI module, so we also exclude 'ai'.
 	// The backend still supports the 'ai' slug, so it is part of the JetpackModule type.
 	// Related-posts, newsletter, and site-accelerator are features, not products.
-	Exclude<
-		JetpackModule,
-		| 'extras'
-		| 'scan'
-		| 'security'
-		| 'ai'
-		| 'creator'
-		| 'growth'
-		| 'complete'
-		| 'site-accelerator'
-		| 'newsletter'
-		| 'related-posts'
-	>,
+	JetpackModuleWithCard,
 	FC< { admin: boolean } >
 >;
 
@@ -115,15 +104,27 @@ const ProductCardsSection: FC< ProductCardsSectionProps > = ( { noticeMessage }
 			: __( 'Discover all Jetpack Products', 'jetpack-my-jetpack' );
 	}, [ ownedProducts.length ] );
 
-	const filterProducts = ( products: JetpackModule[] ) => {
-		const productsWithNoCard = [ 'scan', 'security', 'growth', 'extras', 'complete' ];
+	const filterProducts = useCallback( ( products: JetpackModule[] ) => {
+		const productsWithNoCard = [
+			'extras',
+			'scan',
+			'security',
+			'ai',
+			'creator',
+			'growth',
+			'complete',
+			'site-accelerator',
+			'newsletter',
+			'related-posts',
+			'brute-force',
+		];
 		return products.filter( product => {
 			if ( productsWithNoCard.includes( product ) ) {
 				return false;
 			}
 			return true;
 		} );
-	};
+	}, [] );
 
 	const filteredOwnedProducts = filterProducts( ownedProducts );
 	const filteredUnownedProducts = filterProducts( unownedProducts );
@@ -150,8 +151,7 @@ const ProductCardsSection: FC< ProductCardsSectionProps > = ( { noticeMessage }
 						<Col sm={ 4 } md={ 8 } lg={ 12 } className={ styles.cardListTitle }>
 							<Text variant="headline-small">{ unownedSectionTitle }</Text>
 						</Col>
-
-						<DisplayItems slugs={ filteredUnownedProducts } />
+						<ProductsTableView products={ filteredUnownedProducts } />
 					</Col>
 				</Container>
 			) }
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/constants.ts b/projects/packages/my-jetpack/_inc/components/products-table-view/constants.ts
new file mode 100644
index 0000000000000..355ab243a3977
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/components/products-table-view/constants.ts
@@ -0,0 +1,5 @@
+export const PRODUCT_TABLE_TITLE = 'title';
+export const PRODUCT_TABLE_STATUS = 'status';
+export const PRODUCT_TABLE_CATEGORY = 'category';
+export const PRODUCT_TABLE_DESCRIPTION = 'description';
+export const PRODUCT_TABLE_ICON = 'icon';
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/anti-spam.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/anti-spam.tsx
new file mode 100644
index 0000000000000..7fb8de6b01f80
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/anti-spam.tsx
@@ -0,0 +1,37 @@
+const AntiSpamIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<g clipPath="url(#clip0_4668_7926)">
+			<path
+				d="M34.214 21.6924L40.7619 38.9784C41.3267 40.4574 42.1943 40.9935 43.6778 41.1189C43.732 41.1213 43.7851 41.1349 43.8339 41.1588C43.8827 41.1828 43.926 41.2164 43.9613 41.2578C43.9966 41.2992 44.023 41.3474 44.039 41.3995C44.055 41.4516 44.0602 41.5063 44.0543 41.5605C44.0565 41.6164 44.0476 41.6722 44.0282 41.7247C44.0087 41.7771 43.9791 41.8252 43.9411 41.866C43.903 41.9069 43.8572 41.9398 43.8064 41.9628C43.7556 41.9858 43.7008 41.9985 43.6451 42.0001H36.473C36.415 42.0015 36.3574 41.9911 36.3035 41.9695C36.2496 41.948 36.2007 41.9157 36.1596 41.8746C36.1185 41.8335 36.0861 41.7845 36.0643 41.7305C36.0426 41.6765 36.032 41.6187 36.0331 41.5605C36.0288 41.504 36.0363 41.4473 36.055 41.3938C36.0736 41.3403 36.1031 41.2913 36.1415 41.2499C36.18 41.2084 36.2265 41.1753 36.2783 41.1528C36.33 41.1302 36.3859 41.1187 36.4423 41.1189C37.1626 41.1189 37.979 40.9299 37.979 40.0486C37.9727 39.6811 37.8977 39.3181 37.758 38.9784L36.1865 34.7899C36.1231 34.6009 36.0924 34.5372 35.9042 34.5372H29.9189C28.9777 34.5372 27.8175 34.5372 27.2834 35.7348L25.851 38.9784C25.7054 39.2727 25.6198 39.5933 25.5994 39.9213C25.5994 41.0552 27.0747 41.1189 27.8502 41.1189C27.9066 41.1187 27.9625 41.1302 28.0142 41.1528C28.066 41.1753 28.1126 41.2084 28.151 41.2499C28.1894 41.2913 28.2189 41.3403 28.2376 41.3938C28.2562 41.4473 28.2637 41.504 28.2595 41.5605C28.2606 41.6188 28.2499 41.6767 28.228 41.7307C28.2061 41.7847 28.1735 41.8337 28.1322 41.8747C28.0908 41.9156 28.0416 41.9477 27.9875 41.9689C27.9334 41.9901 27.8755 42 27.8175 41.998H21.4537C21.3958 41.9995 21.3382 41.989 21.2845 41.9674C21.2307 41.9459 21.1819 41.9135 21.1409 41.8724C21.1 41.8313 21.0678 41.7823 21.0463 41.7283C21.0248 41.6744 21.0144 41.6166 21.0158 41.5584C21.0116 41.502 21.019 41.4452 21.0377 41.3917C21.0563 41.3383 21.0858 41.2893 21.1242 41.2478C21.1627 41.2063 21.2092 41.1733 21.261 41.1507C21.3128 41.1282 21.3686 41.1166 21.425 41.1168C22.9618 41.0223 23.4713 40.2951 24.0585 38.9763L31.6173 22.3518C31.9631 21.6266 32.7161 20.998 33.4057 20.998C33.9009 21.0001 34.0585 21.2836 34.214 21.6924ZM28.4845 32.9637C28.4466 33.0197 28.4247 33.0851 28.4211 33.1527C28.4211 33.2164 28.4845 33.2472 28.6094 33.2472H34.8197C35.2576 33.2472 35.4458 33.1527 35.4458 32.8692C35.4452 32.727 35.4131 32.5866 35.3517 32.4584L33.6267 27.7974C33.2175 26.7272 32.6241 25.3118 32.4358 24.1451C32.4358 24.0834 32.4031 24.0506 32.3724 24.0506C32.3417 24.0506 32.311 24.0834 32.311 24.1451C32.0755 24.9473 31.7708 25.7274 31.4004 26.4766L28.4845 32.9637Z"
+				fill="#0CED57"
+			/>
+			<path
+				d="M34.214 21.6924L40.7619 38.9784C41.3267 40.4574 42.1943 40.9935 43.6778 41.1189C43.732 41.1213 43.7851 41.1349 43.8339 41.1589C43.8827 41.1828 43.926 41.2164 43.9613 41.2578C43.9966 41.2992 44.023 41.3474 44.039 41.3995C44.055 41.4516 44.0602 41.5063 44.0543 41.5605C44.0565 41.6164 44.0476 41.6722 44.0282 41.7247C44.0087 41.7771 43.9791 41.8252 43.9411 41.866C43.903 41.9069 43.8572 41.9398 43.8064 41.9628C43.7556 41.9858 43.7008 41.9985 43.6451 42.0001H36.473C36.415 42.0015 36.3574 41.9911 36.3035 41.9695C36.2496 41.948 36.2007 41.9157 36.1596 41.8746C36.1185 41.8335 36.0861 41.7845 36.0643 41.7305C36.0426 41.6766 36.032 41.6187 36.0331 41.5605C36.0288 41.504 36.0363 41.4473 36.055 41.3938C36.0736 41.3403 36.1031 41.2913 36.1415 41.2499C36.18 41.2084 36.2265 41.1753 36.2783 41.1528C36.33 41.1302 36.3859 41.1187 36.4423 41.1189C37.1626 41.1189 37.979 40.9299 37.979 40.0486C37.9727 39.6811 37.8977 39.3181 37.758 38.9784L36.1865 34.7899C36.1231 34.6009 36.0924 34.5372 35.9042 34.5372H29.9189C28.9777 34.5372 27.8175 34.5372 27.2834 35.7348L25.851 38.9784C25.7054 39.2727 25.6198 39.5933 25.5994 39.9213C25.5994 41.0552 27.0747 41.1189 27.8502 41.1189C27.9066 41.1187 27.9625 41.1302 28.0142 41.1528C28.066 41.1753 28.1126 41.2084 28.151 41.2499C28.1894 41.2913 28.2189 41.3403 28.2376 41.3938C28.2562 41.4473 28.2637 41.504 28.2595 41.5605C28.2606 41.6188 28.2499 41.6767 28.228 41.7307C28.2061 41.7847 28.1735 41.8337 28.1322 41.8747C28.0908 41.9156 28.0416 41.9477 27.9875 41.9689C27.9334 41.9901 27.8755 42 27.8175 41.998H21.4537C21.3958 41.9995 21.3382 41.989 21.2845 41.9675C21.2307 41.9459 21.1819 41.9135 21.1409 41.8724C21.1 41.8313 21.0678 41.7823 21.0463 41.7283C21.0248 41.6744 21.0144 41.6166 21.0158 41.5584C21.0116 41.502 21.019 41.4452 21.0377 41.3918C21.0563 41.3383 21.0858 41.2893 21.1242 41.2478C21.1627 41.2063 21.2092 41.1733 21.261 41.1507C21.3128 41.1282 21.3686 41.1166 21.425 41.1168C22.9618 41.0223 23.4713 40.2951 24.0585 38.9763L31.6173 22.3518C31.9631 21.6266 32.7161 20.998 33.4057 20.998C33.9009 21.0001 34.0585 21.2836 34.214 21.6924ZM28.4845 32.9637C28.4466 33.0197 28.4247 33.0851 28.4211 33.1527C28.4211 33.2164 28.4845 33.2472 28.6094 33.2472H34.8197C35.2576 33.2472 35.4458 33.1527 35.4458 32.8692C35.4452 32.727 35.4131 32.5866 35.3517 32.4584L33.6267 27.7974C33.2175 26.7272 32.6241 25.3118 32.4358 24.1451C32.4358 24.0834 32.4031 24.0506 32.3724 24.0506C32.3417 24.0506 32.311 24.0834 32.311 24.1451C32.0755 24.9473 31.7708 25.7274 31.4004 26.4766L28.4845 32.9637Z"
+				fill="#0CED57"
+			/>
+			<path
+				d="M46.0082 32.2219C46.0082 33.0312 45.5519 33.4893 44.7272 33.4893C43.9026 33.4893 43.5752 33.0682 43.5752 32.4252C43.5752 31.6159 44.052 31.1578 44.8561 31.1578C45.6603 31.1578 46.0082 31.5974 46.0082 32.2219Z"
+				fill="#0CED57"
+			/>
+			<path
+				d="M21.4351 32.2487C21.4351 33.056 20.9768 33.5162 20.1542 33.5162C19.3316 33.5162 18.998 33.093 18.998 32.4501C18.998 31.6428 19.4748 31.1826 20.279 31.1826C21.0832 31.1826 21.4351 31.6243 21.4351 32.2487Z"
+				fill="#0CED57"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_4668_7926">
+				<rect width="27" height="21" fill="white" transform="translate(19 21)" />
+			</clipPath>
+		</defs>
+	</svg>
+);
+
+export default AntiSpamIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/backup.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/backup.tsx
new file mode 100644
index 0000000000000..c46fb8b465b9a
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/backup.tsx
@@ -0,0 +1,20 @@
+const BackupIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M26.5118 27.9597C26.4453 27.957 26.3784 27.9556 26.3113 27.9556C23.5621 27.9556 21.3335 30.2539 21.3335 33.0889C21.3335 35.924 23.5621 38.2223 26.3113 38.2223L26.3409 38.2221H38.376L38.3996 38.2223C40.756 38.2223 42.6663 36.2523 42.6663 33.8223C42.6663 31.6421 41.1288 29.8323 39.111 29.4831L39.1112 29.4223C39.1112 26.1823 36.2459 23.5557 32.7112 23.5557C29.7275 23.5557 27.2207 25.4273 26.5118 27.9597C26.5118 27.9597 26.5118 27.9597 26.5118 27.9597ZM37.0923 31.1635L37.1111 29.4609L37.1112 29.4223C37.1112 27.4471 35.3087 25.5557 32.7112 25.5557C30.5416 25.5557 28.8833 26.9074 28.4377 28.4989L28.0111 30.0227L26.4301 29.958C26.3908 29.9564 26.3512 29.9556 26.3113 29.9556C24.7243 29.9556 23.3335 31.3 23.3335 33.0889C23.3335 34.876 24.7213 36.2194 26.3063 36.2223L26.3349 36.2221H38.3874L38.3996 36.2223C39.5939 36.2223 40.6663 35.2061 40.6663 33.8223C40.6663 32.5872 39.8018 31.6324 38.7699 31.4539L37.0923 31.1635Z"
+			fill="#0CED57"
+		/>
+	</svg>
+);
+
+export default BackupIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/boost.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/boost.tsx
new file mode 100644
index 0000000000000..8e3821d2b89dd
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/boost.tsx
@@ -0,0 +1,20 @@
+const BoostIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M37.3154 32L31.2603 25.3393L32.7401 23.994L40.0183 32L32.7401 40.006L31.2603 38.6606L37.3154 32ZM29.3154 32L23.2603 25.3393L24.7401 23.994L32.0183 32L24.7401 40.006L23.2603 38.6606L29.3154 32Z"
+			fill="#0CED57"
+		/>
+	</svg>
+);
+
+export default BoostIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/crm.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/crm.tsx
new file mode 100644
index 0000000000000..eed0253dd3074
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/crm.tsx
@@ -0,0 +1,34 @@
+const CrmIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M36.6667 30.6667C38.5076 30.6667 40 29.1743 40 27.3333C40 25.4924 38.5076 24 36.6667 24C34.8257 24 33.3333 25.4924 33.3333 27.3333C33.3333 29.1743 34.8257 30.6667 36.6667 30.6667ZM36.6667 28.6667C37.403 28.6667 38 28.0697 38 27.3333C38 26.597 37.403 26 36.6667 26C35.9303 26 35.3333 26.597 35.3333 27.3333C35.3333 28.0697 35.9303 28.6667 36.6667 28.6667Z"
+			fill="#0CED57"
+		/>
+		<path
+			d="M33.6667 38.6667V36C33.6667 33.975 32.025 32.3333 30 32.3333H24.6667C22.6416 32.3333 21 33.975 21 36V38.6667H23V36C23 35.0795 23.7462 34.3333 24.6667 34.3333H30C30.9205 34.3333 31.6667 35.0795 31.6667 36V38.6667H33.6667Z"
+			fill="#0CED57"
+		/>
+		<path
+			d="M43 36V38.6667H41V36C41 35.0795 40.2538 34.3333 39.3333 34.3333H36V32.3333H39.3333C41.3584 32.3333 43 33.975 43 36Z"
+			fill="#0CED57"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M30.6667 27.3333C30.6667 29.1743 29.1743 30.6667 27.3333 30.6667C25.4924 30.6667 24 29.1743 24 27.3333C24 25.4924 25.4924 24 27.3333 24C29.1743 24 30.6667 25.4924 30.6667 27.3333ZM28.6667 27.3333C28.6667 28.0697 28.0697 28.6667 27.3333 28.6667C26.597 28.6667 26 28.0697 26 27.3333C26 26.597 26.597 26 27.3333 26C28.0697 26 28.6667 26.597 28.6667 27.3333Z"
+			fill="#0CED57"
+		/>
+	</svg>
+);
+
+export default CrmIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/jetpack-ai.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/jetpack-ai.tsx
new file mode 100644
index 0000000000000..d55bb32ecdc56
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/jetpack-ai.tsx
@@ -0,0 +1,26 @@
+const JetpackAiIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<path
+			d="M24.5 20L25.7728 23.2272L29 24.5L25.7728 25.7728L24.5 29L23.2272 25.7728L20 24.5L23.2272 23.2272L24.5 20Z"
+			fill="#0CED57"
+		/>
+		<path
+			d="M38 20L39.6971 24.3029L44 26L39.6971 27.6971L38 32L36.3029 27.6971L32 26L36.3029 24.3029L38 20Z"
+			fill="#0CED57"
+		/>
+		<path
+			d="M30.5 29L32.6213 34.3787L38 36.5L32.6213 38.6213L30.5 44L28.3787 38.6213L23 36.5L28.3787 34.3787L30.5 29Z"
+			fill="#0CED57"
+		/>
+	</svg>
+);
+
+export default JetpackAiIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/protect.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/protect.tsx
new file mode 100644
index 0000000000000..b881e74a05608
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/protect.tsx
@@ -0,0 +1,20 @@
+const ProtectIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M32 20.2349L41 24.3258V30.4242C41 35.6229 37.6611 40.545 32.9529 42.0978C32.3343 42.3019 31.6657 42.3019 31.0471 42.0978C26.3389 40.545 23 35.6229 23 30.4242V24.3258L32 20.2349ZM25 25.6136V30.4242C25 34.8415 27.8602 38.9408 31.6735 40.1985C31.8853 40.2683 32.1147 40.2683 32.3265 40.1985C36.1398 38.9408 39 34.8415 39 30.4242V25.6136L32 22.4318L25 25.6136Z"
+			fill="#0CED57"
+		/>
+	</svg>
+);
+
+export default ProtectIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/search.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/search.tsx
new file mode 100644
index 0000000000000..099ec04ebc1f5
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/search.tsx
@@ -0,0 +1,20 @@
+const SearchIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M42 30.2586C42 34.8196 38.3025 38.5171 33.7414 38.5171C31.833 38.5171 30.0757 37.8698 28.6772 36.7827L23.4599 42L22 40.5401L27.2173 35.3228C26.1302 33.9243 25.4828 32.167 25.4828 30.2586C25.4828 25.6975 29.1803 22 33.7414 22C38.3025 22 42 25.6975 42 30.2586ZM39.9354 30.2586C39.9354 33.6794 37.1622 36.4525 33.7414 36.4525C30.3206 36.4525 27.5475 33.6794 27.5475 30.2586C27.5475 26.8377 30.3206 24.0646 33.7414 24.0646C37.1622 24.0646 39.9354 26.8377 39.9354 30.2586Z"
+			fill="#0CED57"
+		/>
+	</svg>
+);
+
+export default SearchIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/social.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/social.tsx
new file mode 100644
index 0000000000000..6665d4d05f97c
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/social.tsx
@@ -0,0 +1,22 @@
+const SocialIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<g>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M35.9287 23.8145V37.553L27.832 35.1813V39.4872H26.314V34.7366L23.557 33.929C22.4903 33.6165 21.7607 32.666 21.7607 31.5884V29.7791C21.7607 28.7015 22.4903 27.751 23.557 27.4385L35.9287 23.8145ZM34.4107 35.5751L27.832 33.648L27.832 27.7195L34.4107 25.7924V35.5751ZM26.314 28.1642L26.314 33.2033L23.9973 32.5247C23.5705 32.3997 23.2787 32.0194 23.2787 31.5884V29.7791C23.2787 29.348 23.5705 28.9678 23.9973 28.8428L26.314 28.1642ZM37.9529 31.4183H42.0009V29.9509H37.9529V31.4183ZM42.0009 35.575L37.9529 34.5967V33.1293L42.0009 34.1076V35.575ZM37.9529 28.2384L42.0009 27.2601V25.7927L37.9529 26.771V28.2384Z"
+				fill="#0CED57"
+			/>
+		</g>
+	</svg>
+);
+
+export default SocialIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/stats.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/stats.tsx
new file mode 100644
index 0000000000000..d9864aef610bd
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/stats.tsx
@@ -0,0 +1,17 @@
+const StatsIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<path d="M31 22.6667H33V42.6667H31V22.6667Z" fill="#0CED57" />
+		<path d="M24 29.3333H26V42.6667H24V29.3333Z" fill="#0CED57" />
+		<path d="M40 34.6667H38V42.6667H40V34.6667Z" fill="#0CED57" />
+	</svg>
+);
+
+export default StatsIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/videopress.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/videopress.tsx
new file mode 100644
index 0000000000000..8a81bc02fa958
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/videopress.tsx
@@ -0,0 +1,20 @@
+const VideopressIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M21.545 23C22.6814 23 23.6798 23.7522 23.991 24.8427L27.0674 35.6252C27.0705 35.6361 27.0755 35.6461 27.0821 35.6548L30.7267 23H32.7655H38.4016C42.352 23 45 25.5644 45 29.4466C45 33.3733 42.2825 35.8219 38.228 35.8219H35.5539H32.1081L31.4387 37.8894C30.8383 39.7436 29.1082 41 27.1553 41C25.2024 41 23.4722 39.7436 22.8719 37.8894L19.125 26.3175C18.5944 24.6788 19.8191 23 21.545 23ZM33.3536 31.9753H37.2556C38.9486 31.9753 39.9644 31.0048 39.9644 29.4466C39.9644 27.8795 38.9486 26.9534 37.2556 26.9534H34.9796L33.3536 31.9753Z"
+			fill="#0CED57"
+		/>
+	</svg>
+);
+
+export default VideopressIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/index.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/index.tsx
new file mode 100644
index 0000000000000..820e84ab516d7
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/components/products-table-view/index.tsx
@@ -0,0 +1,236 @@
+import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useState, useMemo } from 'react';
+import { useAllProducts } from '../../data/products/use-all-products';
+import ActionButton from '../action-button';
+import {
+	PRODUCT_TABLE_TITLE,
+	PRODUCT_TABLE_DESCRIPTION,
+	PRODUCT_TABLE_STATUS,
+	PRODUCT_TABLE_ICON,
+	PRODUCT_TABLE_CATEGORY,
+} from './constants';
+import AntiSpamIcon from './icons/anti-spam';
+import BackupIcon from './icons/backup';
+import BoostIcon from './icons/boost';
+import CrmIcon from './icons/crm';
+import JetpackAiIcon from './icons/jetpack-ai';
+import ProtectIcon from './icons/protect';
+import SearchIcon from './icons/search';
+import SocialIcon from './icons/social';
+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,
+	Operator,
+	Option,
+} from '@wordpress/dataviews';
+import type { FC } from 'react';
+
+import './style.scss';
+
+const PRODUCT_ICONS = {
+	backup: BackupIcon,
+	protect: ProtectIcon,
+	'anti-spam': AntiSpamIcon,
+	'jetpack-ai': JetpackAiIcon,
+	boost: BoostIcon,
+	search: SearchIcon,
+	videopress: VideopressIcon,
+	stats: StatsIcon,
+	crm: CrmIcon,
+	social: SocialIcon,
+};
+
+const compileData: (
+	products: JetpackModule[],
+	allProductData: {
+		[ key: string ]: ProductCamelCase;
+	}
+) => ProductData[] = ( products, allProductData ) => {
+	const data = products.map( product => {
+		const productData = allProductData[ product ];
+		const { description, name, status, slug, category } = productData;
+		return {
+			product: {
+				description,
+				name,
+				slug,
+				category,
+			},
+			status,
+		};
+	} );
+
+	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,
+	} ) );
+
+	return categoryOptions;
+};
+
+const ProductsTableView: FC< ProductsTableViewProps > = ( { products } ) => {
+	const getItemId = useCallback( ( item: ProductData ) => item.product.slug, [] );
+	const onChangeView = useCallback( ( newView: View ) => {
+		setView( newView );
+	}, [] );
+	const isItemClickable = useCallback( () => false, [] );
+	const allProductData = useAllProducts();
+
+	const baseView: ViewList = {
+		sort: {
+			field: PRODUCT_TABLE_TITLE,
+			direction: 'asc' as SortDirection,
+		},
+		type: 'list',
+		filters: [],
+		page: 1,
+		perPage: 10,
+	};
+
+	const defaultLayouts: SupportedLayouts = {
+		list: {
+			...baseView,
+			fields: [ PRODUCT_TABLE_DESCRIPTION, PRODUCT_TABLE_STATUS ],
+			titleField: PRODUCT_TABLE_TITLE,
+			mediaField: PRODUCT_TABLE_ICON,
+			showMedia: true,
+		},
+	};
+
+	const categories = useMemo(
+		() => getCategories( products, allProductData ),
+		[ products, allProductData ]
+	);
+
+	const fields = useMemo( () => {
+		return [
+			{
+				id: PRODUCT_TABLE_TITLE,
+				label: __( 'Title', 'jetpack-my-jetpack' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
+				getValue( { item }: { item: ProductData } ) {
+					return item.product.name;
+				},
+				render: ( { item }: { item: ProductData } ) => {
+					const { product } = item;
+					return <div>{ product.name }</div>;
+				},
+			},
+			{
+				id: PRODUCT_TABLE_DESCRIPTION,
+				label: __( 'Description', 'jetpack-my-jetpack' ),
+				enableGlobalSearch: true,
+				enableHiding: false,
+				getValue( { item }: { item: ProductData } ) {
+					return item.product.description;
+				},
+				render: ( { item }: { item: ProductData } ) => {
+					const { product } = item;
+					return <div>{ product.description }</div>;
+				},
+			},
+			{
+				id: PRODUCT_TABLE_CATEGORY,
+				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;
+				},
+			},
+			{
+				id: PRODUCT_TABLE_ICON,
+				label: __( 'Icon', 'jetpack-my-jetpack' ),
+				enableGlobalSearch: false,
+				enableHiding: false,
+				render( { item }: { item: ProductData } ) {
+					const { product } = item;
+					const Icon = PRODUCT_ICONS[ product.slug ];
+					return <Icon />;
+				},
+			},
+			{
+				id: PRODUCT_TABLE_STATUS,
+				label: 'Status',
+				enableGlobalSearch: false,
+				enableHiding: false,
+				getValue( { item }: { item: ProductData } ) {
+					return item.status;
+				},
+				render: ( { item }: { item: ProductData } ) => {
+					const { product } = item;
+					const { slug } = product;
+
+					return <ActionButton slug={ slug } tracksIdentifier="product_list_item" />;
+				},
+			},
+		];
+		// 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 >( {
+		type: 'list',
+		...defaultLayouts.list,
+	} );
+
+	const data = useMemo(
+		() => compileData( products, allProductData ),
+		[ allProductData, products ]
+	);
+
+	const { data: processedData, paginationInfo } = useMemo(
+		() => filterSortAndPaginate( data, view, fields ),
+		[ data, fields, view ]
+	);
+
+	return (
+		<DataViews
+			actions={ [] }
+			data={ processedData }
+			fields={ fields }
+			view={ view }
+			getItemId={ getItemId }
+			paginationInfo={ paginationInfo }
+			onChangeView={ onChangeView }
+			defaultLayouts={ defaultLayouts }
+			isItemClickable={ isItemClickable }
+		/>
+	);
+};
+
+export default ProductsTableView;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/style.scss b/projects/packages/my-jetpack/_inc/components/products-table-view/style.scss
new file mode 100644
index 0000000000000..85916a4eeecc5
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/components/products-table-view/style.scss
@@ -0,0 +1,100 @@
+@import '@wordpress/dataviews/build-style/style.css';
+@import '@wordpress/components/build-style/style.css';
+
+:root {
+    --tag-color: #DAFFDC;
+}
+
+div.dataviews-wrapper {
+    button.dataviews-view-list__item {
+        display: none;
+    }
+
+    div.dataviews-filters__container {
+        padding-left: 24px;
+    }
+    
+    svg.table-view-icon {
+        width: 52px;
+        height: 52px;
+    }
+    
+    button[aria-controls="dataviews-view-config-dropdown-0"] {
+        display: none;
+    }  
+    
+    div.dataviews__view-actions {
+        padding-left: 24px;
+        padding-right: 24px;
+        justify-content: flex-start;
+        align-items: center;
+    }
+    
+    button.components-button.is-secondary {
+        padding: calc( var(--spacing-base) / 2 ) var(--spacing-base);
+        font-weight: normal;
+    }
+    
+    div.components-base-control__field {
+        margin-bottom: 0;
+    }
+    
+    div.components-toggle-group-control {
+        padding: 0;
+        min-height: 32px;
+    }
+    
+    div.dataviews-title-field {
+        font-size: var(--font-title-small);
+    }
+    
+    span.dataviews-view-list__field-value {
+        font-size: var(--font-body-small);
+    }
+    
+    div.dataviews-view-list {
+        div[role="row"] {
+            border: none;
+    
+            .dataviews-view-list__fields {
+                justify-content: space-between;
+            }
+    
+            &:not(.is-selected).is-hovered,
+            &:not(.is-selected):hover {
+                background-color: transparent;
+    
+                .dataviews-view-list__fields {
+                    color: #757575;
+                }
+            }
+        }
+    }
+}
+
+div.dataviews-filters__search-widget-listitem {
+    span {
+        text-transform: capitalize;
+    }
+}
+
+span.dataviews-filters__summary-filter-text-value {
+    text-transform: capitalize;
+}
+
+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);
+}
\ No newline at end of file
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/types.ts b/projects/packages/my-jetpack/_inc/components/products-table-view/types.ts
new file mode 100644
index 0000000000000..2343952df598b
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/components/products-table-view/types.ts
@@ -0,0 +1,14 @@
+import type { ProductCamelCase } from '../../data/types';
+
+export interface ProductsTableViewProps {
+	products: JetpackModule[];
+}
+
+export type ProductData = {
+	product: Pick< ProductCamelCase, 'description' | 'name' | 'slug' | 'category' >;
+	status: ProductStatus;
+};
+
+export interface ListButtonProps {
+	slug: JetpackModule;
+}
diff --git a/projects/packages/my-jetpack/changelog/add-filter-to-unowned-list b/projects/packages/my-jetpack/changelog/add-filter-to-unowned-list
new file mode 100644
index 0000000000000..3464c9914b2bc
--- /dev/null
+++ b/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
diff --git a/projects/packages/my-jetpack/changelog/update-unowned-section-to-list b/projects/packages/my-jetpack/changelog/update-unowned-section-to-list
new file mode 100644
index 0000000000000..ffec2d2f389a2
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/update-unowned-section-to-list
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update the unowned section from a product grid to a product list
diff --git a/projects/packages/my-jetpack/global.d.ts b/projects/packages/my-jetpack/global.d.ts
index eb8fc175024ce..37a7d20290204 100644
--- a/projects/packages/my-jetpack/global.d.ts
+++ b/projects/packages/my-jetpack/global.d.ts
@@ -50,6 +50,18 @@ type JetpackModule =
 	| 'related-posts'
 	| 'brute-force';
 
+type JetpackModuleWithCard =
+	| 'anti-spam'
+	| 'backup'
+	| 'boost'
+	| 'crm'
+	| 'jetpack-ai'
+	| 'protect'
+	| 'search'
+	| 'social'
+	| 'stats'
+	| 'videopress';
+
 type ThreatItem = {
 	// Protect API properties (free plan)
 	id: string;
@@ -172,6 +184,7 @@ interface Window {
 				[ key: string ]: {
 					class: string;
 					description: string;
+					category: 'security' | 'performance' | 'growth' | 'create' | 'management';
 					disclaimers: Array< string[] >;
 					features: string[];
 					has_free_offering: boolean;
@@ -241,7 +254,7 @@ interface Window {
 					};
 					purchase_url?: string;
 					requires_user_connection: boolean;
-					slug: string;
+					slug: JetpackModule;
 					standalone_plugin_info: {
 						has_standalone_plugin: boolean;
 						is_standalone_installed: boolean;
diff --git a/projects/packages/my-jetpack/package.json b/projects/packages/my-jetpack/package.json
index 1a790f77c48dd..904ed1616b9ef 100644
--- a/projects/packages/my-jetpack/package.json
+++ b/projects/packages/my-jetpack/package.json
@@ -23,6 +23,7 @@
 		"test-coverage": "pnpm run test --coverage"
 	},
 	"dependencies": {
+		"@automattic/babel-plugin-replace-textdomain": "workspace:*",
 		"@automattic/format-currency": "1.0.1",
 		"@automattic/jetpack-analytics": "workspace:*",
 		"@automattic/jetpack-api": "workspace:*",
@@ -42,6 +43,7 @@
 		"@wordpress/i18n": "5.17.0",
 		"@wordpress/icons": "10.17.0",
 		"@wordpress/url": "4.17.0",
+		"@wordpress/dataviews": "4.12.0",
 		"clsx": "2.1.1",
 		"debug": "4.4.0",
 		"gridicons": "3.4.1",
diff --git a/projects/packages/my-jetpack/src/class-rest-products.php b/projects/packages/my-jetpack/src/class-rest-products.php
index e6dd8f2f2e8c5..c997c2280a510 100644
--- a/projects/packages/my-jetpack/src/class-rest-products.php
+++ b/projects/packages/my-jetpack/src/class-rest-products.php
@@ -172,6 +172,7 @@ public static function check_products_string( $value ) {
 
 		return true;
 	}
+
 	/**
 	 * Check Products argument.
 	 *
diff --git a/projects/packages/my-jetpack/src/products/class-anti-spam.php b/projects/packages/my-jetpack/src/products/class-anti-spam.php
index 7cec298d57aaf..1fa5b0a68ea3c 100644
--- a/projects/packages/my-jetpack/src/products/class-anti-spam.php
+++ b/projects/packages/my-jetpack/src/products/class-anti-spam.php
@@ -36,6 +36,13 @@ class Anti_Spam extends Product {
 	 */
 	public static $plugin_slug = 'akismet';
 
+	/**
+	 * The category of the product
+	 *
+	 * @var string
+	 */
+	public static $category = 'security';
+
 	/**
 	 * The feature slug that identifies the paid plan
 	 *
diff --git a/projects/packages/my-jetpack/src/products/class-backup.php b/projects/packages/my-jetpack/src/products/class-backup.php
index b4b267a255ad2..05a40be71d772 100644
--- a/projects/packages/my-jetpack/src/products/class-backup.php
+++ b/projects/packages/my-jetpack/src/products/class-backup.php
@@ -43,6 +43,13 @@ class Backup extends Hybrid_Product {
 	 */
 	public static $plugin_slug = 'jetpack-backup';
 
+	/**
+	 * The category of the product
+	 *
+	 * @var string
+	 */
+	public static $category = 'security';
+
 	/**
 	 * Backup has a standalone plugin
 	 *
diff --git a/projects/packages/my-jetpack/src/products/class-boost.php b/projects/packages/my-jetpack/src/products/class-boost.php
index ca2b18f034763..34d6f429521a2 100644
--- a/projects/packages/my-jetpack/src/products/class-boost.php
+++ b/projects/packages/my-jetpack/src/products/class-boost.php
@@ -44,6 +44,13 @@ class Boost extends Product {
 	 */
 	public static $plugin_slug = 'jetpack-boost';
 
+	/**
+	 * The category of the product
+	 *
+	 * @var string
+	 */
+	public static $category = 'performance';
+
 	/**
 	 * Boost has a standalone plugin
 	 *
diff --git a/projects/packages/my-jetpack/src/products/class-crm.php b/projects/packages/my-jetpack/src/products/class-crm.php
index dceeb0b2ae889..71aa29a8a1014 100644
--- a/projects/packages/my-jetpack/src/products/class-crm.php
+++ b/projects/packages/my-jetpack/src/products/class-crm.php
@@ -39,6 +39,13 @@ class Crm extends Product {
 	 */
 	public static $plugin_slug = 'zero-bs-crm';
 
+	/**
+	 * The category of the product
+	 *
+	 * @var string
+	 */
+	public static $category = 'management';
+
 	/**
 	 * Whether this product requires a user connection
 	 *
diff --git a/projects/packages/my-jetpack/src/products/class-jetpack-ai.php b/projects/packages/my-jetpack/src/products/class-jetpack-ai.php
index a317de5e5272c..1004db673d77d 100644
--- a/projects/packages/my-jetpack/src/products/class-jetpack-ai.php
+++ b/projects/packages/my-jetpack/src/products/class-jetpack-ai.php
@@ -28,6 +28,13 @@ class Jetpack_Ai extends Product {
 	 */
 	public static $slug = 'jetpack-ai';
 
+	/**
+	 * The category of the product
+	 *
+	 * @var string
+	 */
+	public static $category = 'create';
+
 	/**
 	 * Whether this product has a free offering
 	 *
diff --git a/projects/packages/my-jetpack/src/products/class-newsletter.php b/projects/packages/my-jetpack/src/products/class-newsletter.php
index 61a5736b77c61..cd24c8431008d 100644
--- a/projects/packages/my-jetpack/src/products/class-newsletter.php
+++ b/projects/packages/my-jetpack/src/products/class-newsletter.php
@@ -22,6 +22,13 @@ class Newsletter extends Module_Product {
 	 */
 	public static $slug = 'newsletter';
 
+	/**
+	 * The category of the product
+	 *
+	 * @var string
+	 */
+	public static $category = 'growth';
+
 	/**
 	 * The slug of the plugin associated with this product.
 	 * Newsletter is a feature available as part of the Jetpack plugin.
diff --git a/projects/packages/my-jetpack/src/products/class-product.php b/projects/packages/my-jetpack/src/products/class-product.php
index 4c6c76dc0dd93..136be00789ebf 100644
--- a/projects/packages/my-jetpack/src/products/class-product.php
+++ b/projects/packages/my-jetpack/src/products/class-product.php
@@ -48,6 +48,13 @@ abstract class Product {
 	 */
 	public static $plugin_slug = null;
 
+	/**
+	 * The category of the product in the Jetpack ecosystem. The options are performance, growth, security, management, and create
+	 *
+	 * @var string
+	 */
+	public static $category = null;
+
 	/**
 	 * The Jetpack plugin slug
 	 *
@@ -183,6 +190,7 @@ public static function get_info() {
 			'plugin_slug'                     => static::get_plugin_slug(),
 			'name'                            => static::get_name(),
 			'title'                           => static::get_title(),
+			'category'                        => static::$category,
 			'description'                     => static::get_description(),
 			'long_description'                => static::get_long_description(),
 			'tiers'                           => static::get_tiers(),
diff --git a/projects/packages/my-jetpack/src/products/class-protect.php b/projects/packages/my-jetpack/src/products/class-protect.php
index 36a1496f55a16..5a0980a344e83 100644
--- a/projects/packages/my-jetpack/src/products/class-protect.php
+++ b/projects/packages/my-jetpack/src/products/class-protect.php
@@ -52,6 +52,13 @@ class Protect extends Hybrid_Product {
 	 */
 	public static $plugin_slug = 'jetpack-protect';
 
+	/**
+	 * The category of the product
+	 *
+	 * @var string
+	 */
+	public static $category = 'security';
+
 	/**
 	 * Whether this product requires a user connection
 	 *
diff --git a/projects/packages/my-jetpack/src/products/class-related-posts.php b/projects/packages/my-jetpack/src/products/class-related-posts.php
index a12a5715b2a91..2f1818bfee1fa 100644
--- a/projects/packages/my-jetpack/src/products/class-related-posts.php
+++ b/projects/packages/my-jetpack/src/products/class-related-posts.php
@@ -44,6 +44,13 @@ class Related_Posts extends Module_Product {
 	 */
 	public static $module_name = 'related-posts';
 
+	/**
+	 * The category of the product
+	 *
+	 * @var string
+	 */
+	public static $category = 'growth';
+
 	/**
 	 * Whether this module is a Jetpack feature
 	 *
diff --git a/projects/packages/my-jetpack/src/products/class-scan.php b/projects/packages/my-jetpack/src/products/class-scan.php
index dde156a84c3ca..6f8cc05dc7f29 100644
--- a/projects/packages/my-jetpack/src/products/class-scan.php
+++ b/projects/packages/my-jetpack/src/products/class-scan.php
@@ -33,6 +33,13 @@ class Scan extends Module_Product {
 	 */
 	public static $module_name = 'scan';
 
+	/**
+	 * The category of the product
+	 *
+	 * @var string
+	 */
+	public static $category = 'security';
+
 	/**
 	 * The feature slug that identifies the paid plan
 	 *
diff --git a/projects/packages/my-jetpack/src/products/class-search.php b/projects/packages/my-jetpack/src/products/class-search.php
index bb1bc87045743..17054376bd934 100644
--- a/projects/packages/my-jetpack/src/products/class-search.php
+++ b/projects/packages/my-jetpack/src/products/class-search.php
@@ -41,6 +41,13 @@ class Search extends Hybrid_Product {
 	 */
 	public static $plugin_slug = 'jetpack-search';
 
+	/**
+	 * The category of the product
+	 *
+	 * @var string
+	 */
+	public static $category = 'performance';
+
 	/**
 	 * Search has a standalone plugin
 	 *
diff --git a/projects/packages/my-jetpack/src/products/class-site-accelerator.php b/projects/packages/my-jetpack/src/products/class-site-accelerator.php
index 72e65b9ff3d49..9e711a7f90695 100644
--- a/projects/packages/my-jetpack/src/products/class-site-accelerator.php
+++ b/projects/packages/my-jetpack/src/products/class-site-accelerator.php
@@ -22,6 +22,13 @@ class Site_Accelerator extends Module_Product {
 	 */
 	public static $slug = 'site-accelerator';
 
+	/**
+	 * The category of the product
+	 *
+	 * @var string
+	 */
+	public static $category = 'performance';
+
 	/**
 	 * The slug of the plugin associated with this product.
 	 * Site Accelerator is a feature available as part of the Jetpack plugin.
diff --git a/projects/packages/my-jetpack/src/products/class-social.php b/projects/packages/my-jetpack/src/products/class-social.php
index 8ba40dc889e4f..6eff8ce2adc5e 100644
--- a/projects/packages/my-jetpack/src/products/class-social.php
+++ b/projects/packages/my-jetpack/src/products/class-social.php
@@ -38,6 +38,13 @@ class Social extends Hybrid_Product {
 	 */
 	public static $plugin_slug = 'jetpack-social';
 
+	/**
+	 * The category of the product
+	 *
+	 * @var string
+	 */
+	public static $category = 'growth';
+
 	/**
 	 * Social has a standalone plugin
 	 *
diff --git a/projects/packages/my-jetpack/src/products/class-stats.php b/projects/packages/my-jetpack/src/products/class-stats.php
index 4ae6f485b981a..e838ecc67e58e 100644
--- a/projects/packages/my-jetpack/src/products/class-stats.php
+++ b/projects/packages/my-jetpack/src/products/class-stats.php
@@ -32,6 +32,13 @@ class Stats extends Module_Product {
 	 */
 	public static $module_name = 'stats';
 
+	/**
+	 * The category of the product
+	 *
+	 * @var string
+	 */
+	public static $category = 'growth';
+
 	/**
 	 * The Plugin slug associated with stats
 	 *
@@ -292,6 +299,10 @@ public static function has_trial_support() {
 	 * @return ?string
 	 */
 	public static function get_purchase_url() {
+		$status = static::get_status();
+		if ( $status === Products::STATUS_NEEDS_FIRST_SITE_CONNECTION ) {
+			return null;
+		}
 		// The returning URL could be customized by changing the `redirect_uri` param with relative path.
 		return sprintf(
 			'%s#!/stats/purchase/%d?from=jetpack-my-jetpack%s&redirect_uri=%s',
diff --git a/projects/packages/my-jetpack/src/products/class-videopress.php b/projects/packages/my-jetpack/src/products/class-videopress.php
index f3eab30b844fc..051e27514038b 100644
--- a/projects/packages/my-jetpack/src/products/class-videopress.php
+++ b/projects/packages/my-jetpack/src/products/class-videopress.php
@@ -36,6 +36,13 @@ class Videopress extends Hybrid_Product {
 	 */
 	public static $plugin_slug = 'jetpack-videopress';
 
+	/**
+	 * The category of the product
+	 *
+	 * @var string
+	 */
+	public static $category = 'performance';
+
 	/**
 	 * The filename (id) of the plugin associated with this product.
 	 *
diff --git a/projects/packages/my-jetpack/webpack.config.js b/projects/packages/my-jetpack/webpack.config.js
index 36fc920c8f668..f9ae3d5f9c396 100644
--- a/projects/packages/my-jetpack/webpack.config.js
+++ b/projects/packages/my-jetpack/webpack.config.js
@@ -33,6 +33,20 @@ module.exports = [
 					includeNodeModules: [ '@automattic/jetpack-' ],
 				} ),
 
+				// Add textdomains (but no other optimizations) for @wordpress/dataviews.
+				jetpackWebpackConfig.TranspileRule( {
+					includeNodeModules: [ '@wordpress/dataviews/' ],
+					babelOpts: {
+						configFile: false,
+						plugins: [
+							[
+								require.resolve( '@automattic/babel-plugin-replace-textdomain' ),
+								{ textdomain: 'jetpack-my-jetpack' },
+							],
+						],
+					},
+				} ),
+
 				// Handle CSS.
 				jetpackWebpackConfig.CssRule( {
 					extensions: [ 'css', 'sass', 'scss' ],
diff --git a/projects/plugins/backup/changelog/update-unowned-section-to-list b/projects/plugins/backup/changelog/update-unowned-section-to-list
new file mode 100644
index 0000000000000..ffec2d2f389a2
--- /dev/null
+++ b/projects/plugins/backup/changelog/update-unowned-section-to-list
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update the unowned section from a product grid to a product list
diff --git a/projects/plugins/boost/changelog/update-unowned-section-to-list b/projects/plugins/boost/changelog/update-unowned-section-to-list
new file mode 100644
index 0000000000000..ffec2d2f389a2
--- /dev/null
+++ b/projects/plugins/boost/changelog/update-unowned-section-to-list
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update the unowned section from a product grid to a product list
diff --git a/projects/plugins/jetpack/changelog/update-unowned-section-to-list b/projects/plugins/jetpack/changelog/update-unowned-section-to-list
new file mode 100644
index 0000000000000..50c7015d741a1
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-unowned-section-to-list
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Update the unowned section from a product grid to a product list
diff --git a/projects/plugins/protect/changelog/update-unowned-section-to-list b/projects/plugins/protect/changelog/update-unowned-section-to-list
new file mode 100644
index 0000000000000..ffec2d2f389a2
--- /dev/null
+++ b/projects/plugins/protect/changelog/update-unowned-section-to-list
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update the unowned section from a product grid to a product list
diff --git a/projects/plugins/search/changelog/update-unowned-section-to-list b/projects/plugins/search/changelog/update-unowned-section-to-list
new file mode 100644
index 0000000000000..ffec2d2f389a2
--- /dev/null
+++ b/projects/plugins/search/changelog/update-unowned-section-to-list
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update the unowned section from a product grid to a product list
diff --git a/projects/plugins/social/changelog/update-unowned-section-to-list b/projects/plugins/social/changelog/update-unowned-section-to-list
new file mode 100644
index 0000000000000..ffec2d2f389a2
--- /dev/null
+++ b/projects/plugins/social/changelog/update-unowned-section-to-list
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update the unowned section from a product grid to a product list
diff --git a/projects/plugins/starter-plugin/changelog/update-unowned-section-to-list b/projects/plugins/starter-plugin/changelog/update-unowned-section-to-list
new file mode 100644
index 0000000000000..ffec2d2f389a2
--- /dev/null
+++ b/projects/plugins/starter-plugin/changelog/update-unowned-section-to-list
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update the unowned section from a product grid to a product list
diff --git a/projects/plugins/videopress/changelog/update-unowned-section-to-list b/projects/plugins/videopress/changelog/update-unowned-section-to-list
new file mode 100644
index 0000000000000..ffec2d2f389a2
--- /dev/null
+++ b/projects/plugins/videopress/changelog/update-unowned-section-to-list
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update the unowned section from a product grid to a product list