Orders tab: update empty state action button Auto Layout constraints to remove warnings

jaclync commented 2 years ago

Describe the bug

In the empty state view EmptyStateViewController, the action button currently has a fixed width constraint to 228px. This constraint can't be met when the screen width is narrow, and an Auto Layout warning is reproducible with an empty order list. Let's update the Auto Layout constraints of the action button to perhaps use leading/trailing constraints instead of a width constraint.

To Reproduce Steps to reproduce the behavior:

Launch the app in iPhone 11 simulator or device (or iPad 4th gen in split view mode)
Go to the orders tab
Tap "Filter" and select criteria that result in an empty result --> when the empty state UI is shown, there is an Auto Layout warning like Will attempt to recover by breaking constraint <NSLayoutConstraint:0x600002d13390 UIButton:0x13c5ec510'Clear Filters'.width == 228 (active)>

Screenshots

Expected behavior There should not be a warning whenever the empty state UI is shown.

Isolating the problem (mark completed items with an [x]):

[ ] I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
[ ] This bug happens with a default WordPress theme active, or Storefront.
[x] I can reproduce this bug consistently using the steps above.

Mobile Environment Please include:

Device: iPhone 11 / iPad 4th gen simulator
iOS version: iOS 15.5
WooCommerce iOS version: any

dinimar commented 2 years ago

Hi @jaclync, I would like to fix this warning. But I cannot reproduce it. I have a width constraint, but no warning about it. That's only warning I have at the moment:

Also, there is my version of Orders tab: Simulator Screen Shot - iPhone 11 - 2022-08-30 at 13 22 44

My platform: iPhone 11 Simulator (iOS 15.5, Xcode 13.4.1) Version: trunk (710eade) Please, let me know if I've done something wrong or if this issue already fixed.

jaclync commented 2 years ago

Hi @dinimar 👋 thanks for giving it a try! I just checked and was able to reproduce the Auto Layout warning. The warning is shown in Xcode console (in the right panel of the debug area at the bottom of Xcode). The warning looks like:

[LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x600000306b70 H:[UIStackView:0x13d8bc3d0]-(0)-|   (active, names: '|':UIView:0x13d8414a0 )>",
    "<NSLayoutConstraint:0x600000309d10 H:|-(0)-[UIStackView:0x13d8bc3d0]   (active, names: '|':UIView:0x13d8414a0 )>",
    "<NSLayoutConstraint:0x6000003287d0 UILayoutGuide:0x60000195c540'UIViewSafeAreaLayoutGuide'.trailing == orders-table-view.trailing   (active, names: orders-table-view:0x13e13e200 )>",
    "<NSLayoutConstraint:0x60000032bf70 orders-table-view.leading == UILayoutGuide:0x60000195c540'UIViewSafeAreaLayoutGuide'.leading   (active, names: orders-table-view:0x13e13e200 )>",
    "<NSLayoutConstraint:0x60000035c820 UIButton:0x13beb1110'Clear Filters'.width == 228   (active)>",
    "<NSLayoutConstraint:0x60000035cb40 H:[UIStackView:0x15fa0d660]-(58)-|   (active, names: '|':UIView:0x13be87810 )>",
    "<NSLayoutConstraint:0x60000035eee0 H:|-(58)-[UIStackView:0x15fa0d660]   (active, names: '|':UIView:0x13be87810 )>",
    "<NSLayoutConstraint:0x60000035d770 UIView:0x13be87810.width == UIScrollView:0x13ca58000.width   (active)>",
    "<NSLayoutConstraint:0x60000033a1c0 UILayoutGuide:0x600001951500'UIViewSafeAreaLayoutGuide'.trailing == UIScrollView:0x13ca58000.trailing   (active)>",
    "<NSLayoutConstraint:0x600000338500 UIScrollView:0x13ca58000.leading == UILayoutGuide:0x600001951500'UIViewSafeAreaLayoutGuide'.leading   (active)>",
    "<NSLayoutConstraint:0x6000000f57c0 UIView:0x13bed2900.leading == orders-table-view.leading   (active, names: orders-table-view:0x13e13e200 )>",
    "<NSLayoutConstraint:0x6000000f7d40 UIView:0x13bed2900.trailing == orders-table-view.trailing   (active, names: orders-table-view:0x13e13e200 )>",
    "<NSLayoutConstraint:0x6000000879d0 'UISV-alignment' WooCommerce.FilteredOrdersHeaderBar:0x13bd998b0.leading == UIView:0x13d8ad390.leading   (active)>",
    "<NSLayoutConstraint:0x600000087d90 'UISV-alignment' WooCommerce.FilteredOrdersHeaderBar:0x13bd998b0.trailing == UIView:0x13d8ad390.trailing   (active)>",
    "<NSLayoutConstraint:0x6000000f5810 'UISV-alignment' UILabel:0x13be982b0.centerX == UIButton:0x13beb1110'Clear Filters'.centerX   (active)>",
    "<NSLayoutConstraint:0x600000087890 'UISV-canvas-connection' UIStackView:0x13d8bc3d0.leading == WooCommerce.FilteredOrdersHeaderBar:0x13bd998b0.leading   (active)>",
    "<NSLayoutConstraint:0x600000087930 'UISV-canvas-connection' H:[WooCommerce.FilteredOrdersHeaderBar:0x13bd998b0]-(0)-|   (active, names: '|':UIStackView:0x13d8bc3d0 )>",
    "<NSLayoutConstraint:0x6000000f4b90 'UISV-canvas-connection' UIStackView:0x15fa0d660.leading == _UILayoutSpacer:0x600001fcd590'UISV-alignment-spanner'.leading   (active)>",
    "<NSLayoutConstraint:0x6000000f53b0 'UISV-canvas-connection' UIStackView:0x15fa0d660.centerX == UILabel:0x13be982b0.centerX   (active)>",
    "<NSLayoutConstraint:0x6000000f4f50 'UISV-spanning-boundary' _UILayoutSpacer:0x600001fcd590'UISV-alignment-spanner'.leading <= UIButton:0x13beb1110'Clear Filters'.leading   (active)>",
    "<NSLayoutConstraint:0x600000087de0 'UIView-Encapsulated-Layout-Width' UIView:0x13d8414a0.width == 420   (active)>",
    "<NSLayoutConstraint:0x60000032be30 'UIViewSafeAreaLayoutGuide-left' H:|-(100)-[UILayoutGuide:0x60000195c540'UIViewSafeAreaLayoutGuide'](LTR)   (active, names: '|':UIView:0x13d8ad390 )>",
    "<NSLayoutConstraint:0x60000033bed0 'UIViewSafeAreaLayoutGuide-left' H:|-(100)-[UILayoutGuide:0x600001951500'UIViewSafeAreaLayoutGuide'](LTR)   (active, names: '|':UIView:0x13bed2900 )>",
    "<NSLayoutConstraint:0x600000328f00 'UIViewSafeAreaLayoutGuide-right' H:[UILayoutGuide:0x60000195c540'UIViewSafeAreaLayoutGuide']-(0)-|(LTR)   (active, names: '|':UIView:0x13d8ad390 )>",
    "<NSLayoutConstraint:0x600000338410 'UIViewSafeAreaLayoutGuide-right' H:[UILayoutGuide:0x600001951500'UIViewSafeAreaLayoutGuide']-(0)-|(LTR)   (active, names: '|':UIView:0x13bed2900 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x60000035c820 UIButton:0x13beb1110'Clear Filters'.width == 228   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.

JB184351 commented 2 years ago

Hi, not sure if there was a change with Xcode 14 but I don't get a specific constraint address breaking as reported before, I just get Will attempt to recover by breaking constraint. Will keep investigating was just curious if this is a change with Xcode 14 or not. Edit: Just kidding I was filtering out for the text 🤦

woocommerce / woocommerce-ios

Orders tab: update empty state action button Auto Layout constraints to remove warnings #6988