Update empty state for product attributes tab #38126

mattsherman · 2023-05-04T20:53:41Z

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 updates the empty state for the product Attributes tab so that it always shows an empty local attribute form, which makes it quicker for users to add attributes to a product. This empty local attribute form is shown regardless of whether any global attributes are in the system.

Also, it is mentioned in the issue acceptance criteria, but bears calling out here as well.. the header buttons are now always the Add new and Add existing ones, replacing the older Custom product attribute dropdown and Add button.

The implementation of this change required some updates to the logging of the following Tracks events:

wcadmin_product_attributes_buttons with action: 'add_new'
- Logged when the Add new button is clicked
wcadmin_product_attributes_buttons with action: 'add_existing'
- Logged when an existing global attribute is selected from the Add existing dropdown
wcadmin_product_attributes_add_term
- Logged when Create value is clicked to create a new value for a global attribute (this is logged regardless of whether a new value is actually created, to keep behavior consistent with how it was prior to this PR)

The e2e tests were updated to reflect the change in CSS classes used in the implementation.

Before

Empty state when no global attributes exist:

Empty state when global attributes exist:

After

Closes #38104.

How to test the changes in this Pull Request:

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

Common instructions

To create a new product, go to Products > Add New
To edit an existing product, go to Products > All Products
To add or remove global attributes, go to Products > Attributes
To save attributes, click Save attributes button on the Attributes tab
To save a product, click Publish (or Update, if an existing product)
To see Tracks events
- Tools > WCA Test Helper > Tools > Enable wc-admin Tracking
- Filter by recordevent in the browser dev console

No global attributes in system

Remove all global attributes from the system
Create a new product
Go to the Attributes tab
Verify that the empty attribute form is shown
Fill out the attribute and save it
Save the product and verify the attributes are correct
Reload the product and verify the attributes are correct

Global attributes in system, adding a new local attribute

Add at least one global attribute to the system, and configure terms for it
Create a new product
Go to the Attributes tab
Verify that the empty attribute form is shown
Fill out the attribute and save it
Save the product and verify the attributes are correct
Reload the product and verify the attributes are correct

Global attributes in system, adding a global attribute

Add at least one global attribute to the system, and configure terms for it
Create a new product
Go to the Attributes tab
Verify that the empty attribute form is shown
Select a global attribute from the Add existing dropdown
Verify the empty attribute form is removed
Verify the same global attribute cannot be selected again from the Add existing dropdown
Select terms for the global attribute and save it
Save the product and verify the attributes are correct
Reload the product and verify the attributes are correct

Editing an existing product with no attributes

Edit one of your existing products no attributes
Verify the empty attribute form is automatically shown when the Attributes tab is shown

Editing an existing product with local attributes

Edit one of your existing products with local attributes (either saved from above or before)
Verify the empty attribute form is not automatically shown when the Attributes tab is shown
Verify the attributes are correct

Editing an existing product with global attributes

Edit one of your existing products with global attributes (either saved from above or before)
Verify the empty attribute form is not automatically shown when the Attributes tab is shown
Verify the attributes are correct

Tracks events

Clicking on Add new should log wcadmin_product_attributes_buttons with action: 'add_new'
Clicking on an existing attribute in Add existing should log wcadmin_product_attributes_buttons with action: 'add_existing'
Clicking on Create value for a global attribute should log wcadmin_product_attributes_add_term

…st anymore)

github-actions · 2023-05-04T21:21:11Z

Test Results Summary

Commit SHA: 190820c

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	267	0	0	2	0	269	0m 55s
E2E Tests	188	0	0	10	0	198	15m 40s

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.

… to product-tracking TS

codecov · 2023-05-05T18:31:42Z

Codecov Report

Merging #38126 (e1f6bdd) into trunk (fa6ee94) will decrease coverage by 0.0%.
The diff coverage is 2.6%.

❗ Current head e1f6bdd differs from pull request most recent head 190820c. Consider uploading reports for the commit 190820c to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             trunk   #38126     +/-   ##
==========================================
- Coverage     51.3%    51.2%   -0.0%     
- Complexity   17409    17417      +8     
==========================================
  Files          440      440             
  Lines        80584    80634     +50     
