Add chevron to interstitial for mobile view

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

@@ -1,7 +1,11 @@
+import { useViewportMatch } from '@wordpress/compose';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { __ } from '@wordpress/i18n';
+import { Icon, chevronRight } from '@wordpress/icons';
 import { useCallback, useState, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useAllProducts } from '../../data/products/use-all-products';
+import useAnalytics from '../../hooks/use-analytics';
 import ActionButton from '../action-button';
 import {
 	PRODUCT_TABLE_TITLE,
@@ -30,7 +34,7 @@ import type {
 	Operator,
 	Option,
 } from '@wordpress/dataviews';
-import type { FC } from 'react';
+import type { FC, MouseEvent } from 'react';
 
 import './style.scss';
 
@@ -100,6 +104,9 @@ const ProductsTableView: FC< ProductsTableViewProps > = ( { products } ) => {
 	}, [] );
 	const isItemClickable = useCallback( () => false, [] );
 	const allProductData = useAllProducts();
+	const isMobileViewport: boolean = useViewportMatch( 'medium', '<' );
+	const navigate = useNavigate();
+	const { recordEvent } = useAnalytics();
 
 	const baseView: ViewList = {
 		sort: {
@@ -127,6 +134,15 @@ const ProductsTableView: FC< ProductsTableViewProps > = ( { products } ) => {
 		[ products, allProductData ]
 	);
 
+	const navigateToInterstitial = useCallback(
+		( slug: string ) => ( event: MouseEvent< HTMLButtonElement > ) => {
+			event.preventDefault();
+			recordEvent( `jetpack_myjetpack_product_list_item_${ slug }_learnmore_mobile_click` );
+			navigate( `add-${ slug }` );
+		},
+		[ navigate, recordEvent ]
+	);
+
 	const fields = useMemo( () => {
 		return [
 			{
@@ -177,8 +193,8 @@ const ProductsTableView: FC< ProductsTableViewProps > = ( { products } ) => {
 				enableHiding: false,
 				render( { item }: { item: ProductData } ) {
 					const { product } = item;
-					const Icon = PRODUCT_ICONS[ product.slug ];
-					return <Icon />;
+					const ProductIcon = PRODUCT_ICONS[ product.slug ];
+					return <ProductIcon />;
 				},
 			},
 			{
@@ -193,15 +209,32 @@ const ProductsTableView: FC< ProductsTableViewProps > = ( { products } ) => {
 					const { product } = item;
 					const { slug } = product;
 
-					return <ActionButton slug={ slug } tracksIdentifier="product_list_item" />;
+					if ( isMobileViewport ) {
+						return (
+							<button
+								onClick={ navigateToInterstitial( slug ) }
+								className="product-list-item-chevron"
+							>
+								<Icon icon={ chevronRight } size={ 24 } />
+							</button>
+						);
+					}
+
+					return (
+						<ActionButton
+							className="product-list-item-cta"
+							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
-	}, [] );
+	}, [ isMobileViewport, navigateToInterstitial ] );
 
 	const [ view, setView ] = useState< View >( {
 		type: 'list',

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

@@ -58,6 +58,7 @@ div.dataviews-wrapper {
 
             .dataviews-view-list__fields {
                 justify-content: space-between;
+                flex-wrap: nowrap;
             }
 
             &:not(.is-selected).is-hovered,
@@ -97,4 +98,16 @@ div.dataviews-filters__summary-chip-container div.dataviews-filters__summary-chi
 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);
-}
+}
+
+button.product-list-item-chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    outline-color: var(--jp-green-40);
+}

projects/packages/my-jetpack/changelog/add-action-dropdown-to-mobile-view-of-unowned-list

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add mobile CTA to DataViews table