Skip to content

Add product variations list to new product management experience #35889

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
joshuatf merged 11 commits into from
Dec 13, 2022
Merged

Add product variations list to new product management experience #35889

joshuatf merged 11 commits into from
Dec 13, 2022

Conversation

@joshuatf
Copy link
Contributor

@joshuatf joshuatf commented Dec 7, 2022

All Submissions:

Changes proposed in this Pull Request:

Adds the variations list to the new product experience.

Note that this PR does not address persistence of ordering for variations or any other updates. Those will be handled in a follow-up.

Screen Shot 2022-12-07 at 11 50 36 AM

Closes #35772 .

  • This PR is a very minor change/addition and does not require testing instructions (if checked you can ignore/remove the next section).

How to test the changes in this Pull Request:

  1. Add a product with variations using the old product experience
  2. Navigate to that product in the new experience. E.g., wp-admin/admin.php?page=wc-admin&path=/product/{product_id}
  3. Click on "Options"
  4. Note that the variations section exists with the correct text and a working link
  5. Note that variations show a spinner until variations are loaded
  6. Note that variations appear with their attributes, price, and stock status listed

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 created a changelog file for each project being changed, ie pnpm --filter=<project> changelog add?

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.

@joshuatf joshuatf requested a review from a team December 7, 2022 19:57
@joshuatf joshuatf self-assigned this Dec 7, 2022
@github-actions github-actions bot added focus: react admin package: @woocommerce/data issues related to @woocommerce/data plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Dec 7, 2022
joshuatf
joshuatf commented Dec 7, 2022
View reviewed changes
plugins/woocommerce-admin/client/products/fields/variations/variations.scss Outdated
@@ -0,0 +1,39 @@
.woocommerce-product-variations {
min-height: 300px;
Copy link
Contributor Author

@joshuatf joshuatf Dec 7, 2022

Choose a reason for hiding this comment

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

Note that this is temporary and height will be adjusted further in #35789.

plugins/woocommerce-admin/client/products/utils/get-product-stock-status.ts
@@ -0,0 +1,49 @@
/**
Copy link
Contributor Author

@joshuatf joshuatf Dec 7, 2022

Choose a reason for hiding this comment

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

Hopefully this util isn't pushing the scope of this PR too far. Happy to separate it into another PR if it helps.

plugins/woocommerce-admin/client/products/fields/variations/variations.tsx
};
} );

if ( ! variations || isLoading ) {
Copy link
Contributor Author

@joshuatf joshuatf Dec 7, 2022

Choose a reason for hiding this comment

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

Note that the current behavior is odd because some products don't have variations. Automatic generation of variations will address this and hopefully guarantee that a variation always exists if any options exist.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 7, 2022 •
edited
Loading

Test Results Summary

Commit SHA: 7be839e

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests25900202610m 49s
E2E Tests187006019318m 1s
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.

@octaedro octaedro requested review from octaedro and removed request for a team December 13, 2022 11:36
octaedro
octaedro reviewed Dec 13, 2022
View reviewed changes
plugins/woocommerce-admin/client/products/utils/get-product-stock-status.ts Outdated
* Get the product stock quantity or stock status label.
*
* @param product Product instance.
* @return {PRODUCT_STOCK_STATUS_KEYS} Product staus key.
Copy link
Contributor

@octaedro octaedro Dec 13, 2022

Choose a reason for hiding this comment

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

Two nitpick things:

  • There is a typo in staus.
  • Since we can also return a number, I think that this line should be like this:
@return {PRODUCT_STOCK_STATUS_KEYS|number} Product stock quantity or product status key.

octaedro
octaedro reviewed Dec 13, 2022
View reviewed changes
Copy link
Contributor

@octaedro octaedro left a comment

Choose a reason for hiding this comment

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

Good job @joshuatf! This is testing well and the code looks good.
I just left a small comment, and it seems like there are a few small lint errors as well.

Base automatically changed from add/35706 to trunk December 13, 2022 16:13
octaedro
octaedro approved these changes Dec 13, 2022
View reviewed changes
Copy link
Contributor

@octaedro octaedro left a comment

Choose a reason for hiding this comment

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

Nice job @joshuatf! LGTM :shipit:

@joshuatf joshuatf merged commit e1aabf2 into trunk Dec 13, 2022
@joshuatf joshuatf deleted the add/35772 branch December 13, 2022 23:29
@github-actions github-actions bot added this to the 7.3.0 milestone Dec 13, 2022
@joshuatf joshuatf mentioned this pull request Dec 13, 2022
Closed
3 tasks
samueljseay pushed a commit that referenced this pull request Dec 15, 2022
@joshuatf @samueljseay
Add product variations list to new product management experience (#35889
fdb03ff 
)

* Add product variations section

* Add variations list

* Add util to get product stock status

* Add variation specific attribute type

* Add currency code to header column

* Fix up variations header width

* Add variations loading state

* Add changelog entries

* Convert spaces to tabs

* Fix status typo

* Fix up return type for stock status
@github-actions github-actions bot mentioned this pull request Jan 13, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@octaedro octaedro octaedro approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@joshuatf joshuatf

Labels

package: @woocommerce/data issues related to @woocommerce/data plugin: woocommerce Issues related to the WooCommerce Core plugin.

Projects

None yet

Milestone

7.3.0

Development

Successfully merging this pull request may close these issues.

Render product variations list

3 participants

@joshuatf @octaedro