refactor(dashboard/menu): fix issues with team selection persistence

aboqasem · aboqasem · commit 000eebae5ea8 · 2022-07-10T21:58:56.000+08:00
- Creating a new team should change the persisted team to the new created team
- Visiting a team via URL should change the persisted team to the one in the URL
- Deleting a team should remove the persisted team
diff --git a/components/dashboard/src/App.tsx b/components/dashboard/src/App.tsx
@@ -174,7 +174,7 @@ function App() {
                     const hash = getURLHash();
                     const isRoot = window.location.pathname === "/" && hash === "";
                     if (isRoot) {
-                        const teamSlug = getCurrentTeam(window.location, teams)?.slug;
+                        const teamSlug = getCurrentTeam(teams)?.slug;
                         if (teamSlug) {
                             history.push(`/t/${teamSlug}`);
                         }
diff --git 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, setCurrentTeam } from "./teams/teams-context";
+import { TeamsContext, useCurrentTeam } from "./teams/teams-context";
 import getSettingsMenu from "./settings/settings-menu";
 import { adminMenu } from "./admin/admin-menu";
 import ContextMenu from "./components/ContextMenu";
@@ -38,7 +38,8 @@ export default function Menu() {
     const { user } = useContext(UserContext);
     const { teams } = useContext(TeamsContext);
     const location = useLocation();
-    const team = getCurrentTeam(location, teams);
+    const { team, setStoredTeamSlug } = useCurrentTeam();
+
     const {
         showPaymentUI,
         setShowPaymentUI,
@@ -299,7 +300,7 @@ export default function Menu() {
                                 active: !team,
                                 separator: true,
                                 link: "/projects",
-                                onClick: () => setCurrentTeam(),
+                                onClick: () => setStoredTeamSlug(),
                             },
                             ...(teams || [])
                                 .map((t) => ({
@@ -321,7 +322,7 @@ export default function Menu() {
                                     active: team && team.id === t.id,
                                     separator: true,
                                     link: `/t/${t.slug}`,
-                                    onClick: () => setCurrentTeam(t),
+                                    onClick: () => setStoredTeamSlug(t.slug),
                                 }))
                                 .sort((a, b) => (a.title.toLowerCase() > b.title.toLowerCase() ? 1 : -1)),
                             {
diff --git a/components/dashboard/src/projects/Prebuild.tsx b/components/dashboard/src/projects/Prebuild.tsx
@@ -7,21 +7,20 @@
 import moment from "moment";
 import { PrebuildWithStatus } from "@gitpod/gitpod-protocol";
 import { useContext, useEffect, useState } from "react";
-import { useHistory, useLocation, useRouteMatch } from "react-router";
+import { useHistory, useRouteMatch } from "react-router";
 import Header from "../components/Header";
 import PrebuildLogs from "../components/PrebuildLogs";
 import Spinner from "../icons/Spinner.svg";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
-import { TeamsContext, getCurrentTeam } from "../teams/teams-context";
+import { TeamsContext, useCurrentTeam } from "../teams/teams-context";
 import { PrebuildStatus } from "./Prebuilds";
 import { shortCommitMessage } from "./render-utils";
 
 export default function () {
     const history = useHistory();
-    const location = useLocation();
 
     const { teams } = useContext(TeamsContext);
-    const team = getCurrentTeam(location, teams);
+    const { team } = useCurrentTeam();
 
     const match = useRouteMatch<{ team: string; project: string; prebuildId: string }>(
         "/(t/)?:team/:project/:prebuildId",
diff --git a/components/dashboard/src/projects/Prebuilds.tsx b/components/dashboard/src/projects/Prebuilds.tsx
@@ -7,7 +7,7 @@
 import moment from "moment";
 import { PrebuildWithStatus, PrebuiltWorkspaceState, Project } from "@gitpod/gitpod-protocol";
 import { useContext, useEffect, useState } from "react";
-import { useLocation, useRouteMatch } from "react-router";
+import { useRouteMatch } from "react-router";
 import Header from "../components/Header";
 import DropDown, { DropDownEntry } from "../components/DropDown";
 import { ItemsList, Item, ItemField } from "../components/ItemsList";
@@ -18,16 +18,14 @@ import StatusCanceled from "../icons/StatusCanceled.svg";
 import StatusPaused from "../icons/StatusPaused.svg";
 import StatusRunning from "../icons/StatusRunning.svg";
 import { getGitpodService } from "../service/service";
-import { TeamsContext, getCurrentTeam } from "../teams/teams-context";
+import { TeamsContext, useCurrentTeam } from "../teams/teams-context";
 import { shortCommitMessage } from "./render-utils";
 import { Link } from "react-router-dom";
 import { Disposable } from "vscode-jsonrpc";
 
 export default function (props: { project?: Project; isAdminDashboard?: boolean }) {
-    const location = useLocation();
-
     const { teams } = useContext(TeamsContext);
-    const team = getCurrentTeam(location, teams);
+    const { team } = useCurrentTeam();
 
     const match = useRouteMatch<{ team: string; resource: string }>("/(t/)?:team/:resource");
     const projectSlug = props.isAdminDashboard ? props.project?.slug : match?.params?.resource;
diff --git a/components/dashboard/src/projects/Project.tsx b/components/dashboard/src/projects/Project.tsx
@@ -7,11 +7,11 @@
 import moment from "moment";
 import { PrebuildWithStatus, Project } from "@gitpod/gitpod-protocol";
 import { useContext, useEffect, useState } from "react";
-import { useHistory, useLocation, useRouteMatch } from "react-router";
+import { useHistory, useRouteMatch } from "react-router";
 import Header from "../components/Header";
 import { ItemsList, Item, ItemField, ItemFieldContextMenu } from "../components/ItemsList";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
-import { TeamsContext, getCurrentTeam } from "../teams/teams-context";
+import { TeamsContext, useCurrentTeam } from "../teams/teams-context";
 import { prebuildStatusIcon, prebuildStatusLabel } from "./Prebuilds";
 import { shortCommitMessage, toRemoteURL } from "./render-utils";
 import Spinner from "../icons/Spinner.svg";
@@ -20,11 +20,10 @@ import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import { openAuthorizeWindow } from "../provider-utils";
 
 export default function () {
-    const location = useLocation();
     const history = useHistory();
 
     const { teams } = useContext(TeamsContext);
-    const team = getCurrentTeam(location, teams);
+    const { team } = useCurrentTeam();
 
     const match = useRouteMatch<{ team: string; resource: string }>("/(t/)?:team/:resource");
     const projectSlug = match?.params?.resource;
diff --git a/components/dashboard/src/projects/ProjectSettings.tsx b/components/dashboard/src/projects/ProjectSettings.tsx
@@ -5,11 +5,10 @@
  */
 
 import { useContext, useEffect, useState } from "react";
-import { useLocation } from "react-router";
 import { Project, Team } from "@gitpod/gitpod-protocol";
 import CheckBox from "../components/CheckBox";
 import { getGitpodService } from "../service/service";
-import { getCurrentTeam, TeamsContext } from "../teams/teams-context";
+import { useCurrentTeam } from "../teams/teams-context";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import PillLabel from "../components/PillLabel";
 import { ProjectContext } from "./project-context";
@@ -33,9 +32,7 @@ export function getProjectSettingsMenu(project?: Project, team?: Team) {
 }
 
 export function ProjectSettingsPage(props: { project?: Project; children?: React.ReactNode }) {
-    const location = useLocation();
-    const { teams } = useContext(TeamsContext);
-    const team = getCurrentTeam(location, teams);
+    const { team } = useCurrentTeam();
 
     return (
         <PageWithSubMenu
diff --git a/components/dashboard/src/projects/Projects.tsx b/components/dashboard/src/projects/Projects.tsx
@@ -9,10 +9,10 @@ import { Link } from "react-router-dom";
 import Header from "../components/Header";
 import projectsEmpty from "../images/projects-empty.svg";
 import projectsEmptyDark from "../images/projects-empty-dark.svg";
-import { useHistory, useLocation } from "react-router";
+import { useHistory } from "react-router";
 import { useContext, useEffect, useState } from "react";
 import { getGitpodService } from "../service/service";
-import { getCurrentTeam, TeamsContext } from "../teams/teams-context";
+import { useCurrentTeam, TeamsContext } from "../teams/teams-context";
 import { ThemeContext } from "../theme-context";
 import { PrebuildWithStatus, Project } from "@gitpod/gitpod-protocol";
 import { toRemoteURL } from "./render-utils";
@@ -21,11 +21,10 @@ import ConfirmationModal from "../components/ConfirmationModal";
 import { prebuildStatusIcon } from "./Prebuilds";
 
 export default function () {
-    const location = useLocation();
     const history = useHistory();
 
     const { teams } = useContext(TeamsContext);
-    const team = getCurrentTeam(location, teams);
+    const { team } = useCurrentTeam();
     const [projects, setProjects] = useState<Project[]>([]);
     const [lastPrebuilds, setLastPrebuilds] = useState<Map<string, PrebuildWithStatus>>(new Map());
 
diff --git a/components/dashboard/src/teams/Members.tsx b/components/dashboard/src/teams/Members.tsx
@@ -7,7 +7,7 @@
 import { TeamMemberInfo, TeamMemberRole, TeamMembershipInvite } from "@gitpod/gitpod-protocol";
 import moment from "moment";
 import { useContext, useEffect, useState } from "react";
-import { useHistory, useLocation } from "react-router";
+import { useHistory } from "react-router";
 import Header from "../components/Header";
 import DropDown from "../components/DropDown";
 import { ItemsList, Item, ItemField, ItemFieldContextMenu } from "../components/ItemsList";
@@ -16,15 +16,14 @@ import Tooltip from "../components/Tooltip";
 import copy from "../images/copy.svg";
 import { getGitpodService } from "../service/service";
 import { UserContext } from "../user-context";
-import { TeamsContext, getCurrentTeam } from "./teams-context";
+import { TeamsContext, useCurrentTeam } from "./teams-context";
 import { trackEvent } from "../Analytics";
 
 export default function () {
     const { user } = useContext(UserContext);
-    const { teams, setTeams } = useContext(TeamsContext);
+    const { setTeams } = useContext(TeamsContext);
     const history = useHistory();
-    const location = useLocation();
-    const team = getCurrentTeam(location, teams);
+    const { team } = useCurrentTeam();
     const [members, setMembers] = useState<TeamMemberInfo[]>([]);
     const [genericInvite, setGenericInvite] = useState<TeamMembershipInvite>();
     const [showInviteModal, setShowInviteModal] = useState<boolean>(false);
diff --git a/components/dashboard/src/teams/TeamBilling.tsx b/components/dashboard/src/teams/TeamBilling.tsx
@@ -5,7 +5,6 @@
  */
 
 import React, { useContext, useEffect, useState } from "react";
-import { useLocation } from "react-router";
 import { TeamMemberInfo } from "@gitpod/gitpod-protocol";
 import { Currency, Plan, Plans, PlanType } from "@gitpod/gitpod-protocol/lib/plans";
 import { TeamSubscription2 } from "@gitpod/gitpod-protocol/lib/team-subscription-protocol";
@@ -19,16 +18,14 @@ import { ReactComponent as CheckSvg } from "../images/check.svg";
 import { ReactComponent as Spinner } from "../icons/Spinner.svg";
 import { PaymentContext } from "../payment-context";
 import { getGitpodService } from "../service/service";
-import { getCurrentTeam, TeamsContext } from "./teams-context";
+import { useCurrentTeam } from "./teams-context";
 import { getTeamSettingsMenu } from "./TeamSettings";
 import TeamUsageBasedBilling from "./TeamUsageBasedBilling";
 
 type PendingPlan = Plan & { pendingSince: number };
 
 export default function TeamBilling() {
-    const { teams } = useContext(TeamsContext);
-    const location = useLocation();
-    const team = getCurrentTeam(location, teams);
+    const { team } = useCurrentTeam();
     const [members, setMembers] = useState<TeamMemberInfo[]>([]);
     const [teamSubscription, setTeamSubscription] = useState<TeamSubscription2 | undefined>();
     const { showPaymentUI, currency, setCurrency } = useContext(PaymentContext);
diff --git a/components/dashboard/src/teams/TeamSettings.tsx b/components/dashboard/src/teams/TeamSettings.tsx
@@ -6,14 +6,14 @@
 
 import { Team } from "@gitpod/gitpod-protocol";
 import { useContext, useEffect, useState } from "react";
-import { Redirect, useLocation } from "react-router";
+import { Redirect } from "react-router";
 import CodeText from "../components/CodeText";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import { PaymentContext } from "../payment-context";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
-import { getCurrentTeam, TeamsContext } from "./teams-context";
+import { useCurrentTeam } from "./teams-context";
 
 export function getTeamSettingsMenu(params: { team?: Team; showPaymentUI?: boolean }) {
     const { team, showPaymentUI } = params;
@@ -37,10 +37,8 @@ export default function TeamSettings() {
     const [modal, setModal] = useState(false);
     const [teamSlug, setTeamSlug] = useState("");
     const [isUserOwner, setIsUserOwner] = useState(true);
-    const { teams } = useContext(TeamsContext);
     const { user } = useContext(UserContext);
-    const location = useLocation();
-    const team = getCurrentTeam(location, teams);
+    const { team, setStoredTeamSlug } = useCurrentTeam();
     const { showPaymentUI } = useContext(PaymentContext);
 
     const close = () => setModal(false);
@@ -52,7 +50,7 @@ export default function TeamSettings() {
             const currentUserInTeam = members.find((member) => member.userId === user?.id);
             setIsUserOwner(currentUserInTeam?.role === "owner");
         })();
-    }, []);
+    }, [team, user?.id]);
 
     if (!isUserOwner) {
         return <Redirect to="/" />;
@@ -63,6 +61,7 @@ export default function TeamSettings() {
         }
         await getGitpodService().server.deleteTeam(team.id, user.id);
         document.location.href = gitpodHostUrl.asDashboard().toString();
+        setStoredTeamSlug();
     };
 
     return (
diff --git a/components/dashboard/src/teams/TeamUsageBasedBilling.tsx b/components/dashboard/src/teams/TeamUsageBasedBilling.tsx
@@ -8,7 +8,7 @@ import React, { useContext, useEffect, useState } from "react";
 import { useLocation } from "react-router";
 import { Appearance, loadStripe, Stripe } from "@stripe/stripe-js";
 import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import { getCurrentTeam, TeamsContext } from "./teams-context";
+import { useCurrentTeam } from "./teams-context";
 import Modal from "../components/Modal";
 import { ReactComponent as Spinner } from "../icons/Spinner.svg";
 import { PaymentContext } from "../payment-context";
@@ -18,9 +18,8 @@ import { ThemeContext } from "../theme-context";
 type PendingStripeCustomer = { pendingSince: number };
 
 export default function TeamUsageBasedBilling() {
-    const { teams } = useContext(TeamsContext);
     const location = useLocation();
-    const team = getCurrentTeam(location, teams);
+    const { team } = useCurrentTeam();
     const { showUsageBasedUI } = useContext(PaymentContext);
     const [stripeCustomerId, setStripeCustomerId] = useState<string | undefined>();
     const [isLoading, setIsLoading] = useState<boolean>(true);
diff --git a/components/dashboard/src/teams/teams-context.tsx b/components/dashboard/src/teams/teams-context.tsx

Original file line number	Diff line number	Diff line change
`@@ -174,7 +174,7 @@ function App() {`
`174`	`174`	`const hash = getURLHash();`
`175`	`175`	`const isRoot = window.location.pathname === "/" && hash === "";`
`176`	`176`	`if (isRoot) {`
`177`		`- const teamSlug = getCurrentTeam(window.location, teams)?.slug;`
	`177`	`+ const teamSlug = getCurrentTeam(teams)?.slug;`
`178`	`178`	`if (teamSlug) {`
`179`	`179`	history.push(`/t/${teamSlug}`);
`180`	`180`	`}`