[NGS Portal] Project Info - Header panel

[NShaforostov]

Project header panel of the Project Info page of the NGS Portal shall display main project info. This panel should look approximately like this:

Panel shall contain:

• [ ] project name - plain text label
• [ ] project owner - plain text label with the project's owner username
• [ ] list of tags associated with the project
• [ ] set of tabs to switch between project subitems

Additionally, panel shall include abilities:

• [ ] to edit project tags
• [ ] to switch between project subitems via tabs

---

Project tags

Project tags is a list of key-value attributes associated with the project:

• shall be shown as plain text labels
• shall be shown by pairs, e.g.:

Tags management

Users who has write permission on the project, shall be able to manage project tags - add, edit, remove them. To edit tags, user shall click the corresponding button near the tags list. By click this button, tags edition pop-up shall appear, e.g.:

This pop-up shall contain:

• button to add new tag
• list of key-value pairs of existing project tags. Each tag in the list shall be presented by:
  • editable text field with tag key (upper field)
  • editable text field with tag value (bottom field)
  • delete button
• button to close

To add a tag, user shall click the Add button. After:

• key/value fields shall appear in the upper side
• Add button shall be hidden
• buttons to confirm/reject new tag creation shall appear, e.g.:

User shall confirm input, and then:

• new tag shall appear in the list
• Add button shall appear again
• buttons to confirm/reject tag shall be hidden

To edit a tag, user shall click the field (key or value) of the tag that shall be changed. Key and value fields in the list shall be editable. Then:

• specify new value to the field
• click any place outside the field or press Enter
• changed value shall be autosaved -->

To remove a tag, user shall click the corresponding button near the tag in the list.

Project tabs

Header panel shall contain a set of tabs that allow to switch between project sections. There shall be:

• Info - to open project details page
• Storages - to open data storages section of the project
• Pipelines - to open pipelines section of the project
• Run History - to open the list of the project pipelines' runs