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

Add clearValidationErrors action to validation data store #7601

Merged
merged 11 commits into from
Nov 17, 2022

Conversation

opr
Copy link
Contributor

@opr opr commented Nov 7, 2022

This PR allows multiple validation errors to be cleared in a single action. In cases where clearing multiple errors at once is required, this would bring a slight performance increase by reducing the number of actions dispatched onto the store.

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

Internal dev testing

  1. Go to the checkout block, on the shipping form, make the validation errors appear in the first name, last name, and address 1 fields like so:

image

2. Open the console and enter
wp.data.dispatch('wc/store/validation').clearValidationErrors( [ 'shipping-first_name', 'shipping-last_name' ] )
  1. Ensure the error for address 1 still shows after this.

User Facing Testing

These tests are for regression testing only. It does not test the new feature.

  1. Use the Checkout block, enter invalid information in fields and ensure validation errors still show. (e.g. enter an invalid ZIP code for UK by just using numbers)
  2. Leave fields blank and ensure validation shows.
  3. Fix the errors and ensure you can check out.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Add a clearValidationErrors action to the wc/store/validation data store.

@opr opr added status: needs review type: enhancement The issue is a request for an enhancement. category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. javascript Pull requests that update Javascript code. labels Nov 7, 2022
@opr opr self-assigned this Nov 7, 2022
@rubikuserbot rubikuserbot requested review from a team and alexflorisca and removed request for a team November 7, 2022 15:35
@github-actions
Copy link
Contributor

github-actions bot commented Nov 7, 2022

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Nov 7, 2022

TypeScript Errors Report

Files with errors: 431
Total errors: 2069

🎉 🎉 This PR does not introduce new TS errors.

@github-actions
Copy link
Contributor

github-actions bot commented Nov 7, 2022

Size Change: +115 B (0%)

Total Size: 991 kB

