[Dashboard] Workspaces

[gtsiolis]

Problem to solve

Currently, the existing overall design of the dashboard makes it hard to parse and follow information as well as association between entities related to workspaces, projects, branches, and more.

This is part of #3300. 🍕

User Experience goal

The user should be able to navigate efficiently, have a clear view of the object attributes, relationships, and activities as well as feel confident about the state of the application and any transactional or non-transactional actions.

Proposal

In this MVC (minimum viable change) iteration we can do the following:

1. Redesign the workspaces list.
2. Hide the object actions in a dropdown menu.
3. Show a tooltip for creation date.
4. Show a tooltip for error messages.
5. Group pending changes in a dropdown menu.
6. Introduce some help links to the documentation on the header section.
7. Show Recent workspaces and filter out the rest of them (see Status).
8. Keep the page size option.
9. Offer a light theme.
10. Show the Admin menu for admin users.

Components involved:

1. Button
2. Modal
3. Dropdown
4. Text Field
5. Item
6. Empty State
7. ...

Future steps

1. In the future, we can introduce a dark theme, and more.

Designs

List	List (Spacing)

Alert	Empty List (Has Workspaces)	Empty List (No Workspaces)

Select Template	Select Template (Spacing)

See also design specs.

Documentation

No documentation changes are needed for this first iteration.

[svenefftinge]

Merged a first pass.
Todos:

• implement search
• update pinned and shareable
• show ordering
• implement pagination (more button on bottom)
• remove status: prefix from filter
• rendering of moment.js (seems to be off sometimes)

[svenefftinge]

More Todos:

• Implement Empty Workspace List

[svenefftinge]

• Show GC warning