[dashboard] Allow options on ws start (2/2) #15389

svenefftinge · 2022-12-16T11:05:43Z

Description

Updates the Open Workspace Modal to allow specifying the workspace class and editor.

Related Issue(s)

How to test

Use the Open workspace dialog on the preview's /workspaces view

Release Notes

Allow picking workspace class and editor when opening a workspace from the dashboard

Documentation

Werft options:

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

svenefftinge · 2022-12-19T06:55:20Z

/werft run

👍 started the job as gitpod-build-se-start-with-options-2.3
(with .werft/ from main)

gtsiolis · 2022-12-19T12:56:06Z

/werft run

👍 started the job as gitpod-build-se-start-with-options-2.4
(with .werft/ from main)

svenefftinge · 2022-12-19T14:21:40Z

/werft run

👍 started the job as gitpod-build-se-start-with-options-2.5
(with .werft/ from main)

svenefftinge · 2022-12-19T16:44:56Z

/werft run with-clean-slate-deployment

👍 started the job as gitpod-build-se-start-with-options-2.9
(with .werft/ from main)

gtsiolis · 2022-12-19T18:34:44Z

Got some minutes in front of the computer. Taking a quick look! 👀

/werft run with-clean-slate-deployment

👍 started the job as gitpod-build-se-start-with-options-2.10
(with .werft/ from main)

svenefftinge · 2022-12-20T13:06:43Z

filtering does not seem to kick in sometimes for editors

The filtering is based on '${ide.label}${ide.title}${ide.notes}${ide.id}'.toLowerCase().indexOf(search.toLowerCase()) !== -1. I guess the code entries somewhere have in within the description or so? 😅

Rider and CLion does not have latest options for some reasons

Some IDEs have the same version for latestImageVersion and imageVersion. In those cases I don't display the 'latest' option. Is that ok?

Description is going to be different in production?

Yes, it's just the preview env configuration that is different to prod (not really helpful, though).

drop-down does not collapse then another selected

Yes, also the ESC and cursor keys aren't working on the workspaceClass element. It is because it doesn't have a search input field. cc @selfcontained any idea how this could be fixed?

andreafalzetti · 2022-12-20T13:25:19Z

Dark mode select and modal look great now ✨ 🙏

I've noticed a weird behavioiur with the workspace class select:

svenefftinge · 2022-12-20T14:26:50Z

Yes, also the ESC and cursor keys aren't working on the workspaceClass element. It is because it doesn't have a search input field. cc @selfcontained any idea how this could be fixed?

I've fixed those issues, by moving the search input out of the view 😇 .

components/dashboard/src/components/SelectIDEComponent.tsx

components/dashboard/src/components/DropDown2.tsx

components/dashboard/src/components/SelectIDEComponent.tsx

svenefftinge · 2022-12-20T16:21:35Z

/werft run

👍 started the job as gitpod-build-se-start-with-options-2.18
(with .werft/ from main)

selfcontained

Most of the comments are non-blocking. I did notice some weird behavior trying to close expanded dropdowns (video included) that would be nice to fix.

Generally I had a comment about the level of effort it might take to make a component like this accessible, and how we might want to think about that.

components/dashboard/src/components/DropDown2.tsx

components/dashboard/src/start/CreateWorkspace.tsx

components/dashboard/src/components/DropDown2.tsx

components/dashboard/src/components/SelectIDEComponent.tsx

components/dashboard/src/workspaces/StartWorkspaceModal.tsx

svenefftinge · 2022-12-29T08:16:25Z

/werft run

👍 started the job as gitpod-build-se-start-with-options-2.19
(with .werft/ from main)

svenefftinge · 2022-12-29T10:04:42Z

/werft run with-clean-slate-deployment

👍 started the job as gitpod-build-se-start-with-options-2.20
(with .werft/ from main)

svenefftinge · 2022-12-29T10:52:05Z

/werft run with-clean-slate-deployment

👍 started the job as gitpod-build-se-start-with-options-2.22
(with .werft/ from main)

svenefftinge · 2022-12-29T13:35:25Z

/werft run with-clean-slate-deployment

👍 started the job as gitpod-build-se-start-with-options-2.23
(with .werft/ from main)

filiptronicek · 2023-01-02T14:48:32Z

I think this would be very useful to have inside of https://github.com/gitpod-io/browser-extension replacing the Gitpod direct workspace opening button with a dropdown for all of the options; that's at least how I mainly open my workspaces.

svenefftinge · 2023-01-02T16:21:35Z

I think this would be very useful to have inside of https://github.com/gitpod-io/browser-extension replacing the Gitpod direct workspace opening button with a dropdown for all of the options; that's at least how I mainly open my workspaces.

My current plan is to enhance the create workspace URL with a parameter that opens let's users review and change those options on before workspace creation.

svenefftinge · 2023-01-03T15:56:11Z

/werft run

👍 started the job as gitpod-build-se-start-with-options-2.26
(with .werft/ from main)

selfcontained

This feels much better, thank you! I left a few non-blocking comments/ideas on other improvements we could make or consider. I don't think they have to hold it up though, and we could iterate on it as we go.

