remove org slug

Author: svenefftinge

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, getSelectedTeamSlug } from "./teams/teams-context";
+import { useCurrentTeam, useTeams } from "./teams/teams-context";
 import { getAdminMenu } from "./admin/admin-menu";
 import ContextMenu, { ContextMenuEntry } from "./components/ContextMenu";
 import Separator from "./components/Separator";
@@ -39,9 +39,9 @@ interface Entry {
 export default function Menu() {
     const { user } = useContext(UserContext);
     const { showUsageView, oidcServiceEnabled } = useContext(FeatureFlagContext);
-    const { teams } = useContext(TeamsContext);
+    const teams = useTeams();
     const location = useLocation();
-    const team = getCurrentTeam(location, teams);
+    const team = useCurrentTeam();
     const { setCurrency, setIsStudent, setIsChargebeeCustomer } = useContext(PaymentContext);
     const [teamBillingMode, setTeamBillingMode] = useState<BillingMode | undefined>(undefined);
     const [userBillingMode, setUserBillingMode] = useState<BillingMode | undefined>(undefined);
@@ -57,17 +57,12 @@ export default function Menu() {
         getGitpodService().server.getBillingModeForUser().then(setUserBillingMode);
     }, []);
 
-    const teamRouteMatch = useRouteMatch<{ segment1?: string; segment2?: string; segment3?: string }>(
-        "/t/:segment1/:segment2?/:segment3?",
-    );
-
-    // TODO: Remove it after remove projects under personal accounts
     const projectsRouteMatch = useRouteMatch<{ segment1?: string; segment2?: string }>(
         "/projects/:segment1?/:segment2?",
     );
 
     const projectSlug = (() => {
-        const resource = teamRouteMatch?.params?.segment2 || projectsRouteMatch?.params.segment1;
+        const resource = projectsRouteMatch?.params.segment1;
         if (
             resource &&
             ![
@@ -89,7 +84,7 @@ export default function Menu() {
         }
     })();
     const prebuildId = (() => {
-        const resource = projectSlug && (teamRouteMatch?.params?.segment3 || projectsRouteMatch?.params.segment2);
+        const resource = projectSlug && projectsRouteMatch?.params.segment2;
         if (
             resource &&
             ![
@@ -110,7 +105,7 @@ export default function Menu() {
     }
 
     // Hide most of the top menu when in a full-page form.
-    const isMinimalUI = inResource(location.pathname, ["new", "teams/new", "open"]);
+    const isMinimalUI = inResource(location.pathname, ["new", "orgs/new", "open"]);
     const isWorkspacesUI = inResource(location.pathname, ["workspaces"]);
     const isPersonalSettingsUI = inResource(location.pathname, [
         "account",
@@ -191,22 +186,21 @@ export default function Menu() {
         }
     }, [team]);
 
-    const teamOrUserSlug = !!team ? "/t/" + team.slug : "/projects";
     const secondLevelMenu: Entry[] = (() => {
         // Project menu
         if (projectSlug) {
             return [
                 {
                     title: "Branches",
-                    link: `${teamOrUserSlug}/${projectSlug}`,
+                    link: `/projects/${projectSlug}`,
                 },
                 {
                     title: "Prebuilds",
-                    link: `${teamOrUserSlug}/${projectSlug}/prebuilds`,
+                    link: `/projects/${projectSlug}/prebuilds`,
                 },
                 {
                     title: "Settings",
-                    link: `${teamOrUserSlug}/${projectSlug}/settings`,
+                    link: `/projects/${projectSlug}/settings`,
                     alternatives: getProjectSettingsMenu({ slug: projectSlug } as Project, team).flatMap((e) => e.link),
                 },
             ];
@@ -220,12 +214,12 @@ export default function Menu() {
         const teamSettingsList = [
             {
                 title: "Projects",
-                link: `/t/${team.slug}/projects`,
+                link: `/projects`,
                 alternatives: [] as string[],
             },
             {
                 title: "Members",
-                link: `/t/${team.slug}/members`,
+                link: `/members`,
             },
         ];
         if (
@@ -234,13 +228,13 @@ export default function Menu() {
         ) {
             teamSettingsList.push({
                 title: "Usage",
-                link: `/t/${team.slug}/usage`,
+                link: `/usage`,
             });
         }
         if (currentUserInTeam?.role === "owner") {
             teamSettingsList.push({
                 title: "Settings",
-                link: `/t/${team.slug}/settings`,
+                link: `/org-settings`,
                 alternatives: getTeamSettingsMenu({
                     team,
                     billingMode: teamBillingMode,
@@ -277,7 +271,7 @@ export default function Menu() {
     const onFeedbackFormClose = () => {
         setFeedbackFormVisible(false);
     };
-    const isTeamLevelActive = !projectSlug && !isWorkspacesUI && !isPersonalSettingsUI && !isAdminUI && teamOrUserSlug;
+    const isTeamLevelActive = !projectSlug && !isWorkspacesUI && !isPersonalSettingsUI && !isAdminUI;
     const renderTeamMenu = () => {
         if (!hasIndividualProjects && (!teams || teams.length === 0)) {
             return (
@@ -291,7 +285,7 @@ export default function Menu() {
             );
         }
         const userFullName = user?.fullName || user?.name || "...";
-        const entries: (ContextMenuEntry & { slug: string })[] = [
+        const entries: ContextMenuEntry[] = [
             ...(hasIndividualProjects
                 ? [
                       {
@@ -304,16 +298,14 @@ export default function Menu() {
                                   <span className="">Personal Account</span>
                               </div>
                           ),
-                          active: getSelectedTeamSlug() === "",
+                          active: team === undefined,
                           separator: true,
-                          slug: "",
-                          link: "/projects",
+                          link: `${location.pathname}?activateOrg=0`,
                       },
                   ]
                 : []),
             ...(teams || [])
                 .map((t) => ({
-                    slug: t.slug,
                     title: t.name,
                     customContent: (
                         <div className="w-full text-gray-400 flex flex-col">
@@ -325,13 +317,12 @@ export default function Menu() {
                             </span>
                         </div>
                     ),
-                    active: getSelectedTeamSlug() === t.slug,
+                    active: team?.id === t.id,
                     separator: true,
-                    link: `/t/${t.slug}`,
+                    link: `${location.pathname}?activateOrg=${t.id}`,
                 }))
                 .sort((a, b) => (a.title.toLowerCase() > b.title.toLowerCase() ? 1 : -1)),
             {
-                slug: "new",
                 title: "Create a new organization",
                 customContent: (
                     <div className="w-full text-gray-400 flex items-center">
@@ -354,7 +345,7 @@ export default function Menu() {
             (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");
-        const selectedEntry = entries.find((e) => e.slug === getSelectedTeamSlug()) || entries[0];
+        const selectedEntry = entries.find((e) => e.active) || entries[0];
         return (
             <div className="flex p-1">
                 <Link to={selectedEntry.link!}>
@@ -378,14 +369,14 @@ export default function Menu() {
                     </ContextMenu>
                 </div>
                 {projectSlug && !prebuildId && !isAdminUI && (
-                    <Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
+                    <Link to={`/projects/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
                         <span className=" flex h-full text-base text-gray-50 bg-gray-800 dark:bg-gray-50 dark:text-gray-900 font-semibold ml-2 px-3 py-1 rounded-2xl border-gray-100">
                             {project?.name}
                         </span>
                     </Link>
                 )}
                 {prebuildId && (
-                    <Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
+                    <Link to={`/projects/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
                         <span className=" flex h-full text-base text-gray-500 bg-gray-50 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 font-semibold ml-2 px-3 py-1 rounded-2xl border-gray-100">
                             {project?.name}
                         </span>
@@ -403,7 +394,7 @@ export default function Menu() {
                                 />
                             </svg>
                         </div>
-                        <Link to={`${teamOrUserSlug}/${projectSlug}/${prebuildId}`}>
+                        <Link to={`/projects/${projectSlug}/${prebuildId}`}>
                             <span className="flex h-full text-base text-gray-50 bg-gray-800 dark:bg-gray-50 dark:text-gray-900 font-semibold px-3 py-1 rounded-2xl border-gray-100">
                                 {prebuildId.substring(0, 8).trimEnd()}
                             </span>

components/dashboard/src/components/BillingAccountSelector.tsx

@@ -8,7 +8,7 @@ import { useContext, useEffect, useState } from "react";
 import { Team, TeamMemberInfo } from "@gitpod/gitpod-protocol";
 import { AttributionId, AttributionTarget } from "@gitpod/gitpod-protocol/lib/attribution";
 import { getGitpodService } from "../service/service";
-import { TeamsContext } from "../teams/teams-context";
+import { useTeams } from "../teams/teams-context";
 import { UserContext } from "../user-context";
 import SelectableCardSolid from "../components/SelectableCardSolid";
 import { ReactComponent as Spinner } from "../icons/Spinner.svg";
@@ -17,7 +17,7 @@ import { publicApiTeamMembersToProtocol, teamsService } from "../service/public-
 
 export function BillingAccountSelector(props: { onSelected?: () => void }) {
     const { user, setUser } = useContext(UserContext);
-    const { teams } = useContext(TeamsContext);
+    const teams = useTeams();
     const [teamsAvailableForAttribution, setTeamsAvailableForAttribution] = useState<Team[] | undefined>();
     const [membersByTeam, setMembersByTeam] = useState<Record<string, TeamMemberInfo[]>>({});
     const [errorMessage, setErrorMessage] = useState<string | undefined>();

components/dashboard/src/components/UsageLimitReachedModal.tsx

@@ -6,14 +6,14 @@
 
 import { Team } from "@gitpod/gitpod-protocol";
 import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { gitpodHostUrl } from "../service/service";
-import { TeamsContext } from "../teams/teams-context";
+import { useTeams } from "../teams/teams-context";
 import Alert from "./Alert";
 import Modal from "./Modal";
 
 export function UsageLimitReachedModal(p: { hints: any }) {
-    const { teams } = useContext(TeamsContext);
+    const teams = useTeams();
     // const [attributionId, setAttributionId] = useState<AttributionId | undefined>();
     const [attributedTeam, setAttributedTeam] = useState<Team | undefined>();
 

components/dashboard/src/contexts/FeatureFlagContext.tsx

@@ -5,10 +5,9 @@
  */
 
 import React, { createContext, useContext, useState, useEffect } from "react";
-import { useLocation } from "react-router";
 import { getExperimentsClient } from "../experiments/client";
 import { ProjectContext } from "../projects/project-context";
-import { getCurrentTeam, TeamsContext } from "../teams/teams-context";
+import { useCurrentTeam, useTeams } from "../teams/teams-context";
 import { UserContext } from "../user-context";
 
 interface FeatureFlagConfig {
@@ -33,10 +32,9 @@ const FeatureFlagContext = createContext<{
 
 const FeatureFlagContextProvider: React.FC = ({ children }) => {
     const { user } = useContext(UserContext);
-    const { teams } = useContext(TeamsContext);
+    const teams = useTeams();
     const { project } = useContext(ProjectContext);
-    const location = useLocation();
-    const team = getCurrentTeam(location, teams);
+    const team = useCurrentTeam();
     const [showUsageView, setShowUsageView] = useState<boolean>(false);
     const [isUsageBasedBillingEnabled, setIsUsageBasedBillingEnabled] = useState<boolean>(false);
     const [showUseLastSuccessfulPrebuild, setShowUseLastSuccessfulPrebuild] = useState<boolean>(false);

components/dashboard/src/projects/Events.tsx

@@ -7,11 +7,11 @@
 import dayjs from "dayjs";
 import { PrebuildEvent, 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 { ItemsList, Item, ItemField } from "../components/ItemsList";
 import { getGitpodService } from "../service/service";
-import { TeamsContext, getCurrentTeam } from "../teams/teams-context";
+import { useTeams, useCurrentTeam } from "../teams/teams-context";
 import { toRemoteURL } from "./render-utils";
 import Spinner from "../icons/Spinner.svg";
 import NoAccess from "../icons/NoAccess.svg";
@@ -21,11 +21,9 @@ import { UserContext } from "../user-context";
 import { listAllProjects } from "../service/public-api";
 
 export default function () {
-    const location = useLocation();
-
-    const { teams } = useContext(TeamsContext);
+    const teams = useTeams();
     const { user } = useContext(UserContext);
-    const team = getCurrentTeam(location, teams);
+    const team = useCurrentTeam();
 
     const match = useRouteMatch<{ team: string; resource: string }>("/(t/)?:team/:resource");
     const projectSlug = match?.params?.resource;

components/dashboard/src/projects/NewProject.tsx

@@ -8,7 +8,7 @@ import { useContext, useEffect, useState } from "react";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { iconForAuthProvider, openAuthorizeWindow, simplifyProviderName } from "../provider-utils";
 import { AuthProviderInfo, Project, ProviderRepository, Team, TeamMemberInfo, User } from "@gitpod/gitpod-protocol";
-import { TeamsContext } from "../teams/teams-context";
+import { TeamsContext, useTeams } from "../teams/teams-context";
 import { useLocation } from "react-router";
 import ContextMenu, { ContextMenuEntry } from "../components/ContextMenu";
 import CaretDown from "../icons/CaretDown.svg";
@@ -32,7 +32,7 @@ import { useRefreshProjects } from "../data/projects/list-projects-query";
 
 export default function NewProject() {
     const location = useLocation();
-    const { teams } = useContext(TeamsContext);
+    const teams = useTeams();
     const { user, setUser } = useContext(UserContext);
     const refreshProjects = useRefreshProjects();
 

components/dashboard/src/projects/Prebuild.tsx

@@ -7,23 +7,22 @@
 import dayjs from "dayjs";
 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 PrebuildLogs from "../components/PrebuildLogs";
 import Spinner from "../icons/Spinner.svg";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
-import { TeamsContext, getCurrentTeam } from "../teams/teams-context";
+import { useTeams, useCurrentTeam } from "../teams/teams-context";
 import { shortCommitMessage } from "./render-utils";
 import { listAllProjects } from "../service/public-api";
 import { UserContext } from "../user-context";
 
 export default function () {
     const history = useHistory();
-    const location = useLocation();
 
-    const { teams } = useContext(TeamsContext);
+    const teams = useTeams();
     const { user } = useContext(UserContext);
-    const team = getCurrentTeam(location, teams);
+    const team = useCurrentTeam();
 
     const match = useRouteMatch<{ team: string; project: string; prebuildId: string }>(
         "/(t/)?:team/:project/:prebuildId",

components/dashboard/src/projects/Prebuilds.tsx

@@ -7,7 +7,7 @@
 import dayjs from "dayjs";
 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,19 +18,17 @@ 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 { useTeams, useCurrentTeam } from "../teams/teams-context";
 import { shortCommitMessage } from "./render-utils";
 import { Link } from "react-router-dom";
 import { Disposable } from "vscode-jsonrpc";
 import { UserContext } from "../user-context";
 import { listAllProjects } from "../service/public-api";
 
 export default function (props: { project?: Project; isAdminDashboard?: boolean }) {
-    const location = useLocation();
-
-    const { teams } = useContext(TeamsContext);
+    const teams = useTeams();
     const { user } = useContext(UserContext);
-    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;

components/dashboard/src/projects/Project.tsx

@@ -7,11 +7,11 @@
 import dayjs from "dayjs";
 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 { useTeams, useCurrentTeam } from "../teams/teams-context";
 import { prebuildStatusIcon, prebuildStatusLabel } from "./Prebuilds";
 import { shortCommitMessage, toRemoteURL } from "./render-utils";
 import { ReactComponent as Spinner } from "../icons/Spinner.svg";
@@ -24,12 +24,11 @@ import { UserContext } from "../user-context";
 import { StartWorkspaceModalContext } from "../workspaces/start-workspace-modal-context";
 
 export default function () {
-    const location = useLocation();
     const history = useHistory();
 
-    const { teams } = useContext(TeamsContext);
+    const teams = useTeams();
     const { user } = useContext(UserContext);
-    const team = getCurrentTeam(location, teams);
+    const team = useCurrentTeam();
     const { setStartWorkspaceModalProps } = useContext(StartWorkspaceModalContext);
 
     const match = useRouteMatch<{ team: string; resource: string }>("/(t/)?:team/:resource");