From 5437ed50c3b9423dac4cae4dcd2055e76ddf8182 Mon Sep 17 00:00:00 2001
From: Nathan Silveira <nsschneider1@gmail.com>
Date: Fri, 19 May 2023 12:45:11 -0300
Subject: [PATCH] Use SelectTree in Parent Category field (#38261)

* Increment label CSS to look the same as TextControl's label

* Migrate Parent Category field to SelectTree

* Add changelogs

* Fix unit test that was edited by mistake

* Revert css changes in select-control.scss

* Use BaseControl as label on SelectTree

* Increment changelog

* Increment changelogs

* Refactor test

* Refactor category-field functions and use them in related places

* Fix ordered list appearing empty
---
 .../changelog/improve-selecttree-label        |   4 +
 .../select-tree.tsx                           | 100 +++++++-------
 .../src/experimental-tree-control/tree.tsx    |  58 ++++----
 .../changelog/update-parent-categ             |   4 +
 .../category-field.tsx                        |  56 ++++----
 .../create-category-modal.scss                |   1 +
 .../create-category-modal.tsx                 | 125 ++++++------------
 .../test/use-category-search.test.ts          |  23 ++--
 .../use-category-search.ts                    |  27 ----
 9 files changed, 171 insertions(+), 227 deletions(-)
 create mode 100644 packages/js/components/changelog/improve-selecttree-label
 create mode 100644 packages/js/product-editor/changelog/update-parent-categ

diff --git a/packages/js/components/changelog/improve-selecttree-label b/packages/js/components/changelog/improve-selecttree-label
new file mode 100644
index 0000000000000..5a831787bf311
--- /dev/null
+++ b/packages/js/components/changelog/improve-selecttree-label
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Use BaseControl in the SelectTree label
diff --git a/packages/js/components/src/experimental-select-tree-control/select-tree.tsx b/packages/js/components/src/experimental-select-tree-control/select-tree.tsx
index 587088ebca883..114e696326b25 100644
--- a/packages/js/components/src/experimental-select-tree-control/select-tree.tsx
+++ b/packages/js/components/src/experimental-select-tree-control/select-tree.tsx
@@ -5,7 +5,7 @@ import { chevronDown } from '@wordpress/icons';
 import classNames from 'classnames';
 import { createElement, useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
-import { TextControl } from '@wordpress/components';
+import { BaseControl, TextControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -130,61 +130,55 @@ export const SelectTree = function SelectTree( {
 					}
 				) }
 			>
-				<label
-					htmlFor={ `${ props.id }-input` }
-					id={ `${ props.id }-label` }
-					className="woocommerce-experimental-select-control__label"
-				>
-					{ props.label }
-				</label>
-				{ props.multiple ? (
-					<ComboBox
-						comboBoxProps={ {
-							className:
-								'woocommerce-experimental-select-control__combo-box-wrapper',
-							role: 'combobox',
-							'aria-expanded': isOpen,
-							'aria-haspopup': 'tree',
-							'aria-labelledby': `${ props.id }-label`,
-							'aria-owns': `${ props.id }-menu`,
-						} }
-						inputProps={ inputProps }
-						suffix={ suffix }
-					>
-						<SelectedItems
-							isReadOnly={ isReadOnly }
-							items={ ( props.selected as Item[] ) || [] }
-							getItemLabel={ ( item ) => item?.label || '' }
-							getItemValue={ ( item ) => item?.value || '' }
-							onRemove={ ( item ) => {
-								if (
-									! Array.isArray( item ) &&
-									props.onRemove
-								) {
-									props.onRemove( item );
+				<BaseControl label={ props.label } id={ `${ props.id }-input` }>
+					{ props.multiple ? (
+						<ComboBox
+							comboBoxProps={ {
+								className:
+									'woocommerce-experimental-select-control__combo-box-wrapper',
+								role: 'combobox',
+								'aria-expanded': isOpen,
+								'aria-haspopup': 'tree',
+								'aria-owns': `${ props.id }-menu`,
+							} }
+							inputProps={ inputProps }
+							suffix={ suffix }
+						>
+							<SelectedItems
+								isReadOnly={ isReadOnly }
+								items={ ( props.selected as Item[] ) || [] }
+								getItemLabel={ ( item ) => item?.label || '' }
+								getItemValue={ ( item ) => item?.value || '' }
+								onRemove={ ( item ) => {
+									if (
+										! Array.isArray( item ) &&
+										props.onRemove
+									) {
+										props.onRemove( item );
+									}
+								} }
+								getSelectedItemProps={ () => ( {} ) }
+							/>
+						</ComboBox>
+					) : (
+						<TextControl
+							{ ...inputProps }
+							value={ props.createValue || '' }
+							onChange={ ( value ) => {
+								if ( onInputChange ) onInputChange( value );
+								const item = items.find(
+									( i ) => i.label === value
+								);
+								if ( props.onSelect && item ) {
+									props.onSelect( item );
+								}
+								if ( ! value && props.onRemove ) {
+									props.onRemove( props.selected as Item );
 								}
 							} }
-							getSelectedItemProps={ () => ( {} ) }
 						/>
-					</ComboBox>
-				) : (
-					<TextControl
-						{ ...inputProps }
-						value={ props.createValue || '' }
-						onChange={ ( value ) => {
-							if ( onInputChange ) onInputChange( value );
-							const item = items.find(
-								( i ) => i.label === value
-							);
-							if ( props.onSelect && item ) {
-								props.onSelect( item );
-							}
-							if ( ! value && props.onRemove ) {
-								props.onRemove( props.selected as Item );
-							}
-						} }
-					/>
-				) }
+					) }
+				</BaseControl>
 			</div>
 			<SelectTreeMenu
 				{ ...props }
diff --git a/packages/js/components/src/experimental-tree-control/tree.tsx b/packages/js/components/src/experimental-tree-control/tree.tsx
index 491c6c161bdbd..48490d66c238f 100644
--- a/packages/js/components/src/experimental-tree-control/tree.tsx
+++ b/packages/js/components/src/experimental-tree-control/tree.tsx
@@ -33,34 +33,36 @@ export const Tree = forwardRef( function ForwardedTree(
 
 	return (
 		<>
-			<ol
-				{ ...treeProps }
-				className={ classNames(
-					treeProps.className,
-					'experimental-woocommerce-tree',
-					`experimental-woocommerce-tree--level-${ level }`
-				) }
-			>
-				{ items.map( ( child, index ) => (
-					<TreeItem
-						{ ...treeItemProps }
-						isExpanded={ props.isExpanded }
-						key={ child.data.value }
-						item={ child }
-						index={ index }
-						// Button ref is not working, so need to use CSS directly
-						onLastItemLoop={ () => {
-							(
-								rootListRef.current
-									?.closest( 'ol[role="tree"]' )
-									?.parentElement?.querySelector(
-										'.experimental-woocommerce-tree__button'
-									) as HTMLButtonElement
-							 )?.focus();
-						} }
-					/>
-				) ) }
-			</ol>
+			{ items.length || isCreateButtonVisible ? (
+				<ol
+					{ ...treeProps }
+					className={ classNames(
+						treeProps.className,
+						'experimental-woocommerce-tree',
+						`experimental-woocommerce-tree--level-${ level }`
+					) }
+				>
+					{ items.map( ( child, index ) => (
+						<TreeItem
+							{ ...treeItemProps }
+							isExpanded={ props.isExpanded }
+							key={ child.data.value }
+							item={ child }
+							index={ index }
+							// Button ref is not working, so need to use CSS directly
+							onLastItemLoop={ () => {
+								(
+									rootListRef.current
+										?.closest( 'ol[role="tree"]' )
+										?.parentElement?.querySelector(
+											'.experimental-woocommerce-tree__button'
+										) as HTMLButtonElement
+								 )?.focus();
+							} }
+						/>
+					) ) }
+				</ol>
+			) : null }
 			{ isCreateButtonVisible && (
 				<Button
 					className="experimental-woocommerce-tree__button"
diff --git a/packages/js/product-editor/changelog/update-parent-categ b/packages/js/product-editor/changelog/update-parent-categ
new file mode 100644
index 0000000000000..7f05c6c10a5e4
--- /dev/null
+++ b/packages/js/product-editor/changelog/update-parent-categ
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Use SelectTree in the Parent Category field
diff --git a/packages/js/product-editor/src/components/details-categories-field/category-field.tsx b/packages/js/product-editor/src/components/details-categories-field/category-field.tsx
index f9160e19180ff..67477a53501c7 100644
--- a/packages/js/product-editor/src/components/details-categories-field/category-field.tsx
+++ b/packages/js/product-editor/src/components/details-categories-field/category-field.tsx
@@ -55,31 +55,41 @@ function getSelectedWithParents(
 	return selected;
 }
 
-function mapFromCategoryType(
+export function mapFromCategoryToTreeItem(
+	val: ProductCategoryNode
+): TreeItemType {
+	return val.parent
+		? {
+				value: String( val.id ),
+				label: val.name,
+				parent: String( val.parent ),
+		  }
+		: {
+				value: String( val.id ),
+				label: val.name,
+		  };
+}
+
+export function mapFromTreeItemToCategory(
+	val: TreeItemType
+): ProductCategoryNode {
+	return {
+		id: +val.value,
+		name: val.label,
+		parent: val.parent ? +val.parent : 0,
+	};
+}
+
+export function mapFromCategoriesToTreeItems(
 	categories: ProductCategoryNode[]
 ): TreeItemType[] {
-	return categories.map( ( val ) =>
-		val.parent
-			? {
-					value: String( val.id ),
-					label: val.name,
-					parent: String( val.parent ),
-			  }
-			: {
-					value: String( val.id ),
-					label: val.name,
-			  }
-	);
+	return categories.map( mapFromCategoryToTreeItem );
 }
 
-function mapToCategoryType(
+export function mapFromTreeItemsToCategories(
 	categories: TreeItemType[]
 ): ProductCategoryNode[] {
-	return categories.map( ( cat ) => ( {
-		id: +cat.value,
-		name: cat.label,
-		parent: cat.parent ? +cat.parent : 0,
-	} ) );
+	return categories.map( mapFromTreeItemToCategory );
 }
 
 export const CategoryField: React.FC< CategoryFieldProps > = ( {
@@ -129,15 +139,15 @@ export const CategoryField: React.FC< CategoryFieldProps > = ( {
 					) === -1
 				}
 				items={ getFilteredItemsForSelectTree(
-					mapFromCategoryType( categoriesSelectList ),
+					mapFromCategoriesToTreeItems( categoriesSelectList ),
 					searchValue,
-					mapFromCategoryType( value )
+					mapFromCategoriesToTreeItems( value )
 				) }
-				selected={ mapFromCategoryType( value ) }
+				selected={ mapFromCategoriesToTreeItems( value ) }
 				onSelect={ ( selectedItems ) => {
 					if ( Array.isArray( selectedItems ) ) {
 						const newItems: ProductCategoryNode[] =
-							mapToCategoryType(
+							mapFromTreeItemsToCategories(
 								selectedItems.filter(
 									( { value: selectedItemValue } ) =>
 										! value.some(
diff --git a/packages/js/product-editor/src/components/details-categories-field/create-category-modal.scss b/packages/js/product-editor/src/components/details-categories-field/create-category-modal.scss
index 4c8ead0e0dac4..d9e63aa105271 100644
--- a/packages/js/product-editor/src/components/details-categories-field/create-category-modal.scss
+++ b/packages/js/product-editor/src/components/details-categories-field/create-category-modal.scss
@@ -1,5 +1,6 @@
 .woocommerce-create-new-category-modal {
 	min-width: 650px;
+	overflow: visible;
 
 	&__buttons {
 		margin-top: $gap-larger;
diff --git a/packages/js/product-editor/src/components/details-categories-field/create-category-modal.tsx b/packages/js/product-editor/src/components/details-categories-field/create-category-modal.tsx
index eefec17824558..f1020c7cc6a13 100644
--- a/packages/js/product-editor/src/components/details-categories-field/create-category-modal.tsx
+++ b/packages/js/product-editor/src/components/details-categories-field/create-category-modal.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, Modal, Spinner, TextControl } from '@wordpress/components';
+import { Button, Modal, TextControl } from '@wordpress/components';
 import { useDebounce } from '@wordpress/compose';
 import {
 	useState,
@@ -11,8 +11,8 @@ import {
 } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import {
-	__experimentalSelectControl as SelectControl,
-	__experimentalSelectControlMenu as Menu,
+	__experimentalSelectTreeControl as SelectTree,
+	TreeItemType as Item,
 } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
 import {
@@ -24,7 +24,10 @@ import {
  * Internal dependencies
  */
 import { ProductCategoryNode, useCategorySearch } from './use-category-search';
-import { CategoryFieldItem } from './category-field-item';
+import {
+	mapFromCategoriesToTreeItems,
+	mapFromCategoryToTreeItem,
+} from './category-field';
 
 type CreateCategoryModalProps = {
 	initialCategoryName?: string;
@@ -32,15 +35,6 @@ type CreateCategoryModalProps = {
 	onCreate: ( newCategory: ProductCategory ) => void;
 };
 
-function getCategoryItemLabel( item: ProductCategoryNode | null ): string {
-	return item?.name || '';
-}
-function getCategoryItemValue(
-	item: ProductCategoryNode | null
-): string | number {
-	return item?.id || '';
-}
-
 export const CreateCategoryModal: React.FC< CreateCategoryModalProps > = ( {
 	initialCategoryName,
 	onCancel,
@@ -49,9 +43,8 @@ export const CreateCategoryModal: React.FC< CreateCategoryModalProps > = ( {
 	const {
 		categoriesSelectList,
 		isSearching,
-		categoryTreeKeyValues,
 		searchCategories,
-		getFilteredItems,
+		getFilteredItemsForSelectTree,
 	} = useCategorySearch();
 	const { createNotice } = useDispatch( 'core/notices' );
 	const [ isCreating, setIsCreating ] = useState( false );
@@ -63,6 +56,9 @@ export const CreateCategoryModal: React.FC< CreateCategoryModalProps > = ( {
 	const [ categoryParent, setCategoryParent ] =
 		useState< ProductCategoryNode | null >( null );
 
+	const [ categoryParentTypedValue, setCategoryParentTypedValue ] =
+		useState( '' );
+
 	const onSave = async () => {
 		recordEvent( 'product_category_add', {
 			new_product_page: true,
@@ -101,8 +97,7 @@ export const CreateCategoryModal: React.FC< CreateCategoryModalProps > = ( {
 					value={ categoryName }
 					onChange={ setCategoryName }
 				/>
-				<SelectControl< ProductCategoryNode >
-					items={ categoriesSelectList }
+				<SelectTree
 					label={ createInterpolateElement(
 						__( 'Parent category <optional/>', 'woocommerce' ),
 						{
@@ -113,78 +108,34 @@ export const CreateCategoryModal: React.FC< CreateCategoryModalProps > = ( {
 							),
 						}
 					) }
-					selected={ categoryParent }
-					onSelect={ ( item ) => item && setCategoryParent( item ) }
+					id="parent-category-field"
+					isLoading={ isSearching }
+					items={ getFilteredItemsForSelectTree(
+						mapFromCategoriesToTreeItems( categoriesSelectList ),
+						categoryParentTypedValue,
+						[]
+					) }
+					shouldNotRecursivelySelect
+					selected={
+						categoryParent
+							? mapFromCategoryToTreeItem( categoryParent )
+							: undefined
+					}
+					onSelect={ ( item: Item ) =>
+						item &&
+						setCategoryParent( {
+							id: +item.value,
+							name: item.label,
+							parent: item.parent ? +item.parent : 0,
+						} )
+					}
 					onRemove={ () => setCategoryParent( null ) }
-					onInputChange={ debouncedSearch }
-					getFilteredItems={ getFilteredItems }
-					getItemLabel={ getCategoryItemLabel }
-					getItemValue={ getCategoryItemValue }
-				>
-					{ ( {
-						items,
-						isOpen,
-						getMenuProps,
-						highlightedIndex,
-						getItemProps,
-					} ) => {
-						return (
-							<Menu
-								isOpen={ isOpen }
-								getMenuProps={ getMenuProps }
-								className="woocommerce-category-field-dropdown__menu"
-							>
-								{ [
-									isSearching ? (
-										<div
-											key="loading-spinner"
-											className="woocommerce-category-field-dropdown__item"
-										>
-											<div className="woocommerce-category-field-dropdown__item-content">
-												<Spinner />
-											</div>
-										</div>
-									) : null,
-									...items
-										.filter(
-											( item ) =>
-												categoryTreeKeyValues[ item.id ]
-													?.parentID === 0
-										)
-										.map( ( item ) => {
-											return (
-												<CategoryFieldItem
-													key={ `${ item.id }` }
-													item={
-														categoryTreeKeyValues[
-															item.id
-														]
-													}
-													selectedIds={
-														categoryParent
-															? [
-																	categoryParent.id,
-															  ]
-															: []
-													}
-													items={ items }
-													highlightedIndex={
-														highlightedIndex
-													}
-													getItemProps={
-														getItemProps
-													}
-												/>
-											);
-										} ),
-								].filter(
-									( item ): item is JSX.Element =>
-										item !== null
-								) }
-							</Menu>
-						);
+					onInputChange={ ( value ) => {
+						debouncedSearch( value );
+						setCategoryParentTypedValue( value || '' );
 					} }
-				</SelectControl>
+					createValue={ categoryParentTypedValue }
+				/>
 				<div className="woocommerce-create-new-category-modal__buttons">
 					<Button
 						isSecondary
diff --git a/packages/js/product-editor/src/components/details-categories-field/test/use-category-search.test.ts b/packages/js/product-editor/src/components/details-categories-field/test/use-category-search.test.ts
index 040f3810344da..fd20cc1b67cd9 100644
--- a/packages/js/product-editor/src/components/details-categories-field/test/use-category-search.test.ts
+++ b/packages/js/product-editor/src/components/details-categories-field/test/use-category-search.test.ts
@@ -8,6 +8,7 @@ import { useSelect, resolveSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { useCategorySearch } from '../use-category-search';
+import { mapFromCategoriesToTreeItems } from '../../details-categories-field/category-field';
 
 jest.mock( '@wordpress/data', () => ( {
 	...jest.requireActual( '@wordpress/data' ),
@@ -179,7 +180,7 @@ describe( 'useCategorySearch', () => {
 		);
 	} );
 
-	describe( 'getFilteredItems', () => {
+	describe( 'getFilteredItemsForSelectTree', () => {
 		it( 'should filter items by label, matching input value, and if selected', async () => {
 			getProductCategoriesMock.mockReturnValue( [ ...mockCategoryList ] );
 
@@ -191,13 +192,15 @@ describe( 'useCategorySearch', () => {
 			);
 			await waitForNextUpdate();
 
-			const filteredItems = result.current.getFilteredItems(
-				result.current.categoriesSelectList,
+			const filteredItems = result.current.getFilteredItemsForSelectTree(
+				mapFromCategoriesToTreeItems(
+					result.current.categoriesSelectList
+				),
 				'Rain',
 				[]
 			);
 			expect( filteredItems.length ).toEqual( 1 );
-			expect( filteredItems[ 0 ].name ).toEqual( 'Rain gear' );
+			expect( filteredItems[ 0 ].label ).toEqual( 'Rain gear' );
 		} );
 
 		it( 'should filter items by isOpen as well, keeping them if isOpen is true', async () => {
@@ -215,15 +218,17 @@ describe( 'useCategorySearch', () => {
 			} );
 			await waitForNextUpdate();
 			expect( result.current.categoriesSelectList.length ).toEqual( 6 );
-			const filteredItems = result.current.getFilteredItems(
-				result.current.categoriesSelectList,
+			const filteredItems = result.current.getFilteredItemsForSelectTree(
+				mapFromCategoriesToTreeItems(
+					result.current.categoriesSelectList
+				),
 				'Bel',
 				[]
 			);
 			expect( filteredItems.length ).toEqual( 3 );
-			expect( filteredItems[ 0 ].name ).toEqual( 'Clothing' );
-			expect( filteredItems[ 1 ].name ).toEqual( 'Accessories' );
-			expect( filteredItems[ 2 ].name ).toEqual( 'Belts' );
+			expect( filteredItems[ 0 ].label ).toEqual( 'Clothing' );
+			expect( filteredItems[ 1 ].label ).toEqual( 'Accessories' );
+			expect( filteredItems[ 2 ].label ).toEqual( 'Belts' );
 		} );
 	} );
 
diff --git a/packages/js/product-editor/src/components/details-categories-field/use-category-search.ts b/packages/js/product-editor/src/components/details-categories-field/use-category-search.ts
index cfd5b14a77418..974ac54c96ebc 100644
--- a/packages/js/product-editor/src/components/details-categories-field/use-category-search.ts
+++ b/packages/js/product-editor/src/components/details-categories-field/use-category-search.ts
@@ -257,32 +257,6 @@ export const useCategorySearch = () => {
 
 	const categoryTreeKeyValues = categoriesAndNewItem[ 2 ];
 
-	/**
-	 * getFilteredItems callback for use in the SelectControl component.
-	 */
-	const getFilteredItems = useCallback(
-		(
-			allItems: ProductCategoryNode[],
-			inputValue: string,
-			selectedItems: ProductCategoryNode[]
-		) => {
-			const searchRegex = new RegExp( escapeRegExp( inputValue ), 'i' );
-			return allItems.filter(
-				( item ) =>
-					selectedItems.indexOf( item ) < 0 &&
-					( searchRegex.test( item.name ) ||
-						( categoryTreeKeyValues[ item.id ] &&
-							categoryTreeKeyValues[ item.id ].isOpen ) )
-			);
-		},
-		[ categoriesAndNewItem ]
-	);
-
-	/**
-	 * this is the same as getFilteredItems but for the SelectTree component, where item id is a string.
-	 * After all the occurrences of getFilteredItems are migrated to use SelectTree,
-	 * this can become the standard version
-	 */
 	const getFilteredItemsForSelectTree = useCallback(
 		(
 			allItems: TreeItemType[],
@@ -303,7 +277,6 @@ export const useCategorySearch = () => {
 
 	return {
 		searchCategories,
-		getFilteredItems,
 		getFilteredItemsForSelectTree,
 		categoriesSelectList: categoriesAndNewItem[ 0 ],
 		categories: categoriesAndNewItem[ 1 ],