selfcontained · 2023-01-03T19:09:45Z

components/dashboard/src/components/DropDown2.tsx

+    onSelectionChange: (id: string) => void;
+}
+
+export const DropDown2: FunctionComponent<DropDown2Props> = (props) => {


Non-blocking - but I think it would be helpful in the future to have a better name for this component to help explain what it's intended for, or know when to use this vs. Dropdown. I don't have any good suggestions though, but thought I'd mention it in case you had any ideas.

selfcontained · 2023-01-03T19:15:57Z

components/dashboard/src/components/DropDown2.tsx

+    useEffect(() => {
+        setSearch("");
+        if (showDropDown && selectedElementTemp) {
+            document.getElementById(selectedElementTemp)?.scrollIntoView({ behavior: "smooth", block: "nearest" });


This is a non-blocking comment, but something to maybe think about as a way to improve the UX of this component. While this behavior is nice in that it helps show a selected option - it feels a bit disorienting to watch a long list scroll when you open the dropdown. It also adds an additional step if you just wanted to type to filter after you expanded the list (now the search input is not focused and out of view).

A more common UX pattern for interfaces like this I think that can fit well would be to have the selected component always show up on top of the list of options, and then the search input can stay focused when the dropdown opens, making it easy to type, and you also see the selected option.

Another option could be having the search input not in the scrollable container, and stay pinned so that only the options scroll. Either way, I don't think this is a blocker, just some suggestions to consider if we want to improve it a bit.

selfcontained · 2023-01-03T19:21:39Z

components/dashboard/src/components/DropDown2.tsx

+            if (showDropDown && e.key === "ArrowDown") {
+                e.preventDefault();
+                let idx = filteredOptions.findIndex((e) => e.id === selectedElementTemp);
+                while (idx++ < filteredOptions.length - 1) {


It took me awhile to understand why we needed a loop here. I think it's so that we select the next "selectable" option, since not all options are selectable. If I'm understanding that correctly, maybe a comment to help future-us understand it a bit would be helpful?

selfcontained · 2023-01-03T19:25:58Z

components/dashboard/src/components/DropDown2.tsx

+                                        <li
+                                            key={element.id}
+                                            id={element.id}
+                                            tabIndex={0}


I wonder if we want to avoid having these option elements be tab indexed. As it is, once the container is open, tabbing doesn't proceed to the next "input" in the view, i.e. the next dropdown in this case, but shifts the selected option to the next one. A normal select in the browser will only use arrow keys for navigating the selected option, while tab will let you move on to the next "input".

selfcontained · 2023-01-03T19:27:39Z

components/dashboard/src/components/DropDown2.tsx

+                                                    onSelected(element.id);
+                                                }
+                                            }}
+                                            onMouseOver={() => setFocussedElement(element.id)}


This part felt a little weird to me, having the mouseover select the option rather than requiring a click or keyboard navigation to select it. It also seems to be making the scroll container do a bit of a jittery scroll as you mouse over options at the edge of what's currently in view.

roboquat added do-not-merge/work-in-progress do-not-merge/release-note-label-needed size/M labels Dec 16, 2022

svenefftinge changed the title ~~[WIP] [server] Allow options on ws start~~ [WIP] [server] Allow options on ws start (2/2) Dec 16, 2022

svenefftinge changed the title ~~[WIP] [server] Allow options on ws start (2/2)~~ [WIP] [dashboard] Allow options on ws start (2/2) Dec 16, 2022

roboquat added size/XL and removed size/M labels Dec 16, 2022

svenefftinge force-pushed the se/start-with-options-2 branch from e56ef18 to d016608 Compare December 17, 2022 10:38

roboquat added size/XXL and removed size/XL labels Dec 17, 2022

svenefftinge force-pushed the se/start-with-options-2 branch from d016608 to c19a090 Compare December 19, 2022 14:28

gtsiolis mentioned this pull request Dec 19, 2022

Introduce new version designs #15397

Merged

4 tasks

svenefftinge force-pushed the se/start-with-options-2 branch 2 times, most recently from 18c07ed to bfefd13 Compare December 19, 2022 16:38

svenefftinge changed the title ~~[WIP] [dashboard] Allow options on ws start (2/2)~~ [dashboard] Allow options on ws start (2/2) Dec 19, 2022

roboquat added release-note and removed do-not-merge/release-note-label-needed labels Dec 19, 2022

svenefftinge force-pushed the se/start-with-options-2 branch 4 times, most recently from 03ba412 to d62e2c0 Compare December 20, 2022 08:39

svenefftinge marked this pull request as ready for review December 20, 2022 08:57

svenefftinge requested review from a team December 20, 2022 08:57

roboquat removed the do-not-merge/work-in-progress label Dec 20, 2022

svenefftinge force-pushed the se/start-with-options-2 branch 2 times, most recently from f1fcb4e to 934fda5 Compare December 20, 2022 14:26

filiptronicek reviewed Dec 20, 2022

View reviewed changes

components/dashboard/src/components/SelectIDEComponent.tsx Outdated Show resolved Hide resolved

filiptronicek reviewed Dec 20, 2022

View reviewed changes

components/dashboard/src/components/DropDown2.tsx Show resolved Hide resolved

filiptronicek reviewed Dec 20, 2022

View reviewed changes

components/dashboard/src/components/DropDown2.tsx Outdated Show resolved Hide resolved

filiptronicek reviewed Dec 20, 2022

View reviewed changes

components/dashboard/src/components/SelectIDEComponent.tsx Outdated Show resolved Hide resolved

selfcontained reviewed Dec 20, 2022

View reviewed changes

corneliusludmann approved these changes Dec 22, 2022

View reviewed changes

svenefftinge force-pushed the se/start-with-options-2 branch from 934fda5 to acea6bf Compare December 29, 2022 14:14

[dashboard] new workspace with options

699e02b

svenefftinge force-pushed the se/start-with-options-2 branch from acea6bf to 699e02b Compare December 29, 2022 16:00

selfcontained approved these changes Jan 3, 2023

View reviewed changes

roboquat merged commit 19a267b into main Jan 3, 2023

roboquat deleted the se/start-with-options-2 branch January 3, 2023 19:30

This was referenced Jan 4, 2023

Open workspace in ad-hoc (per-workspace) editor or IDE #8573

Closed

Create "Open In Gitpod (JetBrains)" button #7525

Closed

gtsiolis mentioned this pull request Jan 5, 2023

Design improvements for the new "New Workspace" modal #8088

Closed

roboquat added the deployed: webapp Meta team change is running in production label Jan 6, 2023

gtsiolis mentioned this pull request Jan 13, 2023

Gitpod "open in" should be set-able per project, not just per-user #6874

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[dashboard] Allow options on ws start (2/2) #15389

[dashboard] Allow options on ws start (2/2) #15389

svenefftinge commented Dec 16, 2022 •

edited

Loading

svenefftinge commented Dec 19, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Dec 19, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 19, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 19, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Dec 19, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 20, 2022 •

edited

Loading

andreafalzetti commented Dec 20, 2022 •

edited

Loading

svenefftinge commented Dec 20, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 20, 2022 •

edited by werft-gitpod-dev-com bot

Loading

selfcontained left a comment

svenefftinge commented Dec 29, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 29, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 29, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 29, 2022 •

edited by werft-gitpod-dev-com bot

Loading

filiptronicek commented Jan 2, 2023

svenefftinge commented Jan 2, 2023

svenefftinge commented Jan 3, 2023 •

edited by werft-gitpod-dev-com bot

Loading

selfcontained left a comment

selfcontained Jan 3, 2023

selfcontained Jan 3, 2023

selfcontained Jan 3, 2023

selfcontained Jan 3, 2023

selfcontained Jan 3, 2023

[dashboard] Allow options on ws start (2/2) #15389

[dashboard] Allow options on ws start (2/2) #15389

Conversation

svenefftinge commented Dec 16, 2022 • edited Loading

Description

Related Issue(s)

How to test

Release Notes

Documentation

Werft options:

svenefftinge commented Dec 19, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Dec 19, 2022 • edited by werft-gitpod-dev-com bot Loading

svenefftinge commented Dec 19, 2022 • edited by werft-gitpod-dev-com bot Loading

svenefftinge commented Dec 19, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Dec 19, 2022 • edited by werft-gitpod-dev-com bot Loading

svenefftinge commented Dec 20, 2022 • edited Loading

andreafalzetti commented Dec 20, 2022 • edited Loading

svenefftinge commented Dec 20, 2022 • edited by werft-gitpod-dev-com bot Loading

svenefftinge commented Dec 20, 2022 • edited by werft-gitpod-dev-com bot Loading

selfcontained left a comment

Choose a reason for hiding this comment

svenefftinge commented Dec 29, 2022 • edited by werft-gitpod-dev-com bot Loading

svenefftinge commented Dec 29, 2022 • edited by werft-gitpod-dev-com bot Loading

svenefftinge commented Dec 29, 2022 • edited by werft-gitpod-dev-com bot Loading

svenefftinge commented Dec 29, 2022 • edited by werft-gitpod-dev-com bot Loading

filiptronicek commented Jan 2, 2023

svenefftinge commented Jan 2, 2023

svenefftinge commented Jan 3, 2023 • edited by werft-gitpod-dev-com bot Loading

selfcontained left a comment

Choose a reason for hiding this comment

selfcontained Jan 3, 2023

Choose a reason for hiding this comment

selfcontained Jan 3, 2023

Choose a reason for hiding this comment

selfcontained Jan 3, 2023

Choose a reason for hiding this comment

selfcontained Jan 3, 2023

Choose a reason for hiding this comment

selfcontained Jan 3, 2023

Choose a reason for hiding this comment

svenefftinge commented Dec 16, 2022 •

edited

Loading

svenefftinge commented Dec 19, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Dec 19, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 19, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 19, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Dec 19, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 20, 2022 •

edited

Loading

andreafalzetti commented Dec 20, 2022 •

edited

Loading

svenefftinge commented Dec 20, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 20, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 29, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 29, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 29, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Dec 29, 2022 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Jan 3, 2023 •

edited by werft-gitpod-dev-com bot

Loading