dashboard: show external vercel links for teams managed by vercel (#43068)

atrakh · Convex, Inc. · commit a2d879f22236 · 2025-11-14T01:37:01.000Z
GitOrigin-RevId: 9325a61c63a75bb42c145c8ada69b9653570eff9
diff --git a/npm-packages/dashboard/src/components/OpenInVercel.tsx b/npm-packages/dashboard/src/components/OpenInVercel.tsx
@@ -0,0 +1,25 @@
+import { ExternalLinkIcon } from "@radix-ui/react-icons";
+import { Button } from "@ui/Button";
+import { TeamResponse } from "generatedApi";
+import VercelLogo from "logos/vercel.svg";
+
+export function OpenInVercel({ team }: { team: TeamResponse }) {
+  if (team.managedBy !== "vercel" || !team.managedByUrl) {
+    return null;
+  }
+
+  return (
+    <Button
+      href={team.managedByUrl}
+      target="_blank"
+      size="sm"
+      variant="neutral"
+      icon={<VercelLogo className="size-3 fill-[#EDEDED]" />}
+      className="bg-[#1A1A1A] text-[#EDEDED] hover:bg-[#1A1A1A] hover:opacity-40"
+      tip="This team is managed by Vercel. Visit the Vercel dashboard to manage your team and create new projects."
+    >
+      Open in Vercel
+      <ExternalLinkIcon className="ml-1 size-3" />
+    </Button>
+  );
+}
diff --git a/npm-packages/dashboard/src/components/header/ProjectSelector/ProjectMenuOptions.tsx b/npm-packages/dashboard/src/components/header/ProjectSelector/ProjectMenuOptions.tsx
@@ -8,6 +8,8 @@ import { SelectorItem } from "elements/SelectorItem";
 import { useDeploymentUris } from "hooks/useDeploymentUris";
 import { useLastViewedDeploymentForProject } from "hooks/useLastViewed";
 import { InfiniteScrollList } from "dashboard-common/src/elements/InfiniteScrollList";
+import { OpenInVercel } from "components/OpenInVercel";
+import startCase from "lodash/startCase";
 
 const PROJECT_SELECTOR_ITEM_SIZE = 44;
 
@@ -97,18 +99,27 @@ export function ProjectMenuOptions({
           }
         />
       </div>
-      <Button
-        inline
-        onClick={() => {
-          onCreateProjectClick(team);
-          close();
-        }}
-        icon={<PlusIcon aria-hidden="true" />}
-        className="w-full"
-        size="sm"
-      >
-        Create Project
-      </Button>
+      <div className="flex w-full gap-2 p-2">
+        <Button
+          inline
+          onClick={() => {
+            onCreateProjectClick(team);
+            close();
+          }}
+          icon={<PlusIcon aria-hidden="true" />}
+          className="grow"
+          size="sm"
+          disabled={!!team.managedBy}
+          tip={
+            team.managedBy
+              ? `This team is managed by ${startCase(team.managedBy)}. You can create new projects through the ${startCase(team.managedBy)} dashboard.`
+              : ""
+          }
+        >
+          Create Project
+        </Button>
+        <OpenInVercel team={team} />
+      </div>
     </>
   );
 }