==========================================
- Hits         41311    41310      -1     
- Misses       39273    39324     +51

Impacted Files	Coverage Δ
...ocommerce/includes/admin/class-wc-admin-assets.php	`0.0% <ø> (ø)`
...ugins/woocommerce/includes/class-wc-post-types.php	`0.9% <0.0%> (-<0.1%)`	⬇️
...merce/includes/emails/class-wc-email-new-order.php	`62.4% <0.0%> (-1.0%)`	⬇️
...ins/woocommerce/includes/emails/class-wc-email.php	`53.1% <ø> (ø)`
...ludes/tracks/events/class-wc-products-tracking.php	`0.0% <0.0%> (ø)`
plugins/woocommerce/includes/class-wc-cart.php	`79.4% <50.0%> (-0.1%)`	⬇️
...ocommerce/includes/abstracts/abstract-wc-order.php	`76.4% <100.0%> (ø)`

... and 1 file with indirect coverage changes

github-actions · 2023-05-05T19:12:48Z

Hi @nathanss,

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

nathanss

I had this problem while clicking 'Add new'. Can you check if it's related?

EDIT: recording

Screen.Recording.2023-05-09.at.11.08.45.mov

mattsherman · 2023-05-09T15:54:06Z

@nathanss Your screen recording shows the add_first_attribute action param being logged, which was changed in this PR. So, it looks like you might not be running the code from this PR. Can you please double-check this?

nathanss · 2023-05-09T16:04:19Z

@mattsherman I'll double check. But I was checked out at the branch and ran build.

nathanss · 2023-05-09T17:00:09Z

@mattsherman It is happening in this branch. Here's a print from the minified code:

mattsherman · 2023-05-09T17:30:11Z

@nathanss That is not the minified code from the source in this PR. That is from older source. The minified code from this branch is...

var e, o, r;
null === (o = document.querySelector("#product_attributes .add_custom_attribute")) || void 0 === o || o.addEventListener("click", (()=>{
    (0,
    t.recordEvent)("product_attributes_buttons", {
        action: "add_new"
    })
}
)),
null === (r = window) || void 0 === r || r.jQuery("select.wc-attribute-search").on("select2:select", (function() {
    (0,
    t.recordEvent)("product_attributes_buttons", {
        action: "add_existing"
    })
}
)),

What build command are you running? The product-tracking/shared.ts source file is part of plugins/woocommerce-admin, so you need to make sure that is re-building. From the error you are getting, and the minified code you shared, it clearly isn't getting built for some reason!

nathanss · 2023-05-09T18:21:52Z

@mattsherman Sorry. It was a problem at my end. All manual tests are passing!

plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js

…t.preventDefault is used.

octaedro · 2023-05-19T14:58:25Z

plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js

