[BUU] Filter my catalogue

[mariocarabotta]

Context

This issue enhances the display of the product list table #10694.

Out of scope

• search for products [BUU] Search for a product #11056

Description

- As an: enterprise user
- On page: /admin/products
- I want to be able to: filter my products by producer and category
- So that: I can find the products I'm looking for

Acceptance Criteria & Tests

Scenario 1: Single producer
Given that I am in /admin/products
And my enterprise only has one producers
When the page has loaded my products
Then I see only a filter for categories (All categories pre-selected)
And I don't see a filter for producers

Scenario 2: Multiple producers
Given that I am in /admin/products
And my enterprise only has more than one producer
When the page has loaded my products
Then I see a filter for categories (All categories pre-selected)
And a filter for producers (All producers pre-selected

Note: logic to display producers picker would be the same as tracked in #11200 (decoupled from the original product table display)

Scenario 3: Selecting different option
Given that I am in /admin/products
When I select a different option for Producer or Category
Then the picker shows my new selection
And the table does not refresh

Scenario 4: Searching within filter
Given that I am in /admin/products
And I have opened a filter
When I search within a filter
Then I see a subset of options based on my search

Scenario 5: Filtering
Given that I am in /admin/products
And I have selected a different option for Producer or Category
When I search
Then the table refreshes
And shows products that match my filters

Scenario 6: Pagination
Given I have filtered my products
And there are more results than what are displayed on the table
When I go to the second page of the results
Then I see more products
And the filter remains as per my selection

Design specs

A prototype is available here (categories can be clicked on) > https://www.figma.com/proto/v1zbrWDZSRd3Nqoe0SJ2Sm/Engineering-Delivery?page-id=378%3A3907&type=design&node-id=378-3908&viewport=546%2C542%2C0.58&t=OOUsawRfEBZzOZVj-1&scaling=min-zoom&starting-point-node-id=378%3A3908&mode=design

Figma screens are available here > https://www.figma.com/file/v1zbrWDZSRd3Nqoe0SJ2Sm/Engineering-Delivery?type=design&node-id=378%3A3907&mode=design&t=TgZ3irJGBg2CvOuz-1

New components and styles

Component	Example
Relaxed dropdown closed
Relaxed dropdown open - with inline search

[RachL]

@jibees scenario 1 here is not working in the linked PR. Is that intended? (filter is on All producers)

[jibees]

oops... Sorry about that. I forgot for sure.