Disable action buttons when product form is invalid #34658

mdperez86 · 2022-09-13T18:26:13Z

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:

Closes 38-gh-woocommerce/mothra-private.

How to test the changes in this Pull Request:

Visit the Add product (MVP) page
All action buttons should be disabled

3. If at least one field is invalid all action buttons should become disabled

4. When form fields are valid, action buttons disable behavior should remain in accordance with other requirements

5. When editing a product if the form is invalid then Move to trash action button should be enabled

6. When adding a new product `Move to trash` action button should not be shown

7. `Move to trash` is only visible when editing the product

8. When editing a product if the name field has any error then the product link is not shown but the error message does. See #issuecomment-1248104111 down below.

9. Publish options menu should be disabled if all menu items are disabled

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-09-13T18:47:09Z

Test Results Summary

Commit SHA: 6badcf9

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	118	0	0	2	0	120	1m 0s
E2E Tests	185	0	0	2	0	187	14m 36s

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 · 2022-09-14T14:30:34Z

plugins/woocommerce-admin/client/products/product-form-actions.tsx

@@ -217,7 +226,7 @@ export const ProductFormActions: React.FC = () => {
 								<MenuItem
 									onClick={ onTrash }
 									isDestructive
-									disabled={ ! values.id }
+									disabled={ ! isValidForm || ! values.id }


I think that this action should be allowed even if the form is not valid. Leaving this line how it was before should be enough.

Your are right @octaedro, this change is done now.
But my suggestion is to hide the Move to trash action button from the creation page because it does not make sense to show an action to an user that will never be enabled in that page. That action is only needed in the edition page. Does that make sense for you @pmcpinto and @jarekmorawski?

It does. 👍 We can hide it for now and bring it back if we hear from the users they need it (which I don't think will happen). We can only show the button once the product is saved as draft or published.

octaedro

Good job @mdperez86! I just left a small comment. Other than that the code looks good and tests well here.

octaedro

Thank you @mdperez86 for adding the change! LGTM 🚀

jarekmorawski · 2022-09-15T13:29:27Z

When editing a product if the form is invalid then Move to trash action button should be enabled

Can we hide the slug when the validation message is shown? It currently doesn't look very good when both of them are in the form.

jarekmorawski · 2022-09-21T14:30:40Z

Looks good, @mdperez86 💪 One more small thing: can we disable the arrow in the split button when all options inside are unavailable? We'd re-enable it if at least 1 option there is active.

…en the form is invalid

mattsherman · 2022-09-22T16:53:55Z

This is not specific to this PR... it appears to be the default of how Gutenberg Button is styled... I do not care for how the button still appears interactive even when disabled. It reacts when you click on it. This could be confusing.

/cc @jarekmorawski

mattsherman

Nice job! Especially with the tests.

Left a comment asking for the publish menu items test to be tweaked so that it doesn't depend on menu item order.

plugins/woocommerce-admin/client/products/sections/product-details-section.tsx

plugins/woocommerce-admin/client/products/test/product-form-actions.spec.tsx

mattsherman

Thanks for improving the publish options menu items test.

Looks great!

github-actions · 2022-09-22T20:48:03Z

Hi @mdperez86, 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

jarekmorawski · 2022-09-23T06:41:30Z

This is not specific to this PR... it appears to be the default of how Gutenberg Button is styled... I do not care for how the button still appears interactive even when disabled. It reacts when you click on it. This could be confusing.

Ideally, the button would not react to clicking. We could also change the cursor to not-allowed to better communicate that. As for the styling, I'm afraid that's how the component works.

Surprisingly, the WP Figma library doesn't even have a disabled state. If this doesn't sit with us, I think we've used the secondary disabled state for primary buttons in the past.

* Disable action buttons when product form is invalid * Move to trash action should be enabled when editing a product even when the form is invalid * Hide Move to trash action button in the Add new product page * Hide product link when the name field has any error * Disable Publish options menu button when all menu items are disabled * Test menu items by text instead of index

AnnaMag · 2022-09-23T10:55:07Z

@jarekmorawski if there are more changes required, could we open a separate issue? This is to make sure no information is lost (due to e.g. PRs being closed).

mdperez86 requested review from octaedro, louwie17 and a team September 13, 2022 18:26

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

mdperez86 added focus: new product ux revamped product management experience and removed plugin: woocommerce Issues related to the WooCommerce Core plugin. focus: react admin labels Sep 13, 2022

octaedro reviewed Sep 14, 2022

View reviewed changes

mdperez86 force-pushed the add/38-disable-action-buttons branch from 1f9dc4b to d873e8a Compare September 14, 2022 14:58

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

octaedro previously approved these changes Sep 14, 2022

View reviewed changes

octaedro mentioned this pull request Sep 14, 2022

Price section - Small refactor and style fix #34558

Merged

8 tasks

mdperez86 dismissed octaedro’s stale review via 26085e5 September 15, 2022 14:19

mdperez86 force-pushed the add/38-disable-action-buttons branch from d873e8a to 26085e5 Compare September 15, 2022 14:19

mdperez86 requested review from octaedro, jarekmorawski and AnnaMag September 15, 2022 14:19

mattsherman self-requested a review September 21, 2022 20:16

mdperez86 added 4 commits September 21, 2022 17:39

Disable action buttons when product form is invalid

8b603a9

Move to trash action should be enabled when editing a product even wh…

d00c079

…en the form is invalid

Hide Move to trash action button in the Add new product page

546073b

Hide product link when the name field has any error

da11ddf

mdperez86 force-pushed the add/38-disable-action-buttons branch from baae459 to da11ddf Compare September 21, 2022 20:39

Disable Publish options menu button when all menu items are disabled

5caad77

mattsherman suggested changes Sep 22, 2022

View reviewed changes

plugins/woocommerce-admin/client/products/sections/product-details-section.tsx Show resolved Hide resolved

plugins/woocommerce-admin/client/products/test/product-form-actions.spec.tsx Outdated Show resolved Hide resolved

Test menu items by text instead of index

6badcf9

mattsherman approved these changes Sep 22, 2022

View reviewed changes

mdperez86 merged commit 7b55c33 into trunk Sep 22, 2022

mdperez86 deleted the add/38-disable-action-buttons branch September 22, 2022 20:47

github-actions bot added this to the 7.1.0 milestone Sep 22, 2022

github-actions bot mentioned this pull request Nov 10, 2022

Test WooCommerce 7.1 UVLabs/location-picker-at-checkout-for-woocommerce#55

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Disable action buttons when product form is invalid #34658

Disable action buttons when product form is invalid #34658

mdperez86 commented Sep 13, 2022 •

edited

Loading

github-actions bot commented Sep 13, 2022 •

edited

Loading

octaedro Sep 14, 2022 •

edited

Loading

mdperez86 Sep 14, 2022

jarekmorawski Sep 15, 2022

octaedro left a comment

octaedro left a comment

jarekmorawski commented Sep 15, 2022

jarekmorawski commented Sep 21, 2022

mattsherman commented Sep 22, 2022

mattsherman left a comment

mattsherman left a comment

github-actions bot commented Sep 22, 2022

jarekmorawski commented Sep 23, 2022

AnnaMag commented Sep 23, 2022

Disable action buttons when product form is invalid #34658

Disable action buttons when product form is invalid #34658

Conversation

mdperez86 commented Sep 13, 2022 • edited Loading

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

FOR PR REVIEWER ONLY:

github-actions bot commented Sep 13, 2022 • edited Loading

Test Results Summary

octaedro Sep 14, 2022 • edited Loading

Choose a reason for hiding this comment

mdperez86 Sep 14, 2022

Choose a reason for hiding this comment

jarekmorawski Sep 15, 2022

Choose a reason for hiding this comment

octaedro left a comment

Choose a reason for hiding this comment

octaedro left a comment

Choose a reason for hiding this comment

jarekmorawski commented Sep 15, 2022

jarekmorawski commented Sep 21, 2022

mattsherman commented Sep 22, 2022

mattsherman left a comment

Choose a reason for hiding this comment

mattsherman left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 22, 2022

jarekmorawski commented Sep 23, 2022

AnnaMag commented Sep 23, 2022

mdperez86 commented Sep 13, 2022 •

edited

Loading

github-actions bot commented Sep 13, 2022 •

edited

Loading

octaedro Sep 14, 2022 •

edited

Loading