Add members page to dashboard (#2459)

Author: zachkirsch

packages/fern-dashboard/next.config.ts

@@ -9,6 +9,7 @@ const nextConfig: NextConfig = {
      * pnpm list --filter=@fern-dashboard/ui --only-projects --prod --recursive --depth=Infinity --json | jq -r '[.. | objects | select(.version | .!=null) | select(.version | startswith("link:")) | .from] | unique'
      */
     "@fern-api/fdr-sdk",
+    "@fern-ui/loadable",
   ],
   experimental: {
     optimizePackageImports: [],
@@ -31,6 +32,9 @@ const nextConfig: NextConfig = {
 
   // vercel chokes on monorepo compilation and we run compile before building
   typescript: { ignoreBuildErrors: true },
+
+  // so it doesn't cover the theme toggle
+  devIndicators: { position: "bottom-right" },
 };
 
 export default nextConfig;

packages/fern-dashboard/package.json

@@ -30,28 +30,31 @@
     "@auth0/nextjs-auth0": "^4.1.0",
     "@aws-sdk/client-s3": "^3.744.0",
     "@fern-api/fdr-sdk": "workspace:*",
-    "@fern-api/venus-api-sdk": "^0.10.1-5-ged06d22",
+    "@fern-api/venus-api-sdk": "^0.13.4-3-g1fe7ae7",
+    "@fern-ui/loadable": "workspace:*",
     "@heroicons/react": "^2.2.0",
+    "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
     "@sparticuz/chromium": "^133.0.0",
+    "@tanstack/react-query": "^5.71.1",
+    "@tanstack/react-query-devtools": "^5.71.1",
     "auth0": "^4.20.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.460.0",
     "next": "15.3.0-canary.1",
     "next-themes": "^0.4.4",
-    "node-cache": "^5.1.2",
     "puppeteer-core": "^24.4.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "sharp": "^0.33.5",
+    "sonner": "^1.5.0",
     "tailwind-merge": "^3.0.1",
-    "tailwindcss-animate": "^1.0.7",
-    "zustand": "^5.0.2"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@fern-platform/configs": "workspace:*",

packages/fern-dashboard/src/app/actions/AsyncCache.tsx

@@ -0,0 +1 @@
+Server actions are for mutations

packages/fern-dashboard/src/app/actions/README.md

@@ -1,24 +1,86 @@
 "use server";
 
-import { getAuth0ManagementClient, getCurrentSession } from "./auth0";
+import { User } from "@auth0/nextjs-auth0/types";
 
-export async function createPersonalProject() {
+import { FernVenusApi, FernVenusApiClient } from "@fern-api/venus-api-sdk";
+import { APIResponse } from "@fern-api/venus-api-sdk/core";
+
+import { getCurrentSession } from "../services/auth0/getCurrentSession";
+import { Auth0OrgID, Auth0UserID } from "../services/auth0/types";
+import { getVenusClient } from "../services/venus/getVenusClient";
+
+export async function createPersonalProject(): Promise<Auth0OrgID> {
   const { session, userId } = await getCurrentSession();
+  const venus = getVenusClient({ token: session.tokenSet.accessToken });
 
-  const { data: organization } =
-    await getAuth0ManagementClient().organizations.create({
-      name: `${userId.replace("|", "-")}-personal-project`,
-      display_name: `${session.user.name}'s Personal Project`,
-      enabled_connections: [{ connection_id: "con_Z6Dd06NADtkpPpLZ" }],
-      metadata: {
-        isPersonalProject: "true",
-      },
-    });
+  const orgId = await createPersonalProjectInVenus({
+    userId,
+    userName: getUserName(session.user),
+    venus,
+  });
+
+  return Auth0OrgID(orgId);
+}
+
+async function createPersonalProjectInVenus({
+  userId,
+  userName,
+  venus,
+}: {
+  userId: Auth0UserID;
+  userName: string | undefined;
+  venus: FernVenusApiClient;
+}) {
+  let createOrgResponse: APIResponse<
+    FernVenusApi.CreateOrganizationResponse,
+    FernVenusApi.organization.create.Error
+  >;
+  let attempt = 0;
 
-  await getAuth0ManagementClient().organizations.addMembers(
-    { id: organization.id },
-    { members: [userId] }
+  do {
+    createOrgResponse = await venus.organization.create({
+      organizationId: FernVenusApi.OrganizationId(
+        getPersonalProjectOrgId({ userId, userName, attempt: attempt++ })
+      ),
+      enableGithubConnection: true,
+    });
+  } while (
+    !createOrgResponse.ok &&
+    createOrgResponse.error.error === "OrganizationAlreadyExistsError"
   );
 
-  return organization.id;
+  if (!createOrgResponse.ok) {
+    console.error("Failed to create organization", createOrgResponse.error);
+    throw new Error("Failed to create organization");
+  }
+
+  return createOrgResponse.body.organizationId;
+}
+
+function getPersonalProjectOrgId({
+  userId,
+  userName,
+  attempt,
+}: {
+  userId: Auth0UserID;
+  userName: string | undefined;
+  attempt: number;
+}) {
+  let orgId = `${userName ?? userId}-personal-project`
+    .replaceAll(" ", "-")
+    .toLowerCase();
+  if (attempt > 0) {
+    orgId += `-${attempt}`;
+  }
+  return orgId;
+}
+
+function getUserName(user: User) {
+  if (user.name != null) {
+    return user.name;
+  }
+  if (user.given_name != null && user.family_name != null) {
+    return `${user.given_name} ${user.family_name}`;
+  }
+  return user.given_name ?? user.family_name;
 }

packages/fern-dashboard/src/app/actions/auth0.ts

@@ -0,0 +1,46 @@
+"use server";
+
+import { getAuth0ManagementClient } from "../services/auth0/getAuth0ManagementClient";
+import { getCurrentSession } from "../services/auth0/getCurrentSession";
+import { getOrgMembers } from "../services/auth0/helpers";
+import { Auth0OrgID } from "../services/auth0/types";
+
+/* eslint-disable turbo/no-undeclared-env-vars */
+
+export async function inviteUserToOrg({
+  orgId,
+  inviteeEmail,
+}: {
+  // include orgId on the request to avoid race conditions if the org is
+  // changed, i.e. ensure that we are adding the org that the user was looking
+  // at on the frontend
+  orgId: Auth0OrgID;
+  inviteeEmail: string;
+}) {
+  const auth0 = getAuth0ManagementClient();
+  const { session, userId } = await getCurrentSession();
+
+  const orgMembers = await getOrgMembers(orgId);
+  if (!orgMembers.some((member) => member.user_id === userId)) {
+    throw new Error(`User ${userId} is not in org ${orgId}`);
+  }
+
+  await auth0.organizations.createInvitation(
+    { id: orgId },
+    {
+      inviter: { name: session.user.name ?? "" },
+      invitee: { email: inviteeEmail },
+      client_id: getAuth0ClientId(),
+      send_invitation_email: true,
+    }
+  );
+}
+
+function getAuth0ClientId() {
+  if (process.env.AUTH0_CLIENT_ID == null) {
+    throw new Error(
+      "AUTH0_CLIENT_ID is not defined in the current environment"
+    );
+  }
+  return process.env.AUTH0_CLIENT_ID;
+}

packages/fern-dashboard/src/app/actions/createPersonalProject.ts

@@ -0,0 +1,17 @@
+"use server";
+
+import { getAuth0ManagementClient } from "../services/auth0/getAuth0ManagementClient";
+import { Auth0OrgID } from "../services/auth0/types";
+
+export async function rescindInvitation({
+  orgId,
+  invitationId,
+}: {
+  orgId: Auth0OrgID;
+  invitationId: string;
+}) {
+  await getAuth0ManagementClient().organizations.deleteInvitation({
+    id: orgId,
+    invitation_id: invitationId,
+  });
+}