Add selection to the tree control #36435

mdperez86 · 2023-01-14T05:39:12Z

Depends on #36590

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:

Depends on #36476
Partialy closes #35851

This PR is a very minor change/addition and does not require testing instructions (if checked you can ignore/remove the next section).

How to test the changes in this Pull Request:

Run storybook
Visit http://localhost:6007/?path=/story/woocommerce-admin-experimental-treecontrol--selection-single for a single selection tree. Or http://localhost:6007/?path=/story/woocommerce-admin-experimental-treecontrol--selection-multiple for a multiple selection tree.
Both examples have an initial value set.
After clicking a leaf node in the single selection tree, the selected value should be change.
In multiple selection tree we can select any children.
5.1. When selecting a leaf, all its ancestors should be selected also.
5.2 When selecting an item with children, the item and its children should be selected.
5.3 When selecting an item with parent and children, its parent and its children should be selected.
5.4 When unselecting a leaf, if it has selected siblings, then it becomes unselected and all its ancestors indeterminate.
5.5 When unselecting a leaf, if it has unselected siblings, then it becomes unselected and all its ancestors unselected.
5.6 When unselecting an item with children, all it children becomes unselected.

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 created a changelog file for each project being changed, ie pnpm --filter=<project> changelog add?

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 · 2023-01-14T06:05:52Z

Test Results Summary

Commit SHA: 1ad730e

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	1m 4s
E2E Tests	189	0	0	6	0	195	15m 0s

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.

codecov · 2023-02-24T22:00:49Z

Codecov Report

Merging #36435 (1ad730e) into trunk (be43265) will not change coverage.
The diff coverage is 27.5%.

Additional details and impacted files

@@           Coverage Diff            @@
##             trunk   #36435   +/-   ##
========================================
  Coverage     46.7%    46.7%           
  Complexity   17183    17183           
========================================
  Files          429      429           
  Lines        64799    64799           
========================================
  Hits         30251    30251           
  Misses       34548    34548

Impacted Files	Coverage Δ
...mmerce/includes/admin/class-wc-admin-importers.php	`0.0% <0.0%> (ø)`
...rters/class-wc-product-csv-importer-controller.php	`36.1% <28.6%> (ø)`
.../includes/import/class-wc-product-csv-importer.php	`74.9% <44.4%> (ø)`
...e/includes/import/abstract-wc-product-importer.php	`63.7% <100.0%> (ø)`

nathanss · 2023-02-27T14:11:33Z

packages/js/components/src/experimental-tree-control/typings/global.d.ts

