Removed old v2 paths

Author: matt-aitken

apps/webapp/app/components/ErrorDisplay.tsx

@@ -6,6 +6,7 @@ import { LinkButton } from "./primitives/Buttons";
 import { Header1 } from "./primitives/Headers";
 import { Paragraph } from "./primitives/Paragraph";
 import Spline from "@splinetool/react-spline";
+import { ReactNode } from "react";
 
 type ErrorDisplayOptions = {
   button?: {
@@ -38,7 +39,7 @@ export function RouteErrorDisplay(options?: ErrorDisplayOptions) {
 
 type DisplayOptionsProps = {
   title: string;
-  message?: string;
+  message?: ReactNode;
 } & ErrorDisplayOptions;
 
 export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -7,7 +7,6 @@ import {
   ClockIcon,
   Cog8ToothIcon,
   CreditCardIcon,
-  CursorArrowRaysIcon,
   FolderIcon,
   IdentificationIcon,
   KeyIcon,
@@ -20,6 +19,7 @@ import {
 import { UserGroupIcon, UserPlusIcon } from "@heroicons/react/24/solid";
 import { useNavigation } from "@remix-run/react";
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
+import { RunsIcon } from "~/assets/icons/RunsIcon";
 import { TaskIcon } from "~/assets/icons/TaskIcon";
 import { useFeatures } from "~/hooks/useFeatures";
 import { type MatchedOrganization } from "~/hooks/useOrganizations";
@@ -34,20 +34,10 @@ import {
   logoutPath,
   newOrganizationPath,
   newProjectPath,
-  organizationBillingPath,
-  organizationIntegrationsPath,
   organizationPath,
   organizationSettingsPath,
   organizationTeamPath,
   personalAccessTokensPath,
-  projectEnvironmentsPath,
-  projectEventsPath,
-  projectHttpEndpointsPath,
-  projectPath,
-  projectRunsPath,
-  projectSettingsPath,
-  projectSetupPath,
-  projectTriggersPath,
   v3ApiKeysPath,
   v3BatchesPath,
   v3BillingPath,
@@ -65,10 +55,7 @@ import {
 import { ImpersonationBanner } from "../ImpersonationBanner";
 import { LogoIcon } from "../LogoIcon";
 import { UserProfilePhoto } from "../UserProfilePhoto";
-import { Badge } from "../primitives/Badge";
-import { LinkButton } from "../primitives/Buttons";
-import { Header2 } from "../primitives/Headers";
-import { Paragraph } from "../primitives/Paragraph";
+import { FreePlanUsage } from "../billing/FreePlanUsage";
 import {
   Popover,
   PopoverArrowTrigger,
@@ -77,12 +64,9 @@ import {
   PopoverMenuItem,
   PopoverSectionHeader,
 } from "../primitives/Popover";
-import { TextLink } from "../primitives/TextLink";
 import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
-import { FreePlanUsage } from "../billing/FreePlanUsage";
-import { RunsIcon } from "~/assets/icons/RunsIcon";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 type SideMenuProject = Pick<MatchedProject, "id" | "name" | "slug" | "version">;
@@ -250,7 +234,7 @@ function ProjectSelector({
                   return (
                     <PopoverMenuItem
                       key={p.id}
-                      to={projectPath(organization, p)}
+                      to={v3ProjectPath(organization, p)}
                       title={
                         <div className="flex w-full items-center justify-between text-text-bright">
                           <span className="grow truncate text-left">{p.name}</span>

apps/webapp/app/routes/_app._index/route.tsx

@@ -3,7 +3,12 @@ import { prisma } from "~/db.server";
 import { getUsersInvites } from "~/models/member.server";
 import { SelectBestProjectPresenter } from "~/presenters/SelectBestProjectPresenter.server";
 import { requireUser } from "~/services/session.server";
-import { invitesPath, newOrganizationPath, newProjectPath, projectPath } from "~/utils/pathBuilder";
+import {
+  invitesPath,
+  newOrganizationPath,
+  newProjectPath,
+  v3ProjectPath,
+} from "~/utils/pathBuilder";
 
 //this loader chooses the best project to redirect you to, ideally based on the cookie
 export const loader = async ({ request }: LoaderFunctionArgs) => {
@@ -19,7 +24,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   try {
     const { project, organization } = await presenter.call({ userId: user.id, request });
     //redirect them to the most appropriate project
-    return redirect(projectPath(organization, project));
+    return redirect(v3ProjectPath(organization, project));
   } catch (e) {
     const organization = await prisma.organization.findFirst({
       where: {

apps/webapp/app/routes/_app.orgs.$organizationSlug._index/route.tsx

@@ -7,7 +7,7 @@ import { Header3 } from "~/components/primitives/Headers";
 import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { useOrganization } from "~/hooks/useOrganizations";
-import { newProjectPath, projectPath } from "~/utils/pathBuilder";
+import { newProjectPath, v3ProjectPath } from "~/utils/pathBuilder";
 
 export const meta: MetaFunction = () => {
   return [
@@ -45,7 +45,7 @@ export default function Page() {
                 <li key={project.id}>
                   <Link
                     className="border-grid-bright-dimmed flex gap-4 rounded-md border p-4 transition hover:bg-charcoal-900 "
-                    to={projectPath(organization, project)}
+                    to={v3ProjectPath(organization, project)}
                   >
                     <FolderIcon className="h-10 w-10 flex-none text-indigo-600" />
                     <div className="flex flex-col">

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam/route.tsx

@@ -1,12 +1,13 @@
 import { Outlet } from "@remix-run/react";
-import { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { redirect } from "remix-typedjson";
-import { RouteErrorDisplay } from "~/components/ErrorDisplay";
+import { json, LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
+import { ErrorDisplay, RouteErrorDisplay } from "~/components/ErrorDisplay";
+import { TextLink } from "~/components/primitives/TextLink";
 import { prisma } from "~/db.server";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { Handle } from "~/utils/handle";
-import { ProjectParamSchema, projectPath, v3ProjectPath } from "~/utils/pathBuilder";
+import { ProjectParamSchema, v3ProjectPath } from "~/utils/pathBuilder";
 
 export const loader = async ({ params }: LoaderFunctionArgs) => {
   const { organizationSlug, projectParam } = ProjectParamSchema.parse(params);
@@ -20,11 +21,9 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
     throw new Response("Project not found", { status: 404, statusText: "Project not found" });
   }
 
-  if (project.version === "V2") {
-    return redirect(projectPath({ slug: organizationSlug }, { slug: projectParam }));
-  }
-
-  return null;
+  return typedjson({
+    version: project.version,
+  });
 };
 
 export const handle: Handle = {
@@ -37,6 +36,25 @@ export const handle: Handle = {
 };
 
 export default function Project() {
+  const { version } = useTypedLoaderData<typeof loader>();
+
+  if (version === "V2") {
+    return (
+      <ErrorDisplay
+        title="Version 2 projects are no longer available"
+        message={
+          <>
+            This project is v2, which was deprecated on Jan 31 2025 after{" "}
+            <TextLink to="https://trigger.dev/blog/v2-end-of-life-announcement">
+              our announcement in August 2024
+            </TextLink>
+            .
+          </>
+        }
+      />
+    );
+  }
+
   return (
     <>
       <Outlet />

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

@@ -1,5 +1,6 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
+import { FolderIcon } from "@heroicons/react/20/solid";
 import type { ActionFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Form, useActionData, useNavigation } from "@remix-run/react";
@@ -27,7 +28,7 @@ import { requireUserId } from "~/services/session.server";
 import {
   OrganizationParamsSchema,
   organizationPath,
-  projectPath,
+  v3ProjectPath,
   selectPlanPath,
 } from "~/utils/pathBuilder";
 
@@ -110,7 +111,7 @@ export const action: ActionFunction = async ({ request, params }) => {
     });
 
     return redirectWithSuccessMessage(
-      projectPath(project.organization, project),
+      v3ProjectPath(project.organization, project),
       request,
       `${submission.value.projectName} created`
     );
@@ -143,7 +144,7 @@ export default function Page() {
     <MainCenteredContainer>
       <div>
         <FormTitle
-          LeadingIcon="folder"
+          LeadingIcon={<FolderIcon className="size-7 text-indigo-500" />}
           title="Create a new project"
           description={`This will create a new project in your "${organization.title}" organization.`}
         />

apps/webapp/app/routes/resources.$organizationSlug.subscription.v3.portal.ts

@@ -4,7 +4,7 @@ import { prisma } from "~/db.server";
 import { redirectWithErrorMessage } from "~/models/message.server";
 import { customerPortalUrl } from "~/services/platform.v3.server";
 import { requireUserId } from "~/services/session.server";
-import { OrganizationParamsSchema, usagePath } from "~/utils/pathBuilder";
+import { OrganizationParamsSchema, v3BillingPath } from "~/utils/pathBuilder";
 
 export async function loader({ request, params }: ActionFunctionArgs) {
   const userId = await requireUserId(request);
@@ -26,7 +26,7 @@ export async function loader({ request, params }: ActionFunctionArgs) {
 
   if (!org) {
     return redirectWithErrorMessage(
-      usagePath({ slug: organizationSlug }),
+      v3BillingPath({ slug: organizationSlug }),
       request,
       "Something went wrong. Please try again later."
     );
@@ -35,7 +35,7 @@ export async function loader({ request, params }: ActionFunctionArgs) {
   const result = await customerPortalUrl(org.id, organizationSlug);
   if (!result || !result.success || !result.customerPortalUrl) {
     return redirectWithErrorMessage(
-      usagePath({ slug: organizationSlug }),
+      v3BillingPath({ slug: organizationSlug }),
       request,
       "Something went wrong. Please try again later."
     );