Add/42 new product page #34115

octaedro · 2022-07-28T21:11:18Z

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:

This PR adds the code to:

create a new feature flag for the new product management experience (new-product-management-experience).
render a blank reactified page when the flag is enabled and the user navigates to Products > Add New.

modify the href for the following buttons

Products > Add New (using the old and the new navigation) and the Add New button under Products > All Products.

The Add manually in the Add products task.

Closes this issue (42-gh-woocommerce/mothra-private).

UPDATE

Since there is no button to create a product with another type other than simple, the commit 2953fb1 has been created to add a menu item named Products > Add New (MVP) and remove (temporarily) the URL override of the old buttons.

After having the button mentioned above in place, the commit 2953fb1 should be deleted.

How to test the changes in this Pull Request:

Checkout this branch.
Turn on the feature flag by using the plugin woocommerce-admin-test-helper (link here). You will see the option new-product-management-experience under Tools > WCA Test Helper > Features.
Refresh the page.
Verify that a blank page is shown with the title Add product after pressing the following buttons:
Products > Add New and the Add New button under Products > All Products and the Add manually in the Add my products task.
Verify the event view_new_product_management_experience is being recorded when viewing the Add product page.
Verify that it works as expected using the new navigation too.
Turn off the feature flag and verify that the Add New button works as expected.

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 successfully run tests with your changes locally?
Have you created a changelog file for each project being changed, ie pnpm changelog add --filter=<project>?

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 · 2022-07-28T21:30:51Z

Test Results Summary

Commit SHA: f430d0e

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	115	0	0	2	0	117	0m 49s
E2E Tests	185	0	0	1	0	186	17m 35s

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.

mattsherman · 2022-08-02T12:54:40Z

Turn off the feature flag (here and here) and verify that the Add New product button works as expected.

@octaedro @louwie17 I think that we need to either:

Have a way to switch between the old and the new product experience without having to toggle the feature flag (preferred, as this will allow others to easily test the new experience and still use the old experience without having to do anything), or
Expose a switch in the UI to toggle the feature flag (similar to how we handle the new navigation feature flag)

We can’t expect people to make code changes to toggle the feature flag, as that makes it way less easy for non-devs to do, and makes it cumbersome for devs.

octaedro · 2022-08-02T14:33:12Z

Hey @mattsherman,
Sorry for that. The easiest way to toggle the feature flag is by using the plugin woocommerce-admin-test-helper. The toggle button will be visible under Tools > WCA Test Helper > Features.
I just added that to the testing instructions.

louwie17

Overall looks great @octaedro and it tested well.
One big thing is that the feature flag in core.json should be false as otherwise it is enabled for the next release, keeping it enabled in development.json is fine I think.
I did leave some other comments through out.

I also think it's fine we don't have the Feature toggle under advance settings yet, I think we shouldn't add that until we have a working version ( when our 0.5 MVP is done).

louwie17 · 2022-08-03T14:06:49Z

plugins/woocommerce-admin/client/products/add-product-wrapper.tsx

@@ -0,0 +1,16 @@
+/**


The file name should follow the component name, so maybe rename the file to add-product.tsx
Or to be more explicit about being a page, you could call it AddProductPage and add-product-page.tsx?

I fixed this in commit fbc4f44.

louwie17 · 2022-08-03T14:07:47Z

plugins/woocommerce/client/admin/config/core.json

@@ -15,6 +15,7 @@
 		"minified-js": false,
 		"mobile-app-banner": true,
 		"navigation": true,
+		"new-product-management-experience": true,


We want to set this to false, as this would mean that once this is merged the next release will have this feature enabled by default.

Nice catch!

louwie17 · 2022-08-03T14:09:35Z

plugins/woocommerce/client/admin/config/development.json

@@ -15,6 +15,7 @@
 		"minified-js": true,
 		"mobile-app-banner": true,
 		"navigation": true,
+		"new-product-management-experience": true,


Having this as true is fine for now I think, given we have the MVP button anyway.
Once the MVP button is gone, we might want to turn this back to false and have everyone enabled it themselves.

We usually leave the feature flags turned on in dev since it's a work in progress and the dev environment is exactly to work on those things. I'm not opposed to turning the flag off, but if we follow that pattern, I do think that we should turn off all of them in dev.

louwie17 · 2022-08-03T14:12:24Z

plugins/woocommerce/client/legacy/js/admin/woocommerce_admin.js

@@ -1,93 +1,134 @@
 /* global woocommerce_admin */
