[Bug] Reporting: Transactions report - Fix view for Search tags input field when we have too many search items

nagpai commented 5 months ago

Describe the bug

The input field of the search bar on Transactions report page, gets hidden if we add too many tags. This becomes more obvious in narrow / mobile screens.

This issue will become more prominent when the Payment Activity Card is released to merchants (estimated v7.9). From this card, the TPV View report link will show all of these filter tags:

charge, payment, payment_failure_refund, payment_refund, refund, refund_failure, dispute, dispute_reversal, card_reader_fee

To Reproduce

Browse to Payments > Transactions on your test site.
Try adding a tag or two and see that the input field for the next tag and its prompt are correctly visible

In the search field, add a lot of tags till it warps to a new line, or to the end of the line ( it will then warp if you narrow the screen size ). Tip, You can click on the View report link on the Payment activity widget. It will open with a lot of tags preloaded.
We notice that the input field and the search prompt to add the next tag no longer appears.

With the search box clicked, we are still able to type in tags, but it can be confusing to merchants without the prompt that they can type more. They also do not see where they are typing.

Solution from Design ( props @rogermattic 🙌 )

Within the current design setup, we could try this:

Increase the height of the search box
Have all the tags in one line. Some of them will get clipped , that's fine. We can have a horizontal scroll
Have the x cross sign for the user to clear the filters visible
Have the next (2nd) line empty so that the user can search if they want. We can show the prompt here.

Additional context

The issue came up while https://github.com/Automattic/woocommerce-payments/pull/8726#issuecomment-2085926319 related to Payment activity widget.

Jinksi commented 5 months ago

I just discovered a very relevant WC issue for this exact problem in the woocommerce repo:

Improving the WooCommerce Admin search component · Issue #32239 · woocommerce/woocommerce

And WooPayments issue #2269.

This may be a duplicate!

haszari commented 5 months ago

Marking as low priority for now – I am assuming most merchants would not experience this (use a limited number of filter tokens). If we get more reports we should raise priority.

As we work more on list views / reporting features, we could revisit this as part of a project.

Jinksi commented 5 months ago

I am assuming most merchants would not experience this

@haszari This is true for now, until the Payment Activity Card is released to merchants. From this card, the TPV View report link will show all of these filter tags:

charge, payment, payment_failure_refund, payment_refund, refund, refund_failure, dispute, dispute_reversal, card_reader_fee

I'll add this detail to the issue description.

haszari commented 5 months ago

Thanks, that's useful info.

charge, payment, payment_failure_refund, payment_refund, refund, refund_failure, dispute, dispute_reversal, card_reader_fee

That's a large / complex query to land on when clicking a tile. Might be worth design consideration - keen for thoughts from @rogermattic . i.e. the bug is not that the search field doesn't work well with lots of items, the bug is that we have to use a detailed query for an innocuous link.

Of course we should fix the bug with the field too (might as well do that as part of project?), but we should consider the wider experience also.

haszari commented 5 months ago

@Jinksi I'm going to increase the priority and add this to project – let me know what you think. Feels like we need to resolve for project.

rogermattic commented 4 months ago

Oh dear, thanks for highlighting it @haszari

Might be worth design consideration - keen for thoughts from @rogermattic . i.e. the bug is not that the search field doesn't work well with lots of items, the bug is that we have to use a detailed query for an innocuous link.

I'd love to help with this, but I'd need to understand a bit more what are my options. Ideally the link should be just tpv or total_payment_volume but is that at all possible?

haszari commented 4 months ago

I'd love to help with this, but I'd need to understand a bit more what are my options. Ideally the link should be just tpv or total_payment_volume but is that at all possible?

Not without re-designing this whole system.

There are two problems here:

The search filters UI doesn't work well with a large number of filters/items. This is a WooCommerce core (component) issue, and we are affected here.
- https://github.com/woocommerce/woocommerce/issues/32239
Our payment widget requires linking through to a filtered view that has a relatively large number of filters. This is a given, we can't easily change this right now.

So the interaction here is that (1) is a relatively low priority edge case, but (2) makes the (buggy) behaviour a default flow/path so it's no longer an edge case (when payment widget ships/goes GA).

I'd love to help with this, but I'd need to understand a bit more what are my options. Ideally the link should be just tpv or total_payment_volume but is that at all possible?

Thinking a bit more about this. Maybe there are ways around this, e.g. some kind of "meta" filter tag that combines the multiple filters we need to use? We could explore that, but it would be dangerous to explore now, i.e. a relatively big change to approach in bug-fix/QA phase.

jessy-p commented 4 months ago

@nagpai I think @Jinksi or you mentioned some simple css solutions we could try to fix the field?

nagpai commented 4 months ago

@jessy-p . I think you may be refering to the CSS workaround suggested by Magda in this discussion ( quoted in the issue description ). We can try this as a quick fix for now, but a long-term solution would be needed.

jessy-p commented 4 months ago

@nagpai can we implement the quick fix for now to close the blocker for the release.

Automattic / woocommerce-payments