Store: Product Trash Pickup

[justinshreve]

This PR does some trash pickup around products. The following issues are addressed:

• Fixes Store - SKU pencil doesn't activate edit mode #20774 “SKU pencil doesn't activate edit mode”.
• Fixes Store: Clicking Add Product after editing product description causes crash #20490 “Clicking Add Product after editing product description causes crash”.
• Fixes Store: Display more helpful error messages on product failure #16218 “Show a proper error message when a duplicate SKU is found.”
• Fixes Store: Product Name Encoding Entities #21036 "Product Name Encoding Entities”.

To Test:

• Run npm run test-client client/extensions/woocommerce and make sure all tests pass.
• Go to an existing product and click the pencil icon, verifying that the SKU input becomes editable. Close the input.
• Add an entity ( & ) to your title and click save. Verify that the success message and input field don’t replace your & with &.
• Open your dev console.
• Click “Add” on the sidebar, and verify that you are taken to the add a product form. Verify that the form loads and there is not a huge warning explosion in your console.
• Create a new product and give it a SKU that matches an existing SKU. Save and verify you get the duplicate SKU error message. Change your SKU, save, and verify the product saves.
• When you are redirected to the products list, verify products are correctly listed.

[matticbot]

Test live in Docker at: https://dserve.a8c.com/?branch=fix/store-product-trashpickup

[timmyc]

Couple of questions but this is testing out great. Thanks so much for fixing the edit -> add bug. I feel that is a highly used flow for someone setting up a new store.

[timmyc]

I'm groking the check for ! product but the second clause has me thinking a bit - so this is to short circuit the create view if a product exists and is not a placeholder/un-saved product?

[justinshreve]

Yeah.

I found in testing, the few actions that clear away edits in product UI state, variations, etc (which also resets currentlyEditingId and this product object) might not have all ran yet before the component mounts. And because of how the CompactTinyMCE component works, (it only an initial value), this is needed to prevent rendering of the form in that brief moment of time. Once the prop updates the form renders.

[timmyc]

When trying to track down this bug, this did jump out at me - what was the original reason for this logic?

[justinshreve]

I'm not sure now, sorry. It doesn't seem necessary from the testing I did though.

[timmyc]

Looks like it was added in here #14944 though i don't see any details around that specific bit. I think this might be some carry-over from patterns in the post editor maybe. But I agree if its not needed, it is great to remove it.

[timmyc]

🙌