Add edit button to variations list items (#36079)

* Add edit button to variations list items

* Add comment feedbacks

plugins/woocommerce-admin/client/products/fields/variations/variations.scss

@@ -51,6 +51,7 @@
 
 		.components-button {
 			position: relative;
+			color: var(--wp-admin-theme-color);
 
 			&:disabled,
 			&[aria-disabled='true'] {

plugins/woocommerce-admin/client/products/fields/variations/variations.tsx

@@ -7,7 +7,14 @@ import {
 	EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME,
 	ProductVariation,
 } from '@woocommerce/data';
-import { ListItem, Pagination, Sortable, Tag } from '@woocommerce/components';
+import {
+	Link,
+	ListItem,
+	Pagination,
+	Sortable,
+	Tag,
+} from '@woocommerce/components';
+import { getNewPath } from '@woocommerce/navigation';
 import { useContext, useState } from '@wordpress/element';
 import { useParams } from 'react-router-dom';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -192,6 +199,17 @@ export const Variations: React.FC = () => {
 							{ getProductStockStatus( variation ) }
 						</div>
 						<div className="woocommerce-product-variations__actions">
+							<Link
+								href={ getNewPath(
+									{},
+									`/product/${ productId }/variation/${ variation.id }`
+								) }
+								type="wc-admin"
+								className="components-button"
+							>
+								{ __( 'Edit', 'woocommerce' ) }
+							</Link>
+
 							{ variation.status === 'private' && (
 								<Tooltip
 									position="top center"

plugins/woocommerce/changelog/add-35787

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add edit button to variations list items