-( function( $, woocommerce_admin ) {


Did you make any changes in this file? or is it only formatting?
If only formatting I think you are better off reverting this change.

Did you make any changes in this file? or is it only formatting?
If only formatting I think you are better off reverting this change.

Nope, it's only formatting. Sounds good to me. I reverted the formatting fix in commit 53fae30

louwie17 · 2022-08-03T14:14:41Z

plugins/woocommerce/src/Admin/Features/Navigation/CoreMenu.php

@@ -213,6 +213,17 @@ public static function get_items() {
 			);
 		}

+		$add_product_mbp = array();


Kinda curious what mbp stands for? did you mean mvp?

Good eyes! I fixed the typo in the commit f430d0e.

louwie17

Looks great @octaedro, thanks for the updated changes this tested well and the code looks great, nice work!!

github-actions · 2022-08-03T17:42:41Z

Hi @octaedro, thanks for merging this pull request. Please take a look at these follow-up tasks you may need to perform:

Add the release: add testing instructions label

Fernando Marichal added 9 commits July 27, 2022 11:05

Add feature falg

5082c25

Modify href to menu item

7f34c3c

Modify page title href button

7b13eeb

Add product files on Client

2d29517

Change button's URL for new Nav

b82620e

Add changelog

05ae49e

Moved changelog

957018f

Fix URL for new nav

3435695

Change URL for add product task

ffece55

github-actions bot added focus: react admin plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Jul 28, 2022

Add Tracks event

7be26ea

octaedro changed the title ~~Add/new product page~~ Add/42 new product page Jul 28, 2022

Fernando Marichal added 2 commits July 29, 2022 12:00

Change const name

50986dc

Renamed tracks event name

bab5007

octaedro requested a review from a team July 29, 2022 15:13

octaedro marked this pull request as ready for review July 29, 2022 15:15

Fernando Marichal added 2 commits August 3, 2022 09:49

Undo Add New Product redirect

2953fb1

Undo use Products addition

1f4fd2f

louwie17 requested changes Aug 3, 2022

View reviewed changes

Fernando Marichal added 4 commits August 3, 2022 12:22

Undo lint fix to woocommerce_admin.js

53fae30

Rename component and file (AddProductPage)

fbc4f44

Set flag in core.json to false

b3cd443

Fix typo

f430d0e

octaedro requested a review from louwie17 August 3, 2022 16:05

louwie17 approved these changes Aug 3, 2022

View reviewed changes

octaedro merged commit 835f3d5 into trunk Aug 3, 2022

octaedro deleted the add/new-product-page branch August 3, 2022 17:42

github-actions bot added this to the 6.9.0 milestone Aug 3, 2022

github-actions bot mentioned this pull request Sep 14, 2022

Test WooCommerce 6.9 UVLabs/location-picker-at-checkout-for-woocommerce#50

Closed

octaedro mentioned this pull request Jan 10, 2023

New experience entry points #36363

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add/42 new product page #34115

Add/42 new product page #34115

octaedro commented Jul 28, 2022 •

edited

github-actions bot commented Jul 28, 2022 •

edited

mattsherman commented Aug 2, 2022

octaedro commented Aug 2, 2022

louwie17 left a comment

louwie17 Aug 3, 2022

octaedro Aug 3, 2022

louwie17 Aug 3, 2022

octaedro Aug 3, 2022

louwie17 Aug 3, 2022

octaedro Aug 3, 2022

louwie17 Aug 3, 2022

octaedro Aug 3, 2022

louwie17 Aug 3, 2022

octaedro Aug 3, 2022

louwie17 left a comment

github-actions bot commented Aug 3, 2022

		@@ -1,93 +1,134 @@
		/* global woocommerce_admin */
		( function( $, woocommerce_admin ) {

Add/42 new product page #34115

Add/42 new product page #34115

Conversation

octaedro commented Jul 28, 2022 • edited

All Submissions:

Changes proposed in this Pull Request:

UPDATE

How to test the changes in this Pull Request:

Other information:

FOR PR REVIEWER ONLY:

github-actions bot commented Jul 28, 2022 • edited

Test Results Summary

mattsherman commented Aug 2, 2022

octaedro commented Aug 2, 2022

louwie17 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

louwie17 left a comment

Choose a reason for hiding this comment

github-actions bot commented Aug 3, 2022

octaedro commented Jul 28, 2022 •

edited

github-actions bot commented Jul 28, 2022 •

edited