Fix webapp type errors

Author: ericallam

apps/webapp/app/routes/api.v1.integrations.$integrationSlug.connections.$connectionId.ts

@@ -33,7 +33,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
       id: parsedParams.data.connectionId,
       integration: {
         slug: parsedParams.data.integrationSlug,
-        organization: authenticatedEnv.organization,
+        organizationId: authenticatedEnv.organization.id,
       },
     },
     include: {

apps/webapp/app/routes/api.v1.projects.$projectRef.runs.ts

@@ -1,62 +1,36 @@
-import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { json } from "@remix-run/server-runtime";
 import { z } from "zod";
-import { ValidationError } from "zod-validation-error";
 import { findProjectByRef } from "~/models/project.server";
-import { ApiRunListPresenter } from "~/presenters/v3/ApiRunListPresenter.server";
-import { authenticateApiRequestWithPersonalAccessToken } from "~/services/personalAccessToken.server";
-import { apiCors } from "~/utils/apiCors";
+import {
+  ApiRunListPresenter,
+  ApiRunListSearchParams,
+} from "~/presenters/v3/ApiRunListPresenter.server";
+import { createLoaderPATApiRoute } from "~/services/routeBuiilders/apiBuilder.server";
 
 const ParamsSchema = z.object({
   projectRef: z.string(),
 });
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
-  if (request.method.toUpperCase() === "OPTIONS") {
-    return apiCors(request, json({}));
-  }
-
-  const authenticationResult = await authenticateApiRequestWithPersonalAccessToken(request);
-
-  if (!authenticationResult) {
-    return apiCors(request, json({ error: "Invalid or Missing API key" }, { status: 401 }));
-  }
-
-  const $params = ParamsSchema.safeParse(params);
-
-  if (!$params.success) {
-    return json({ error: "Invalid params" }, { status: 400 });
-  }
-
-  const project = await findProjectByRef($params.data.projectRef, authenticationResult.userId);
-
-  if (!project) {
-    return json({ error: "Project not found" }, { status: 404 });
-  }
-
-  const url = new URL(request.url);
-
-  const presenter = new ApiRunListPresenter();
+export const loader = createLoaderPATApiRoute(
+  {
+    params: ParamsSchema,
+    searchParams: ApiRunListSearchParams,
+    corsStrategy: "all",
+  },
+  async ({ searchParams, params, authentication }) => {
+    const project = await findProjectByRef(params.projectRef, authentication.userId);
+
+    if (!project) {
+      return json({ error: "Project not found" }, { status: 404 });
+    }
 
-  try {
-    const result = await presenter.call(project, url.searchParams);
+    const presenter = new ApiRunListPresenter();
+    const result = await presenter.call(project, searchParams);
 
     if (!result) {
-      return apiCors(request, json({ data: [] }));
+      return json({ data: [] });
     }
 
-    return apiCors(request, json(result));
-  } catch (error) {
-    if (error instanceof ValidationError) {
-      return apiCors(
-        request,
-        json({ error: "Query Error", details: error.details }, { status: 400 })
-      );
-    } else {
-      return apiCors(
-        request,
-        json({ error: error instanceof Error ? error.message : String(error) }, { status: 400 })
-      );
-    }
+    return json(result);
   }
-}
+);

apps/webapp/app/routes/api.v1.runs.$runParam.reschedule.ts

@@ -62,11 +62,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
     }
 
     const presenter = new ApiRetrieveRunPresenter();
-    const result = await presenter.call(
-      updatedRun.friendlyId,
-      authenticationResult.environment,
-      true
-    );
+    const result = await presenter.call(updatedRun.friendlyId, authenticationResult.environment);
 
     if (!result) {
       return json({ error: "Run not found" }, { status: 404 });

apps/webapp/app/services/routeBuiilders/apiBuilder.server.ts

@@ -9,8 +9,12 @@ import {
   checkAuthorization,
 } from "../authorization.server";
 import { logger } from "../logger.server";
+import {
+  authenticateApiRequestWithPersonalAccessToken,
+  PersonalAccessTokenAuthenticationResult,
+} from "../personalAccessToken.server";
 
-type RouteBuilderOptions<
+type ApiKeyRouteBuilderOptions<
   TParamsSchema extends z.AnyZodObject | undefined = undefined,
   TSearchParamsSchema extends z.AnyZodObject | undefined = undefined
 > = {
@@ -30,7 +34,7 @@ type RouteBuilderOptions<
   };
 };
 
