Open sites-per-plugin view on name click (#96729)

* Open site-per-plugin view on name click * Using a Button instead of native a element to avoid using an invalid anchor --------- Co-authored-by: Paulo Trentin <paulo@paulotrentin.com.br>
Automattic · Nov 25, 2024 · eaa38b9 · eaa38b9
1 parent db6f8ce
commit eaa38b9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/client/my-sites/plugins/plugins-list/style.scss b/client/my-sites/plugins/plugins-list/style.scss
@@ -37,6 +37,15 @@ body.is-section-plugins .plugin-management-wrapper.is-bulk-plugin-management,
     .dataviews-pagination {
         padding: 12px 16px 12px 16px;
     }
+
+    .plugin-name-button {
+        padding: 0;
+        cursor: pointer;
+
+        &:focus {
+            box-shadow: none;
+        }
+    }
 }
 
 .is-section-jetpack-cloud-plugin-management {

diff --git a/client/my-sites/plugins/plugins-list/use-fields.tsx b/client/my-sites/plugins/plugins-list/use-fields.tsx
@@ -66,9 +66,15 @@ export function useFields(
 
 					return (
 						<>
-							{ item.icon && <img className="plugin-icon" alt={ item.name } src={ item.icon } /> }
-							{ ! item.icon && <Icon size={ 32 } icon={ plugins } className="plugin-icon" /> }
-							<a href={ '/plugins/' + item.slug }>{ item.name }</a>
+							<button
+								onClick={ () => toggleDialogForPlugin( item ) }
+								onKeyDown={ ( e ) => e.key === 'Enter' && toggleDialogForPlugin( item ) }
+								className="components-button plugin-name-button"
+							>
+								{ item.icon && <img className="plugin-icon" alt={ item.name } src={ item.icon } /> }
+								{ ! item.icon && <Icon size={ 32 } icon={ plugins } className="plugin-icon" /> }
+								{ item.name }
+							</button>
 							{ pluginActionStatus }
 						</>
 					);