[dashboard] Next steps nudge for local-preview

[Pothulapati]

Description

Currently, After local-preview is exited There are no
direct concrete steps for users to take.

This PR fixes this by adding a new Alert box to the
global dashboard if we notice that they are on a Gitpod
local-preview DOMAIN, which is preview.gitpod-self-hosted.com
(our own DOMAIN) from now.

Signed-off-by: Tarun Pothulapati [email protected]

Signed-off-by: Tarun Pothulapati [email protected]

Related Issue(s)

Part of #11381

How to test

Run

docker run -p 443:443 --privileged --name gitpod --rm -it -v gitpod:/var/gitpod eu.gcr.io/gitpod-core-dev/build/local-preview:tar-lp-out-nudge.19

and see the nudge being present.

Release Notes

[dashboard] Next steps nudge for local-preview

Documentation

Werft options:

• /werft with-preview

[werft-gitpod-dev-com]

started the job as gitpod-build-tar-lp-out-nudge.2 because the annotations in the pull request description changed
(with .werft/ from main)

[Pothulapati]

/werft with-preview

👎 unknown command: with-preview
Use /werft help to list the available commands

[Pothulapati]

/werft run

👍 started the job as gitpod-build-tar-lp-out-nudge.4
(with .werft/ from main)

[Pothulapati]

Screenshot of what a user would see

@gtsiolis Looking forward to your feedback 👀

[gtsiolis]

Looking at this now! 👀

[gtsiolis]

Thanks for picking this up, @Pothulapati! 🔮

Left one issue below to make this UX ready, and one suggestion for updating the copy.

Approving to unblock merging but holding to let someone from the @gitpod-io/engineering-webapp take a closer look at the code changes.

/hold

[gtsiolis]

issue: Not sure where can we move this piece of code, but the alert component component should be placed below the top navigation bar, including the tabs and above the pager heading. The current placement is breaking the layout in some pages.

BEFORE	AFTER

[Pothulapati]

@gtsiolis Can you take a look on this layout issue?

I've moved this into App.tsx where the new AppNotifications are, and you can access the instance at https://tar-lp-out-nudge.preview.gitpod-dev.com/workspaces

[gtsiolis]

Looks great, @Pothulapati! Two minor issues:

1. Grid: We're using a page container with a fixed layout for our grid layout. Using this approach the ideal maximum width of the page container should follow the fixed width of the page container.
2. Spacing: We've been using an 8-point grid system with spacing scale to help us provide all the negative area needed between elements and components, see relevant discussion (internal). Every part of the user interface should be intentional about empty space between elements. The amount of space between items creates relationships and hierarchy. For example, 8px is used to separate related elements while 16px is used to separate unrelated elements.

Cc @gitpod-io/engineering-self-hosted for visibility and future reference.

One interesting point we may run into the future could be to see how this alert stacks with more global alerts coming through the AppNotifications.txt, which could be fine as long as we limit the amount of alerts we stack, but I'd assume there's little to zero changes of running into more alerts here as the local preview is not intended for production use.

To get back to the actual UX changes, using a parent div container for the alert with two classes (app-container and mt-2) should make all the necessary changes here. 🍵

BEFORE	AFTER

[Pothulapati]

I'd assume there's little to zero changes of running into more alerts here as the local preview is not intended for production use.

Exactly, and hence my reason for not using AppNotifications.

[stale]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.