Tweak product link description and display (#36591)

* Tweak product link description and display

* Add changelog entry

* Fix up edit product link modal tests

* Update changelog entry

plugins/woocommerce-admin/client/products/shared/edit-product-link-modal/edit-product-link-modal.scss

@@ -8,4 +8,12 @@
 		gap: 8px;
 		justify-content: flex-end;
 	}
+
+	.components-modal__header {
+		border-color: $gray-300;
+	}
+
+	.woocommerce-product-link-edit-modal__description {
+		margin: $gap-large 0;
+	}
 }

plugins/woocommerce-admin/client/products/shared/edit-product-link-modal/edit-product-link-modal.tsx

@@ -6,6 +6,7 @@ import { Button, Modal, TextControl } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { cleanForSlug } from '@wordpress/url';
+import interpolateComponents from '@automattic/interpolate-components';
 import { Product } from '@woocommerce/data';
 import { Text } from '@woocommerce/experimental';
 import { useFormContext } from '@woocommerce/components';
@@ -95,18 +96,25 @@ export const EditProductLinkModal: React.FC< EditProductLinkModalProps > = ( {
 			className="woocommerce-product-link-edit-modal"
 		>
 			<div className="woocommerce-product-link-edit-modal__wrapper">
+				<p className="woocommerce-product-link-edit-modal__description">
+					{ __(
+						"Create a unique link for this product. Use simple, descriptive words and numbers. We'll replace spaces with hyphens (-).",
+						'woocommerce'
+					) }
+				</p>
 				<TextControl
-					label={ newProductLinkLabel }
+					label={ __( 'Product link', 'woocommerce' ) }
 					name="slug"
 					value={ slug }
 					onChange={ setSlug }
+					hideLabelFromVision
+					help={ interpolateComponents( {
+						mixedString: __( 'Preview: {{link/}}', 'woocommerce' ),
+						components: {
+							link: <strong>{ newProductLinkLabel }</strong>,
+						},
+					} ) }
 				/>
-				<Text size={ 12 }>
-					{ __(
-						"Use simple, descriptive words and numbers. We'll replace spaces with hyphens (-).",
-						'woocommerce'
-					) }
-				</Text>
 				<div className="woocommerce-product-link-edit-modal__buttons">
 					<Button isSecondary onClick={ () => onCancel() }>
 						{ __( 'Cancel', 'woocommerce' ) }

plugins/woocommerce-admin/client/products/shared/edit-product-link-modal/test/edit-product-link-modal.test.tsx

@@ -51,7 +51,7 @@ describe( 'EditProductLinkModal', () => {
 			/>
 		);
 		userEvent.type(
-			getByLabelText( 'wootesting.com/product/test' ),
+			getByLabelText( 'Product link' ),
 			'{esc}{space}update',
 			{}
 		);
@@ -76,7 +76,7 @@ describe( 'EditProductLinkModal', () => {
 			/>
 		);
 		userEvent.type(
-			getByLabelText( 'wootesting.com/product/product' ),
+			getByLabelText( 'Product link' ),
 			'{esc}{space}update',
 			{}
 		);

plugins/woocommerce/changelog/update-36316

@@ -0,0 +1,4 @@
+Significance: minor
+Type: tweak
+
+Tweak product link description and display in the new product management experience