Fix for RunsTable on the overview page 404ing

apps/webapp/app/components/runs/RunsTable.tsx

@@ -2,7 +2,7 @@ import { BeakerIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
 import { Link } from "@remix-run/react";
 import classNames from "classnames";
 import humanizeDuration from "humanize-duration";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { WorkflowRunListPresenter } from "~/models/workflowRunListPresenter.server";
 import { dateDifference, formatDateTime } from "~/utils";
 import { runStatusIcon, runStatusLabel } from "./runStatus";
@@ -14,10 +14,12 @@ export function RunsTable({
   total,
   hasFilters,
   runs,
+  basePath,
 }: {
   total: number;
   hasFilters: boolean;
   runs: Awaited<ReturnType<WorkflowRunListPresenter["data"]>>["runs"];
+  basePath?: string;
 }) {
   return (
     <table className="w-full divide-y divide-slate-850">
@@ -53,37 +55,42 @@ export function RunsTable({
             <NoRuns title="No runs match your filters" />
           </BlankRow>
         ) : (
-          runs.map((run) => (
-            <tr key={run.id} className="group w-full">
-              <Cell to={run.id} alignment="left">
-                {run.startedAt ? formatDateTime(run.startedAt, "long") : "–"}
-              </Cell>
-              <Cell to={run.id} alignment="left">
-                {run.id}
-              </Cell>
-              <Cell to={run.id} alignment="left">
-                <span className="flex items-center gap-1">
-                  {runStatusIcon(run.status, "small")}
-                  {runStatusLabel(run.status)}
-                </span>
-              </Cell>
-              <Cell to={run.id} alignment="left">
-                {run.finishedAt ? formatDateTime(run.finishedAt, "long") : "–"}
-              </Cell>
-              <Cell to={run.id}>
-                {run.startedAt && run.finishedAt
-                  ? humanizeDuration(
-                      dateDifference(run.startedAt, run.finishedAt)
-                    )
-                  : "–"}
-              </Cell>
-              <Cell to={run.id}>
-                {run.isTest && (
-                  <BeakerIcon className="h-5 w-5 text-green-500" />
-                )}
-              </Cell>
-            </tr>
-          ))
+          runs.map((run) => {
+            const path = basePath ? `${basePath}/${run.id}` : run.id;
+            return (
+              <tr key={run.id} className="group w-full">
+                <Cell to={path} alignment="left">
+                  {run.startedAt ? formatDateTime(run.startedAt, "long") : "–"}
+                </Cell>
+                <Cell to={path} alignment="left">
+                  {run.id}
+                </Cell>
+                <Cell to={path} alignment="left">
+                  <span className="flex items-center gap-1">
+                    {runStatusIcon(run.status, "small")}
+                    {runStatusLabel(run.status)}
+                  </span>
+                </Cell>
+                <Cell to={path} alignment="left">
+                  {run.finishedAt
+                    ? formatDateTime(run.finishedAt, "long")
+                    : "–"}
+                </Cell>
+                <Cell to={path}>
+                  {run.startedAt && run.finishedAt
+                    ? humanizeDuration(
+                        dateDifference(run.startedAt, run.finishedAt)
+                      )
+                    : "–"}
+                </Cell>
+                <Cell to={path}>
+                  {run.isTest && (
+                    <BeakerIcon className="h-5 w-5 text-green-500" />
+                  )}
+                </Cell>
+              </tr>
+            );
+          })
         )}
       </tbody>
     </table>

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

@@ -5,7 +5,8 @@ import {
   TriggerMetadataSchema,
 } from "@trigger.dev/common-schemas";
 import type { CatalogIntegration } from "internal-catalog";
-import { DisplayProperties, slack } from "internal-integrations";
+import type { DisplayProperties } from "internal-integrations";
+import { slack } from "internal-integrations";
 import invariant from "tiny-invariant";
 import type { PrismaClient } from "~/db.server";
 import { prisma } from "~/db.server";

apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/index.tsx

@@ -6,7 +6,7 @@ import { Panel } from "~/components/layout/Panel";
 import { PanelHeader } from "~/components/layout/PanelHeader";
 import { PrimaryLink, SecondaryLink } from "~/components/primitives/Buttons";
 import { Header1, Header2 } from "~/components/primitives/text/Headers";
-import { RunsTable } from "~/components/runs/Table";
+import { RunsTable } from "~/components/runs/RunsTable";
 import { TriggerBody } from "~/components/triggers/Trigger";
 import { triggerInfo } from "~/components/triggers/triggerTypes";
 import { useConnectionSlots } from "~/hooks/useConnectionSlots";
@@ -89,7 +89,12 @@ export default function Page() {
             <SecondaryLink to="runs">View all</SecondaryLink>
           </div>
           <Panel className="p-0 overflow-hidden overflow-x-auto">
-            <RunsTable runs={runs} total={total} hasFilters={hasFilters} />
+            <RunsTable
+              runs={runs}
+              total={total}
+              hasFilters={hasFilters}
+              basePath="runs"
+            />
           </Panel>
         </>
       ) : (

apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/runs/$runId.tsx

@@ -36,11 +36,7 @@ import { TriggerBody } from "~/components/triggers/Trigger";
 import { useFetcher } from "@remix-run/react";
 import { useCurrentOrganization } from "~/hooks/useOrganizations";
 import { useCurrentWorkflow } from "~/hooks/useWorkflows";
-import {
-  BasicConnectButton,
-  ConnectButton,
-} from "~/components/integrations/ConnectButton";
-import { IntegrationIcon } from "~/components/integrations/ConnectionSelector";
+import { BasicConnectButton } from "~/components/integrations/ConnectButton";
 
 export const loader = async ({ request, params }: LoaderArgs) => {
   await requireUserId(request);
@@ -54,7 +50,7 @@ export const loader = async ({ request, params }: LoaderArgs) => {
     return typedjson({ run });
   } catch (error: any) {
     console.error(error);
-    throw new Response("Error ", { status: 404 });
+    throw new Response("Error ", { status: 400 });
   }
 };
 

apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/runs/index.tsx

@@ -15,7 +15,7 @@ import {
   runStatusLabel,
   runStatusTitle,
 } from "~/components/runs/runStatus";
-import { RunsTable } from "~/components/runs/Table";
+import { RunsTable } from "~/components/runs/RunsTable";
 import type { WorkflowRunStatus } from "~/models/workflowRun.server";
 import { WorkflowRunListPresenter } from "~/models/workflowRunListPresenter.server";
 import { requireUserId } from "~/services/session.server";