[NGS Portal] Main Dashboard - Pipeline panel

[NShaforostov]

Pipelines panel on the main dashboard page of the NGS Portal shall display a list with a few projects' pipelines available to user.
This panel should look approximately like this:

Panel shall contain:

• panel header
• search bar
• list of pipelines cards

Additionally, panel shall include abilities:

• to navigate to all pipelines list
• to navigate to any pipeline from the list
• to mark favourite pipelines

---

List of pipelines cards

Panel shall display a list with a few pipelines available to user.
Each pipeline in the list shall be presented as a card.
Pipeline card shall contain:

• pipeline name - plain text label
• pipeline owner - plain text label with the pipeline owner name
• pipeline tags - list of key-value attributes associated with the pipeline:
  • shall be shown as plain text labels
  • shall be shown by pairs, e.g.:
• description - plain text pipeline description. In case when description is too long, only its first part shall be shown, other parts shall be hidden by ellipsis

By default, pipelines list shall display only recent N pipelines available to user (e.g. 3-5).

Search bar

Above the pipelines list, there shall be a search bar.
It shall allow to search over the whole list of pipelines (not only over the displayed list):

• search shall be conducted over pipeline names only
• search shall be conducted by pressing Enter key after specifying a text into the Search bar
• search results shall be displayed instead of pipelines list in the Pipelines panel:
  • in this list, only pipelines which names match the search string shall be shown
  • found matches in pipeline names (or their parts) shall be highlighted
  • after clearing the search bar, pipelines list shall return to its previous view

View all pipelines

In the bottom of the pipelines list, there shall be a button to open the full list of pipelines (e.g. View all pipelines).
By click this button, Pipelines page shall be opened.

Open a pipeline

By click any pipeline name in the list or a pipeline card, the Pipeline details page for the selected pipeline shall be opened.

Favourite pipelines

There shall be the ability to mark/unmark any pipeline from the list as "favourite", e.g.:

• user shall be able to mark as favourite any pipeline - as from the displayed list and from search results too (i.e. to mark any pipeline found via the Search bar). To mark a pipeline, user shall:
  • hover over the pipeline card
  • click the favourite icon that shall appear
  • to unmark, user shall perform the same actions again
• favourite pipelines shall be automatically pinned in the top of the displayed list:
  • if pipeline is marked as favourite from the search results list, it shall remain pinned after clearing the search bar as well
• favourite pipelines shall be always displayed in the list for the current user - until the favourite mark is not removed:
  • if pipeline becomes unmarked and it refers to recent N pipelines, it shall just "move" to its place in the pipelines list
  • if pipeline becomes unmarked and it does not refer to recent N pipelines (i.e. it was previously added from the search results over all pipelines available to user), it shall be hidden from the pipelines list