Limit project count and display a rich error toast (with title and button now)

Author: matt-aitken

apps/webapp/app/components/primitives/Toast.tsx

@@ -1,12 +1,17 @@
-import { ExclamationCircleIcon, XMarkIcon } from "@heroicons/react/20/solid";
+import { EnvelopeIcon, ExclamationCircleIcon, XMarkIcon } from "@heroicons/react/20/solid";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import { Toaster, toast } from "sonner";
-
 import { useTypedLoaderData } from "remix-typedjson";
-import { loader } from "~/root";
+import { type loader } from "~/root";
 import { useEffect } from "react";
 import { Paragraph } from "./Paragraph";
 import { cn } from "~/utils/cn";
+import { type ToastMessageAction } from "~/models/message.server";
+import { Header2, Header3 } from "./Headers";
+import { Button, LinkButton } from "./Buttons";
+import { Feedback } from "../Feedback";
+import assertNever from "assert-never";
+import { assertExhaustive } from "@trigger.dev/core";
 
 const defaultToastDuration = 5000;
 const permanentToastDuration = 60 * 60 * 24 * 1000;
@@ -19,9 +24,22 @@ export function Toast() {
     }
     const { message, type, options } = toastMessage;
 
-    toast.custom((t) => <ToastUI variant={type} message={message} t={t as string} />, {
-      duration: options.ephemeral ? defaultToastDuration : permanentToastDuration,
-    });
+    const ephemeral = options.action ? false : options.ephemeral;
+
+    toast.custom(
+      (t) => (
+        <ToastUI
+          variant={type}
+          message={message}
+          t={t as string}
+          title={options.title}
+          action={options.action}
+        />
+      ),
+      {
+        duration: ephemeral ? defaultToastDuration : permanentToastDuration,
+      }
+    );
   }, [toastMessage]);
 
   return <Toaster />;
