dashboard: add redirects for vercel login query params (#38352)

GitOrigin-RevId: ae4a6358af80380d8f9599f38d2ee80eca27aa0f

Author: atrakh

npm-packages/dashboard/src/api/projects.ts

@@ -12,9 +12,14 @@ export function useCurrentProject() {
   return projects?.find((p) => p.slug === projectSlug);
 }
 
-export function useProjectById(teamId?: number, projectId?: number) {
-  const projects = useProjects(teamId);
-  return projects?.find((p) => p.id === projectId);
+export function useProjectById(projectId: number | undefined) {
+  const { data } = useBBQuery({
+    path: "/projects/{project_id}",
+    pathParams: {
+      project_id: projectId?.toString() || "",
+    },
+  });
+  return data;
 }
 
 export function useProjects(

npm-packages/dashboard/src/elements/BackupIdentifier.tsx

@@ -10,7 +10,7 @@ export function BackupIdentifier({ backup }: { backup: BackupResponse }) {
     team?.id || 0,
     backup.sourceDeploymentId,
   );
-  const project = useProjectById(team?.id, deployment?.projectId);
+  const project = useProjectById(deployment?.projectId);
   return (
     <span className="text-xs text-content-secondary">
       {team?.slug}-{project?.slug}-{deployment?.name}-

npm-packages/dashboard/src/elements/DeploymentDisplay.tsx

@@ -1,7 +1,7 @@
 import { CommandLineIcon, SignalIcon } from "@heroicons/react/20/solid";
 import { GearIcon, GlobeIcon, Pencil2Icon } from "@radix-ui/react-icons";
 import { useCurrentDeployment, useDeployments } from "api/deployments";
-import { useCurrentTeam, useTeamMembers } from "api/teams";
+import { useTeamMembers } from "api/teams";
 import { useProjectById } from "api/projects";
 import { useProfile } from "api/profile";
 import { useRememberLastViewedDeployment } from "hooks/useLastViewed";
@@ -60,8 +60,7 @@ export function DeploymentLabel({
   whoseName: string | null;
   inline?: boolean;
 }) {
-  const team = useCurrentTeam();
-  const project = useProjectById(team?.id, deployment.projectId);
+  const project = useProjectById(deployment.projectId);
   const { deployments } = useDeployments(project?.id);
   const hasMultipleActiveLocalDeployments =
     deployments !== undefined &&

npm-packages/dashboard/src/lib/ssr.ts

@@ -184,13 +184,20 @@ const getProps: GetServerSideProps<{
 
     const projectsByTeam = groupBy(projects, (p: ProjectDetails) => p.teamId);
 
-    const initialProjects = Object.fromEntries(
+    const initialProjectsByTeam = Object.fromEntries(
       teams.map(({ id: teamId }) => [
         `/teams/${teamId}/projects`,
         projectsByTeam[teamId] ?? [],
       ]),
     );
 
+    const initialIndividualProjects = Object.fromEntries(
+      projects.map(({ id: projectId }) => [
+        `/projects/${projectId}`,
+        projects.find((p: ProjectDetails) => p.id === projectId),
+      ]),
+    );
+
     const deploymentsByProject = groupBy(
       deployments,
       (d: DeploymentResponse) => d.projectId,
@@ -204,7 +211,8 @@ const getProps: GetServerSideProps<{
 
     const initialData: Record<string, object> = {
       "/teams": teams,
-      ...initialProjects,
+      ...initialProjectsByTeam,
+      ...initialIndividualProjects,
       ...initialDeployments,
     };
 

npm-packages/dashboard/src/pages/[[...route]].tsx

@@ -3,6 +3,8 @@ import { useTeams } from "api/teams";
 import { useEffect } from "react";
 import { Loading } from "@ui/Loading";
 import { withAuthenticatedPage } from "lib/withAuthenticatedPage";
+import { useProjectById } from "api/projects";
+import { useSupportFormOpen } from "elements/SupportWidget";
 
 export { getServerSideProps } from "lib/ssr";
 
@@ -26,7 +28,57 @@ function RedirectToTeam() {
 }
 
 function Main() {
+  const { query, push } = useRouter();
+  const { teams } = useTeams();
+  const [, setOpenState] = useSupportFormOpen();
+
+  // If vercelPath is set, we need to redirect somewhere, but we don't know
+  // which team to redirect to. We'll redirect to the first team that is managed
+  // by Vercel. In most cases, this will be correct.
+  const firstVercelTeam = teams?.find((t) => t.managedBy === "vercel");
+  if (query.vercelPath === "support") {
+    setOpenState(true);
+    void push(firstVercelTeam ? `/t/${firstVercelTeam.slug}` : "/");
+    return <Loading />;
+  }
+
+  if (query.vercelPath === "billing") {
+    void push(
+      firstVercelTeam
+        ? `/t/${firstVercelTeam.slug}/settings/billing`
+        : "/team/settings/billing",
+    );
+    return <Loading />;
+  }
+  if (query.vercelPath === "usage") {
+    void push(
+      firstVercelTeam
+        ? `/t/${firstVercelTeam.slug}/settings/usage`
+        : "/team/settings/usage",
+    );
+    return <Loading />;
+  }
+  if (query.invoiceId) {
+    // TODO(ENG-9453): Support this.
+  }
+
+  if (query.projectId) {
+    return <RedirectToProjectById id={query.vercel_resource_id as string} />;
+  }
   return <RedirectToTeam />;
 }
 
+function RedirectToProjectById({ id }: { id: string }) {
+  const project = useProjectById(parseInt(id));
+  const { teams } = useTeams();
+  const projectTeam = teams?.find((team) => team.id === project?.teamId);
+  const router = useRouter();
+  useEffect(() => {
+    if (project && projectTeam) {
+      void router.replace(`/t/${projectTeam.slug}/${project.slug}`);
+    }
+  }, [project, projectTeam, router]);
+  return <Loading />;
+}
+
 export default withAuthenticatedPage(Main);

npm-packages/dashboard/src/pages/vercel_login.tsx

@@ -2,6 +2,7 @@ import { useSessionStorage } from "react-use";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { LoadingLogo } from "@ui/Loading";
+import { ParsedUrlQuery } from "querystring";
 
 /**
  * This page handles the Vercel OAuth login flow integration with Convex's authentication system.
@@ -30,7 +31,7 @@ export default function VercelLogin() {
       // in session storage (so it's accessible once we're redirected back and redirect to the Auth0 login page.
       setVercelCode(query.code.toString());
       void replace(
-        `/api/auth/login?connection=vercel${query.returnTo ? `&returnTo=${query.returnTo}` : ""}`,
+        `/api/auth/login?connection=vercel&returnTo=${vercelReturnTo(query)}`,
       );
     }
 
@@ -56,3 +57,24 @@ export default function VercelLogin() {
     </div>
   );
 }
+
+function vercelReturnTo(query: ParsedUrlQuery) {
+  const params = [];
+  if (query.resource_id) {
+    params.push(`projectId=${query.projectId}`);
+  }
+  if (query.invoice_id) {
+    params.push(`invoiceId=${query.invoiceId}`);
+  }
+  if (
+    query.path &&
+    ["billing", "support", "usage"].includes(query.path as string)
+  ) {
+    params.push(`vercelPath=${query.path}`);
+  }
+
+  if (params.length > 0) {
+    return `/?${params.join("&")}`;
+  }
+  return "/";
+}