[dashboard] add "with-options" buttons #15668

svenefftinge · 2023-01-10T16:18:47Z

Description

Adds a secondary "New Workspace ..." button the projects list on a team and the branches list on a project.

Related Issue(s)

Fixes #

How to test

Release Notes

NONE

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

werft-gitpod-dev-com · 2023-01-10T16:18:54Z

started the job as gitpod-build-se-show-options-action.1 because the annotations in the pull request description changed
(with .werft/ from main)

geropl

Code LGTM, and approving to unblock.

/hold due to build issues (looks unrelated), and maybe another check once the preview is there.

svenefftinge · 2023-01-10T17:17:04Z

/werft run

👍 started the job as gitpod-build-se-show-options-action.3
(with .werft/ from main)
/hold

gtsiolis

Nice touch! UX LGTM. ✨

gtsiolis · 2023-01-10T16:52:58Z

components/dashboard/src/projects/ProjectListItem.tsx

+                                        separator: true,
+                                    },
+                                    {
+                                        title: "New Workspace ...",


praise: Excellent ... 🥯

gtsiolis · 2023-01-10T16:57:24Z

components/dashboard/src/projects/Project.tsx

+                                                        {
+                                                            title: "New Workspace ...",
+                                                            href: gitpodHostUrl
+                                                                .withContext(`${branch.url}`, { showOptions: true })
+                                                                .toString(),
+                                                            separator: true,
+                                                        },


praise: Nice and much needed addition! ✨

gtsiolis · 2023-01-10T17:02:54Z

components/dashboard/src/projects/Project.tsx

-                                                    menuEntries={
+                                                    menuEntries={[
+                                                        {
+                                                            title: "New Workspace ...",


💭 thought: Next steps could include improving the modal to allow branch selection as mentioned in #5372, #12591, #10168, and a relevant discussion (internal).

gtsiolis · 2023-01-10T17:12:05Z

components/dashboard/src/projects/ProjectListItem.tsx

                                    {
                                        title: "New Workspace",
-                                        href: `/#${project.cloneUrl}`,
+                                        href: gitpodHostUrl.withContext(`${project.cloneUrl}`).toString(),
+                                        separator: true,
+                                    },


thought: From what I understand this will keep the existing new workspace menu entry with no options and was wondering it if we still need it, but this can become clearer later. Also, it doesn't hurt to keep this here for now, since it's hidden behind the more actions menu.

BEFORE AFTER

gtsiolis · 2023-01-10T17:16:48Z

components/dashboard/src/projects/ProjectListItem.tsx

@@ -40,7 +41,14 @@ export const ProjectListItem: FunctionComponent<ProjectListItemProps> = ({ proje
                                menuEntries={[
                                    {
                                        title: "New Workspace",


question(non-blocking): Could we measure how much this ~~button~~ link (New Workspace) is used on the projects page specifically? I created a report (internal) for measuring usage (clicks) but couldn't differentiate the clicks on the specific dropdown that exists on the projects cards. Cc @jakobhero

svenefftinge · 2023-01-11T08:41:52Z

/unhold

jldec · 2023-01-11T15:59:45Z

2 followup UX suggestions:

It's not too clear what the difference is between "New Workspace" and "New Workspace ..."

we should definitely use the tooltip to distinguish them
I would also suggest a wording change "New Workspace with options
perhaps restrict these actions to just the ... action

The options modal should go away and return you to the dashboard when you hit escape. It should also have a close button.

gtsiolis · 2023-01-11T16:23:39Z

Thanks for the feedback, @jldec! 💯

Regarding [1], appending the ellipsis ... character on the button or action label to imply the action will require additional input from the user before completion is a common practice. Please, open an issue to discuss further if you think we could help to discuss this more. 🏓
Regarding [2], you're right, I was expecting the same UX, but I believe the current UX was part of this iteration. Opened Allow users to close or dismiss the new workspace with options modal when opening the modal from the projects page #15696 to keep track of this as a next iteration.

roboquat added do-not-merge/work-in-progress do-not-merge/release-note-label-needed labels Jan 10, 2023

roboquat added the size/XS label Jan 10, 2023

[dashboard] add "with-options" buttons

146cbf2

svenefftinge force-pushed the se/show-options-action branch from 020790a to 146cbf2 Compare January 10, 2023 16:36

roboquat added size/M release-note and removed size/XS do-not-merge/release-note-label-needed labels Jan 10, 2023

svenefftinge marked this pull request as ready for review January 10, 2023 16:37

svenefftinge requested a review from a team January 10, 2023 16:37

roboquat removed the do-not-merge/work-in-progress label Jan 10, 2023

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

geropl approved these changes Jan 10, 2023

View reviewed changes

roboquat added the do-not-merge/hold label Jan 10, 2023

gtsiolis approved these changes Jan 10, 2023

View reviewed changes

roboquat removed the do-not-merge/hold label Jan 11, 2023

roboquat merged commit 7cbf80b into main Jan 11, 2023

roboquat deleted the se/show-options-action branch January 11, 2023 08:42

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

gtsiolis mentioned this pull request Jan 11, 2023

Allow users to close or dismiss the new workspace with options modal when opening the modal from the projects page #15696

Closed

This was referenced Jan 13, 2023

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

Closed

Introduce start with options on the workspaces list #15756

Closed

jldec mentioned this pull request Jan 20, 2023

Open start workspace in modal from projects list #15914

Merged

5 tasks

roboquat added release-note-none and removed release-note labels Jan 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[dashboard] add "with-options" buttons #15668

[dashboard] add "with-options" buttons #15668

svenefftinge commented Jan 10, 2023 •

edited by loujaybee

Loading

werft-gitpod-dev-com bot commented Jan 10, 2023

geropl left a comment

svenefftinge commented Jan 10, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment

gtsiolis Jan 10, 2023

gtsiolis Jan 10, 2023

gtsiolis Jan 10, 2023

gtsiolis Jan 10, 2023

gtsiolis Jan 10, 2023 •

edited

Loading

svenefftinge commented Jan 11, 2023

jldec commented Jan 11, 2023

gtsiolis commented Jan 11, 2023 •

edited by werft-gitpod-dev-com bot

Loading

[dashboard] add "with-options" buttons #15668

[dashboard] add "with-options" buttons #15668

Conversation

svenefftinge commented Jan 10, 2023 • edited by loujaybee Loading

Description

Related Issue(s)

How to test

Release Notes

Documentation

Werft options:

werft-gitpod-dev-com bot commented Jan 10, 2023

geropl left a comment

Choose a reason for hiding this comment

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

gtsiolis left a comment

Choose a reason for hiding this comment

gtsiolis Jan 10, 2023

Choose a reason for hiding this comment

gtsiolis Jan 10, 2023

Choose a reason for hiding this comment

gtsiolis Jan 10, 2023

Choose a reason for hiding this comment

gtsiolis Jan 10, 2023

Choose a reason for hiding this comment

gtsiolis Jan 10, 2023 • edited Loading

Choose a reason for hiding this comment

svenefftinge commented Jan 11, 2023

jldec commented Jan 11, 2023

gtsiolis commented Jan 11, 2023 • edited by werft-gitpod-dev-com bot Loading

svenefftinge commented Jan 10, 2023 •

edited by loujaybee

Loading

svenefftinge commented Jan 10, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis Jan 10, 2023 •

edited

Loading

gtsiolis commented Jan 11, 2023 •

edited by werft-gitpod-dev-com bot

Loading