-type HandlerFunction<
+type ApiKeyHandlerFunction<
   TParamsSchema extends z.AnyZodObject | undefined,
   TSearchParamsSchema extends z.AnyZodObject | undefined
 > = (args: {
@@ -46,8 +50,8 @@ export function createLoaderApiRoute<
   TParamsSchema extends z.AnyZodObject | undefined = undefined,
   TSearchParamsSchema extends z.AnyZodObject | undefined = undefined
 >(
-  options: RouteBuilderOptions<TParamsSchema, TSearchParamsSchema>,
-  handler: HandlerFunction<TParamsSchema, TSearchParamsSchema>
+  options: ApiKeyRouteBuilderOptions<TParamsSchema, TSearchParamsSchema>,
+  handler: ApiKeyHandlerFunction<TParamsSchema, TSearchParamsSchema>
 ) {
   return async function loader({ request, params }: LoaderFunctionArgs) {
     const {
@@ -147,6 +151,110 @@ export function createLoaderApiRoute<
   };
 }
 
+type PATRouteBuilderOptions<
+  TParamsSchema extends z.AnyZodObject | undefined = undefined,
+  TSearchParamsSchema extends z.AnyZodObject | undefined = undefined
+> = {
+  params?: TParamsSchema;
+  searchParams?: TSearchParamsSchema;
+  corsStrategy?: "all" | "none";
+};
+
+type PATHandlerFunction<
+  TParamsSchema extends z.AnyZodObject | undefined,
+  TSearchParamsSchema extends z.AnyZodObject | undefined
+> = (args: {
+  params: TParamsSchema extends z.AnyZodObject ? z.infer<TParamsSchema> : undefined;
+  searchParams: TSearchParamsSchema extends z.AnyZodObject
+    ? z.infer<TSearchParamsSchema>
+    : undefined;
+  authentication: PersonalAccessTokenAuthenticationResult;
+  request: Request;
+}) => Promise<Response>;
+
+export function createLoaderPATApiRoute<
+  TParamsSchema extends z.AnyZodObject | undefined = undefined,
+  TSearchParamsSchema extends z.AnyZodObject | undefined = undefined
+>(
+  options: PATRouteBuilderOptions<TParamsSchema, TSearchParamsSchema>,
+  handler: PATHandlerFunction<TParamsSchema, TSearchParamsSchema>
+) {
+  return async function loader({ request, params }: LoaderFunctionArgs) {
+    const {
+      params: paramsSchema,
+      searchParams: searchParamsSchema,
+      corsStrategy = "none",
+    } = options;
+
+    if (corsStrategy !== "none" && request.method.toUpperCase() === "OPTIONS") {
+      return apiCors(request, json({}));
+    }
+
+    const authenticationResult = await authenticateApiRequestWithPersonalAccessToken(request);
+
+    if (!authenticationResult) {
+      return wrapResponse(
+        request,
+        json({ error: "Invalid or Missing API key" }, { status: 401 }),
+        corsStrategy !== "none"
+      );
+    }
+
+    let parsedParams: any = undefined;
+    if (paramsSchema) {
+      const parsed = paramsSchema.safeParse(params);
+      if (!parsed.success) {
+        return wrapResponse(
+          request,
+          json(
+            { error: "Params Error", details: fromZodError(parsed.error).details },
+            { status: 400 }
+          ),
+          corsStrategy !== "none"
+        );
+      }
+      parsedParams = parsed.data;
+    }
+
+    let parsedSearchParams: any = undefined;
+    if (searchParamsSchema) {
+      const searchParams = Object.fromEntries(new URL(request.url).searchParams);
+      const parsed = searchParamsSchema.safeParse(searchParams);
+      if (!parsed.success) {
+        return wrapResponse(
+          request,
+          json(
+            { error: "Query Error", details: fromZodError(parsed.error).details },
+            { status: 400 }
+          ),
+          corsStrategy !== "none"
+        );
+      }
+      parsedSearchParams = parsed.data;
+    }
+
+    try {
+      const result = await handler({
+        params: parsedParams,
+        searchParams: parsedSearchParams,
+        authentication: authenticationResult,
+        request,
+      });
+      return wrapResponse(request, result, corsStrategy !== "none");
+    } catch (error) {
+      console.error("Error in API route:", error);
+      if (error instanceof Response) {
+        return wrapResponse(request, error, corsStrategy !== "none");
+      }
+      return wrapResponse(
+        request,
+        json({ error: "Internal Server Error" }, { status: 500 }),
+        corsStrategy !== "none"
+      );
+    }
+  };
+}
+
 function wrapResponse(request: Request, response: Response, useCors: boolean) {
   return useCors ? apiCors(request, response) : response;
 }

apps/webapp/tsconfig.json

@@ -7,7 +7,7 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "module": "preserve",
+    "module": "esnext",
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "target": "ES2019",