MGDCTRS-1726 feat: pricing tier additions

[gashcrumb]

This change brings the new connector selection list component into the app and applies the pricing tier updates. There's numerous updates and fixes to the connector selection list component, including selection handling, no search results and error state handling. This change also significantly improves the cache updating.

Some known things:

1. placeholder text in the tier info popup, this awaits text I think
2. Info pop-up isn't working next to the connector name, there's still some work to be done on the layout of the list item, this will be fixed in a later update as part of that effort
3. The padding on the right-hand side is to accommodate the "Feedback" thingie

[gashcrumb]

There's a selection issue to look at still, best to hold off merging this until it's sorted.

[gashcrumb]

Selection works nicely now, and I added back the selectable item hover behavior, however interestingly enough the help popover will not work out of the box when selection is enabled on the DataList.

[indraraj]

Greate Work @gashcrumb, the Connector selection page now looks really awesome. 👍

[indraraj]

One scenario where we use both checkbox and filters seems to be creating duplicate cards for the commone connectors. If you want you can merge this PR and work on it as fixes later.

[gashcrumb]

I'll fix it before merging I think. How did you get this to happen @indraraj? Is that when you've selected something and then interact with the filters afterwards? This is the main area of edge cases still I think 😄

[indraraj]

I'll fix it before merging I think. How did you get this to happen @Indrara

• Select the source checkbox
  -Then select the featured filter

also, wanted to confirm how combining both the checkbox and the filter behaves. Will they return the union or the intersection of both?

[gashcrumb]

Adding the do-not-merge label.

It should be the intersection of the filters. So if you check 'source' and 'free' and are in featured, it should show only featured connectors that have both the 'source' and 'free' labels.

[gashcrumb]

@mmuzikar FYI this is probably going to have an impact on any automated tests you might have.

[gashcrumb]

I added some improvements around selection, I think there's still an edge case and may look at not using the DataList component's selection stuff.

I've found now that the backend is updated that my search query for categories and types don't work as I'd expect, if I check "Source" or "Sink" and select a category, I get all the matches with that category, including the opposite of what I've checked for "Source" or "Sink". For this it turns out the UI is creating a search query like search=(label=category-featured OR label=source} for example, but I think we want either (label=category-featured AND label=source) or with some support on the backend side for the IN operator we could do label in ('category-featured', 'source'). I'll need to sync up with @dhirajsb when he's back from PTO. At the moment, if you select a category and then select a type, then there's no matches, which I think might be reasonable given the SQL being sent.

[gashcrumb]

@dhirajsb when you're back, would this be a nicer alternative? I'm not a fan of my current approach :-)

[mmuzikar]

@gashcrumb I noticed 2 thing whilst playing with this PR:

1. the numbers of connectors in a category update when the pricing tier is changed (nice), but the same doesn't happen for source/sink - would it be possible to add?
2. this one is strange :D if you scroll in the list before it's been fully loaded (or at least that's what I assume) then the items you scroll to won't get loaded until you scroll over them 😵 just like this:
   Peek 2023-01-05 09-46.webm

[gashcrumb]

the numbers of connectors in a category update when the pricing tier is changed (nice), but the same doesn't happen for source/sink - would it be possible to add?

yep, I think so.

this one is strange :D if you scroll in the list before it's been fully loaded (or at least that's what I assume) then the items you scroll to won't get loaded until you scroll over them dizzy_face just like this

Yes, we're still learning some things about react-virtualized :-) I think the fetching in the cache component needs some more tightening up.

edit - thinking about it more, I guess also this shows an issue that I'm trying to work around in that the API that InfiniteLoader wants to work with is not the API I have available. The cache receives a request for items with a start/end index, and I have an API that supports pages and page sizes. All this mess is around dealing with that, I guess it'd be kinda nice if maybe we could have an option from our APIs to get a specific slice of the data.

[dhirajsb]

This is a little complicated in SQL, since the where clause has multiple conditions with different values for the same column. It's solvable with other SQL clauses like GROUP BY or INTERSECT. But we need to discuss this in more detail.

[gashcrumb]

On the loading I went ahead and created MGDCTRS-1831 as this is something we can fix later I think. And then for the filtering I've gone and created MGDCTRS-1832 to cover updating the UI to use an SQL query that will return the results as we expect. Thankfully @dhirajsb has been looking at this and it sounds like we could have a solution there.

[gashcrumb]

Ok, rebased and ready for another look with the aforementioned caveats :-)

[indraraj]

tested locally (leaving with mentioned issues), looks fine 👍

[gashcrumb]

Awesome, thanks for the 2nd look :-)