Adding Toasts #17030

selfcontained · 2023-03-25T00:51:03Z

Description

WIP
Adding Toasts and updating User Preferences to use them for dotfiles and timeout fields. Also tweaked those forms on user prefs page to have a bit more feedback for the UX.

Some considerations:

Opted for animate in from right for toasts as it's a slightly simpler thing to implement that centered toasts that animate in from bottom. We can always revisit though.
Deferred adding specific types of toasts to reduce initial scope, i.e. success/error/info etc. We should add those as a followup though.

1	2

Related Issue(s)

Fixes WEB-38
Fixes #3530

How to test

Testing updating your dotfiles repo and default workspace timeout

Release Notes

NONE

Documentation

Build Options:

/werft with-werft
Run the build with werft instead of GHA
leeway-no-cache
/werft no-test
Run Leeway with --dont-test

Publish Options

/werft publish-to-npm
/werft publish-to-jb-marketplace

Installer Options

with-ee-license
with-dedicated-emulation
with-ws-manager-mk2
workspace-feature-flags
Add desired feature flags to the end of the line above, space separated

Preview Environment Options:

/werft with-local-preview
If enabled this will build install/preview
/werft with-preview
/werft with-large-vm
/werft with-gce-vm
If enabled this will create the environment on GCE infra
with-integration-tests=all
Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh

werft-gitpod-dev-com · 2023-03-25T00:51:11Z

started the job as gitpod-build-bmh-toasty.2 because the annotations in the pull request description changed
(with .werft/ from main)

geropl · 2023-03-29T09:29:57Z

Happened to bump into this: Seems we're still using the an alert for the error case:

Not sure if this is in-scope for this PR, but: Would it make sense to make that symmetric? Or is there a better way for error messages, e.g. closer to the input field? 🤔

gtsiolis · 2023-03-29T15:46:42Z

Looking at this now! 👀

gtsiolis

Excited to see the toast notifications coming alive, @selfcontained! 🌮 🌮

Left some UX comments below, but feel free to open follow-up issues or combine topics in a follow-up issue or PR. 🏓

Approving to unblock merging, but holding in case you'd like to address any of the comments in this PR.

/hold

components/dashboard/src/user-settings/Preferences.tsx

gtsiolis · 2023-03-29T13:07:03Z

components/dashboard/src/components/toasts/Toast.tsx

