Bulk actions 2.0 (and switch all run listing to ClickHouse)

.env.example

@@ -13,6 +13,9 @@ APP_ORIGIN=http://localhost:3030
 ELECTRIC_ORIGIN=http://localhost:3060
 NODE_ENV=development
 
+# Set this to UTC because Node.js uses the system timezone
+TZ="UTC"
+
 # Redis is used for the v3 queuing and v2 concurrency control
 REDIS_HOST="localhost"
 REDIS_PORT="6379"
@@ -77,4 +80,4 @@ POSTHOG_PROJECT_KEY=
 # These control the server-side internal telemetry
 # INTERNAL_OTEL_TRACE_EXPORTER_URL=<URL to send traces to>
 # INTERNAL_OTEL_TRACE_LOGGING_ENABLED=1
-# INTERNAL_OTEL_TRACE_INSTRUMENT_PRISMA_ENABLED=0,
+# INTERNAL_OTEL_TRACE_INSTRUMENT_PRISMA_ENABLED=0,

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>
+  );
+}

apps/webapp/app/components/BlankStatePanels.tsx

@@ -11,14 +11,22 @@ import {
   Squares2X2Icon,
 } from "@heroicons/react/20/solid";
 import { useLocation } from "react-use";
+import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
 import { TaskIcon } from "~/assets/icons/TaskIcon";
+import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
+import openBulkActionsPanel from "~/assets/images/open-bulk-actions-panel.png";
+import selectRunsIndividually from "~/assets/images/select-runs-individually.png";
+import selectRunsUsingFilters from "~/assets/images/select-runs-using-filters.png";
 import { useEnvironment } from "~/hooks/useEnvironment";
+import { useFeatures } from "~/hooks/useFeatures";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { type MinimumEnvironment } from "~/presenters/SelectBestEnvironmentPresenter.server";
+import { NewBranchPanel } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route";
 import {
   docsPath,
   v3BillingPath,
+  v3CreateBulkActionPath,
   v3EnvironmentPath,
   v3EnvironmentVariablesPath,
   v3NewProjectAlertPath,
@@ -36,12 +44,7 @@ import { StepNumber } from "./primitives/StepNumber";
 import { TextLink } from "./primitives/TextLink";
 import { InitCommandV3, PackageManagerProvider, TriggerDevStepV3 } from "./SetupCommands";
 import { StepContentContainer } from "./StepContentContainer";
-import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
-import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
-import { useFeatures } from "~/hooks/useFeatures";
-import { DialogContent, DialogTrigger, Dialog } from "./primitives/Dialog";
 import { V4Badge } from "./V4Badge";
-import { NewBranchPanel } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route";
 
 export function HasNoTasksDev() {
   return (
@@ -569,3 +572,56 @@ export function SwitcherPanel({ title = "Switch to a deployed environment" }: {
     </div>
   );
 }
+
+export function BulkActionsNone() {
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+
+  return (
+    <div>
+      <div className="mb-6 flex items-center justify-between border-b pb-0.5">
+        <Header1 spacing>Create a bulk action</Header1>
+        <div className="flex items-center gap-2">
+          <LinkButton
+            variant="primary/small"
+            LeadingIcon={PlusIcon}
+            to={v3CreateBulkActionPath(organization, project, environment)}
+          >
+            New bulk action
+          </LinkButton>
+        </div>
+      </div>
+      <StepNumber stepNumber="1" title="Select runs individually" />
+      <StepContentContainer className="mb-4 flex flex-col gap-4">
+        <Paragraph>Select runs from the runs page individually.</Paragraph>
+        <div>
+          <img src={selectRunsIndividually} alt="Select runs individually" />
+        </div>
+      </StepContentContainer>
+      <div className="mb-5 ml-9 flex items-center gap-2">
+        <div className="h-px w-full bg-grid-bright" />
+        <Paragraph variant="extra-small" className="text-text-dimmed">
+          OR
+        </Paragraph>
+        <div className="h-px w-full bg-grid-bright" />
+      </div>
+      <StepNumber stepNumber="2" title="Select runs using filters" />
+      <StepContentContainer className="flex flex-col gap-4">
+        <Paragraph>
+          Use the filter menu on the runs page to select just the runs you want to bulk action.
+        </Paragraph>
+        <div>
+          <img src={selectRunsUsingFilters} alt="Select runs using filters" />
+        </div>
+      </StepContentContainer>
+      <StepNumber stepNumber="3" title="Open the bulk action panel" />
+      <StepContentContainer className="flex flex-col gap-4">
+        <Paragraph>Click the “Bulk actions” button in the top right of the runs page.</Paragraph>
+        <div>
+          <img src={openBulkActionsPanel} alt="Open the bulk action panel" />
+        </div>
+      </StepContentContainer>
+    </div>
+  );
+}