Add ability to bulk select cards from the same bank in the Card filter on the Search page

[luacmartins]

We're in the final implementation phase for card feeds in NewDot, and as part of that initiative, we need to add a way for admins to bulk select all cards from a certain feed.

Rather than add two separate filters (and the accompanying search syntax), we're going to add a way to bulk select a whole series of cards in the Card filter. The benefit of this is that we prevent search "collisions" on two separate filters. For example, imagine that we had a filter for Feed. If you selected Chase for that option, you would also be selecting all Card numbers that also belonged to the same feed. However, in our current logic the Card filter would be empty.

Long story story, a feed is just a way of bulk selecting cards. Similarly, the Card filter is already by design a way to select one or more cards. As a result, we're going to do the following:

• Keep the name of the Card filter
• Within the Card filter, admins will see two sections: Card feeds and Individual cards (note for emphasis: the workspace role for member never sees the Card feeds section)
• Further, within the Card feeds section, if a user has more than one feed, then we'll append either the domain name or the workspace name (e.g. All Expensify - [workspace name] or All Expensify - [domain]. The domain name only applies for domain feeds, and the workspace feed only applies for workspace feeds. These names are truncated where applicable.
• When a value is selected in the Card feeds section, that's equivalent to a user individually selecting all individual cards. However, we don't do that when a feed is selected, as the card feed is it's own distinct selection.
• It's also worth noting that it's possible to select an entire feed as well as individual cards that may not be part of the same feed. Similarly, if a feed is chosen and individual cards within the same feed are also chosen, that's the same as just selecting the feed.
• Finally as a reminder, the search input only appears when a given list has more than 8 options. This is our standard for when the search input is shown versus not, though I'm including this as a reminder.

Taken together, the updated filter will look like this.

[melvin-bot]

Triggered auto assignment to @trjExpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[luacmartins]

@Kicu would you or someone from SWM want to take this one?

[JmillsExpensify]

Taking assignment on this one

[SzymczakJ]

Hey! I’m Jakub Szymczak from Software Mansion, an expert agency, and I’d like to work on this issue!

[JmillsExpensify]

Awesome, let us know if you have any questions.

[SzymczakJ]

Are there any designs for this? I don't see the image that Carlos posted :( @JmillsExpensify

[lakchote]

@SzymczakJ you can find the Figma file here

[SzymczakJ]

For testing purposes, how to create a domain feed?

[lakchote]

For testing purposes, how to create a domain feed?

For information, @SzymczakJ was able to get through this based on this comment

[SzymczakJ]

Sorry I was OOO on Friday and I forgot to mention it. I should be able to put up a draft PR today.

[SzymczakJ]

Now when I think of it, in case a user is a workspace admin, shouldn't he be able to see all workspace cards, not only the cards that he is assigned to(he has an onyx data of that).

[luacmartins]

Yea, I think admins should see all cards. Please confirm @JmillsExpensify

[SzymczakJ]

Currently, we are fetching all card feeds data on WorkspaceExpensifyCardPage and WorkspaceCompanyCardsPage by the use of Policy.openPolicyExpensifyCardsPage and CompanyCards.openPolicyCompanyCardsFeed.
I think we need to have a distinct API command that will fetch all the expensify and company cards while entering card filter. Not only these commands have sligthly different use, but they also only fetch single workspace cards and we have a need for command that fetches all of it in one call. @luacmartins

[JmillsExpensify]

Yes, admins should see all cards.

[SzymczakJ]

Another questions @luacmartins:
When we select a card feed, save and then view results, the things that we send on backend will be only cardIDs that are contained in that feed, right?
If so, then:

1. what should we show in AdvancedSearchFilters card title? Should we print all cards that we'll send on BE, or maybe print only the card feed(All Expensify - Some workspace name).

2. what should we show in SearchPage input? Is showing all the searched cards is enough?

3. we are won't be able to view results and then come back to advanced filters with card feeds selected, unless we also save them on BE

My proposition would be to ignore showing card feeds in point 1. and 2. and just show all the cards that belong to the selected card feeds. In short words make it an option to bulk select cards on card filters page, but don't preserve it over saving and showing search results. WDYT

[JmillsExpensify]

Curious what Carlos thinks, though adding my thoughts for two of the questions:

what should we show in AdvancedSearchFilters card title? Should we print all cards that we'll send on BE, or maybe print only the card feed(All Expensify - Some workspace name).

Given that this is simply a way to bulk select cards, I would think that we'd print all cards. Basically as if someone entered all the cards in the search router manually.

what should we show in SearchPage input? Is showing all the searched cards is enough?

Yes, similar to above, let's show all the cards as if you searched them

[SzymczakJ]

I know that you wanted cardFeeds selection and indvidual card selection to be separate(according to the description quote)

When a value is selected in the Card feeds section, that's equivalent to a user individually selecting all individual cards. However, we don't do that when a feed is selected, as the card feed is it's own distinct selection.

But wouldn't it make more sense to indicate the user which cards are already chosen, so he knows that he doesn't need to tick them. That's how it would look like:

Screen.Recording.2024-12-03.at.14.51.40.mov

@JmillsExpensify @luacmartins

[luacmartins]

Currently, we are fetching all card feeds data on WorkspaceExpensifyCardPage and WorkspaceCompanyCardsPage by the use of Policy.openPolicyExpensifyCardsPage and CompanyCards.openPolicyCompanyCardsFeed.
I think we need to have a distinct API command that will fetch all the expensify and company cards while entering card filter. Not only these commands have sligthly different use, but they also only fetch single workspace cards and we have a need for command that fetches all of it in one call. @luacmartins