@@ -32,11 +50,15 @@ export function ToastUI({
   message,
   t,
   toastWidth = 356, // Default width, matches what sonner provides by default
+  title,
+  action,
 }: {
   variant: "error" | "success";
   message: string;
   t: string;
   toastWidth?: string | number;
+  title?: string;
+  action?: ToastMessageAction;
 }) {
   return (
     <div
@@ -51,11 +73,17 @@ export function ToastUI({
     >
       <div className="flex w-full items-start gap-2 rounded-lg p-3">
         {variant === "success" ? (
-          <CheckCircleIcon className="mt-1 size-6 min-w-6 text-success" />
+          <CheckCircleIcon className="mt-1 size-4 min-w-4 text-success" />
         ) : (
-          <ExclamationCircleIcon className="mt-1 size-6 min-w-6 text-error" />
+          <ExclamationCircleIcon className="mt-1 size-4 min-w-4 text-error" />
         )}
-        <Paragraph className="py-1 text-text-bright">{message}</Paragraph>
+        <div className="flex flex-col">
+          {title && <Header2 className="pt-1">{title}</Header2>}
+          <Paragraph variant="small/dimmed" className="py-1">
+            {message}
+          </Paragraph>
+          <Action action={action} toastId={t} />
+        </div>
         <button
           className="hover:bg-midnight-800 ms-auto rounded p-2 text-text-dimmed transition hover:text-text-bright"
           onClick={() => toast.dismiss(t)}
@@ -66,3 +94,38 @@ export function ToastUI({
     </div>
   );
 }
+
+function Action({ action, toastId }: { action?: ToastMessageAction; toastId: string }) {
+  if (!action) return null;
+
+  switch (action.action.type) {
+    case "link": {
+      return (
+        <LinkButton variant={action.variant ?? "secondary/small"} to={action.action.path}>
+          {action.label}
+        </LinkButton>
+      );
+    }
+    case "help": {
+      return (
+        <Feedback
+          button={
+            <Button
+              variant={action.variant ?? "secondary/small"}
+              LeadingIcon={EnvelopeIcon}
+              onClick={(e) => {
+                e.preventDefault();
+                toast.dismiss(toastId);
+              }}
+            >
+              {action.label}
+            </Button>
+          }
+        />
+      );
+    }
+    default: {
+      return null;
+    }
+  }
+}

apps/webapp/app/models/message.server.ts

@@ -1,17 +1,35 @@
-import { json, Session } from "@remix-run/node";
-import { createCookieSessionStorage } from "@remix-run/node";
+import { json, createCookieSessionStorage, type Session } from "@remix-run/node";
 import { redirect, typedjson } from "remix-typedjson";
+import { ButtonVariant } from "~/components/primitives/Buttons";
 import { env } from "~/env.server";
+import { type FeedbackType } from "~/routes/resources.feedback";
 
 export type ToastMessage = {
   message: string;
   type: "success" | "error";
   options: Required<ToastMessageOptions>;
 };
 
+export type ToastMessageAction = {
+  label: string;
+  variant?: ButtonVariant;
+  action:
+    | {
+        type: "link";
+        path: string;
+      }
+    | {
+        type: "help";
+        feedbackType: FeedbackType;
+      };
+};
+
 export type ToastMessageOptions = {
+  title?: string;
   /** Ephemeral means it disappears after a delay, defaults to true */
   ephemeral?: boolean;
+  /** This display a button and make it not ephemeral, unless ephemeral is explicitlyset to false */
+  action?: ToastMessageAction;
 };
 
 const ONE_YEAR = 1000 * 60 * 60 * 24 * 365;
@@ -36,6 +54,7 @@ export function setSuccessMessage(
     message,
     type: "success",
     options: {
+      ...options,
       ephemeral: options?.ephemeral ?? true,
     },
   } as ToastMessage);
@@ -46,6 +65,7 @@ export function setErrorMessage(session: Session, message: string, options?: Toa
     message,
     type: "error",
     options: {
+      ...options,
       ephemeral: options?.ephemeral ?? true,
     },
   } as ToastMessage);

apps/webapp/app/models/project.server.ts

@@ -16,12 +16,26 @@ type Options = {
   version: "v2" | "v3";
 };
 
+export class ExceededProjectLimitError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "ExceededProjectLimitError";
+  }
+}
+
 export async function createProject(
   { organizationSlug, name, userId, version }: Options,
   attemptCount = 0
 ): Promise<Project & { organization: Organization }> {
   //check the user has permissions to do this
   const organization = await prisma.organization.findFirst({
+    select: {
+      id: true,
+      slug: true,
+      v3Enabled: true,
+      maximumConcurrencyLimit: true,
+      maximumProjectCount: true,
+    },
     where: {
       slug: organizationSlug,
       members: { some: { userId } },
@@ -40,6 +54,19 @@ export async function createProject(
     }
   }
 
+  const projectCount = await prisma.project.count({
+    where: {
+      organizationId: organization.id,
+      deletedAt: null,
+    },
+  });
+
+  if (projectCount >= organization.maximumProjectCount) {
+    throw new ExceededProjectLimitError(
+      `Organization ${organization.slug} has reached the maximum number of projects (${organization.maximumProjectCount}). You can request more by contacting help in the bottom-left.`
+    );
+  }
+
   //ensure the slug is globally unique
   const uniqueProjectSlug = `${slug(name)}-${nanoid(4)}`;
   const projectWithSameSlug = await prisma.project.findFirst({

apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx

@@ -21,10 +21,11 @@ import { Label } from "~/components/primitives/Label";
 import { ButtonSpinner } from "~/components/primitives/Spinner";
 import { prisma } from "~/db.server";
 import { featuresForRequest } from "~/features.server";
-import { redirectWithSuccessMessage } from "~/models/message.server";
-import { createProject } from "~/models/project.server";
+import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
+import { createProject, ExceededProjectLimitError } from "~/models/project.server";
 import { requireUserId } from "~/services/session.server";
 import {
+  newProjectPath,
   OrganizationParamsSchema,
   organizationPath,
   selectPlanPath,
@@ -114,8 +115,29 @@ export const action: ActionFunction = async ({ request, params }) => {
       request,
       `${submission.value.projectName} created`
     );
-  } catch (error: any) {
-    return json({ errors: { body: error.message } }, { status: 400 });
+  } catch (error) {
+    if (error instanceof ExceededProjectLimitError) {
+      return redirectWithErrorMessage(
+        newProjectPath({ slug: organizationSlug }),
+        request,
+        error.message,
+        {
+          title: "Failed to create project",
+          action: {
+            label: "Request more projects",
+            variant: "secondary/small",
+            action: { type: "help", feedbackType: "help" },
+          },
+        }
+      );
+    }
+
+    return redirectWithErrorMessage(
+      newProjectPath({ slug: organizationSlug }),
+      request,
+      error instanceof Error ? error.message : "Something went wrong",
+      { ephemeral: false }
+    );
   }
 };
 

apps/webapp/app/routes/api.v1.orgs.$orgParam.projects.ts

@@ -4,6 +4,7 @@ import {
   CreateProjectRequestBody,
   GetProjectResponseBody,
   GetProjectsResponseBody,
+  tryCatch,
 } from "@trigger.dev/core/v3";
 import { z } from "zod";
 import { prisma } from "~/db.server";
@@ -99,12 +100,18 @@ export async function action({ request, params }: ActionFunctionArgs) {
     return json({ error: "Invalid request body" }, { status: 400 });
   }
 
-  const project = await createProject({
-    organizationSlug: organization.slug,
-    name: parsedBody.data.name,
-    userId: authenticationResult.userId,
-    version: "v3",
-  });
+  const [error, project] = await tryCatch(
+    createProject({
+      organizationSlug: organization.slug,
+      name: parsedBody.data.name,
+      userId: authenticationResult.userId,
+      version: "v3",
+    })
+  );
+
+  if (error) {
+    return json({ error: error.message }, { status: 400 });
+  }
 
   const result: GetProjectResponseBody = {
     id: project.id,

apps/webapp/app/services/platform.v3.server.ts

@@ -521,7 +521,10 @@ export async function getEntitlement(
   }
 }
 
-export async function projectCreated(organization: Organization, project: Project) {
+export async function projectCreated(
+  organization: Pick<Organization, "id" | "maximumConcurrencyLimit">,
+  project: Project
+) {
   if (!isCloud()) {
     await createEnvironment({ organization, project, type: "STAGING" });
     await createEnvironment({