✨ [Frontend] Dashboard: filters on the left

odeimaiz commented 1 month ago

What do these changes do?

In order to enhance the use of tags and facilitate the organization of resources (Studies, Templates, Services) in the Dashboard, this PR makes the filtering options more visible.

The filtering options, which were located in a drop down menu between the search filter and the cards, are now placed on the left side of the cards, well visible with toggle buttons.

Also, a tooltip was added to the Tags shown on cards (Click to filter by this Tag)

FiltersOnTheLeft

How to test

Dev-ops checklist

[ ] No ENV changes or I properly updated ENV (read the instruction)

odeimaiz commented 1 month ago

Cards are no longer centered in the screen, and the width of their container seems to change depending on the amount of cards and not the available width.

I didn't want to make filters layout flexible, and therefore the main layout doesn't move when you make the window lager (which I personally like better), making only the right white space slightly flexible. On the other hand, in your animation when you switch between Resource Browsers with just a few cards, it looks weird that the main layout doesn't get wider (stays the same width), that was fixed.

On another note (not sure if within the scope of this PR) about those toggle buttons. It is hard to know whether they are enabled or disabled. The border color changes but which one is on and which one is off?

I removed the border to the not selected filters

FlexibleMainLayout