chore: update webapp to Remix 2.0.1

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

@@ -1,16 +1,20 @@
-import { RouteMatch, useMatches } from "@remix-run/react";
+import { UIMatch, useMatches, Params } from "@remix-run/react";
 import { Fragment, ReactNode } from "react";
 import { BreadcrumbIcon } from "../primitives/BreadcrumbIcon";
+import { Handle } from "~/utils/handle";
 
-export type BreadcrumbItem = (match: RouteMatch, allMatches: RouteMatch[]) => ReactNode;
+export type BreadcrumbItem = (
+  match: UIMatch<unknown, Handle>,
+  allMatches: UIMatch<unknown, Handle>[]
+) => ReactNode;
 
 export function Breadcrumb() {
-  const matches = useMatches();
+  const matches = useMatches() as UIMatch<unknown, Handle>[];
 
   return (
     <div className="hidden items-center md:flex">
       {matches.map((match) => {
-        if (!match.handle || !match.handle.breadcrumb) return null;
+        if (!match.handle || !match.handle?.breadcrumb) return null;
 
         const breadcrumb = match.handle.breadcrumb as BreadcrumbItem;
 

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

@@ -1,4 +1,4 @@
-import { Link, RouteMatch } from "@remix-run/react";
+import { Link, UIMatch } from "@remix-run/react";
 import { useState } from "react";
 import { useJob } from "~/hooks/useJob";
 import { useOrganization } from "~/hooks/useOrganizations";
@@ -14,8 +14,9 @@ import {
   PopoverContent,
   PopoverSectionHeader,
 } from "../primitives/Popover";
+import { Handle } from "~/utils/handle";
 
-export function JobsMenu({ matches }: { matches: RouteMatch[] }) {
+export function JobsMenu({ matches }: { matches: UIMatch<unknown, Handle>[] }) {
   const [isOpen, setIsOpen] = useState(false);
   const organization = useOrganization(matches);
   const project = useProject(matches);

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

@@ -1,4 +1,4 @@
-import { RouteMatch } from "@remix-run/react";
+import { UIMatch } from "@remix-run/react";
 import { Fragment, useState } from "react";
 import simplur from "simplur";
 import { Badge } from "~/components/primitives/Badge";
@@ -12,8 +12,9 @@ import {
   PopoverMenuItem,
   PopoverSectionHeader,
 } from "../primitives/Popover";
+import { Handle } from "~/utils/handle";
 
-export function ProjectsMenu({ matches }: { matches: RouteMatch[] }) {
+export function ProjectsMenu({ matches }: { matches: UIMatch<unknown, Handle>[] }) {
   const [isOpen, setIsOpen] = useState(false);
   const organizations = useOrganizations(matches);
   const isNewOrgPage = useIsNewOrganizationPage(matches);

apps/webapp/app/components/run/TaskDetail.tsx

@@ -32,7 +32,7 @@ import { ClientOnly } from "remix-utils";
 import { Spinner } from "../primitives/Spinner";
 import type { DetailedTask } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.runs.$runParam.tasks.$taskParam/route";
 
-export function TaskDetail({ task }: { task: DetailedTask }) {
+export function TaskDetail({ task }: { task: DetailedTask & { params: {} } }) {
   const { name, description, icon, status, params, properties, output, style, attempts } = task;
 
   const startedAt = task.startedAt ? new Date(task.startedAt) : undefined;

apps/webapp/app/entry.server.tsx

@@ -1,6 +1,6 @@
 import { H } from "@highlight-run/node";
-import type { DataFunctionArgs, EntryContext, Headers } from "@remix-run/node"; // or cloudflare/deno
-import { Response } from "@remix-run/node"; // or cloudflare/deno
+import type { DataFunctionArgs, EntryContext } from "@remix-run/node"; // or cloudflare/deno
+import { createReadableStreamFromReadable } from "@remix-run/node"; // or cloudflare/deno
 import { RemixServer } from "@remix-run/react";
 import { parseAcceptLanguage } from "intl-parse-accept-language";
 import isbot from "isbot";
@@ -78,7 +78,7 @@ function serveTheBots(
           let body = new PassThrough();
           pipe(body);
           resolve(
-            new Response(body, {
+            new Response(createReadableStreamFromReadable(body), {
               status: responseStatusCode,
               headers: responseHeaders,
             })
@@ -118,7 +118,7 @@ function serveBrowsers(
           let body = new PassThrough();
           pipe(body);
           resolve(
-            new Response(body, {
+            new Response(createReadableStreamFromReadable(body), {
               status: didError ? 500 : responseStatusCode,
               headers: responseHeaders,
             })

apps/webapp/app/hooks/useEnvironments.ts

@@ -1,23 +1,24 @@
-import { RouteMatch } from "@remix-run/react";
+import { UIMatch } from "@remix-run/react";
 import { MatchedProject, useOptionalProject } from "./useProject";
+import { Handle } from "~/utils/handle";
 
 export type ProjectJobEnvironment = MatchedProject["environments"][number];
 
-export function useEnvironments(matches?: RouteMatch[]) {
+export function useEnvironments(matches?: UIMatch<unknown, Handle>[]) {
   const project = useOptionalProject(matches);
   if (!project) return;
 
   return project.environments;
 }
 
-export function useDevEnvironment(matches?: RouteMatch[]) {
+export function useDevEnvironment(matches?: UIMatch<unknown, Handle>[]) {
   const environments = useEnvironments(matches);
   if (!environments) return;
 
   return environments.find((environment) => environment.type === "DEVELOPMENT");
 }
 
-export function useProdEnvironment(matches?: RouteMatch[]) {
+export function useProdEnvironment(matches?: UIMatch<unknown, Handle>[]) {
   const environments = useEnvironments(matches);
   if (!environments) return;
 

apps/webapp/app/hooks/useIntegrationClient.tsx

@@ -1,12 +1,14 @@
-import { RouteMatch } from "@remix-run/react";
+import { UIMatch } from "@remix-run/react";
 import { UseDataFunctionReturn } from "remix-typedjson";
 import invariant from "tiny-invariant";
 import type { loader } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations_.$clientParam/route";
 import { useTypedMatchesData } from "./useTypedMatchData";
+import { Handle } from "~/utils/handle";
+import { AppData } from "~/utils/appData";
 
 export type MatchedClient = UseDataFunctionReturn<typeof loader>["client"];
 
-export function useOptionalIntegrationClient(matches?: RouteMatch[]) {
+export function useOptionalIntegrationClient(matches?: AppData[]) {
   const routeMatch = useTypedMatchesData<typeof loader>({
     id: "routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations_.$clientParam",
     matches,
@@ -15,7 +17,7 @@ export function useOptionalIntegrationClient(matches?: RouteMatch[]) {
   return routeMatch?.client;
 }
 
-export function useIntegrationClient(matches?: RouteMatch[]) {
+export function useIntegrationClient(matches?: UIMatch<unknown, Handle>[]) {
   const integration = useOptionalIntegrationClient(matches);
   invariant(integration, "Integration must be defined");
   return integration;

apps/webapp/app/hooks/useIsProjectChildPage.ts

@@ -1,6 +1,7 @@
-import { RouteMatch, useMatches } from "@remix-run/react";
+import { useMatches } from "@remix-run/react";
+import { AppData } from "~/utils/appData";
 
-export function useIsProjectChildPage(matches?: RouteMatch[]) {
+export function useIsProjectChildPage(matches?: AppData[]) {
   if (!matches) {
     matches = useMatches();
   }

apps/webapp/app/hooks/useJob.tsx

@@ -2,14 +2,16 @@ import { UseDataFunctionReturn } from "remix-typedjson";
 import invariant from "tiny-invariant";
 import type { loader } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam/route";
 import { useChanged } from "./useChanged";
-import { RouteMatch } from "@remix-run/react";
+import { UIMatch } from "@remix-run/react";
 import { useTypedMatchesData } from "./useTypedMatchData";
+import { Handle } from "~/utils/handle";
+import { AppData } from "~/utils/appData";
 
 export type MatchedJob = UseDataFunctionReturn<typeof loader>["job"];
 
 export const jobMatchId =
   "routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam";
-export function useOptionalJob(matches?: RouteMatch[]) {
+export function useOptionalJob(matches?: AppData[]) {
   const routeMatch = useTypedMatchesData<typeof loader>({
     id: jobMatchId,
     matches,
@@ -22,7 +24,7 @@ export function useOptionalJob(matches?: RouteMatch[]) {
   return routeMatch.projectJobs.find((j) => j.id === routeMatch.job.id);
 }
 
-export function useJob(matches?: RouteMatch[]) {
+export function useJob(matches?: UIMatch<unknown, Handle>[]) {
   const job = useOptionalJob(matches);
   invariant(job, "Job must be defined");
   return job;

apps/webapp/app/hooks/useJobs.tsx

@@ -1,8 +1,10 @@
 import { UseDataFunctionReturn } from "remix-typedjson";
 import invariant from "tiny-invariant";
 import type { loader } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam/route";
-import { RouteMatch } from "@remix-run/react";
+import { UIMatch } from "@remix-run/react";
 import { useTypedMatchesData } from "./useTypedMatchData";
+import { Handle } from "~/utils/handle";
+import { AppData } from "~/utils/appData";
 
 export type ProjectJob = UseDataFunctionReturn<typeof loader>["projectJobs"][number];
 
@@ -12,7 +14,7 @@ export const jobsMatchId =
 // This is only used in the JobsMenu component, which is the breadcrumb job list dropdown.
 // This dropdown is only shown once you have selected a job, so we can assume that
 // the route above has loaded and we can use the data from it.
-export function useOptionalJobs(matches?: RouteMatch[]) {
+export function useOptionalJobs(matches?: AppData[]) {
   const routeMatch = useTypedMatchesData<typeof loader>({
     id: jobsMatchId,
     matches,
@@ -21,7 +23,7 @@ export function useOptionalJobs(matches?: RouteMatch[]) {
   return routeMatch?.projectJobs;
 }
 
-export function useJobs(matches?: RouteMatch[]) {
+export function useJobs(matches?: UIMatch<unknown, Handle>[]) {
   const jobs = useOptionalJobs(matches);
   invariant(jobs, "Jobs must be defined");
   return jobs;

apps/webapp/app/hooks/useOrganizations.ts

@@ -1,29 +1,30 @@
-import { UseDataFunctionReturn, useTypedRouteLoaderData } from "remix-typedjson";
+import { UseDataFunctionReturn } from "remix-typedjson";
 import invariant from "tiny-invariant";
 import type { loader as orgLoader } from "~/routes/_app.orgs.$organizationSlug/route";
 import type { loader as appLoader } from "~/routes/_app/route";
-import { hydrateObject, useMatchesData } from "~/utils";
 import { useChanged } from "./useChanged";
-import { RouteMatch } from "@remix-run/react";
+import { UIMatch } from "@remix-run/react";
 import { useTypedMatchesData } from "./useTypedMatchData";
+import { Handle } from "~/utils/handle";
+import { AppData } from "~/utils/appData";
 
 export type MatchedOrganization = UseDataFunctionReturn<typeof appLoader>["organizations"][number];
 
-export function useOptionalOrganizations(matches?: RouteMatch[]) {
+export function useOptionalOrganizations(matches?: AppData[]) {
   const data = useTypedMatchesData<typeof appLoader>({
     id: "routes/_app",
     matches,
   });
   return data?.organizations;
 }
 
-export function useOrganizations(matches?: RouteMatch[]) {
+export function useOrganizations(matches?: UIMatch<unknown, Handle>[]) {
   const orgs = useOptionalOrganizations(matches);
   invariant(orgs, "No organizations found in loader.");
   return orgs;
 }
 
-export function useOptionalOrganization(matches?: RouteMatch[]) {
+export function useOptionalOrganization(matches?: AppData[]) {
   const orgs = useOptionalOrganizations(matches);
   const org = useTypedMatchesData<typeof orgLoader>({
     id: "routes/_app.orgs.$organizationSlug",
@@ -37,13 +38,13 @@ export function useOptionalOrganization(matches?: RouteMatch[]) {
   return orgs.find((o) => o.id === org.organization.id);
 }
 
-export function useOrganization(matches?: RouteMatch[]) {
+export function useOrganization(matches?: UIMatch<unknown, Handle>[]) {
   const org = useOptionalOrganization(matches);
   invariant(org, "No organization found in loader.");
   return org;
 }
 
-export function useIsNewOrganizationPage(matches?: RouteMatch[]): boolean {
+export function useIsNewOrganizationPage(matches?: UIMatch<unknown, Handle>[]): boolean {
   const data = useTypedMatchesData<any>({
     id: "routes/_app.orgs.new",
     matches,

apps/webapp/app/hooks/useProject.tsx

@@ -1,15 +1,17 @@
-import { RouteMatch } from "@remix-run/react";
+import { UIMatch } from "@remix-run/react";
 import { UseDataFunctionReturn } from "remix-typedjson";
 import invariant from "tiny-invariant";
 import type { loader } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam/route";
 import { useChanged } from "./useChanged";
 import { useTypedMatchesData } from "./useTypedMatchData";
+import { Handle } from "~/utils/handle";
+import { AppData } from "~/utils/appData";
 
 export type MatchedProject = UseDataFunctionReturn<typeof loader>["project"];
 
 export const projectMatchId = "routes/_app.orgs.$organizationSlug.projects.$projectParam";
 
-export function useOptionalProject(matches?: RouteMatch[]) {
+export function useOptionalProject(matches?: AppData) {
   const routeMatch = useTypedMatchesData<typeof loader>({
     id: projectMatchId,
     matches,
@@ -18,7 +20,7 @@ export function useOptionalProject(matches?: RouteMatch[]) {
   return routeMatch?.project;
 }
 
-export function useProject(matches?: RouteMatch[]) {
+export function useProject(matches?: UIMatch<unknown, Handle>[]) {
   const project = useOptionalProject(matches);
   invariant(project, "Project must be defined");
   return project;

apps/webapp/app/hooks/useRun.ts

@@ -1,13 +1,15 @@
-import { RouteMatch } from "@remix-run/react";
+import { UIMatch } from "@remix-run/react";
 import { UseDataFunctionReturn } from "remix-typedjson";
 import invariant from "tiny-invariant";
 import type { loader as runLoader } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.runs.$runParam/route";
 import { useOptionalProject } from "./useProject";
 import { useTypedMatchesData } from "./useTypedMatchData";
+import { Handle } from "~/utils/handle";
+import { AppData } from "~/utils/appData";
 
 export type MatchedRun = UseDataFunctionReturn<typeof runLoader>["run"];
 
-export function useOptionalRun(matches?: RouteMatch[]) {
+export function useOptionalRun(matches?: AppData[]) {
   const project = useOptionalProject(matches);
   const routeMatch = useTypedMatchesData<typeof runLoader>({
     id: "routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.runs.$runParam",
@@ -21,7 +23,7 @@ export function useOptionalRun(matches?: RouteMatch[]) {
   return routeMatch.run;
 }
 
-export function useRun(matches?: RouteMatch[]) {
+export function useRun(matches?: UIMatch<unknown, Handle>[]) {
   const run = useOptionalRun(matches);
   invariant(run, "Run must be present");
   return run;

apps/webapp/app/hooks/useTypedMatchData.ts

@@ -1,14 +1,14 @@
-import { RouteMatch, useMatches } from "@remix-run/react";
+import { UIMatch, useMatches } from "@remix-run/react";
 import { RemixSerializedType, UseDataFunctionReturn, deserializeRemix } from "remix-typedjson";
-
-type AppData = any;
+import { Handle } from "~/utils/handle";
+import { AppData } from "~/utils/appData";
 
 function useTypedDataFromMatches<T = AppData>({
   id,
   matches,
 }: {
   id: string;
-  matches: RouteMatch[];
+  matches: UIMatch<T, Handle>[];
 }): UseDataFunctionReturn<T> | undefined {
   const match = matches.find((m) => m.id === id);
   return useTypedMatchData<T>(match);
@@ -19,17 +19,17 @@ export function useTypedMatchesData<T = AppData>({
   matches,
 }: {
   id: string;
-  matches?: RouteMatch[];
+  matches?: UIMatch<T, Handle>[];
 }): UseDataFunctionReturn<T> | undefined {
   if (!matches) {
-    matches = useMatches();
+    matches = useMatches() as UIMatch<T, Handle>[];
   }
 
   return useTypedDataFromMatches<T>({ id, matches });
 }
 
 export function useTypedMatchData<T = AppData>(
-  match: RouteMatch | undefined
+  match: UIMatch<T, Handle> | undefined
 ): UseDataFunctionReturn<T> | undefined {
   if (!match) {
     return undefined;

apps/webapp/app/hooks/useUser.ts

@@ -1,11 +1,12 @@
 import type { User } from "~/models/user.server";
-import { useMatchesData } from "~/utils";
 import { useChanged } from "./useChanged";
-import { RouteMatch } from "@remix-run/react";
+import { UIMatch } from "@remix-run/react";
 import { useTypedMatchesData } from "./useTypedMatchData";
 import { loader } from "~/root";
+import { AppData } from "~/utils/appData";
+import { Handle } from "~/utils/handle";
 
-export function useOptionalUser(matches?: RouteMatch[]): User | undefined {
+export function useOptionalUser(matches?: AppData[]): User | undefined {
   const routeMatch = useTypedMatchesData<typeof loader>({
     id: "root",
     matches,
@@ -14,7 +15,7 @@ export function useOptionalUser(matches?: RouteMatch[]): User | undefined {
   return routeMatch?.user ?? undefined;
 }
 
-export function useUser(matches?: RouteMatch[]): User {
+export function useUser(matches?: UIMatch<unknown, Handle>[]): User {
   const maybeUser = useOptionalUser(matches);
   if (!maybeUser) {
     throw new Error(