Add nav items and icons to org selector #16353

selfcontained · 2023-02-10T20:05:10Z

Description

Updates the Org Selector to include the following links if available:

Members
Usage
Settings

Light Mode	Dark Mode

In addition, and to help call out the org entries in the selector, there are now icons for the orgs that use one of 9 available background gradients. This will help serve as a fallback/placeholder for when we add the ability to upload logos for an org.

The background gradient used is pegged to the corresponding id of the org, so it will be consistent across visits to the site. I've added some unit tests for that logic as well.

Related Issue(s)

Fixes #16244

How to test

Create several orgs and switch between them, ensuring the menu shows the links you'd expect.

Release Notes

Several links, such as Members, Usage and Settings have been moved into the organization selector in the top left of the Dashboard.

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

Publish Options

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

Installer Options

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

werft-gitpod-dev-com · 2023-02-10T20:05:18Z

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

gtsiolis · 2023-02-13T17:46:52Z

/werft run

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

gtsiolis

Left some UX comments below. 🔮

Thanks for making this happen, @selfcontained! 🧙

components/dashboard/src/components/org-icon/styles.css

gtsiolis · 2023-02-13T18:23:04Z

components/dashboard/src/components/org-icon/styles.css

+        background: linear-gradient(45deg, theme('colors.gitpod-kumquat-dark') 25%, theme('colors.gitpod-kumquat') 75%);
+    }
+    .bg-gradient-2 {
+        background: linear-gradient(45deg, theme('colors.gitpod-kumquat-dark') 25%, theme('colors.pink.800') 75%);


praise: Thanks for keeping the 45deg here. Looks good in action!

components/dashboard/src/menu/OrganizationSelector.tsx

gtsiolis · 2023-02-13T18:34:59Z

components/dashboard/src/components/ContextMenu.tsx

+        <div
+            title={title}
+            className={cn(
+                "px-4 flex leading-1 py-3 text-sm",


suggestion: Not sure if this will affect other elements, but the sub-pages could look slightly better with a smaller height and maybe even less font weight.

Suggested change

"px-4 flex leading-1 py-3 text-sm",

"px-4 flex leading-1 py-2 text-sm",

Agreed - I'm adding a tight option that uses the smaller y padding so that all of our other context menus don't tighten up as well. I do kinda like the tighter context menus in general though, but will leave that as a separate decision if we wanted to reduce the y padding on the items in there across the board.

I do kinda like the tighter context menus in general though

+1

Maybe I'll go ahead and drop the tight prop option, and just swap the context menus to use the smaller y padding then if you're ok with it (would rather not have the extra prop for variance if we're ok w/ slimming them down slightly).

gtsiolis · 2023-02-13T18:35:32Z

components/dashboard/src/components/ContextMenu.tsx

+            title={title}
+            className={cn(
+                "px-4 flex leading-1 py-3 text-sm",
+                customFontStyle || "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100",


praise: Thanks for caring about the dark theme colors! 🌔

components/dashboard/src/components/org-icon/consistent-classname.ts

gtsiolis · 2023-02-14T11:24:19Z

/werft run with-preview=true

👍 started the job as gitpod-build-bmh-org-selector-menu-items.8
(with .werft/ from main)

gtsiolis

issue: One last thought before merging this was around the "conflict" of the org avatar with the dashboard logo in the top left corner, see screenshot below.

suggestion: Since 🅰️ we currently don't currently support uploading a different organization avatar (logo) and 🅱️ the placement of the org selector on the left can look quite verbose, what do you think of removing the org avatar from the org selector for the selected org and show it only when it's listed as an alternative org to select from?

Example 1	Example 2

BEFORE	AFTER

question: Alternatively, any thoughts on moving the org selector to the right and hide Admin and Feedback menu items under the user menu, as described in this relevant discussion (internal).

svenefftinge

Code looks good!
UI wise I personally liked the initial version best (but no strong opinion)

selfcontained · 2023-02-15T17:43:10Z

Whoops, I should have put a hold on it until we sorted out some of those things. I'll sync with @gtsiolis and can open a new PR with any adjustments we want to make for this initial version. I do think we can tweak a few things to address the concerns, and then go from there.

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

roboquat added the size/XXL label Feb 10, 2023

selfcontained changed the title ~~Bmh/org selector menu items~~ Add nav items and icons to org selector Feb 10, 2023

gtsiolis reviewed Feb 13, 2023

View reviewed changes

selfcontained marked this pull request as ready for review February 13, 2023 21:51

selfcontained requested a review from a team February 13, 2023 21:51

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

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

gtsiolis reviewed Feb 15, 2023

View reviewed changes

Adding org links and icons into org selector

24271c5

selfcontained force-pushed the bmh/org-selector-menu-items branch from 782265a to 24271c5 Compare February 15, 2023 15:57

svenefftinge approved these changes Feb 15, 2023

View reviewed changes

roboquat merged commit 49926d0 into main Feb 15, 2023

roboquat deleted the bmh/org-selector-menu-items branch February 15, 2023 17:40

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add nav items and icons to org selector #16353

Add nav items and icons to org selector #16353

selfcontained commented Feb 10, 2023 •

edited

Loading

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

gtsiolis commented Feb 13, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment

gtsiolis Feb 13, 2023

gtsiolis Feb 13, 2023

selfcontained Feb 13, 2023

gtsiolis Feb 14, 2023

selfcontained Feb 14, 2023

gtsiolis Feb 13, 2023 •

edited

Loading

gtsiolis commented Feb 14, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment

svenefftinge left a comment

selfcontained commented Feb 15, 2023

	"px-4 flex leading-1 py-3 text-sm",
	"px-4 flex leading-1 py-2 text-sm",

Add nav items and icons to org selector #16353

Add nav items and icons to org selector #16353

Conversation

selfcontained commented Feb 10, 2023 • edited Loading

Description

Related Issue(s)

How to test

Release Notes

Documentation

Build Options:

Preview Environment Options:

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

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

gtsiolis left a comment

Choose a reason for hiding this comment

gtsiolis Feb 13, 2023

Choose a reason for hiding this comment

gtsiolis Feb 13, 2023

Choose a reason for hiding this comment

selfcontained Feb 13, 2023

Choose a reason for hiding this comment

gtsiolis Feb 14, 2023

Choose a reason for hiding this comment

selfcontained Feb 14, 2023

Choose a reason for hiding this comment

gtsiolis Feb 13, 2023 • edited Loading

Choose a reason for hiding this comment

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

gtsiolis left a comment

Choose a reason for hiding this comment

svenefftinge left a comment

Choose a reason for hiding this comment

selfcontained commented Feb 15, 2023

selfcontained commented Feb 10, 2023 •

edited

Loading

gtsiolis commented Feb 13, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis Feb 13, 2023 •

edited

Loading

gtsiolis commented Feb 14, 2023 •

edited by werft-gitpod-dev-com bot

Loading