Enhance Node Finder experience

[zaelgohary]

Filters take almost 100vh from the viewport and user needs to scroll to see the table.

Suggested solution: Let's use compact filter input instead. Also, not all filters should be shown to the user. Some should be shown as default and the others can be added if the user needs (from a dropdown menu or sth).

Reduce columns in nodes table. Users can access additional details by clicking on individual table rows anyway.

Display node type hints above the table instead of below it. With a pagination setting of 50 items per page, placing this information below the table would require excessive scrolling for the user.

Related Issues:

• Replace Node Finder table with node cards #2057
• [Suggestion for improvement] More filtering options #2255
• make dedicated nodes rentable from node finder and from selecting node while deploying any solution  #2056
• Prevent reserving a dedicated nodes with balance less than 2 TFT #2369
• find a better way to show the dedicated node discount info notification #1892
• Discounts rate and prices of dedicated node should be added in node finder. #2285

[ramezsaeed]

Related to:
#2132

[ehab-hassan]

work in progress(WIP)

the horizontal filter was designed to take 15% of the screen and by default closed, but while we have many items to filter we need to back to put it on the left side @MohamedElmdary suggest to give the user the option to hide the sidebar at pages contain filter( Node Finder,dedicated-nodes,farm-finder) so we can have more space for filter

Note: that'll cause scroll at the table on small screen

[A-Harby]

1. Can you change the place of the Select Node Status filter? It's the most used filter on the page, and for better UX, it should be easily accessible instead of being at the bottom of the page.
2. Having the apply button at the top of the filter doesn't seem like the best position for it; it doesn't feel good to keep scrolling up and down to choose filters and apply them.
3. Maybe you can also group similar inputs together instead of having the type input and list input in shuffles, and then toggles in last (and order them in the most used first).

screen-capture.23.webm

[A-Harby]

After discussing it with @ehab-hassan we agreed that it would be better for the apply button to be at the top and reorder the filter with most useful first (so the user scrolling would be minimal).

The order is:

1. The Toggles
   A. Dedicated
   B. Gateway
   C. GPU
2. Node status filter
3. Node ID
4. Farm ID
5. 3 other lists (farm names - regions - countries)
6. Free public IPs
7. Free resources
8. Min resources

[ehab-hassan]

Work Completed

[khaledyoussef24]

verified on devnet
version : bef3f8f
the new order of the node finder :

1. The Toggles
2. Node status filter
3. Node ID
4. Farm ID
5. 3 other lists (farm names - regions - countries)
6. Free public IPs
7. Free resources
8. Min resources

nodes are now in cards which is better for small screens and no need for horizontal scrolling.

toggles now only take action after clicking on apply

Screen.Recording.2024-04-07.at.9.06.41.AM.mov

node cards
filtering toggle
filters