+declare module '@wordpress/components' {
+	declare namespace CheckboxControl {
+		interface Props {
+			indeterminate?: boolean;


Why was it necessary to add this?

Because for @wordpress/components@19.8.5 there is not a TS definition for the prop indeterminate. Also there is not such definition even in any version of @types/wordpress__components

nathanss

It's testing well on my end! Code also looks good.

If anyone else wants to review it, I think it's a good idea, as I'm not that involved with this work.

nathanss · 2023-02-27T14:11:52Z

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

+	 */
+	onSelect?( value: Item | Item[] ): void;
+	/**
+	 * When `multipe` is true and a child item is unselected, all its


There's a small typo here in multipe

Thanks! done

nathanss · 2023-02-27T14:12:54Z

packages/js/components/src/experimental-tree-control/tree-item.scss

 .experimental-woocommerce-tree-item {
 	margin: 0;

+	&--highlighted {
+		> .experimental-woocommerce-tree-item__heading {
+			background-color: #f6f7f7;


If we ever implement dark mode I think we would have to go through all these "hard coded" values... But it's probably out of scope of this PR

Good catch, it's done now. Thanks

… custom logic

…checkbox control

…ed to the ResizeObserve feat

mdperez86 added focus: product management Related to product creation and editing. focus: new product ux revamped product management experience labels Jan 14, 2023

mdperez86 requested a review from a team January 14, 2023 05:39

mdperez86 self-assigned this Jan 14, 2023

github-actions bot added the package: @woocommerce/components issues related to @woocommerce/components label Jan 14, 2023

mdperez86 changed the title ~~Add/35851 tree control selection~~ Add selection to the tree control Jan 14, 2023

mdperez86 mentioned this pull request Jan 16, 2023

Add a11y support for the tree-control #36459

Merged

8 tasks

mdperez86 marked this pull request as ready for review January 17, 2023 13:47

mdperez86 force-pushed the add/35851-tree-control-selection branch from 2a0480e to 012d95e Compare January 17, 2023 15:45

mdperez86 mentioned this pull request Jan 17, 2023

Add hightlighter to the tree control #36480

Merged

8 tasks

mattsherman assigned mattsherman and unassigned mdperez86 Jan 19, 2023

mattsherman mentioned this pull request Jan 24, 2023

[Epic] TreeControl component #36590

Closed

7 tasks

mattsherman added the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Jan 24, 2023

mattsherman marked this pull request as draft February 1, 2023 19:58

mattsherman removed their assignment Feb 15, 2023

AnnaMag marked this pull request as ready for review February 23, 2023 14:41

octaedro changed the base branch from trunk to add/35851-tree-control-custom-label February 24, 2023 18:56

Base automatically changed from add/35851-tree-control-custom-label to trunk February 24, 2023 20:00

mdperez86 force-pushed the add/35851-tree-control-selection branch 2 times, most recently from e2268f7 to ea7f37d Compare February 24, 2023 21:28

nathanss reviewed Feb 27, 2023

View reviewed changes

nathanss requested changes Feb 27, 2023

View reviewed changes

mdperez86 requested a review from nathanss February 27, 2023 16:18

nathanss previously approved these changes Feb 27, 2023

View reviewed changes

mdperez86 dismissed nathanss’s stale review via 9185544 February 27, 2023 18:55

github-actions bot added the focus: react admin label Feb 27, 2023

mdperez86 force-pushed the add/35851-tree-control-selection branch from 9185544 to 5795e0b Compare February 27, 2023 19:10

mdperez86 force-pushed the add/35851-tree-control-selection branch from 5795e0b to 27ff71e Compare February 27, 2023 20:43

mdperez86 added 15 commits February 27, 2023 17:44

Create tree-control component

49667af

Remove items from treeItemProps

ebc8bff

Add tree-control expand/collapse on click the expander button or by a…

49739f1

… custom logic

Add stories

986d534

Add the type definitions

bde100f

Add use selection hook

dd1aa1a

Upgrade WP components dependency to v19.8.5 to support indeterminate …

749c545

…checkbox control

Add selection logic to the tree control

47aace3

Create stories

0d4a161

Add changelog file

212645f

Fix linter error

d83bd1d

Add styles to fit the disign

4398161

Highlight selected item when it's a single selection tree

442fa62

Rebasing from trunk

c886b31

Add comment suggestions

fc77042

mdperez86 force-pushed the add/35851-tree-control-selection branch from 27ff71e to 17b014c Compare February 27, 2023 20:46

Fix unit test errors due to a new version of @wordpress/compose relat…

1ad730e

…ed to the ResizeObserve feat

mdperez86 force-pushed the add/35851-tree-control-selection branch from 17b014c to 1ad730e Compare February 27, 2023 21:11

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Feb 27, 2023

mdperez86 requested a review from nathanss February 28, 2023 13:33

nathanss approved these changes Feb 28, 2023

View reviewed changes

mdperez86 merged commit 7d0669d into trunk Feb 28, 2023

mdperez86 deleted the add/35851-tree-control-selection branch February 28, 2023 18:10

github-actions bot added this to the 7.6.0 milestone Feb 28, 2023

mdperez86 self-assigned this Feb 28, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add selection to the tree control #36435

Add selection to the tree control #36435

mdperez86 commented Jan 14, 2023 •

edited by mattsherman

github-actions bot commented Jan 14, 2023 •

edited

codecov bot commented Feb 24, 2023 •

edited

nathanss Feb 27, 2023

mdperez86 Feb 27, 2023

nathanss left a comment

nathanss Feb 27, 2023

mdperez86 Feb 27, 2023

nathanss Feb 27, 2023

mdperez86 Feb 27, 2023

Add selection to the tree control #36435

Add selection to the tree control #36435

Conversation

mdperez86 commented Jan 14, 2023 • edited by mattsherman

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

FOR PR REVIEWER ONLY:

github-actions bot commented Jan 14, 2023 • edited

Test Results Summary

codecov bot commented Feb 24, 2023 • edited

Codecov Report

nathanss Feb 27, 2023

Choose a reason for hiding this comment

mdperez86 Feb 27, 2023

Choose a reason for hiding this comment

nathanss left a comment

Choose a reason for hiding this comment

nathanss Feb 27, 2023

Choose a reason for hiding this comment

mdperez86 Feb 27, 2023

Choose a reason for hiding this comment

nathanss Feb 27, 2023

Choose a reason for hiding this comment

mdperez86 Feb 27, 2023

Choose a reason for hiding this comment

mdperez86 commented Jan 14, 2023 •

edited by mattsherman

github-actions bot commented Jan 14, 2023 •

edited

codecov bot commented Feb 24, 2023 •

edited