Add nav items and icons to org selector

components/dashboard/src/components/ContextMenu.tsx

@@ -4,7 +4,7 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import React, { HTMLAttributeAnchorTarget } from "react";
+import React, { FunctionComponent, HTMLAttributeAnchorTarget } from "react";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import cn from "classnames";
@@ -82,10 +82,6 @@ function ContextMenu(props: ContextMenuProps) {
         };
     }, []); // Empty array ensures that effect is only run on mount and unmount
 
-    const font = "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100";
-
-    const menuId = String(Math.random());
-
     // Default 'children' is the three dots hamburger button.
     const children = props.children || (
         <svg
@@ -118,7 +114,7 @@ function ContextMenu(props: ContextMenuProps) {
             </div>
             {expanded ? (
                 <div
-                    className={`mt-2 z-50 bg-white dark:bg-gray-900 absolute flex flex-col border border-gray-200 dark:border-gray-800 rounded-lg truncated ${
+                    className={`cursor-default mt-2 z-50 bg-white dark:bg-gray-900 absolute flex flex-col border border-gray-200 dark:border-gray-800 rounded-lg truncated ${
                         props.customClasses || "w-48 right-0"
                     }`}
                     data-analytics='{"button_type":"context_menu"}'
@@ -127,30 +123,14 @@ function ContextMenu(props: ContextMenuProps) {
                         <p className="px-4 py-3">No actions available</p>
                     ) : (
                         props.menuEntries.map((e, index) => {
-                            const clickable = e.href || e.onClick || e.link;
                             const entry = (
-                                <div
-                                    className={`px-4 flex py-3 ${
-                                        clickable ? "hover:bg-gray-100 dark:hover:bg-gray-700" : ""
-                                    } ${e.active ? "bg-gray-50 dark:bg-gray-800" : ""} ${
-                                        index === 0 ? "rounded-t-lg" : ""
-                                    } ${
-                                        index === props.menuEntries.length - 1 ? "rounded-b-lg" : ""
-                                    } text-sm leading-1 ${e.customFontStyle || font} ${
-                                        e.separator ? " border-b border-gray-200 dark:border-gray-800" : ""
-                                    }`}
-                                    title={e.title}
-                                >
-                                    {e.customContent || (
-                                        <>
-                                            <div className="truncate w-52">{e.title}</div>
-                                            <div className="flex-1"></div>
-                                            {e.active ? <div className="pl-1 font-semibold">&#x2713;</div> : null}
-                                        </>
-                                    )}
-                                </div>
+                                <MenuEntry
+                                    {...e}
+                                    isFirst={index === 0}
+                                    isLast={index === props.menuEntries.length - 1}
+                                />
                             );
-                            const key = `entry-${menuId}-${index}-${e.title}`;
+                            const key = `entry-${index}-${e.title}`;
                             if (e.link) {
                                 return (
                                     <Link key={key} to={e.link} onClick={e.onClick} target={e.target}>
@@ -185,3 +165,47 @@ function ContextMenu(props: ContextMenuProps) {
 }
 
 export default ContextMenu;
+
+type MenuEntryProps = ContextMenuEntry & {
+    isFirst: boolean;
+    isLast: boolean;
+};
+export const MenuEntry: FunctionComponent<MenuEntryProps> = ({
+    title,
+    href,
+    link,
+    active = false,
+    separator = false,
+    customContent,
+    customFontStyle,
+    isFirst,
+    isLast,
+    onClick,
+}) => {
+    const clickable = href || link || onClick;
+
+    return (
+        <div
+            title={title}
+            className={cn(
+                "px-4 py-2 flex leading-1 text-sm",
+                customFontStyle || "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100",
+                {
+                    "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700": clickable,
+                    "bg-gray-50 dark:bg-gray-800": active,
+                    "rounded-t-lg": isFirst,
+                    "rounded-b-lg": isLast,
+                    "border-b border-gray-200 dark:border-gray-800": separator,
+                },
+            )}
+        >
+            {customContent || (
+                <>
+                    <div className="truncate w-52">{title}</div>
+                    <div className="flex-1"></div>
+                    {active ? <div className="pl-1 font-semibold">&#x2713;</div> : null}
+                </>
+            )}
+        </div>
+    );
+};

components/dashboard/src/components/org-icon/OrgIcon.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import classNames from "classnames";
+import { FunctionComponent } from "react";
+import { consistentClassname } from "./consistent-classname";
+import "./styles.css";
+
+const SIZE_CLASSES = {
+    small: "w-6 h-6",
+    medium: "w-10 h-10",
+};
+
+const TEXT_SIZE_CLASSES = {
+    small: "text-sm",
+    medium: "text-xl",
+};
+
+type Props = {
+    id: string;
+    name: string;
+    size?: keyof typeof SIZE_CLASSES;
+    className?: string;
+};
+export const OrgIcon: FunctionComponent<Props> = ({ id, name, size = "medium", className }) => {
+    const logoBGClass = consistentClassname(id);
+    const initials = getOrgInitials(name);
+    const sizeClasses = SIZE_CLASSES[size];
+    const textClass = TEXT_SIZE_CLASSES[size];
+
+    return (
+        <div
+            className={classNames("rounded-full flex items-center justify-center", sizeClasses, logoBGClass, className)}
+        >
+            <span className={`text-white font-semibold ${textClass}`}>{initials}</span>
+        </div>
+    );
+};
+
+function getOrgInitials(name: string) {
+    // If for some reason there is no name, default to G for Gitpod
+    return (name || "G").charAt(0).toLocaleUpperCase();
+}

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

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { BG_CLASSES, consistentClassname } from "./consistent-classname";
+
+describe("consistentClassname()", () => {
+    test("empty string", () => {
+        const id = "";
+        const cn = consistentClassname(id);
+
+        expect(cn).toEqual(BG_CLASSES[0]);
+    });
+
+    test("max value", () => {
+        const id = "ffffffffffffffffffffffffffffffff";
+        const cn = consistentClassname(id);
+
+        expect(cn).toEqual(BG_CLASSES[BG_CLASSES.length - 1]);
+    });
+
+    test("with an id value", () => {
+        const id = "c5895528-23ac-4ebd-9d8b-464228d5755f";
+        const cn = consistentClassname(id);
+
+        expect(BG_CLASSES).toContain(cn);
+    });
+
+    test("with an id value without hyphens", () => {
+        const id = "c589552823ac4ebd9d8b464228d5755f";
+        const cn = consistentClassname(id);
+
+        expect(BG_CLASSES).toContain(cn);
+    });
+
+    test("with a shorter id value", () => {
+        const id = "c5895528";
+        const cn = consistentClassname(id);
+
+        expect(BG_CLASSES).toContain(cn);
+    });
+
+    test("returns the same classname for the same value", () => {
+        const id = "c5895528-23ac-4ebd-9d8b-464228d5755f";
+        const cn1 = consistentClassname(id);
+        const cn2 = consistentClassname(id);
+
+        expect(cn1).toEqual(cn2);
+        expect(BG_CLASSES).toContain(cn1);
+        expect(BG_CLASSES).toContain(cn2);
+    });
+});

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

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+// Represents the max value our base16 guid can be, 32 "f"s
+const GUID_MAX = "".padEnd(32, "f");
+
+export const BG_CLASSES = [
+    "bg-gradient-1",
+    "bg-gradient-2",
+    "bg-gradient-3",
+    "bg-gradient-4",
+    "bg-gradient-5",
+    "bg-gradient-6",
+    "bg-gradient-7",
+    "bg-gradient-8",
+    "bg-gradient-9",
+];
+
+export const consistentClassname = (id: string) => {
+    // Turn id into a 32 char. guid, pad with "0" if it's not 32 chars already
+    const guid = id.replaceAll("-", "").substring(0, 32).padEnd(32, "0");
+
+    // Map guid into a 0,1 range by dividing by the max guid
+    var quotient = parseInt(guid, 16) / parseInt(GUID_MAX, 16);
+    var idx = Math.floor(quotient * (BG_CLASSES.length - 1));
+
+    return BG_CLASSES[idx];
+};

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

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+
+@layer components {
+    .bg-gradient-1 {
+        background: linear-gradient(45deg, theme('colors.orange.500') 25%, theme('colors.orange.300') 75%);
+    }
+    .bg-gradient-2 {
+        background: linear-gradient(45deg, theme('colors.orange.500') 25%, theme('colors.pink.800') 75%);
+    }
+    .bg-gradient-3 {
+        background: linear-gradient(45deg, theme('colors.orange.500') 25%, theme('colors.red.500') 75%);
+    }
+    .bg-gradient-4 {
+        background: linear-gradient(45deg, theme('colors.orange.500') 25%, theme('colors.green.700') 75%);
+    }
+    .bg-gradient-5 {
+        background: linear-gradient(45deg, theme('colors.orange.500') 25%, theme('colors.yellow.300') 75%);
+    }
+    .bg-gradient-6 {
+        background: linear-gradient(45deg, theme('colors.orange.500') 25%, theme('colors.indigo.700') 75%);
+    }
+    .bg-gradient-7 {
+        background: linear-gradient(45deg, theme('colors.orange.500') 25%, theme('colors.teal.500') 75%);
+    }
+    .bg-gradient-8 {
+        background: linear-gradient(45deg, theme('colors.orange.500') 25%, theme('colors.sky.900') 75%);
+    }
+    .bg-gradient-9 {
+        background: linear-gradient(45deg, theme('colors.orange.500') 25%, theme('colors.rose.300') 75%);
+    }
+}

components/dashboard/src/data/billing-mode/user-billing-mode-query.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
+import { useQuery } from "@tanstack/react-query";
+import { getGitpodService } from "../../service/service";
+import { useCurrentUser } from "../../user-context";
+
+type UserBillingModeQueryResult = BillingMode;
+
+export const useUserBillingMode = () => {
+    const user = useCurrentUser();
+
+    return useQuery<UserBillingModeQueryResult>({
+        queryKey: getUserBillingModeQueryKey(user?.id ?? ""),
+        queryFn: async () => {
+            if (!user) {
+                throw new Error("No current user, cannot load billing mode");
+            }
+            return await getGitpodService().server.getBillingModeForUser();
+        },
+        enabled: !!user,
+    });
+};
+
+export const getUserBillingModeQueryKey = (userId: string) => ["billing-mode", { userId }];