Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fix Attribute terms sometimes being assigned children #8720

Draft
wants to merge 2 commits into
base: trunk
Choose a base branch
from

Conversation

sunyatasattva
Copy link
Contributor

@sunyatasattva sunyatasattva commented Mar 13, 2023

Attribute terms (e.g. “Blue”, “Yellow”) have their own id property which sometimes can overlap with their Taxonomy id (e.g. in the test case, “Blue” had the same id as the “Size” taxonomy), and the function building the tree representation for the SearchListControl would erroneously assign children to it.

To fix this, we do an ugly patch here: we rename the id key of AttributeTerm when changed to a SearchListItem to termId instead, so we can differentiate. We do this because other items passed to SearchListControl might possibly have several layers of children, but we are sure that in the case of terms, we only have on level deep.

This may need a better refactoring at some point.

Fixes woocommerce/woocommerce#42438

Testing

User Facing Testing

  1. Use https://github.com/nielslange/woo-test-environment to spin a new test environment (this is required because it is known to create overlapping ids).
  2. Add a Products (Beta) block to your page.
  3. Open the Inspector Controls and add a “Product Attributes” advanced filter.
  4. Uncollapse “Color”.
  5. Make sure “Blue” doesn't appear as a collapsible item.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Attribute terms (e.g. “Blue”, “Yellow”) have their own `id` property which
sometimes can overlap with their Taxonomy `id` (e.g. in the test case,
“Blue” had the same `id` as the “Size” taxonomy), and the function
building the tree representation for the `SearchListControl` would
erroneously assign children to it.

To fix this, we do an ugly patch here: we rename the `id` key of
`AttributeTerm` when changed to a `SearchListItem` to `termId` instead,
so we can differentiate. We do this because other items passed to
`SearchListControl` might possibly have several layers of children, but
we are sure that in the case of terms, we only have on level deep.

This may need a better refactoring at some point.
@sunyatasattva sunyatasattva added type: bug The issue/PR concerns a confirmed bug. block-type: product-query Issues related to/affecting all product-query variations. labels Mar 13, 2023
@sunyatasattva sunyatasattva self-assigned this Mar 13, 2023
@woocommercebot woocommercebot requested a review from a team March 13, 2023 16:19
@github-actions
Copy link
Contributor

github-actions bot commented Mar 13, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8720.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 490
  • Total errors: 2318

⚠️ ⚠️ This PR introduces new TS errors on 2 files:

assets/js/blocks/attribute-filter/edit.tsx

assets/js/editor-components/search-list-control/search-list-control.tsx

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 13, 2023

