[Dashboard] Better Stopped Screen

[svenefftinge]

This PR improves the stopping and stopped screen, providing more and better to understand information.

How to test

• start a workspace. open the dashboard in another browser, stop the workspace. See how the stopping screen is shown and eventually the stopped screen.
• do the same but this time with pending changes. see how the changes are shown.

Fixes #2084

[svenefftinge]

/werft run

👍 started the job as gitpod-build-svenefftinge-redesign-the-stopped-2084.2

[svenefftinge]

/werft run

👍 started the job as gitpod-build-svenefftinge-redesign-the-stopped-2084.3

[svenefftinge]

/werft run

👍 started the job as gitpod-build-svenefftinge-redesign-the-stopped-2084.5

[svenefftinge]

It now looks like this:

with changes:

without changes:

I put the change information into a scrollable div, because it can get very long but as a user Is till would like to be able to see the information without starting a workspace.
This component is super messy and there are strange things happening. E.g. I couldn't get the buttons to work with href. It's really time to redesign the flows around workspace start and rewrite this code. 🙄

[svenefftinge]

/werft run

👍 started the job as gitpod-build-svenefftinge-redesign-the-stopped-2084.9

[svenefftinge]

/werft run

[svenefftinge]

/werft run

👍 started the job as gitpod-build-svenefftinge-redesign-the-stopped-2084.11

[gtsiolis]

Hey @svenefftinge! Thanks for adding this! 🙏

Initial thoughts

LGTM.

1. This has certainly improved the current state of this page.
2. The new static grayscale logo brings so much calm.
3. The pending changes list is also useful.

Below there are some points that could be considered out of the scope here. Let me know if you think it's better to resolve these in follow-up issues.

Actions

1. The primary action button is not always visible when the workspace has pending changes or not. I'd suggest to use the same primary (blue) button to restart the workspace on both cases.
2. Using multiple verbs to describe a similar action could be suboptimal but in this case, using Restart instead of Start in the primary action button could help.
3. The spacing between the buttons could be also improved to help the user associate these as actions related with the same entity. Using a 16px distance between them could help.

Performance

1. The grayscale, previously floating, logo makes it much more clear this is now a stopped workspace but using uniform3fv to show the static logo seems to consume 8-12% of the CPU as seen in the browser task manager.
2. Eventually we could remove this animation with a more performant one using CSS animation and an SVG variant for the image itself.

User Experience

1. The new static logo still allows some interactivity with the cursor on click on when using dark themes which seems redundant.
2. The progress bar on top can help improve the perceived loading speed of the application in many cases but once the workspace has stopped there's no reason to keep the progress bar there as it gives the impression something is still loading.
3. Once thew workspace has stopped the favicon remains blue. I think I've seen this favicon using the gray variant for some stopped workspaces in the past. Did we revert this change somewhere?
4. In the future we could consider using two or three variants for the favicon to indicate critical states that could be useful to surface through the favicon.
5. The vertical scroll bar on the right can cause some overlapping when the user preference is set to hide scroll bars if not scrolling but this is minor. We could introduce some padding to the changes area to avoid this in the future. The next smallest MVC could be to move the pending changes status message outside the scrolling div.
6. When you have no pending changes it's no clear that you safely ignore the stopped workspace as the paragraph text is not quite accessible dude to text colors. Making the no-pending-changes label better could help. This also applies to, more importantly, workspaces with pending changes.
7. While the link to the GitHub repository could be useful, having this as a primary action button could lead the user to an error page as the user could be a) using a shared workspace with no access to the repository, b) logged out of GL or GH, etc. Also the button label (Go to GitHub.com) a) is not descriptive enough as it's not clear which page this could lead the user to and b) will not always be accurate as the user may not have started this via GitHub in the first place but through a prefixed URL or possibly the dashboard. In the long run we could provide more accurate action buttons that always lead the user to accessible pages and later on include helpful links to repositories and more as described in redesign the stopped loading screen #2084 (comment).

Scroll bars (visible)	Scroll bars (hidden)

Adding below how the layout could be improved based on points 6 and 7.

Stopped without changes (BEFORE)	Stopped without changes (AFTER)

Stopped with changes (BEFORE)	Stopped with changes (AFTER)

Frontend

I put the change information into a scrollable div, because it can get very long but as a user Is till would like to be able to see the information without starting a workspace.

Sounds good! We could introduce a separate component to hold this data in the future.

This component is super messy and there are strange things happening. E.g. I couldn't get the buttons to work with href. It's really time to redesign the flows around workspace start and rewrite this code.

Agree. We can start designing a component for the loading screens that adapts per need but I consider also completely fine to introduce duplicate code as long as this makes the code more readable and understandable by others ands lowers the contribution bar.

I think having such a complex and dynamic code structure behind a page like this creates more confusion in the end and inconsistent state than it helps.

That's it! @svenefftinge let me know what you think! 🏀

[svenefftinge]

Thanks George, we should redesign this component from scratch and I like most of your suggestions. Since we are close to a release I'd like to go with this PR's changes now if there is nothing you deem important to fix now.

[svenefftinge]

The primary action button is not always visible when the workspace has pending changes or not. I'd suggest to use the same primary (blue) button to restart the workspace on both cases.

It is on purpose because starting a workspace again that doesn't contain any changes is unnecessary. So a strong primary suggestion seemed misleading.

Using multiple verbs to describe a similar action could be suboptimal but in this case, using Restart instead of Start in the primary action button could help.

Yeah, thought about this as well. Somehow decided against it. I guess both have pros and cons. But "Restart Workspace" would indeed communicate better that you continue working on the same thing.

[gtsiolis]

Sounds good @svenefftinge! I'll also keep a note of the comment above for future reference once we dive into redesigning this component.

[gtsiolis]

Let's merge this! 🚀