From 169b5a4cbf9ade0d6ff67d709857ef8027657af0 Mon Sep 17 00:00:00 2001
From: Sven Efftinge <sven@gitpod.io>
Date: Mon, 26 Sep 2022 16:50:07 +0000
Subject: [PATCH] [dashboard] keep team selection

---
 components/dashboard/src/App.tsx              |  4 +-
 components/dashboard/src/Menu.tsx             | 47 ++++++-------------
 .../dashboard/src/teams/teams-context.tsx     | 19 +++++++-
 3 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/components/dashboard/src/App.tsx b/components/dashboard/src/App.tsx
index 4c9b88b55765d7..11c1cb75bddfb0 100644
--- a/components/dashboard/src/App.tsx
+++ b/components/dashboard/src/App.tsx
@@ -10,7 +10,7 @@ import { Redirect, Route, Switch } from "react-router";
 
 import { Login } from "./Login";
 import { UserContext } from "./user-context";
-import { TeamsContext } from "./teams/teams-context";
+import { getSelectedTeamSlug, TeamsContext } from "./teams/teams-context";
 import { ThemeContext } from "./theme-context";
 import { getGitpodService } from "./service/service";
 import { shouldSeeWhatsNew, WhatsNew } from "./whatsnew/WhatsNew";
@@ -179,7 +179,7 @@ function App() {
                     const isRoot = window.location.pathname === "/" && hash === "";
                     if (isRoot) {
                         try {
-                            const teamSlug = localStorage.getItem("team-selection");
+                            const teamSlug = getSelectedTeamSlug();
                             if (teams.some((t) => t.slug === teamSlug)) {
                                 history.push(`/t/${teamSlug}`);
                             }
diff --git a/components/dashboard/src/Menu.tsx b/components/dashboard/src/Menu.tsx
index aad6bca978cd8a..e27dc3cc625d61 100644
--- a/components/dashboard/src/Menu.tsx
+++ b/components/dashboard/src/Menu.tsx
@@ -13,7 +13,7 @@ import { countries } from "countries-list";
 import gitpodIcon from "./icons/gitpod.svg";
 import { getGitpodService, gitpodHostUrl } from "./service/service";
 import { UserContext } from "./user-context";
-import { TeamsContext, getCurrentTeam } from "./teams/teams-context";
+import { TeamsContext, getCurrentTeam, setSelectedTeamSlug, getSelectedTeamSlug } from "./teams/teams-context";
 import getSettingsMenu from "./settings/settings-menu";
 import { getAdminMenu } from "./admin/admin-menu";
 import ContextMenu from "./components/ContextMenu";
@@ -92,13 +92,6 @@ export default function Menu() {
 
     const userFullName = user?.fullName || user?.name || "...";
 
-    {
-        // updating last team selection
-        try {
-            localStorage.setItem("team-selection", team ? team.slug : "");
-        } catch {}
-    }
-
     // Hide most of the top menu when in a full-page form.
     const isMinimalUI = inResource(location.pathname, ["new", "teams/new", "open"]);
     const isWorkspacesUI = inResource(location.pathname, ["workspaces"]);
@@ -260,33 +253,23 @@ export default function Menu() {
     const onFeedbackFormClose = () => {
         setFeedbackFormVisible(false);
     };
+    const isTeamLevelActive = !projectSlug && !isWorkspacesUI && !isAdminUI && teamOrUserSlug;
     const renderTeamMenu = () => {
         const classes =
             "flex h-full text-base py-0 " +
-            (!projectSlug && !isWorkspacesUI && !isAdminUI && teamOrUserSlug
-                ? "text-gray-50 bg-gray-800 dark:text-gray-900 dark:bg-gray-50 border-gray-700"
-                : "text-gray-500 bg-gray-50 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700  dark:border-gray-700");
+            (isTeamLevelActive
+                ? "text-gray-50  bg-gray-800 dark:bg-gray-50  dark:text-gray-900 border-gray-700 dark:border-gray-200"
+                : "text-gray-500 bg-gray-50  dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700");
         return (
             <div className="flex p-1 pl-3">
-                {projectSlug && (
-                    <Link to={team ? `/t/${team.slug}/projects` : `/projects`}>
-                        <span
-                            className={`${classes} rounded-tl-2xl rounded-bl-2xl  dark:border-gray-700 border-r pl-3 pr-2 py-1 bg-gray-50  font-semibold`}
-                        >
-                            {team?.name || userFullName}
-                        </span>
-                    </Link>
-                )}
-                {!projectSlug && (
-                    <Link to={team ? `/t/${team.slug}/projects` : `/projects`}>
-                        <span
-                            className={`${classes} rounded-tl-2xl rounded-bl-2xl  dark:border-gray-200 border-r pl-3 pr-2 py-1 bg-gray-50  font-semibold`}
-                        >
-                            {team?.name || userFullName}
-                        </span>
-                    </Link>
-                )}
-                <div className={`${classes} rounded-tr-2xl rounded-br-2xl dark:border-gray-700  px-1 bg-gray-50`}>
+                <Link to={team ? `/t/${team.slug}/projects` : `/projects`}>
+                    <span
+                        className={`${classes} rounded-tl-2xl rounded-bl-2xl border-r pl-3 pr-2 py-1 bg-gray-50  font-semibold`}
+                    >
+                        {teams?.find((t) => t.slug === getSelectedTeamSlug())?.name || userFullName}
+                    </span>
+                </Link>
+                <div className={`${classes} rounded-tr-2xl rounded-br-2xl px-1`}>
                     <ContextMenu
                         customClasses="w-64 left-0"
                         menuEntries={[
@@ -300,7 +283,7 @@ export default function Menu() {
                                         <span className="">Personal Account</span>
                                     </div>
                                 ),
-                                active: !team,
+                                active: getSelectedTeamSlug() === "",
                                 separator: true,
                                 link: "/projects",
                             },
@@ -321,7 +304,7 @@ export default function Menu() {
                                             </span>
                                         </div>
                                     ),
-                                    active: team && team.id === t.id,
+                                    active: getSelectedTeamSlug() === t.slug,
                                     separator: true,
                                     link: `/t/${t.slug}`,
                                 }))
diff --git a/components/dashboard/src/teams/teams-context.tsx b/components/dashboard/src/teams/teams-context.tsx
index 1a470c6d4641f9..4aa1db03675787 100644
--- a/components/dashboard/src/teams/teams-context.tsx
+++ b/components/dashboard/src/teams/teams-context.tsx
@@ -25,5 +25,22 @@ export function getCurrentTeam(location: Location<any>, teams?: Team[]): Team |
     if (!slug || !teams) {
         return;
     }
-    return teams.find((t) => t.slug === slug);
+    const team = teams.find((t) => t.slug === slug);
+    if (!team) {
+        // reset to user account if we on an individual page?
+        if (["projects", "usage", "account"].indexOf(slug)) {
+            setSelectedTeamSlug("");
+        }
+        return;
+    }
+    setSelectedTeamSlug(team.slug);
+    return team;
+}
+
+export function getSelectedTeamSlug(): string {
+    return localStorage.getItem("team-selection") || "";
+}
+
+export function setSelectedTeamSlug(teamSlug?: string): void {
+    return localStorage.setItem("team-selection", teamSlug || "");
 }