@@ -400,6 +394,14 @@ jQuery( function ( $ ) {
 		.find( '.woocommerce_attribute' )
 		.get();

+	// If the product has no attributes, add an empty attribute to be filled out by the user.
+	$( function add_blank_custom_attribute_if_no_attributes() {


This function doesn't necessarily need to be named, especially if it's only being used in this one place.

Naming functions is very helpful when you are looking at an outline of the code in an editor, debugging a stack trace, and to help document what the code is doing.

mattsherman added 12 commits May 4, 2023 13:58

Remove empty state HTML

941b56b

Add empty attribute when product has no attributes

a41644f

Remove unused woocommerce_admin_meta_boxes.has_local_attributes

bf620fa

Remove unused toggle_add_global_attribute_layout

4eb68c2

Remove unused button.add_attribute click handling (button doesn't exi…

f66cc9a

…st anymore)

Fix positioning of Expand / Close

a789196

Remove unnecessary add-attribute-container div

ba44be0

Refactor attribute search selection handling

b566c0c

Remove empty attribute if adding an existing attribute

91eca92

Update e2e test clicking of "Add new" attribute button

edefe04

Update Tracks handling for "Add new" attribute button

10f32ed

Changelog

5ff5ba4

mattsherman self-assigned this May 4, 2023

github-actions bot added focus: e2e tests Issues related to e2e tests focus: react admin [team:Ghidorah] plugin: woocommerce Issues related to the WooCommerce Core plugin. labels May 4, 2023

mattsherman added 4 commits May 5, 2023 08:55

Fix action recorded when "Add new" button is clicked

7cdfc90

Remove console.log statements

e00ac15

Allow propagation of click event on "Create value" button

6e07d0a

Move Tracks wcadmin_product_attributes_buttons action: 'add_existing'…

e1f6bdd

… to product-tracking TS

mattsherman requested a review from a team May 5, 2023 19:12

mattsherman added type: enhancement The issue is a request for an enhancement. focus: product management Related to product creation and editing. and removed focus: react admin [team:Ghidorah] labels May 5, 2023

mattsherman marked this pull request as ready for review May 5, 2023 19:14

nathanss reviewed May 9, 2023

View reviewed changes

mattsherman requested a review from nathanss May 9, 2023 15:54

nathanss requested changes May 9, 2023

View reviewed changes

plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js Outdated Show resolved Hide resolved

plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js Outdated Show resolved Hide resolved

plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js Show resolved Hide resolved

Make function names more descriptive. Add comment to clarify why even…

190820c

…t.preventDefault is used.

github-actions bot added the focus: react admin [team:Ghidorah] label May 9, 2023

mattsherman requested a review from nathanss May 9, 2023 19:12

nathanss approved these changes May 9, 2023

View reviewed changes

mattsherman merged commit d11f50b into trunk May 10, 2023
18 checks passed

mattsherman deleted the update/attribute-empty-state branch May 10, 2023 00:04

github-actions bot added this to the 7.8.0 milestone May 10, 2023

This was referenced May 11, 2023

WooCommerce 7.6 and 7.7: Save Attributes button not visible when adding 2 attributes when more than 20 global attributes exist #38266

Closed

Fix race condition when rendering product attributes tab empty state #38354

Merged

octaedro reviewed May 19, 2023

View reviewed changes

mattsherman mentioned this pull request Jun 20, 2023

Do not show "Adding new attribute failed" error message when loading of product screens is interrupted by page unload #38815

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update empty state for product attributes tab #38126

Update empty state for product attributes tab #38126

mattsherman commented May 4, 2023 •

edited

github-actions bot commented May 4, 2023 •

edited

codecov bot commented May 5, 2023 •

edited

github-actions bot commented May 5, 2023 •

edited

nathanss left a comment •

edited

mattsherman commented May 9, 2023

nathanss commented May 9, 2023

nathanss commented May 9, 2023

mattsherman commented May 9, 2023

nathanss commented May 9, 2023

octaedro May 19, 2023

mattsherman May 19, 2023

Update empty state for product attributes tab #38126

Update empty state for product attributes tab #38126

Conversation

mattsherman commented May 4, 2023 • edited

Submission Review Guidelines:

Changes proposed in this Pull Request:

Before

After

How to test the changes in this Pull Request:

Common instructions

No global attributes in system

Global attributes in system, adding a new local attribute

Global attributes in system, adding a global attribute

Editing an existing product with no attributes

Editing an existing product with local attributes

Editing an existing product with global attributes

Tracks events

github-actions bot commented May 4, 2023 • edited

Test Results Summary

codecov bot commented May 5, 2023 • edited

Codecov Report

github-actions bot commented May 5, 2023 • edited

nathanss left a comment • edited

Choose a reason for hiding this comment

mattsherman commented May 9, 2023

nathanss commented May 9, 2023

nathanss commented May 9, 2023

mattsherman commented May 9, 2023

nathanss commented May 9, 2023

octaedro May 19, 2023

Choose a reason for hiding this comment

mattsherman May 19, 2023

Choose a reason for hiding this comment

mattsherman commented May 4, 2023 •

edited

github-actions bot commented May 4, 2023 •

edited

codecov bot commented May 5, 2023 •

edited

github-actions bot commented May 5, 2023 •

edited

nathanss left a comment •

edited