+    onRemove: (id: string) => void;
+};
+
+export const Toast: FC<Props> = ({ id, message, duration = 5000, autoHide = true, onRemove }) => {


praise: Excellent choice, 5 seconds. ✨

gtsiolis · 2023-03-29T13:09:04Z

components/dashboard/tailwind.config.js

+                },
+            },
+            animation: {
+                "toast-in-right": "toast-in-right 0.5s",


suggestion: Can we make sure the animation is ease-in?

gtsiolis · 2023-03-29T13:09:31Z

components/dashboard/src/components/toasts/Toast.tsx

+    onRemove: (id: string) => void;
+};
+
+export const Toast: FC<Props> = ({ id, message, duration = 5000, autoHide = true, onRemove }) => {


suggestion: Can we keep the toast shown if the user hovers the mouse over it?

Nice idea, definitely!

gtsiolis · 2023-03-29T15:49:03Z

components/dashboard/src/user-settings/Preferences.tsx

-                            clone and install your dotfiles for every new workspace.
-                        </p>
-                    </div>
+                    <InputField


praise: Thanks for reusing the form components here! 🙇

gtsiolis · 2023-03-29T15:49:31Z

components/dashboard/src/user-settings/Preferences.tsx

-                    </div>
+                    <InputField
+                        label="Repository URL"
+                        hint="Add a repository URL that includes dotfiles. Gitpod will clone and install your dotfiles for every new workspace."


suggestion: Probably out of the scope here, but could we limit the hint width to not grow beyond the input width?

BEFORE AFTER

Good eye 🦅 👁️ - it was a side effect of re-using the form components here, and finding a way to add the button into the row the input was on, but keep the hint rendering as it did by default. I'll play around with this a little more to see if there's a better way to have that behavior, but still re-use the form input components.

Ah, I see. Yeah, let's make this change if it's trivial—otherwise we could keep it like this, as I wouldn't be surprized if the UX or interaction to update the dotfiles or timeouts moves away from these inline forms. Your call. 🏓

See relevant comments:

Replace the save button with the button component with a loading state viarant #7385 (comment)

Replace the save button with the button component with a loading state viarant #7385 (comment)

gtsiolis · 2023-03-29T15:54:00Z

components/dashboard/src/user-settings/Preferences.tsx

-                    </div>
+                    <InputField
+                        label="Repository URL"
+                        hint="Add a repository URL that includes dotfiles. Gitpod will clone and install your dotfiles for every new workspace."


suggestion: Also, out of the scope here, but the input should look, feel, and work better if it had a smaller height and width.

BEFORE AFTER

gtsiolis · 2023-03-29T16:04:25Z

components/dashboard/tailwind.config.js

+                },
+            },
+            animation: {
+                "toast-in-right": "toast-in-right 0.5s",


suggestion: Can we make the toast ease-in from the bottom?

Yah we can. fwiw I tried coming in from the bottom and centered, and it looked a little janky w/ stacked toasts and how they would shift up to make room instantly while the new one slides up. We could make it pretty slick, but will be a bit more effort to animate it nicely I think. In from right looks a little better with this lower level of effort imo, so I ended up doing that. It's not too tough to swap it to in from bottom to show you what I mean sometime too if you wanted to see each.

gtsiolis · 2023-03-29T16:24:57Z

components/dashboard/src/components/toasts/Toast.tsx

+            className={classNames(
+                "relative flex justify-between items-center",
+                "w-full md:w-96 max-w-full",
+                "p-6 border-1 md:rounded",


suggestion: Could we make the design of the toast closer to the original design spec in #3530? For example, larger corner radius, smaller padding, better color text for accessibility, bolder x icon. Later on we can explore how toasts with two lines of text or actions could look like.

BEFORE AFTER

selfcontained · 2023-03-29T16:58:18Z

Happened to bump into this: Seems we're still using the an alert for the error case:

Not sure if this is in-scope for this PR, but: Would it make sense to make that symmetric? Or is there a better way for error messages, e.g. closer to the input field? 🤔

My plan was to make that an error styled toast, but in a follow up where I can work with @gtsiolis around what those styled toasts might look like. It would be easy to make that a toast instead in this PR too though.

gtsiolis · 2023-03-29T17:01:52Z

Regarding the browser alert[1][2], 🅰️ this was mentioned also in the original PR in #16503 (comment) and 🅱️ this is currently the UX on production.

I'd think it should be perfectly fine to not fix this in the scope of this PR but I'll leave this to the engineering team to decide. @selfcontained Your call, but let me know if you need any UX input on this now or later. 💭

Thanks again for making this happen! 🍞

geropl

Thanks for the explanations. 🙏

Code LGTM, tested and works. 🧘

Co-authored-by: George Tsiolis <tsiolis.g@gmail.com>

selfcontained · 2023-04-06T11:55:10Z

/unhold

selfcontained added 4 commits March 24, 2023 23:32

wip for toasts

fd6b892

set max width

21e7f1c

getting toasts working

d354e47

update workspace timeout ui and add toast

06807c8

roboquat added do-not-merge/work-in-progress release-note-none labels Mar 25, 2023

roboquat added the size/XL label Mar 25, 2023

selfcontained added 5 commits March 27, 2023 00:14

put in a portal

d53ed76

adding some aria props

5c89a14

renaming to toast()

e4b0694

improve mobile styles

a101b4a

shift dotfiles repo update into mutation

7f818d2

selfcontained marked this pull request as ready for review March 28, 2023 17:53

selfcontained requested a review from a team March 28, 2023 17:54

selfcontained requested a review from gtsiolis as a code owner March 28, 2023 17:54

roboquat removed the do-not-merge/work-in-progress label Mar 28, 2023

github-actions bot added the team: webapp Issue belongs to the WebApp team label Mar 28, 2023

remove test button

cecadda

gtsiolis approved these changes Mar 29, 2023

View reviewed changes

roboquat added the do-not-merge/hold label Mar 29, 2023

geropl approved these changes Mar 29, 2023

View reviewed changes

selfcontained and others added 4 commits March 29, 2023 17:43

Update components/dashboard/src/user-settings/Preferences.tsx

f1f18b9

Co-authored-by: George Tsiolis <tsiolis.g@gmail.com>

Update components/dashboard/src/user-settings/Preferences.tsx

ace6350

Co-authored-by: George Tsiolis <tsiolis.g@gmail.com>

Adjusting styling per PR feedback

1b2be0c

don't hide toasts on hover

8266edd

roboquat removed the do-not-merge/hold label Apr 6, 2023

roboquat merged commit ee4a5a0 into main Apr 6, 2023

roboquat deleted the bmh/toasty branch April 6, 2023 11:55

roboquat added deployed: webapp Meta team change is running in production deployed Change is completely running in production labels Apr 17, 2023

gtsiolis mentioned this pull request May 2, 2023

[dashboard] Always use these options for repository #17297

Merged

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding Toasts #17030

Adding Toasts #17030

selfcontained commented Mar 25, 2023 •

edited

Loading

werft-gitpod-dev-com bot commented Mar 25, 2023

geropl commented Mar 29, 2023

gtsiolis commented Mar 29, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment

gtsiolis Mar 29, 2023

gtsiolis Mar 29, 2023

gtsiolis Mar 29, 2023

selfcontained Mar 29, 2023

gtsiolis Mar 29, 2023

gtsiolis Mar 29, 2023 •

edited

Loading

selfcontained Mar 29, 2023

gtsiolis Mar 30, 2023 •

edited

Loading

gtsiolis Mar 29, 2023 •

edited

Loading

gtsiolis Mar 29, 2023

selfcontained Mar 29, 2023

gtsiolis Mar 29, 2023

selfcontained commented Mar 29, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Mar 29, 2023 •

edited

Loading

geropl left a comment

selfcontained commented Apr 6, 2023

Adding Toasts #17030

Adding Toasts #17030

Conversation

selfcontained commented Mar 25, 2023 • edited Loading

Description

Related Issue(s)

How to test

Release Notes

Documentation

Build Options:

Preview Environment Options:

werft-gitpod-dev-com bot commented Mar 25, 2023

geropl commented Mar 29, 2023

gtsiolis commented Mar 29, 2023 • edited by werft-gitpod-dev-com bot Loading

gtsiolis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gtsiolis Mar 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gtsiolis Mar 30, 2023 • edited Loading

Choose a reason for hiding this comment

gtsiolis Mar 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

selfcontained commented Mar 29, 2023 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Mar 29, 2023 • edited Loading

geropl left a comment

Choose a reason for hiding this comment

selfcontained commented Apr 6, 2023

selfcontained commented Mar 25, 2023 •

edited

Loading

gtsiolis commented Mar 29, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis Mar 29, 2023 •

edited

Loading

gtsiolis Mar 30, 2023 •

edited

Loading

gtsiolis Mar 29, 2023 •

edited

Loading

selfcontained commented Mar 29, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Mar 29, 2023 •

edited

Loading