diff --git a/npm-packages/dashboard/src/components/header/ProjectSelector/ProjectSelector.tsx b/npm-packages/dashboard/src/components/header/ProjectSelector/ProjectSelector.tsx
@@ -151,7 +151,7 @@ function ProjectSelectorPanel({
                   <CaretSortIcon
                     className={cn(
                       "text-content-primary",
-                      "min-h-[1rem] min-w-[1rem] rounded-full group-hover:bg-background-tertiary",
+                      "min-h-[1rem] min-w-[1rem] rounded-full",
                     )}
                   />
                 </Button>
diff --git a/npm-packages/dashboard/src/components/teamSettings/TeamMembers.tsx b/npm-packages/dashboard/src/components/teamSettings/TeamMembers.tsx
@@ -1,6 +1,7 @@
 import { EnvelopeClosedIcon } from "@radix-ui/react-icons";
 import { Callout } from "@ui/Callout";
 import { Loading } from "@ui/Loading";
+import { Sheet } from "@ui/Sheet";
 import { useTeamMembers, useTeamEntitlements } from "api/teams";
 import { useTeamInvites } from "api/invitations";
 import { useIsCurrentMemberTeamAdmin } from "api/roles";
@@ -9,6 +10,7 @@ import { TeamResponse } from "generatedApi";
 import startCase from "lodash/startCase";
 
 import { captureMessage } from "@sentry/nextjs";
+import { OpenInVercel } from "components/OpenInVercel";
 import { InviteMemberForm } from "./InviteMemberForm";
 import { TeamMemberList } from "./TeamMemberList";
 
@@ -31,14 +33,15 @@ export function TeamMembers({ team }: { team: TeamResponse }) {
     );
   } else if (team.managedBy) {
     inviteMembers = (
-      <Callout>
-        <div className="flex flex-col gap-2 p-2">
+      <Sheet>
+        <div className="flex items-center justify-between gap-4">
           <div>
             This team is managed by {startCase(team.managedBy)}.{" "}
             {joinInstructionsForTeamManagedBy(team.managedBy)}
           </div>
+          <OpenInVercel team={team} />
         </div>
-      </Callout>
+      </Sheet>
     );
   } else if (canAddMembers) {
     // Show invite form if you can add members.
@@ -103,7 +106,7 @@ export function TeamMembers({ team }: { team: TeamResponse }) {
 function joinInstructionsForTeamManagedBy(managedBy: string) {
   switch (managedBy) {
     case "vercel":
-      return 'Your team members may join the team by clicking "Open in Convex" when viewing the Convex integration in their Vercel dashboard.';
+      return 'Your Vercel team members may join this Convex team by clicking "Open in Convex" when viewing the Convex integration in their Vercel dashboard.';
     default:
       captureMessage(`Unknown team managed by: ${managedBy}`, "error");
       return "";
diff --git a/npm-packages/dashboard/src/components/teamSettings/TeamSSO.tsx b/npm-packages/dashboard/src/components/teamSettings/TeamSSO.tsx
@@ -24,6 +24,8 @@ import { cn } from "@ui/cn";
 import { useProfileEmails } from "api/profile";
 import Link from "next/link";
 import { LoadingTransition } from "@ui/Loading";
+import { OpenInVercel } from "components/OpenInVercel";
+import startCase from "lodash/startCase";
 
 export function TeamSSO({ team }: { team: TeamResponse }) {
   const hasAdminPermissions = useIsCurrentMemberTeamAdmin();
@@ -119,7 +121,17 @@ export function TeamSSO({ team }: { team: TeamResponse }) {
 
       {entitlements && !ssoEnabled && (
         <Callout variant="upsell">
-          SSO is not available on your plan. Upgrade your plan to use SSO.
+          {team.managedBy ? (
+            <div className="flex w-full items-center justify-between gap-4">
+              <div>
+                SSO is not available for teams managed by{" "}
+                {startCase(team.managedBy)}.
+              </div>
+              <OpenInVercel team={team} />
+            </div>
+          ) : (
+            "SSO is not available on your plan. Upgrade your plan to use SSO."
+          )}
         </Callout>
       )}
 
diff --git a/npm-packages/dashboard/src/components/teamSettings/TeamSettings.tsx b/npm-packages/dashboard/src/components/teamSettings/TeamSettings.tsx
@@ -13,7 +13,7 @@ import { Button } from "@ui/Button";
 import { ConfirmationDialog } from "@ui/ConfirmationDialog";
 import { useState } from "react";
 import startCase from "lodash/startCase";
-import { Callout } from "@ui/Callout";
+import { OpenInVercel } from "components/OpenInVercel";
 import { TeamForm } from "./TeamForm";
 
 export function TeamSettings({ team }: { team: TeamResponse }) {
@@ -36,9 +36,13 @@ export function TeamSettings({ team }: { team: TeamResponse }) {
       <Sheet>
         <h3 className="mb-4">Delete Team</h3>
         <p className="mb-4">
-          Permanently delete this team. To delete your team, you must first
-          remove all team members and delete all projects associated with the
-          team.
+          Permanently deletes this team.{" "}
+          {!team.managedBy && (
+            <>
+              To delete your team, you must first remove all team members and
+              delete all projects associated with the team.
+            </>
+          )}
         </p>
         {subscription && (
           <p className="mb-4">
@@ -48,39 +52,44 @@ export function TeamSettings({ team }: { team: TeamResponse }) {
           </p>
         )}
         {team.managedBy && (
-          <Callout className="mb-4">
-            This team is managed by {startCase(team.managedBy)}. You must delete
-            the integration in {startCase(team.managedBy)} before you can delete
-            this team.
-          </Callout>
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              This team is managed by {startCase(team.managedBy)}. You may
+              delete this Convex team by deleting your Convex integration in{" "}
+              {startCase(team.managedBy)}.
+            </div>
+            <OpenInVercel team={team} />
+          </div>
+        )}
+        {!team.managedBy && (
+          <Button
+            variant="danger"
+            onClick={() => setShowDeleteTeamModal(true)}
+            disabled={
+              !!team.managedBy ||
+              !hasAdminPermissions ||
+              !teams ||
+              teams.length === 1 ||
+              !teamMembers ||
+              teamMembers.length > 1 ||
+              !projects ||
+              projects.length > 0
+            }
+            tip={
+              !hasAdminPermissions
+                ? "You do not have permission to delete this team."
+                : teams && teams.length === 1
+                  ? "You cannot delete your last team."
+                  : teamMembers && teamMembers.length > 1
+                    ? "You must remove all other team members before deleting the team."
+                    : projects && projects.length > 0
+                      ? "You must delete all projects before deleting the team."
+                      : undefined
+            }
+          >
+            Delete Team
+          </Button>
         )}
-        <Button
-          variant="danger"
-          onClick={() => setShowDeleteTeamModal(true)}
-          disabled={
-            !!team.managedBy ||
-            !hasAdminPermissions ||
-            !teams ||
-            teams.length === 1 ||
-            !teamMembers ||
-            teamMembers.length > 1 ||
-            !projects ||
-            projects.length > 0
-          }
-          tip={
-            !hasAdminPermissions
-              ? "You do not have permission to delete this team."
-              : teams && teams.length === 1
-                ? "You cannot delete your last team."
-                : teamMembers && teamMembers.length > 1
-                  ? "You must remove all other team members before deleting the team."
-                  : projects && projects.length > 0
-                    ? "You must delete all projects before deleting the team."
-                    : undefined
-          }
-        >
-          Delete Team
-        </Button>
         {showDeleteTeamModal && (
           <ConfirmationDialog
             onClose={() => setShowDeleteTeamModal(false)}
diff --git a/npm-packages/dashboard/src/pages/t/[team]/index.tsx b/npm-packages/dashboard/src/pages/t/[team]/index.tsx
@@ -13,7 +13,7 @@ import { useProjects } from "api/projects";
 import { useCurrentTeam, useTeamEntitlements } from "api/teams";
 import { useTeamOrbSubscription } from "api/billing";
 import { useReferralState } from "api/referrals";
-import { ProjectDetails } from "generatedApi";
+import { ProjectDetails, TeamResponse } from "generatedApi";
 import Link from "next/link";
 import { ReferralsBanner } from "components/referral/ReferralsBanner";
 import { DocsGrid } from "components/projects/DocsGrid";
@@ -25,6 +25,7 @@ import { cn } from "@ui/cn";
 import { PaginationControls } from "elements/PaginationControls";
 import { usePagination } from "hooks/usePagination";
 import { EmptySection } from "@common/elements/EmptySection";
+import { OpenInVercel } from "components/OpenInVercel";
 
 export { getServerSideProps } from "lib/ssr";
 
@@ -92,7 +93,7 @@ export default withAuthenticatedPage(() => {
                   />
                 )}
 
-                <ProjectGrid projects={nonDemoProjects} />
+                <ProjectGrid projects={nonDemoProjects} team={team} />
               </div>
             )}
           </div>
@@ -103,7 +104,13 @@ export default withAuthenticatedPage(() => {
   );
 });
 
-function ProjectGrid({ projects }: { projects: ProjectDetails[] }) {
+function ProjectGrid({
+  team,
+  projects,
+}: {
+  team: TeamResponse;
+  projects: ProjectDetails[];
+}) {
   const [createProjectModal, showCreateProjectModal] = useCreateProjectModal();
   const [showAsList, setShowAsList] = useGlobalLocalStorage(
     "showProjectsAsList",
@@ -160,14 +167,17 @@ function ProjectGrid({ projects }: { projects: ProjectDetails[] }) {
             type="search"
             id="Search projects"
           />
-          <Button
-            onClick={() => showCreateProjectModal()}
-            variant="neutral"
-            size="sm"
-            icon={<PlusIcon />}
-          >
-            Create Project
-          </Button>
+          {!team.managedBy && (
+            <Button
+              onClick={() => showCreateProjectModal()}
+              variant="neutral"
+              size="sm"
+              icon={<PlusIcon />}
+            >
+              Create Project
+            </Button>
+          )}
+          <OpenInVercel team={team} />
           {paginatedProjects.length > 0 && (
             <Button
               href="https://docs.convex.dev/tutorial"
diff --git a/npm-packages/dashboard/src/pages/t/[team]/settings/billing.tsx b/npm-packages/dashboard/src/pages/t/[team]/settings/billing.tsx
@@ -19,6 +19,8 @@ import { useProfile } from "api/profile";
 import { ChevronLeftIcon } from "@radix-ui/react-icons";
 import { Loading } from "@ui/Loading";
 import { planNameMap } from "components/billing/planCards/PlanCard";
+import { OpenInVercel } from "components/OpenInVercel";
+import startCase from "lodash/startCase";
 
 export { getServerSideProps } from "lib/ssr";
 
@@ -72,6 +74,17 @@ function Billing({ team }: { team: TeamResponse }) {
         )}
         <h2>Billing</h2>
       </div>
+      {team.managedBy && (
+        <Callout className="mx-6 mb-4" variant="upsell">
+          <div className="flex w-full items-center justify-between gap-4">
+            <div>
+              This team is managed by {startCase(team.managedBy)}. You must
+              manage billing through the {startCase(team.managedBy)} dashboard.
+            </div>
+            <OpenInVercel team={team} />
+          </div>
+        </Callout>
+      )}
       <ErrorBoundary fallback={BillingErrorFallback}>
         <div className="relative min-h-0 flex-1 overflow-x-hidden">
           {!isOrbSubLoading && orbSub !== undefined ? (
