Add category field dropdown field #34400

louwie17 · 2022-08-19T19:56:08Z

All Submissions:

Have you followed the WooCommerce Contributing guideline?
Does your code follow the WordPress' coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Adds a new Category dropdown field that includes a nested tree for the categories.

Changes done as part of this

(Part of Update/experimental select control #34620 now ) Update experimental select control component to return more callbacks from downshift and allow the option to keep the dropdown open when an item is selected.
(part of Add/crud get total count selector #34613 now ) Added getItemsTotalCount to the crud data store, allowing us to use it for categories - getProductCategoriesTotalCount
(will also be part of a separate PR ) Add a new Category dropdown to the MVP product page (this includes several new components).

Addresses: #34029

Kapture.2022-09-02.at.14.52.41.mp4

How to test the changes in this Pull Request:

Should match these designs: 5sAIeTRd9Yp7nSCT33BAWz-fi-5175%3A105193

Load this branch and enable the new-product-management-experience feature flag by using the WCA Test Helper (Tools > WCA Test Helper > Features) and refresh the page.
Create some categories under Product > Categories
Click the Products > Add New (MVP) button and notice the new category field dropdown.
Start searching in the dropdown field and make sure your created categories show up
See if categories are correctly sorted by popularity first and then alphabetical order (popularity is by how many products its being used).
Select one of the child categories, it should auto select the parents but allow you to un-select the parents
You should also be able to use your keyboard by using your up and down arrows, currently I have the selected item highlighted by setting it to bold and have closed parents automatically open if they have children.

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully run tests with your changes locally?
Have you created a changelog file for each project being changed, ie pnpm changelog add --filter=<project>?

FOR PR REVIEWER ONLY:

I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

github-actions · 2022-08-19T20:52:16Z

Test Results Summary

Commit SHA: 9f4db44

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	188	0	0	2	0	190	0m 50s
E2E Tests	186	0	0	3	0	189	19m 35s

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

louwie17 · 2022-09-02T18:09:43Z

packages/js/components/src/experimental-select-control/menu.scss

+	box-sizing: border-box;
+	display: none;
+	z-index: 10;
+	margin-top: $gap-smaller;


Mostly spacing it seems from spaces to tabs, this is what my prettier did. The only addition is:

z-index: 10; margin-top: $gap-smaller;

louwie17 · 2022-09-02T18:11:44Z

packages/js/components/src/experimental-select-control/select-control.tsx

-						);
+						if ( clearSearchOnSelect ) {
+							onInputChange( '' );
+							setInputValue( '' );


Optionally clear the input value upon selection.
Not sure if we want to separate InputBlur from this, and do clear in for that? I guess play around with it and see what feels natural.

louwie17 · 2022-09-02T18:12:08Z

packages/js/components/src/experimental-select-control/select-control.tsx

+						isOpen: keepMenuOpenOnSelect ? true : false,
+						highlightedIndex: state.highlightedIndex,
+						inputValue: '',
+					};


Added to handle the keepMenuOpenOnSelect option

louwie17 · 2022-09-02T18:14:38Z

packages/js/components/src/experimental-select-control/types.ts

 	getMenuProps: getMenuPropsType;
+	getToggleButtonProps: getToggleButtonPropsType;
+	selectItem: ( item: ItemType ) => void;
+	setInputValue: ( value: string ) => void;


Exposed these extra functions from downshifts library.

louwie17 · 2022-09-02T18:15:24Z

packages/js/data/src/crud/action-types.ts

 	UPDATE_ITEM_ERROR = 'UPDATE_ITEM_ERROR',
 	UPDATE_ITEM_SUCCESS = 'UPDATE_ITEM_SUCCESS',
+	GET_ITEMS_TOTAL_COUNT_SUCCESS = 'GET_ITEMS_TOTAL_COUNT_SUCCESS',
+	GET_ITEMS_TOTAL_COUNT_ERROR = 'GET_ITEMS_TOTAL_COUNT_ERROR',


All the changes within the crud data store revolve around adding the getItemsTotalCount support, it should be more or less self explanatory.

louwie17 · 2022-09-02T18:17:07Z

plugins/woocommerce-admin/client/products/fields/category-field/category-field-add-new-item.tsx

@@ -0,0 +1,43 @@
+/**


Simple component that shows the Create "new category" item in the list.

louwie17 · 2022-09-02T18:18:00Z

plugins/woocommerce-admin/client/products/fields/category-field/category-field-item.tsx

+					) }
+				>
+					{ children.map( ( child ) => (
+						<CategoryFieldItem


We continue to nest this element as long as the categories contains more children.
Allowing us to form the tree like data structure.

louwie17 · 2022-09-02T18:20:43Z

plugins/woocommerce-admin/client/products/fields/category-field/category-field.tsx

+	const selectedIds = value.map( ( item ) => item.id );
+	let selectControlItems = categoriesSelectList;
+	// Add the add new button if search value does not exist.
+	if (


This logic might be slightly dirty, I wasn't sure what the other easier method would be, but this only handles adding or removing the Create "new category" item from the list.

louwie17 · 2022-09-02T18:21:53Z

plugins/woocommerce-admin/client/products/fields/category-field/category-field.tsx

+	const selected = ( value || [] ).map( ( cat ) => ( {
+		value: cat.id.toString(),
+		label: cat.name,
+	} ) );


Unfortunately the SelectControl doesn't allow us to pass in any kind of object yet, so have to convert it to the value/label object it prefers.

louwie17 · 2022-09-02T18:25:45Z

plugins/woocommerce-admin/client/products/fields/category-field/category-field.tsx

+											categoryTreeKeyValues[
+												parseInt( item.value, 10 )
+											]?.parentID === 0 ||
+											item.value === 'add-new'


In order for the selection to work well and the keyboard selection. We had to pass in the entire list of categories to the component, this includes all the children as well.
But
We don't want to display all of them in the top list, so we filter out all the children here.

You can see that for the CategoryFieldItem we actually pass in:

categoryTreeKeyValues[ parseInt( item.value, 10 ) ]

This is for the same reason as above, this actually returns us a tree like object that contains children.

louwie17 · 2022-09-02T18:28:27Z

plugins/woocommerce-admin/client/products/fields/category-field/create-category-modal.tsx

+					value={ categoryName }
+					onChange={ setCategoryName }
+				/>
+				<SelectControl


This SelectControl should follow a similar format as the way it's used in category-field.tsx.
There is one main difference that we make use of Popover here to display the menu. This is in order to display the dropdown without part of it being hidden by the modal window.
I had to make use of <Popover.Slot /> for this also, this is set in category-field.tsx under the Modal component.

louwie17 · 2022-09-02T18:30:25Z

plugins/woocommerce-admin/client/products/fields/category-field/use-category-search.ts

@@ -0,0 +1,286 @@
+/**


Most of the function comments should explain what this is doing, but this is a custom category search hook to encapsulate most of the logic surround the tree generation of categories, which includes a recursive function that would retrieve any missing parents if necessary.
This hook is both used in category-field.tsx and create-category-modal.tsx.

plugins/woocommerce-admin/client/products/fields/category-field/category-field-item.tsx

plugins/woocommerce-admin/client/products/fields/category-field/category-field.tsx

louwie17 · 2022-10-12T14:27:10Z

@mdperez86 thanks for the initial look, this should be ready for a re-review.

Move search logic to useCategorySearch hook Add initial add new category logic Add parent category field to add new category modal Adding some debug changes Update category control to make use of internal selectItem function of select control Add changelogs Update pagesize back to 100 Add placeholder Empty placeholder Fix input and icon sizes Fix input underline Add max height and scroll to category dropdown Add sorting of category items Auto open parents when traversing up the tree using arrow keys Add several comments Add some initial unit tests for the category field component Add tests for useCategorySearch hook and fixed minor bug Update styling and autoselect parent if child is selected Fix styling issues for the select control dropdown inside a modal Fix issue with creating new category with parent Add function comment and fixed border styling Prune out create new category logic Fix minor css issue with border Revert some of the select control changes and make use of the custom type Fix up some styling changes

mdperez86

Such a hard work here. Great job!!!

github-actions · 2022-10-14T12:05:52Z

Hi @louwie17, thanks for merging this pull request. Please take a look at these follow-up tasks you may need to perform:

Add the release: add testing instructions label

github-actions bot added focus: react admin package: @woocommerce/components issues related to @woocommerce/components package: @woocommerce/data issues related to @woocommerce/data plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Aug 19, 2022

louwie17 force-pushed the add/34_category_field branch from 273c3bc to 17508af Compare August 19, 2022 20:05

louwie17 force-pushed the add/34_category_field branch from cf93f27 to 03cb71e Compare August 30, 2022 20:10

louwie17 added the focus: product management MVP label Aug 31, 2022

louwie17 force-pushed the add/34_category_field branch from 4cd9913 to ae76d8d Compare September 1, 2022 19:33

louwie17 commented Sep 2, 2022

View reviewed changes

louwie17 marked this pull request as ready for review September 2, 2022 18:39

louwie17 requested a review from a team September 2, 2022 18:39

louwie17 force-pushed the add/34_category_field branch 2 times, most recently from ac47ff2 to 940af37 Compare September 12, 2022 11:32

louwie17 force-pushed the add/34_category_field branch from 940af37 to f2ac82f Compare September 28, 2022 17:05

mdperez86 reviewed Oct 7, 2022

View reviewed changes

plugins/woocommerce-admin/client/products/fields/category-field/category-field-item.tsx Outdated Show resolved Hide resolved

plugins/woocommerce-admin/client/products/fields/category-field/category-field.tsx Outdated Show resolved Hide resolved

louwie17 force-pushed the add/34_category_field branch from f2ac82f to 5ee1b23 Compare October 12, 2022 12:48

louwie17 force-pushed the add/34_category_field branch from 9aaf42d to 36820dc Compare October 13, 2022 14:31

louwie17 added 7 commits October 13, 2022 15:44

Fix type conflict

6791429

Revert change in state reducer

7d36849

Add cursor pointer

e476ae9

Fix styling errors

92d0251

Fix broken category tests

1b626c6

Fix merge conflict

9f4db44

louwie17 force-pushed the add/34_category_field branch from 36820dc to 9f4db44 Compare October 13, 2022 18:47

mdperez86 approved these changes Oct 13, 2022

View reviewed changes

louwie17 merged commit c55c91d into trunk Oct 14, 2022

louwie17 deleted the add/34_category_field branch October 14, 2022 12:05

github-actions bot added this to the 7.2.0 milestone Oct 14, 2022

github-actions bot mentioned this pull request Dec 15, 2022

Test WooCommerce 7.2 UVLabs/location-picker-at-checkout-for-woocommerce#57

Closed

github-actions bot mentioned this pull request Jan 25, 2023

Test WooCommerce 7.3 UVLabs/location-picker-at-checkout-for-woocommerce#59

Closed

Add category field dropdown field #34400

Add category field dropdown field #34400

Uh oh!

Conversation

louwie17 commented Aug 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

FOR PR REVIEWER ONLY:

Uh oh!

github-actions bot commented Aug 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results Summary

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

louwie17 commented Oct 12, 2022

Uh oh!

mdperez86 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 14, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

louwie17 commented Aug 19, 2022 •

edited

Loading

github-actions bot commented Aug 19, 2022 •

edited

Loading

mdperez86 left a comment •

edited

Loading