[NGS Portal] Main Dashboard - Projects panel

[NShaforostov]

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

Panel shall contain:

• [ ] panel header
• [ ] search bar
• [ ] list of projects cards

Additionally, panel shall include abilities:

• [ ] to navigate to all projects list
• [ ] to navigate to any project from the list
• [ ] to mark favourite projects

---

List of projects cards

Panel shall display a list with a few projects available to user. Each project in the list shall be presented as a card. Project card shall contain:

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

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

Search bar

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

• search shall be conducted over project 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 projects list in the Projects panel:
  • in this list, only projects which names match the search string shall be shown
  • found matches in project names (or their parts) shall be highlighted
  • after clearing the search bar, projects list shall return to its previous view

View all projects

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

Open a project

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

Favourite projects

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

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