WIP on bulk actions page

apps/webapp/app/components/runs/v3/BulkAction.tsx

@@ -1,9 +1,10 @@
-import { ArrowPathIcon, NoSymbolIcon } from "@heroicons/react/20/solid";
-import { type BulkActionType } from "@trigger.dev/database";
+import { ArrowPathIcon, CheckCircleIcon, NoSymbolIcon } from "@heroicons/react/20/solid";
+import { BulkActionStatus, type BulkActionType } from "@trigger.dev/database";
 import assertNever from "assert-never";
+import { Spinner } from "~/components/primitives/Spinner";
 import { cn } from "~/utils/cn";
 
-export function BulkActionStatusCombo({
+export function BulkActionTypeCombo({
   type,
   className,
   iconClassName,
@@ -23,7 +24,7 @@ export function BulkActionStatusCombo({
 }
 
 export function BulkActionLabel({ type, className }: { type: BulkActionType; className?: string }) {
-  return <span className={cn(bulkActionClassName(type), className)}>{bulkActionTitle(type)}</span>;
+  return <span className={cn("text-text-dimmed", className)}>{bulkActionTitle(type)}</span>;
 }
 
 export function BulkActionIcon({ type, className }: { type: BulkActionType; className: string }) {
@@ -73,3 +74,62 @@ export function bulkActionVerb(type: BulkActionType): string {
     }
   }
 }
+
+export function BulkActionStatusCombo({
+  status,
+  className,
+  iconClassName,
+  labelClassName,
+}: {
+  status: BulkActionStatus;
+  className?: string;
+  iconClassName?: string;
+  labelClassName?: string;
+}) {
+  return (
+    <span className={cn("flex items-center gap-1", className)}>
+      <BulkActionStatusIcon status={status} className={cn("h-4 w-4", iconClassName)} />
+      <BulkActionStatusLabel status={status} className={labelClassName} />
+    </span>
+  );
+}
+
+export function BulkActionStatusIcon({
+  status,
+  className,
+}: {
+  status: BulkActionStatus;
+  className: string;
+}) {
+  switch (status) {
+    case "PENDING":
+      return <Spinner className={cn("text-pending", className)} />;
+    case "COMPLETED":
+      return <CheckCircleIcon className={cn("text-success", className)} />;
+    case "ABORTED":
+      return <NoSymbolIcon className={cn("text-error", className)} />;
+    default: {
+      assertNever(status);
+    }
+  }
+}
+
+export function BulkActionStatusLabel({
+  status,
+  className,
+}: {
+  status: BulkActionStatus;
+  className?: string;
+}) {
+  switch (status) {
+    case "PENDING":
+      return <span className={cn("text-pending", className)}>In progress</span>;
+    case "COMPLETED":
+      return <span className={cn("text-success", className)}>Completed</span>;
+    case "ABORTED":
+      return <span className={cn("text-error", className)}>Aborted</span>;
+    default: {
+      assertNever(status);
+    }
+  }
+}

apps/webapp/app/components/runs/v3/RunFilters.tsx

@@ -45,7 +45,7 @@ import { useProject } from "~/hooks/useProject";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { type loader as tagsLoader } from "~/routes/resources.projects.$projectParam.runs.tags";
 import { Button } from "../../primitives/Buttons";
-import { BulkActionStatusCombo } from "./BulkAction";
+import { BulkActionTypeCombo } from "./BulkAction";
 import { appliedSummary, FilterMenuProvider, TimeFilter } from "./SharedFilters";
 import {
   allTaskRunStatuses,
@@ -630,7 +630,7 @@ function BulkActionsDropdown({
                   {item.name}
                 </Paragraph>
                 <div className="flex gap-3">
-                  <BulkActionStatusCombo
+                  <BulkActionTypeCombo
                     type={item.type}
                     iconClassName="size-4"
                     labelClassName="text-text-dimmed"

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

@@ -0,0 +1,62 @@
+import { getUsername } from "~/utils/username";
+import { BasePresenter } from "./basePresenter.server";
+
+type BulkActionListOptions = {
+  environmentId: string;
+  page?: number;
+};
+
+const DEFAULT_PAGE_SIZE = 25;
+
+export type BulkActionListItem = Awaited<
+  ReturnType<BulkActionListPresenter["call"]>
+>["bulkActions"][number];
+
+export class BulkActionListPresenter extends BasePresenter {
+  public async call({ environmentId, page }: BulkActionListOptions) {
+    const totalCount = await this._replica.bulkActionGroup.count({
+      where: {
+        environmentId,
+      },
+    });
+
+    const bulkActions = await this._replica.bulkActionGroup.findMany({
+      select: {
+        friendlyId: true,
+        name: true,
+        status: true,
+        type: true,
+        createdAt: true,
+        completedAt: true,
+        totalCount: true,
+        user: {
+          select: {
+            name: true,
+            displayName: true,
+            avatarUrl: true,
+          },
+        },
+      },
+      where: {
+        environmentId,
+      },
+      orderBy: {
+        createdAt: "desc",
+      },
+      skip: ((page ?? 1) - 1) * DEFAULT_PAGE_SIZE,
+      take: DEFAULT_PAGE_SIZE,
+    });
+
+    return {
+      currentPage: page ?? 1,
+      totalPages: Math.ceil(totalCount / DEFAULT_PAGE_SIZE),
+      totalCount: totalCount,
+      bulkActions: bulkActions.map((bulkAction) => ({
+        ...bulkAction,
+        user: bulkAction.user
+          ? { name: getUsername(bulkAction.user), avatarUrl: bulkAction.user.avatarUrl }
+          : undefined,
+      })),
+    };
+  }
+}

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

@@ -0,0 +1,45 @@
+import { getUsername } from "~/utils/username";
+import { BasePresenter } from "./basePresenter.server";
+
+type BulkActionOptions = {
+  environmentId: string;
+  bulkActionId: string;
+};
+
+export class BulkActionPresenter extends BasePresenter {
+  public async call({ environmentId, bulkActionId }: BulkActionOptions) {
+    const bulkAction = await this._replica.bulkActionGroup.findFirst({
+      select: {
+        friendlyId: true,
+        name: true,
+        status: true,
+        type: true,
+        createdAt: true,
+        completedAt: true,
+        totalCount: true,
+        user: {
+          select: {
+            name: true,
+            displayName: true,
+            avatarUrl: true,
+          },
+        },
+      },
+      where: {
+        environmentId,
+        friendlyId: bulkActionId,
+      },
+    });
+
+    if (!bulkAction) {
+      throw new Error("Bulk action not found");
+    }
+
+    return {
+      ...bulkAction,
+      user: bulkAction.user
+        ? { name: getUsername(bulkAction.user), avatarUrl: bulkAction.user.avatarUrl }
+        : undefined,
+    };
+  }
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx

@@ -0,0 +1,185 @@
+import { ArrowPathIcon, BookOpenIcon } from "@heroicons/react/20/solid";
+import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { tryCatch } from "@trigger.dev/core";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { z } from "zod";
+import { ExitIcon } from "~/assets/icons/ExitIcon";
+import { RunsIcon } from "~/assets/icons/RunsIcon";
+import { InlineCode } from "~/components/code/InlineCode";
+import { EnvironmentCombo } from "~/components/environments/EnvironmentLabel";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { DateTime } from "~/components/primitives/DateTime";
+import { Header2, Header3 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import * as Property from "~/components/primitives/PropertyTable";
+import {
+  Table,
+  TableBlankRow,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "~/components/primitives/Table";
+import { BulkActionTypeCombo } from "~/components/runs/v3/BulkAction";
+import { EnabledStatus } from "~/components/runs/v3/EnabledStatus";
+import { ScheduleTypeCombo } from "~/components/runs/v3/ScheduleType";
+import { UserAvatar } from "~/components/UserProfilePhoto";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { findProjectBySlug } from "~/models/project.server";
+import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
+import { BulkActionPresenter } from "~/presenters/v3/BulkActionPresenter.server";
+import { requireUserId } from "~/services/session.server";
+import { cn } from "~/utils/cn";
+import {
+  EnvironmentParamSchema,
+  v3BulkActionsPath,
+  v3CreateBulkActionPath,
+  v3RunsPath,
+} from "~/utils/pathBuilder";
+
+const BulkActionParamSchema = EnvironmentParamSchema.extend({
+  bulkActionParam: z.string(),
+});
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const userId = await requireUserId(request);
+
+  const { organizationSlug, projectParam, envParam, bulkActionParam } =
+    BulkActionParamSchema.parse(params);
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  if (!project) {
+    throw new Response("Not Found", { status: 404 });
+  }
+
+  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+  if (!environment) {
+    throw new Response("Not Found", { status: 404 });
+  }
+
+  try {
+    const presenter = new BulkActionPresenter();
+    const [error, data] = await tryCatch(
+      presenter.call({
+        environmentId: environment.id,
+        bulkActionId: bulkActionParam,
+      })
+    );
+
+    if (error) {
+      throw new Error(error.message);
+    }
+
+    return typedjson({ bulkAction: data });
+  } catch (error) {
+    console.error(error);
+    throw new Response(undefined, {
+      status: 400,
+      statusText: "Something went wrong, if this problem persists please contact support.",
+    });
+  }
+};
+
+export default function Page() {
+  const { bulkAction } = useTypedLoaderData<typeof loader>();
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+
+  return (
+    <div className="grid h-full max-h-full grid-rows-[2.5rem_1fr_3.25rem] overflow-hidden bg-background-bright">
+      <div className="mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed">
+        <Header2 className={cn("whitespace-nowrap")}>
+          {bulkAction.name || bulkAction.friendlyId}
+        </Header2>
+        <LinkButton
+          to={v3BulkActionsPath(organization, project, environment)}
+          variant="minimal/small"
+          TrailingIcon={ExitIcon}
+          shortcut={{ key: "esc" }}
+          shortcutPosition="before-trailing-icon"
+          className="pl-1"
+        />
+      </div>
+      <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="space-y-3">
+          <div className="p-3">
+            <Property.Table>
+              <Property.Item>
+                <Property.Label>ID</Property.Label>
+                <Property.Value>{bulkAction.friendlyId}</Property.Value>
+              </Property.Item>
+              <Property.Item>
+                <Property.Label>Bulk action</Property.Label>
+                <Property.Value>
+                  <BulkActionTypeCombo type={bulkAction.type} />
+                </Property.Value>
+              </Property.Item>
+              <Property.Item>
+                <Property.Label>User</Property.Label>
+                <Property.Value>
+                  {bulkAction.user ? (
+                    <div className="flex items-center gap-1">
+                      <UserAvatar
+                        name={bulkAction.user.name}
+                        avatarUrl={bulkAction.user.avatarUrl}
+                        className="h-4 w-4"
+                      />
+                      <Paragraph variant="extra-small">{bulkAction.user.name}</Paragraph>
+                    </div>
+                  ) : (
+                    "–"
+                  )}
+                </Property.Value>
+              </Property.Item>
+              <Property.Item>
+                <Property.Label>Created</Property.Label>
+                <Property.Value>
+                  <DateTime date={bulkAction.createdAt} />
+                </Property.Value>
+              </Property.Item>
+              <Property.Item>
+                <Property.Label>Completed</Property.Label>
+                <Property.Value>
+                  {bulkAction.completedAt ? <DateTime date={bulkAction.completedAt} /> : "–"}
+                </Property.Value>
+              </Property.Item>
+            </Property.Table>
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-between gap-2 border-t border-grid-dimmed px-2">
+        <LinkButton
+          to={v3CreateBulkActionPath(
+            organization,
+            project,
+            environment,
+            {
+              bulkId: bulkAction.friendlyId,
+            },
+            "filters",
+            "replay"
+          )}
+          variant="tertiary/medium"
+          LeadingIcon={ArrowPathIcon}
+          leadingIconClassName="text-indigo-500"
+        >
+          Replay runs
+        </LinkButton>
+
+        <LinkButton
+          variant="tertiary/medium"
+          to={v3RunsPath(organization, project, environment, {
+            bulkId: bulkAction.friendlyId,
+          })}
+          LeadingIcon={RunsIcon}
+        >
+          View runs
+        </LinkButton>
+      </div>
+    </div>
+  );
+}