[Product Block Editor]: implement Choose products for me button

[retrofox]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

This PR implements the Choose products for me button for the Upsells and Cross-sells sections of the Linked Product tab.

Part of #42922
Closes # .

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Ensure your testing site has a few products to test
2. Enable the Linked Product flag

• Enable the WCA plugin
• Click on Tools -> WCA Test Helper
• Click on Features tab
• Toggle on the product-linked feature

3. Edit/create a product by using the new Product Editor app
4. Confirm you see the Choose products for me button in the Linked product sections

5. Confirm when the user clicks Choose products for me, we add five products
6. Confimr If a store has less than 5 other products that are publicly published and in-stock, then we choose the maximum number of products they have.
7. Confirm If there are products already selected under Upsell / Cross-sell (regardless whether they are user-selected ones or auto-generated ones), they all get replaced with the new recommended suggestions.

Screen.Recording.2024-01-11.at.13.44.16.mov

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Comment

[github-actions]

Hi , @woocommerce/mothra

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Test Results Summary

Commit SHA: 06239ff

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 37s
E2E Tests	274	0	0	5	0	279	3m 39s

---

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]

Overall this tested well, but I noticed an issue with the discrepancy between the two data stores.
If I create a new product and click 'choose products for me' and then go to add specific categories and save the product and click 'choose products for me' I still get the same list, versus the new list that comes with the new categories.
I left an inline comment with some thoughts.

[louwie17]

I did notice one issue with this, for saving the product we use the core entity data store, but for this selector we are using our product data store. This means that when a user save the product by adding categories and then clicks getRelatedProducts we get the same result instead of the updated one's.

Should we either make use of the core entity data store as well? or add an invalidation method when we save the product, so we also invalidate our products data store?

[retrofox]

👁️ looking

[retrofox]

I don't know if we can use the core store. Is the related prop (related_ids) exposes by code? Maybe we can tweak the selector deps to invalidate its data.

[louwie17]

You should be able to use useEntityProp and get the related_ids that way

[louwie17]

Thanks for the updates @retrofox, this is testing well, nice work!