The test page now has an environment selector at the top

Author: matt-aitken

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

@@ -123,6 +123,7 @@ type TableCellProps = TableCellBasicProps & {
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   hasAction?: boolean;
   isSticky?: boolean;
+  actionClassName?: string;
 };
 
 const stickyStyles =
@@ -132,6 +133,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
   (
     {
       className,
+      actionClassName,
       alignment = "left",
       children,
       colSpan,
@@ -176,11 +178,11 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
         colSpan={colSpan}
       >
         {to ? (
-          <Link to={to} className={flexClasses}>
+          <Link to={to} className={cn(flexClasses, actionClassName)}>
             {children}
           </Link>
         ) : onClick ? (
-          <button onClick={onClick} className={flexClasses}>
+          <button onClick={onClick} className={cn(flexClasses, actionClassName)}>
             {children}
           </button>
         ) : (

apps/webapp/app/presenters/v3/TestPresenter.server.ts

@@ -1,13 +1,18 @@
 import { PrismaClient, prisma } from "~/db.server";
+import { TestSearchParams } from "~/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route";
+import { sortEnvironments } from "~/services/environmentSort.server";
+import { createSearchParams } from "~/utils/searchParams";
 import { getUsername } from "~/utils/username";
 
 type TaskListOptions = {
   userId: string;
   projectSlug: string;
+  url: string;
 };
 
 export type TaskList = Awaited<ReturnType<TestPresenter["call"]>>;
-export type TaskListItem = TaskList["tasks"][0];
+export type TaskListItem = NonNullable<TaskList["tasks"]>[0];
+export type SelectedEnvironment = NonNullable<TaskList["selectedEnvironment"]>;
 
 export class TestPresenter {
   #prismaClient: PrismaClient;
@@ -16,7 +21,7 @@ export class TestPresenter {
     this.#prismaClient = prismaClient;
   }
 
-  public async call({ userId, projectSlug }: TaskListOptions) {
+  public async call({ userId, projectSlug, url }: TaskListOptions) {
     // Find the project scoped to the organization
     const project = await this.#prismaClient.project.findFirstOrThrow({
       select: {
@@ -26,17 +31,18 @@ export class TestPresenter {
             id: true,
             type: true,
             slug: true,
-            orgMember: {
-              select: {
-                user: {
-                  select: {
-                    id: true,
-                    name: true,
-                    displayName: true,
-                  },
+          },
+          where: {
+            OR: [
+              {
+                orgMember: null,
+              },
+              {
+                orgMember: {
+                  userId,
                 },
               },
-            },
+            ],
           },
         },
       },
@@ -45,55 +51,72 @@ export class TestPresenter {
       },
     });
 
+    const environments = sortEnvironments(
+      project.environments.map((environment) => ({
+        id: environment.id,
+        type: environment.type,
+        slug: environment.slug,
+      }))
+    );
+
+    const searchParams = createSearchParams(url, TestSearchParams);
+
+    //no environmentId
+    if (!searchParams.success || !searchParams.params.get("environment")) {
+      return {
+        hasSelectedEnvironment: false as const,
+        environments,
+      };
+    }
+
+    //is the environmentId valid?
+    const matchingEnvironment = project.environments.find(
+      (env) => env.slug === searchParams.params.get("environment")
+    );
+    if (!matchingEnvironment) {
+      return {
+        hasSelectedEnvironment: false as const,
+        environments,
+      };
+    }
+
     //get all possible tasks
     const tasks = await this.#prismaClient.$queryRaw<
       {
         id: string;
         version: string;
-        runtimeEnvironmentId: string;
         taskIdentifier: string;
         filePath: string;
         exportName: string;
         friendlyId: string;
       }[]
-    >`
-    WITH workers AS (
+    >`WITH workers AS (
       SELECT 
             bw.*,
-            ROW_NUMBER() OVER(PARTITION BY bw."runtimeEnvironmentId" ORDER BY string_to_array(bw.version, '.')::int[] DESC) AS rn
+            ROW_NUMBER() OVER(ORDER BY string_to_array(bw.version, '.')::int[] DESC) AS rn
       FROM 
             "BackgroundWorker" bw
-      WHERE "projectId" = ${project.id}
+      WHERE "runtimeEnvironmentId" = ${matchingEnvironment.id}
     ),
     latest_workers AS (SELECT * FROM workers WHERE rn = 1)
-    SELECT "BackgroundWorkerTask".id, version, "BackgroundWorkerTask"."runtimeEnvironmentId", slug as "taskIdentifier", "filePath", "exportName", "BackgroundWorkerTask"."friendlyId" 
+    SELECT "BackgroundWorkerTask".id, version, slug as "taskIdentifier", "filePath", "exportName", "BackgroundWorkerTask"."friendlyId" 
     FROM latest_workers
-    JOIN "BackgroundWorkerTask" ON "BackgroundWorkerTask"."workerId" = latest_workers.id;;
+    JOIN "BackgroundWorkerTask" ON "BackgroundWorkerTask"."workerId" = latest_workers.id
+    ORDER BY "BackgroundWorkerTask"."exportName" ASC;
     `;
 
     return {
+      hasSelectedEnvironment: true as const,
+      environments,
+      selectedEnvironment: matchingEnvironment,
       tasks: tasks.map((task) => {
-        const environment = project.environments.find(
-          (env) => env.id === task.runtimeEnvironmentId
-        );
-
-        if (!environment) {
-          throw new Error(`Environment not found for Task ${task.id}`);
-        }
-
         return {
           id: task.id,
           version: task.version,
           taskIdentifier: task.taskIdentifier,
           filePath: task.filePath,
           exportName: task.exportName,
           friendlyId: task.friendlyId,
-          environment: {
-            type: environment.type,
-            slug: environment.slug,
-            userId: environment.orgMember?.user.id,
-            userName: getUsername(environment.orgMember?.user),
-          },
         };
       }),
     };