That makes sense. I can work on creating that command.

what should we show in AdvancedSearchFilters card title? Should we print all cards that we'll send on BE, or maybe print only the card feed(All Expensify - Some workspace name).

I agree with Jason, I think we'd just show all the selected cards.

what should we show in SearchPage input? Is showing all the searched cards is enough?

Same as above. Although, I wonder if we'll run into performance issues if a user selects a feed with a huge list of cards.

we are won't be able to view results and then come back to advanced filters with card feeds selected, unless we also save them on BE

For this, I think we can just add a condition to check if every card on a feed is selected and if so, also select the feed in the list

But wouldn't it make more sense to indicate the user which cards are already chosen, so he knows that he doesn't need to tick them. That's how it would look like:

I agree with this. @JmillsExpensify wdyt?

[luacmartins]

Created an issue to create the read command here

[SzymczakJ]

I'll put the PR into internal review tomorrow.

[luacmartins]

Nice! @SzymczakJ I'm starting to work on the command to fetch the card/feeds. Which Onyx keys are you subscribing to? Just cardList?

[SzymczakJ]

I'm basing my work on cardList and cards_ onyx keys. cardList object is always prefetched, but I need to fetch cards_ obejct that would contain all cards from workspaces that a user is admin of.

[JmillsExpensify]

Btw, catching up now on the above

[JmillsExpensify]

But wouldn't it make more sense to indicate the user which cards are already chosen, so he knows that he doesn't need to tick them.

This consideration is a bit tricky, as consider this case:

• You choose All Expensify...
• All cards below are selected
• Then you unselect one of the Expensify cards individually

In this case, you actually didn't unselect the card, because All Expensify is selected above. Basically, the card you unselected above would still be in the query, even though you thought you removed it.

[SzymczakJ]

That's the way I'm currently handling this:

Screen.Recording.2024-12-05.at.11.35.14.mov

When user selects card feed -> we select all the cards
When user unselects at least one card from the feed -> we also unselect the feed, to indicate that not every card is selected
When user unselects a feed -> we also unselect all the cards from that feed
Is this the behaviour you expected @JmillsExpensify?

[JmillsExpensify]

@Expensify/design we had chatted about this one last week, and I believe some of you had concerns with this approach.

When user selects card feed -> we select all the cards
When user unselects at least one card from the feed -> we also unselect the feed, to indicate that not every card is selected
When user unselects a feed -> we also unselect all the cards from that feed

Is that still the case, or we're good to move forward with this?

[trjExpensify]

Personally, this is what I expected and I think it's fine. Curious for design team's thoughts as well!

[dannymcclain]

I feel like I was the one who originally pushed back on that idea. I still think it's weird having a radio option that controls other, separate radio options below it. But maybe that's just me—if everyone else is happy with that behavior I'm fine to move forward with it. Let's wait for @Expensify/design to weigh in though.

[luacmartins]

This behaviour is also my expectation

[shawnborton]

I don't feel too strongly really, I see Danny's point but I also think what I am seeing in the video doesn't feel terribly weird and seems to make sense to me.

[dannymcclain]

Ok cool - we can wait for @dubielzyk-expensify to chime in but it sounds like everyone is cool with the behavior shown in the video.

[dubielzyk-expensify]

Yeah, I kinda think the video is what's expected too.

[SzymczakJ]

Thanks for chiming in!
@luacmartins do we have an ETA for backend API call?

[luacmartins]

@SzymczakJ the PRs are in review. I'm hoping to get them merged early next week and fully deployed by mid-next week.

[SzymczakJ]

FYI I noticed bugs in using card filter:

old.bug.mov

All cards except of "Expensify Cards" were shown with a BE value of a bank and same bank cards were indistinguishable. I've fixed it and changed them to human readable form and added descriptor as we do in Search Input:

fix.mov

I guess nobody was really testing this with real cards and that's why this wasn't noticed, but is it the right way to fix it? @luacmartins

[luacmartins]

That looks good to me. cc @Expensify/design for another opinion

[shawnborton]

Looks good to me too. What does the query look like if you choose "All" on a card feed that has a ton of cards?

[SzymczakJ]

We settled on showing all the cards, that the user selected, by selecting a big card feed.
Even if we group cards in cards feeds in query, the user will be able to make really big query consisting of many cards, if he doesn't exactly select the whole feed. What's more putting card feeds in query would mean big changes all over backend, parser and frontend.

[shawnborton]

Can I see an example mockup of that? I'm just worried that it's going to look pretty brutal in the query bar, and it will make it harder to extend the query to search for anything specific. Like if you wanted to search for the merchant "McDonald's" across all of your Visa commercial cards... it feels like doing so manually via the query would be rough. That being said, it would be easy to do it via advanced filters in the RHP so maybe it's not a huge concern.

[SzymczakJ]

Here's example of 2 card feeds selected(total of 7 cards):

[shawnborton]

Yup, this screenshot here:

...illustrates my point - that query bar is virtually unusable. Maybe that's fine for now though? Curious what @JmillsExpensify thinks.

[Kicu]

Just dropping in to say that unless backend changes how searching for cards works we cannot display it differently.
We need to include every card that the user searches for in the search query.

[luacmartins]

We had previously agreed on showing all cards. I also agree that changing that behaviour would require bigger changes to the backend/parser logic.

[shawnborton]

Okay cool, I think we can leave it for now but I wonder if we'll want to revisit in the future for things like reconciliation.

[SzymczakJ]

Bump me when BE is deployed @luacmartins
No hurry though because I'll be OOO tomorrow

[luacmartins]

PR was merged. Waiting on deploy.