Hide card actions for non-admins

Automattic · Feb 7, 2025 · e3bda30 · e3bda30
1 parent 242b6a8
commit e3bda30
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 31 deletions.
diff --git a/projects/packages/my-jetpack/_inc/components/action-button/index.tsx b/projects/packages/my-jetpack/_inc/components/action-button/index.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@automattic/jetpack-components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Icon, chevronDown, external, check } from '@wordpress/icons';
 import clsx from 'clsx';
 import { useCallback, useState, useEffect, useMemo, useRef } from 'react';
@@ -36,7 +36,7 @@ const ActionButton: FC< ActionButtonProps > = ( {
 	className,
 	tracksIdentifier,
 } ) => {
-	const { userIsAdmin, lifecycleStats } = getMyJetpackWindowInitialState();
+	const { lifecycleStats } = getMyJetpackWindowInitialState();
 	const { ownedProducts } = lifecycleStats;
 
 	const [ isDropdownOpen, setIsDropdownOpen ] = useState( false );
@@ -49,7 +49,6 @@ const ActionButton: FC< ActionButtonProps > = ( {
 		managePaidPlanPurchaseUrl,
 		renewPaidPlanPurchaseUrl,
 		status,
-		name,
 		requiresUserConnection,
 	} = detail;
 	const { siteIsRegistering, isRegistered, isUserConnected } = useMyJetpackConnection();
@@ -68,7 +67,6 @@ const ActionButton: FC< ActionButtonProps > = ( {
 		( siteIsRegistering && status === PRODUCT_STATUSES.SITE_CONNECTION_ERROR );
 	const hasAdditionalActions = additionalActions?.length > 0;
 	const isOwned = ownedProducts?.includes( slug );
-	const admin = !! userIsAdmin;
 	const troubleshootBackupsUrl =
 		'https://jetpack.com/support/backup/troubleshooting-jetpack-backup/';
 
@@ -360,17 +358,6 @@ const ActionButton: FC< ActionButtonProps > = ( {
 		}
 	} );
 
-	if ( ! admin ) {
-		return (
-			<Button { ...buttonState } size="small" variant="link" weight="regular">
-				{
-					/* translators: placeholder is product name. */
-					sprintf( __( 'Learn about %s', 'jetpack-my-jetpack' ), name )
-				}
-			</Button>
-		);
-	}
-
 	const dropdown = hasAdditionalActions && (
 		<div ref={ dropdownRef } className={ styles[ 'action-button-dropdown' ] }>
 			<ul className={ styles[ 'dropdown-menu' ] }>

diff --git a/projects/packages/my-jetpack/_inc/components/product-card/index.tsx b/projects/packages/my-jetpack/_inc/components/product-card/index.tsx
@@ -43,6 +43,7 @@ const ProductCard: FC< ProductCardProps > = props => {
 		name,
 		Description,
 		status,
+		admin,
 		isDataLoading,
 		slug,
 		additionalActions,
@@ -149,22 +150,29 @@ const ProductCard: FC< ProductCardProps > = props => {
 				<RecommendationActions slug={ slug } />
 			) : (
 				<div className={ styles.actions }>
-					<div className={ styles.buttons }>
-						{ secondaryAction && secondaryAction?.positionFirst && (
-							<SecondaryButton { ...secondaryAction } />
-						) }
-						<ActionButton
-							slug={ slug }
-							additionalActions={ additionalActions }
-							primaryActionOverride={ primaryActionOverride }
-							fixSiteConnectionHandler={ fixSiteConnectionHandler }
-							setIsActionLoading={ setIsActionLoading }
-							tracksIdentifier="product_card"
-						/>
-						{ secondaryAction && ! secondaryAction?.positionFirst && (
-							<SecondaryButton { ...secondaryAction } />
-						) }
-					</div>
+					{
+						// TODO: only some products (social connections for example) have settings for non-admins
+						// Each product needs to specify this separately and provide a destination to link to for management by non-admins
+						// Until then, we don't show any action buttons or links on product cards for non-admins
+					 }
+					{ admin && (
+						<div className={ styles.buttons }>
+							{ secondaryAction && secondaryAction?.positionFirst && (
+								<SecondaryButton { ...secondaryAction } />
+							) }
+							<ActionButton
+								slug={ slug }
+								additionalActions={ additionalActions }
+								primaryActionOverride={ primaryActionOverride }
+								fixSiteConnectionHandler={ fixSiteConnectionHandler }
+								setIsActionLoading={ setIsActionLoading }
+								tracksIdentifier="product_card"
+							/>
+							{ secondaryAction && ! secondaryAction?.positionFirst && admin && (
+								<SecondaryButton { ...secondaryAction } />
+							) }
+						</div>
+					) }
 					<Status
 						status={ status }
 						isFetching={ isLoading }