Filename Size Change
build/wc-blocks-data.js 18.6 kB +115 B (+1%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.74 kB
build/active-filters-wrapper-frontend.js 6.02 kB
build/active-filters.js 7.32 kB
build/all-products-frontend.js 26.4 kB
build/all-products.js 33.5 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 22.6 kB
build/attribute-filter-wrapper-frontend.js 7.13 kB
build/attribute-filter.js 12.2 kB
build/blocks-checkout.js 18.5 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.37 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.47 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.67 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.01 kB
build/cart-blocks/cart-express-payment-frontend.js 764 B
build/cart-blocks/cart-items-frontend.js 298 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.29 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 320 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 783 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.73 kB
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 5.66 kB
build/cart-blocks/order-summary-shipping-frontend.js 428 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.19 kB
build/cart-frontend.js 54.5 kB
build/cart.js 46.3 kB
build/checkout-blocks/actions-frontend.js 1.77 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.9 kB
build/checkout-blocks/billing-address-frontend.js 952 B
build/checkout-blocks/contact-information-frontend.js 1.77 kB
build/checkout-blocks/express-payment-frontend.js 1.12 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.89 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 7.77 kB
build/checkout-blocks/shipping-address-frontend.js 1.06 kB
build/checkout-blocks/shipping-methods-frontend.js 4.89 kB
build/checkout-blocks/terms-frontend.js 1.63 kB
build/checkout-blocks/totals-frontend.js 323 B
build/checkout-frontend.js 56.6 kB
build/checkout.js 40.3 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.4 kB
build/filter-wrapper-frontend.js 13.8 kB
build/filter-wrapper.js 2.41 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.29 kB
build/legacy-template.js 2.85 kB
build/mini-cart-component-frontend.js 20 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer-frontend.js 2.97 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 591 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-contents.js 17.1 kB
build/mini-cart-frontend.js 1.77 kB
build/mini-cart.js 4.29 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 7.01 kB
build/price-filter.js 8.37 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 226 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 1.25 kB
build/product-add-to-cart.js 8.36 kB
build/product-best-sellers.js 7.62 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 431 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 302 B
build/product-button-frontend.js 1.89 kB
build/product-button.js 3.82 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 884 B
build/product-category-list.js 502 B
build/product-category.js 8.62 kB
build/product-image-frontend.js 1.9 kB
build/product-image.js 3.92 kB
build/product-new.js 7.63 kB
build/product-on-sale.js 7.95 kB
build/product-price-frontend.js 1.92 kB
build/product-price.js 1.53 kB
build/product-query.js 2.89 kB
build/product-rating-frontend.js 1.2 kB
build/product-rating.js 787 B
build/product-sale-badge-frontend.js 1.15 kB
build/product-sale-badge.js 812 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 377 B
build/product-sku.js 376 B
build/product-stock-indicator-frontend.js 1.01 kB
build/product-stock-indicator.js 646 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 921 B
build/product-tag-list-frontend.js 878 B
build/product-tag-list.js 498 B
build/product-tag.js 8 kB
build/product-title-frontend.js 1.33 kB
build/product-title.js 3.3 kB
build/product-top-rated.js 7.86 kB
build/products-by-attribute.js 8.54 kB
build/rating-filter-frontend.js 7.16 kB
build/rating-filter-wrapper-frontend.js 5.41 kB
build/rating-filter.js 5.79 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.01 kB
build/single-product-frontend.js 32.2 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.78 kB
build/stock-filter-wrapper-frontend.js 6.03 kB
build/stock-filter.js 6.7 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper-frontend.js 8.22 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.53 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/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB
build/wc-blocks-editor-style-rtl.css 5.24 kB
build/wc-blocks-editor-style.css 5.24 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 931 B
build/wc-blocks-registry.js 2.92 kB
build/wc-blocks-shared-context.js 1.51 kB
build/wc-blocks-shared-hocs.js 1.72 kB
build/wc-blocks-style-rtl.css 24.2 kB
build/wc-blocks-style.css 24.2 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 62.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

compressed-size-action

@opr opr force-pushed the add/clear-validation-errors branch from da9e748 to dd1db2e Compare November 7, 2022 17:55
@github-actions
Copy link
Contributor

github-actions bot commented Nov 7, 2022

TypeScript Errors Report

Files with errors: 445
Total errors: 2116

🎉 🎉 This PR does not introduce new TS errors.

Copy link
Member

@alexflorisca alexflorisca left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good, just a suggestion and a bit of confusion in the test, see beiow 👍

export type ValidationAction = ReturnOrGeneratorYieldUnion<
| typeof setValidationErrors
| typeof clearAllValidationErrors
| typeof clearValidationError
| typeof clearValidationErrors
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about combining clearAllValidationErrors and clearValidationErrors so that the default of clearValidationErrors if you don't specify an argument is to clear all the errors?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice idea actually. We should deprecate clearAllValidationErrors if we go ahead with this (instead of removing it) since it's currently out in the wild

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah good point. I think it'll neaten things up. Do you want to do it as part of this PR? What's the process for deprecating things?

@opr opr force-pushed the add/clear-validation-errors branch from fb4961a to 4eabac0 Compare November 9, 2022 12:23
@github-actions
Copy link
Contributor

github-actions bot commented Nov 9, 2022

TypeScript Errors Report

Files with errors: 446
Total errors: 2117

🎉 🎉 This PR does not introduce new TS errors.

1 similar comment
@github-actions
Copy link
Contributor

github-actions bot commented Nov 9, 2022

TypeScript Errors Report

Files with errors: 446
Total errors: 2117

🎉 🎉 This PR does not introduce new TS errors.

@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 Nov 17, 2022
Copy link
Member

@alexflorisca alexflorisca left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good now - just one minor thing (see below)

#### _Parameters_

- _errors_ `string[] | undefined` - The error IDs to clear validation errors for. This can be undefined, and if it
is, all validation errors will be cleared.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something funky going on with the spacing here. Can you check prettier runs on this file?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice one thanks Alex, I've updated that now.

@opr opr force-pushed the add/clear-validation-errors branch from fb4d2aa to 9042521 Compare November 17, 2022 10:29
@github-actions
Copy link
Contributor

TypeScript Errors Report

Files with errors: 446
Total errors: 2117

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

assets/js/atomic/blocks/product-elements/image/test/block.test.js

assets/js/atomic/blocks/product-elements/price/index.js

assets/js/atomic/blocks/product-elements/stock-indicator/block.js

assets/js/atomic/blocks/product-elements/stock-indicator/edit.js

assets/js/atomic/blocks/product-elements/tag-list/index.ts

assets/js/base/components/cart-checkout/address-form/address-form.tsx

assets/js/base/components/cart-checkout/product-details/index.tsx

assets/js/base/components/cart-checkout/totals/coupon/index.tsx

assets/js/base/components/product-price/index.tsx

assets/js/base/components/state-input/state-input.tsx

assets/js/base/components/text-input/text-input.tsx

assets/js/base/components/text-input/validated-text-input.tsx

assets/js/base/context/hooks/use-checkout-submit.js

assets/js/blocks/cart/block.js

assets/js/blocks/checkout/block.tsx

assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx

assets/js/blocks/checkout/phone-number/index.tsx

assets/js/blocks/mini-cart/frontend.ts

assets/js/blocks/product-query/constants.ts

assets/js/data/payment/check-payment-methods.ts

assets/js/types/type-defs/payment-method-interface.ts

packages/checkout/blocks-registry/get-registered-blocks.ts

packages/checkout/blocks-registry/index.ts

packages/checkout/blocks-registry/register-checkout-block.ts

packages/checkout/components/index.js

packages/checkout/components/order-meta/index.js

packages/checkout/components/totals/index.js

packages/checkout/index.js

packages/checkout/slot/index.js

packages/checkout/utils/index.js

@opr opr merged commit 21d7d66 into trunk Nov 17, 2022
@opr opr deleted the add/clear-validation-errors branch November 17, 2022 17:19
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. javascript Pull requests that update Javascript code. status: stale Stale issues and PRs have had no updates for 60 days. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants