[dashboard] move org menu left #16164

svenefftinge · 2023-02-01T19:53:12Z

Description

This PR changes the navigation as follows:

moves the org selector to the left
removes the project and prebuild pills in the top menu
moves all the user specific pages into a /user slug and removes the org- prefix for billing and settings on orgs.
moves the project tabs below the header and make the header always show the project name

TODO: the workspaces list needs to only show workspaces for the selected org, which requires more changes I'll do in a separate PR. Therefore:

/hold

Related Issue(s)

Fixes #16046, #10976

How to test

Check the dashboard in the preview environments for any flaws regarding navigation.

Release Notes

Make organization selection a global setting.

Documentation

Build Options:

/werft with-github-actions
Experimental feature to run the build with GitHub Actions (and not in Werft).
leeway-no-cache
leeway-target=components:all
/werft no-test
Run Leeway with --dont-test

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
/werft with-integration-tests=all
Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh

werft-gitpod-dev-com · 2023-02-01T19:53:19Z

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

svenefftinge · 2023-02-01T20:06:33Z

/werft run with-clean-slate-deployment

👍 started the job as gitpod-build-se-org-menu.2
(with .werft/ from main)

gtsiolis · 2023-02-02T13:24:50Z

Looking at this now! 👀

gtsiolis · 2023-02-02T15:06:32Z

/werft run with-clean-slate-deployment

👍 started the job as gitpod-build-se-org-menu.5
(with .werft/ from main)

gtsiolis

These changes seem like a fast-forward into the future for navigation UX. 🔮

Adding hold from the description, which didn't work.

/hold

components/dashboard/src/components/Header.tsx

components/dashboard/src/projects/Project.tsx

components/dashboard/src/menu/Menu.tsx

components/dashboard/src/menu/OrganizationSelector.tsx

components/dashboard/src/components/Header.tsx

components/dashboard/src/menu/Menu.tsx

gtsiolis · 2023-02-02T15:45:53Z

components/dashboard/src/menu/Menu.tsx

+                                <li className="flex-1"></li>
+                                {user?.rolesOrPermissions?.includes("admin") && (
+                                    <li className="cursor-pointer">
+                                        <PillMenuItem name="Admin" link="/admin" />


thought: Do know if this was by accident but now that the admin menu is not highlighted when active we could also resolve #15012, as long as we update the header to have a fixed title for the admin. Later on, moving this to the user menu could be better.

I'll change this in this PR if there are other things that need to be addressed. If not, let's fix it afterward.

Opened follow-up #16238 to keep track of this. Cc @svenefftinge

components/dashboard/src/projects/Project.tsx

components/dashboard/src/menu/OrganizationSelector.tsx

geropl · 2023-02-03T09:54:10Z

I really like the change! 🧡 🎉

The Org-pill on the far left makes sense, as it leaves room for an "account selector" somewhere around the user icon on the far right. ⚖️
Really like the new "tabs at the top". There is a little bit of jumping involved when switching orgs (with various name lengths), but I guess we'll get a handle on that at some point.
I'm undecided whether we should keep the slug when switching orgs, or default to "/workspaces" or so. But let's keep that for now.
There is a little mismatch now with the user settings, which have no visual tie to the User. But absolutely fine for now, maybe we find a way to highlight that connection later:

gtsiolis · 2023-02-03T09:57:50Z

@geropl Regarding [4] in #16164 (comment), changing the page title can help, see #16164 (comment).

selfcontained

Left a couple code related comments - wasn't sure how much of the menu code was just moved vs. new (I think it was mostly just moved?)

Some general feedback:

I like the org selector on the left, creates a better understanding of the information architecture hierarchy.
It seems odd that we hide the gitpod logo on smaller screens, we should always show the gitpod logo imo.
I think it's confusing how we make some of the top menu disappear sometimes, like when creating a new org or project. We should keep showing the same nav up top imo and not hide things.

Generally I worry with how noisy this makes the top nav. It's a lot, and smaller screens become pretty unusable with how they render. Figuring a better responsive implementation is probably a separate unit of work in itself (I think we have some good designs, we just need to implement them), but I worry this will make that job a bit harder.

selfcontained · 2023-02-03T16:59:34Z

components/dashboard/src/app/AppRoutes.tsx

-                    <Route exact path="/org-settings" component={TeamSettings} />
-                    <Route exact path="/org-billing" component={TeamBilling} />
+                    <Route exact path="/settings" component={TeamSettings} />
+                    <Route exact path="/billing" component={TeamBilling} />


I think it would be helpful to put all of the org settings pages under a nested route, like /settings, /settings/billing, /settings/sso, etc. It will allow us to simplify some of the way we render those similar pages, and handle shared logic between them, and the grouping feels meaningful as well.

Fine with that. Could we look at it after this change? I don't believe these links are charged externally already.

components/dashboard/src/menu/OrganizationSelector.tsx

selfcontained · 2023-02-03T17:23:50Z

components/dashboard/src/menu/Menu.tsx

+}
+
+export default function Menu() {
+    const user = useCurrentUser();


One thing I noticed here (and on the team settings sub-menu) - we render a partial nav, then after data completes, we may add additional nav items (like settings and usage). I think it would be a much better experience if we instead loaded the data to determine the full nav menu items, then rendered. This is even more jarring now that they're on the top nav imo. We can utilize react-query to make subsequent renders not need the data calls too. I started something similar for the team settings sub-nav in a PR, and maybe it's a future improvement we can make for the org nav too.

Agree. Would love to tackle this ina follow up PR.

svenefftinge · 2023-02-04T13:09:23Z

I would like to get this merged ASAP, because of the large amount of changes it contains I'm concerned about endless conflict resolution sessions for everything that goes on in parallel. @selfcontained @geropl @gtsiolis I have addressed (and resolved the comment) most of your concerns. What is left could be tackled in a follow up PR.
Also, I believe it is ok to ship this without the update to the workspaces list. I'll work on that next week and have it land by the end of it.

svenefftinge · 2023-02-05T19:45:57Z

/unhold

geropl

LGTM 🎨 ✔️

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

roboquat added the size/XXL label Feb 1, 2023

svenefftinge force-pushed the se/org-menu branch 2 times, most recently from b1eb1f5 to 2663b83 Compare February 2, 2023 13:14

roboquat added release-note and removed do-not-merge/release-note-label-needed labels Feb 2, 2023

svenefftinge marked this pull request as ready for review February 2, 2023 13:22

svenefftinge requested a review from a team February 2, 2023 13:22

roboquat removed the do-not-merge/work-in-progress label Feb 2, 2023

svenefftinge changed the title ~~[dashboard] move org menu up/right~~ [dashboard] move org menu left Feb 2, 2023

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

svenefftinge requested a review from gtsiolis February 2, 2023 13:23

This was referenced Feb 2, 2023

[dashboard] Relayout navigation in dashboard #16046

Closed

Move tabs for projects and teams down below the heading #10976

Closed

gtsiolis reviewed Feb 2, 2023

View reviewed changes

roboquat added the do-not-merge/hold label Feb 2, 2023

selfcontained reviewed Feb 3, 2023

View reviewed changes

[dashboard] move org menu left

3479f91

svenefftinge force-pushed the se/org-menu branch from 2663b83 to 3479f91 Compare February 4, 2023 13:00

roboquat removed the do-not-merge/hold label Feb 5, 2023

geropl approved these changes Feb 6, 2023

View reviewed changes

roboquat merged commit e4e54fe into main Feb 6, 2023

roboquat deleted the se/org-menu branch February 6, 2023 08:37

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

This was referenced Feb 6, 2023

Update the page header in admin dashboard #16238

Closed

Redirect back to /workspaces when selecting a different org when users are viewing project related pages #16243

Closed

Move less frequently used organization pages under the org selector #16244

Closed

gtsiolis mentioned this pull request Mar 13, 2023

Improve the org selector UX #16828

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[dashboard] move org menu left #16164

[dashboard] move org menu left #16164

svenefftinge commented Feb 1, 2023 •

edited by gtsiolis

Loading

werft-gitpod-dev-com bot commented Feb 1, 2023

svenefftinge commented Feb 1, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Feb 2, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Feb 2, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment

gtsiolis Feb 2, 2023

svenefftinge Feb 4, 2023

gtsiolis Feb 6, 2023

geropl commented Feb 3, 2023 •

edited

Loading

gtsiolis commented Feb 3, 2023

selfcontained left a comment •

edited

Loading

selfcontained Feb 3, 2023

svenefftinge Feb 4, 2023

selfcontained Feb 3, 2023

svenefftinge Feb 4, 2023

svenefftinge commented Feb 4, 2023

svenefftinge commented Feb 5, 2023

geropl left a comment

[dashboard] move org menu left #16164

[dashboard] move org menu left #16164

Conversation

svenefftinge commented Feb 1, 2023 • edited by gtsiolis Loading

Description

Related Issue(s)

How to test

Release Notes

Documentation

Build Options:

Preview Environment Options:

werft-gitpod-dev-com bot commented Feb 1, 2023

svenefftinge commented Feb 1, 2023 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Feb 2, 2023 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Feb 2, 2023 • edited by werft-gitpod-dev-com bot Loading

gtsiolis left a comment

Choose a reason for hiding this comment

gtsiolis Feb 2, 2023

Choose a reason for hiding this comment

svenefftinge Feb 4, 2023

Choose a reason for hiding this comment

gtsiolis Feb 6, 2023

Choose a reason for hiding this comment

geropl commented Feb 3, 2023 • edited Loading

gtsiolis commented Feb 3, 2023

selfcontained left a comment • edited Loading

Choose a reason for hiding this comment

selfcontained Feb 3, 2023

Choose a reason for hiding this comment

svenefftinge Feb 4, 2023

Choose a reason for hiding this comment

selfcontained Feb 3, 2023

Choose a reason for hiding this comment

svenefftinge Feb 4, 2023

Choose a reason for hiding this comment

svenefftinge commented Feb 4, 2023

svenefftinge commented Feb 5, 2023

geropl left a comment

Choose a reason for hiding this comment

svenefftinge commented Feb 1, 2023 •

edited by gtsiolis

Loading

svenefftinge commented Feb 1, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Feb 2, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Feb 2, 2023 •

edited by werft-gitpod-dev-com bot

Loading

geropl commented Feb 3, 2023 •

edited

Loading

selfcontained left a comment •

edited

Loading