[UX] Add direct link to active workspaces in other teams

[jankeromnes]

Following #4921 and #5555, workspaces opened against a specific project are now listed under the project's team workspaces, and no longer under the "personal workspaces" list (i.e. they're no longer in /workspaces but in /t/TEAM/workspaces).

This is initially surprising to many users:

• https://community.gitpod.io/t/gitpod-website-does-not-show-my-running-workspaces/5319
• https://gitpod.slack.com/archives/C020VCB0U5A/p1633546749309300 (internal)
• https://gitpod.slack.com/archives/C02EN94AEPL/p1633527347194100 (internal)

To fix this, I propose that we add an InfoBox component to the /workspaces page that contains direct links to active workspaces in your teams (this directly addresses the stressful situation "where are my workspaces?"). It could look like this:

You currently have active workspaces in the following teams: Gitpod (3), TypeFox (1)

(and clicking on Gitpod (3) would lead you directly to /t/gitpod/workspaces)

[jankeromnes]

Here is a proof-of-concept of what this could look like (current state of #6103):

No running team workspaces	One running team workspace

It's a little bit ugly (the InfoBox component probably needs a design refresh), but I think it does the job. What do you think @gtsiolis?

[gtsiolis]

@jankeromnes We've introduced a more subtle warning back in #5555 which we could use here.

We should make sure this renders ok on all cases where there are running or stopped workspaces. Tried re-using that component without a gray background for a more subtle warning, see screenshots below. What do you think?

Running (0), Stopped (0)	Running (0), Stopped (3)	Running (2), Stopped (1)	Running (2), Stopped (0)

[jankeromnes]

@gtsiolis Wow, I love these designs 😍 many thanks! 👏 The idea to add a green status dot is genius, and the more-subtle message seems just the right amount of subtle (not too obvious to be "in your face", and not too subtle to be invisible 🎯)

I'm just a little uncertain about screens 3 and 4, mainly about the placement of the message (below other active workspaces? 💭) and the vertical spacing above it. Could it also work with the message always on top?

[gtsiolis]

Both approaches could work. The idea of placing the message below active workspaces is to a) indicate the list of active workspaces continues elsewhere and b) anchor the message position near the garbage collection message to provide visual balance.

Putting the message always on top could also work as a bookmark that links elsewhere but could introduce a visual imbalance near the top of the list unless we reuse the gray background, see screenshots below.

Running (2), Stopped (1)	Running (2), Stopped (0)	Running (2), Stopped (0)	Running (0), Stopped (4)

[jankeromnes]

Good point. I don't perceive the imbalance with the message on top, however the fact that it never moves could make me progressively ignore it (as part of the "immobile landscape"). So I also prefer your earlier concepts. 🔼

[gtsiolis]

Trying out below how the version with the gray background and I think it scales better. Still bouncing between above and below placement when there are running and stopped workspaces. What do you think? 💭

Without the gray background	With the gray background

Above running workspaces	Below running workspaces

Only stopped workspaces