Product Block Editor: improve the process when creating a new attribute (#47518)

* introduce onAddNew() combobox property

* use onAddNew prop to handle adding new attributes

* changelog

* update packs after mergining with trunk

* move changelog file location

* remove unneeded change

packages/js/product-editor/changelog/update-product-editor-add-new-attribute-iteration

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Product Block Editor: improve the process when creating a new attribute

packages/js/product-editor/src/components/attribute-combobox-field/index.tsx

@@ -95,6 +95,7 @@ const AttributesComboboxControl: React.FC<
 	items = [],
 	instanceNumber = 0,
 	isLoading = false,
+	onAddNew,
 	onChange,
 } ) => {
 	const [ createNewAttributeOption, updateCreateNewAttributeOption ] =
@@ -234,10 +235,7 @@ const AttributesComboboxControl: React.FC<
 								state: 'creating',
 							} );
 
-							return onChange( {
-								id: -99,
-								name: createNewAttributeOption.label,
-							} );
+							return onAddNew?.( createNewAttributeOption.label );
 						}
 
 						setAttributeSelected( true );

packages/js/product-editor/src/components/attribute-combobox-field/types.ts

@@ -30,6 +30,7 @@ export type AttributesComboboxControlComponent = {
 	disabledAttributeMessage?: string;
 	createNewAttributesAsGlobal?: boolean;
 
+	onAddNew?: ( value: string ) => void;
 	onChange: ( value: AttributesComboboxControlItem ) => void;
 };
 

packages/js/product-editor/src/components/attribute-control/attribute-table-row.tsx

@@ -36,6 +36,7 @@ export const AttributeTableRow: React.FC< AttributeTableRowProps > = ( {
 	disabledAttributeMessage,
 	isLoadingAttributes,
 	attributes,
+	onNewAttributeAdd,
 	onAttributeSelect,
 
 	termLabel = undefined,
@@ -211,6 +212,9 @@ export const AttributeTableRow: React.FC< AttributeTableRowProps > = ( {
 					current={ attribute }
 					items={ filteredAttributes }
 					isLoading={ isLoadingAttributes }
+					onAddNew={ ( newValue ) =>
+						onNewAttributeAdd?.( newValue, index )
+					}
 					onChange={ ( nextAttribute ) => {
 						if ( nextAttribute.id === attributeId ) {
 							return;

packages/js/product-editor/src/components/attribute-control/new-attribute-modal.tsx

@@ -252,39 +252,35 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
 							source: TRACKS_SOURCE,
 						} );
 
-						const attributeExists = nextAttribute.id !== -99;
+						return setValue(
+							`attributes[${ index }]`,
+							nextAttribute
+						);
+					}
 
-						const fieldName = `attributes[${ index }]`;
-
-						/*
-						 * When the attribute exists,
-						 * set the attribute values.
-						 */
-						if ( attributeExists ) {
-							return setValue( fieldName, nextAttribute );
-						}
-
-						/*
-						 * When the attribute does not exist,
-						 * and it should not be created as a global attribute,
-						 * only set the attribute values.
-						 */
+					/**
+					 * Create a new attribute and fill the form field with it.
+					 * If the attribute is not global, create it locally.
+					 *
+					 * @param {string} newAttributeName - The name of the new attribute.
+					 * @param {number} index            - The index of the attribute in the form field.
+					 * @return {void}
+					 */
+					function addNewAttribute(
+						newAttributeName: string,
+						index: number
+					) {
 						if ( ! createNewAttributesAsGlobal ) {
-							return setValue( fieldName, {
+							return setValue( `attributes[${ index }]`, {
 								id: 0,
-								name: nextAttribute.name,
-								slug: nextAttribute.name,
+								name: newAttributeName,
+								slug: newAttributeName,
 							} );
 						}
 
-						/*
-						 * If the attribute does not exist,
-						 * and it should be created as a global attribute,
-						 * create the new attribute and set the attribute values.
-						 */
 						createProductAttribute(
 							{
-								name: nextAttribute.name,
+								name: newAttributeName,
 								generate_slug: true,
 							},
 							{
@@ -292,7 +288,10 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
 							}
 						)
 							.then( ( newAttribute ) => {
-								setValue( fieldName, newAttribute );
+								setValue(
+									`attributes[${ index }]`,
+									newAttribute
+								);
 							} )
 							.catch( ( error ) => {
 								let message = __(
@@ -415,6 +414,9 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
 													attributes={
 														availableAttributes
 													}
+													onNewAttributeAdd={
+														addNewAttribute
+													}
 													onAttributeSelect={
 														selectAttribute
 													}

packages/js/product-editor/src/components/attribute-control/types.ts

@@ -70,6 +70,7 @@ export type AttributeTableRowProps = {
 	clearButtonDisabled?: boolean;
 	removeLabel: string;
 
+	onNewAttributeAdd?: ( value: string, index: number ) => void;
 	onAttributeSelect: (
 		attribute: AttributesComboboxControlItem,
 		index: number

pnpm-lock.yaml

@@ -21172,7 +21172,7 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
     peerDependencies:
-      react: ^17.0.2
+      react: 18.2.0
 
   react-number-format@4.9.3:
     resolution: {integrity: sha512-am1A1xYAbENuKJ+zpM7V+B1oRTSeOHYltqVKExznIVFweBzhLmOBmyb1DfIKjHo90E0bo1p3nzVJ2NgS5xh+sQ==}
@@ -21373,7 +21373,7 @@ packages:
   react-with-direction@1.4.0:
     resolution: {integrity: sha512-ybHNPiAmaJpoWwugwqry9Hd1Irl2hnNXlo/2SXQBwbLn/jGMauMS2y9jw+ydyX5V9ICryCqObNSthNt5R94xpg==}
     peerDependencies:
-      react: ^0.14 || ^15 || ^16
+      react: ^17.0.2
       react-dom: ^0.14 || ^15 || ^16
 
   react-with-styles-interface-css@4.0.3: