From 4ee3204456afaa8c6f7f7cf2020b527848e765d3 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 26 Jun 2025 17:56:14 +0100
Subject: [PATCH] Bulk action button

---
 .../app/assets/icons/ListCheckedIcon.tsx      | 48 +++++++++++++++++++
 .../route.tsx                                 | 33 ++++++++-----
 2 files changed, 70 insertions(+), 11 deletions(-)
 create mode 100644 apps/webapp/app/assets/icons/ListCheckedIcon.tsx

diff --git a/apps/webapp/app/assets/icons/ListCheckedIcon.tsx b/apps/webapp/app/assets/icons/ListCheckedIcon.tsx
new file mode 100644
index 000000000..29cb828f5
--- /dev/null
+++ b/apps/webapp/app/assets/icons/ListCheckedIcon.tsx
@@ -0,0 +1,48 @@
+export function ListCheckedIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.85001 3.82759L4.09139 5.06897L6.16035 3"
+        stroke="currentColor"
+        strokeWidth="1.65517"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.85001 8.82759L4.09139 10.069L6.16035 8"
+        stroke="currentColor"
+        strokeWidth="1.65517"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.85001 13.8276L4.09139 15.069L6.16035 13"
+        stroke="currentColor"
+        strokeWidth="1.65517"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9 4H15"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9 9H15"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9 14H15"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.next.runs._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.next.runs._index/route.tsx
index 5f1fa3e7a..51264dd1a 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.next.runs._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.next.runs._index/route.tsx
@@ -67,6 +67,8 @@ import {
 import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { CreateBulkActionInspector } from "../resources.orgs.$organizationId.projects.$projectId.environments.$environmentId.runs.bulkaction";
+import { ListCheckedIcon } from "~/assets/icons/ListCheckedIcon";
+import { Badge } from "~/components/primitives/Badge";
 
 export const meta: MetaFunction = () => {
   return [
@@ -196,17 +198,26 @@ export default function Page() {
                                   rootOnlyDefault={rootOnlyDefault}
                                 />
                                 <div className="flex items-center justify-end gap-x-2">
-                                  <LinkButton
-                                    variant="tertiary/small"
-                                    to={v3CreateBulkActionPath(
-                                      organization,
-                                      project,
-                                      environment,
-                                      filters
-                                    )}
-                                  >
-                                    Bulk action
-                                  </LinkButton>
+                                  {!isShowingBulkActionInspector && (
+                                    <LinkButton
+                                      variant="tertiary/small"
+                                      to={v3CreateBulkActionPath(
+                                        organization,
+                                        project,
+                                        environment,
+                                        filters
+                                      )}
+                                      LeadingIcon={ListCheckedIcon}
+                                      className={selectedItems.size > 0 ? "pr-1" : undefined}
+                                    >
+                                      <span className="flex items-center gap-x-1">
+                                        <span>Bulk action</span>
+                                        {selectedItems.size > 0 && (
+                                          <Badge variant="rounded">{selectedItems.size}</Badge>
+                                        )}
+                                      </span>
+                                    </LinkButton>
+                                  )}
                                   <ListPagination list={list} />
                                 </div>
                               </div>