Size Change: +484 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/active-filters.js 7.49 kB +17 B (0%)
build/all-products.js 37.7 kB +35 B (0%)
build/attribute-filter.js 13.2 kB +40 B (0%)
build/checkout.js 45.3 kB +19 B (0%)
build/featured-category.js 14 kB +22 B (0%)
build/featured-product.js 14.2 kB +23 B (0%)
build/filter-wrapper-frontend.js 14.1 kB -1 B (0%)
build/handpicked-products.js 7.93 kB +28 B (0%)
build/product-best-sellers.js 8.28 kB +27 B (0%)
build/product-category.js 9.26 kB +24 B (0%)
build/product-new.js 8.27 kB +24 B (0%)
build/product-on-sale.js 8.6 kB +25 B (0%)
build/product-query.js 10.9 kB +38 B (0%)
build/product-tag.js 8.76 kB +25 B (0%)
build/product-top-rated.js 8.51 kB +24 B (0%)
build/products-by-attribute.js 9.61 kB +39 B (0%)
build/reviews-by-category.js 11.9 kB +23 B (0%)
build/reviews-by-product.js 13 kB +24 B (0%)
build/single-product.js 10.6 kB +28 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.97 kB
build/active-filters-wrapper-frontend.js 5.99 kB
build/all-products-frontend.js 11.7 kB
build/all-reviews.js 7.65 kB
build/attribute-filter-frontend.js 22.5 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 3.35 kB
build/attribute-filter-wrapper-frontend.js 4.5 kB
build/blocks-checkout.js 41.2 kB
build/breadcrumbs.js 2.04 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 9.75 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 654 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 11.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB
build/cart-frontend.js 29 kB
build/cart.js 47.6 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.84 kB
build/checkout-blocks/billing-address-frontend.js 4.09 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 330 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 11.2 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.43 kB
build/checkout-blocks/pickup-options-frontend.js 4.04 kB
build/checkout-blocks/shipping-address-frontend.js 4.04 kB
build/checkout-blocks/shipping-method-frontend.js 2.47 kB
build/checkout-blocks/shipping-methods-frontend.js 5.26 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/checkout-frontend.js 30.5 kB
build/customer-account.js 3.16 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/legacy-template.js 5.32 kB
build/mini-cart-component-frontend.js 28 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 2.86 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 572 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 16.6 kB
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.29 kB
build/price-filter-frontend.js 13.8 kB
build/price-filter-wrapper-frontend.js 6.99 kB
build/price-filter.js 8.39 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.69 kB
build/product-add-to-cart.js 8.62 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 262 B
build/product-button-frontend.js 2.22 kB
build/product-button.js 4.01 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.19 kB
build/product-category-list.js 501 B
build/product-image-frontend.js 2.22 kB
build/product-image.js 4.12 kB
build/product-price-frontend.js 2.39 kB
build/product-price.js 1.64 kB
build/product-rating-frontend.js 1.65 kB
build/product-rating.js 919 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.45 kB
build/product-sale-badge.js 819 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 707 B
build/product-sku.js 453 B
build/product-stock-indicator-frontend.js 1.32 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.58 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 1.18 kB
build/product-tag-list.js 498 B
build/product-title-frontend.js 1.65 kB
build/product-title.js 3.48 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.61 kB
build/rating-filter.js 7.42 kB
build/reviews-frontend.js 7.13 kB
build/single-product-frontend.js 17.9 kB
build/stock-filter-frontend.js 21 kB
build/stock-filter-wrapper-frontend.js 3.15 kB
build/stock-filter.js 8.13 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.24 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-editor-style-rtl.css 5.82 kB
build/wc-blocks-editor-style.css 5.82 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 932 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.51 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-style-rtl.css 26.9 kB
build/wc-blocks-style.css 26.8 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 64.4 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB
build/wc-shipping-method-pickup-location.js 29.7 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Mar 22, 2023
@danielwrobert danielwrobert added status: needs review and removed status: stale Stale issues and PRs have had no updates for 60 days. labels Apr 6, 2023
@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Apr 16, 2023
@kmanijak
Copy link
Contributor

I'm converting this PR to a draft as there are side effects of this fix that are not resolved yet.

@kmanijak kmanijak marked this pull request as draft April 20, 2023 08:30
@github-actions github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label Apr 20, 2023
@sunyatasattva
Copy link
Contributor Author

@kmanijak I'd say we should specify what these side-effects are, so that they can be resolved.

@sunyatasattva
Copy link
Contributor Author

@kmanijak News on this?

@kmanijak
Copy link
Contributor

kmanijak commented May 4, 2023

@kmanijak I'd say we should specify what these side-effects are, so that they can be resolved.

Hey @sunyatasattva, I agree with that!

@kmanijak News on this?

I was AFK recently, I'll try to revisit that in the upcoming days as I don't remember the exact details from top of my head 🙌

@kmanijak
Copy link
Contributor

Here's a video showing the problems of choosing the Product Attributes in the Products block:

products-8720.mov

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block-type: product-query Issues related to/affecting all product-query variations. team: Kirigami & Origami type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

SearchListControl incorrectly builds the terms tree in certain cases
4 participants