@checkstack/automation-frontend 0.2.0 → 0.4.0

package/src/pages/AutomationEditPage.tsx

@@ -46,40 +46,29 @@ import {
   TabPanel,
 } from "@checkstack/ui";
 import { extractErrorMessage, resolveRoute } from "@checkstack/common";
+import {
+  GitOpsLockBanner,
+  useProvenanceLock,
+} from "@checkstack/gitops-frontend";
 import { parse as parseYaml, stringify as stringifyYaml } from "yaml";
 import { AutomationDefinitionEditor } from "../editor/AutomationDefinitionEditor";
 import { assignDefaultIds } from "../editor/action-helpers";
 import { assignDefaultTriggerIds } from "../editor/trigger-helpers";
 import { computeYamlMarkers } from "../editor/yaml-markers";
-import {
-  ValidationProvider,
-  partitionIssues,
-} from "../editor/editor-validation";
+import { partitionIssues } from "../editor/editor-validation";
+import { AutomationGroupCombobox } from "../components/AutomationGroupCombobox";
+import { RunAsServiceAccountPicker } from "../components/RunAsServiceAccountPicker";
 
 const STARTER_DEFINITION: AutomationDefinition = {
   name: "New Automation",
-  // Seed the starter trigger's id the same way actions are seeded, so it is
-  // shown (and referenceable as `trigger.id`) immediately.
-  triggers: assignDefaultTriggerIds([{ event: "incident.created" }]),
+  // Start empty: the operator picks a trigger and adds actions via the Add
+  // dialogs (the empty-state hints guide them), rather than starting from a
+  // pre-filled trigger + action they then have to replace.
+  triggers: [],
   conditions: [],
-  // Run the seeded starter action through the same default-id assignment the
-  // "Add step" path uses, so its `id` is filled in (and shown) immediately
-  // rather than appearing blank until the field is focused.
-  actions: assignDefaultIds(
-    [
-      {
-        action: "automation.log",
-        config: {
-          message: "Incident {{ trigger.payload.title }} fired",
-          level: "info",
-        },
-        enabled: true,
-        continue_on_error: false,
-      },
-    ],
-    new Set(),
-  ),
+  actions: [],
   mode: "single",
+  concurrency_scope: "automation",
   max_runs: 10,
 };
 
@@ -119,7 +108,21 @@ const AutomationEditContent: React.FC = () => {
   const { allowed: canRead, loading: accessLoading } = accessApi.useAccess(
     automationAccess.read,
   );
-  const { allowed: canManage } = accessApi.useAccess(automationAccess.manage);
+  const { allowed: hasManageAccess } = accessApi.useAccess(
+    automationAccess.manage,
+  );
+
+  // GitOps provenance lock: when this automation is declaratively managed,
+  // disable manual edits + show a banner. `entityId` is the automation id
+  // (the GitOps reconciler stores it in provenance). New (unsaved)
+  // automations are never locked.
+  const { isLocked, provenance } = useProvenanceLock({
+    kind: "Automation",
+    entityId: isNew ? undefined : automationId,
+  });
+
+  // Effective edit permission: manage access AND not GitOps-locked.
+  const canManage = hasManageAccess && !isLocked;
 
   const loadQuery = client.getAutomation.useQuery(
     { id: automationId ?? "" },
@@ -129,7 +132,16 @@ const AutomationEditContent: React.FC = () => {
   // Top-level form state.
   const [name, setName] = React.useState("");
   const [description, setDescription] = React.useState("");
+  // Empty string means "Ungrouped" — sent as `null` on save to clear it.
+  const [group, setGroup] = React.useState("");
+  // Service account (Application id) the automation runs as. Empty means
+  // "not chosen yet" — save is blocked until one is selected.
+  const [runAsApplicationId, setRunAsApplicationId] = React.useState("");
   const [statusEnabled, setStatusEnabled] = React.useState(true);
+
+  // Existing group values for the picker's "pick existing" suggestions.
+  const groupsQuery = client.listAutomationGroups.useQuery();
+  const groupSuggestions = groupsQuery.data?.groups ?? [];
   const [definition, setDefinition] =
     React.useState<AutomationDefinition>(STARTER_DEFINITION);
   const [yamlText, setYamlText] = React.useState<string>(() =>
@@ -150,11 +162,24 @@ const AutomationEditContent: React.FC = () => {
     loadQuery.isFetchedAfterMount ? loadQuery.data : undefined,
     loadQuery.data?.id,
     (a) => {
+      // Stored definitions (seeded defaults, GitOps, hand-written YAML) may
+      // carry triggers/actions without an `id`. The runtime derives those ids
+      // on the fly, but the editor must materialize them eagerly so they show
+      // immediately rather than appearing blank until the field is focused.
+      // Both helpers preserve existing ids and only fill blanks, so this is
+      // idempotent and matches how STARTER_DEFINITION is seeded.
+      const normalized: AutomationDefinition = {
+        ...a.definition,
+        triggers: assignDefaultTriggerIds(a.definition.triggers),
+        actions: assignDefaultIds(a.definition.actions, new Set()),
+      };
       setName(a.name);
       setDescription(a.description ?? "");
+      setGroup(a.group ?? "");
+      setRunAsApplicationId(a.runAs ?? "");
       setStatusEnabled(a.status === "enabled");
-      setDefinition(a.definition);
-      setYamlText(stringifyYaml(a.definition));
+      setDefinition(normalized);
+      setYamlText(stringifyYaml(normalized));
     },
   );
 
@@ -308,10 +333,16 @@ const AutomationEditContent: React.FC = () => {
     });
     if (!validation.valid) return;
 
+    // Empty input = Ungrouped. On create we omit it; on update we send `null`
+    // so an explicit clear round-trips (undefined would leave it unchanged).
+    const trimmedGroup = group.trim();
+
     if (isNew) {
       createMutation.mutate({
         name,
         description: description || undefined,
+        group: trimmedGroup || undefined,
+        runAs: runAsApplicationId,
         status: statusEnabled ? "enabled" : "disabled",
         definition: merged,
       });
@@ -320,6 +351,8 @@ const AutomationEditContent: React.FC = () => {
         id: automationId,
         name,
         description: description || undefined,
+        group: trimmedGroup || null,
+        runAs: runAsApplicationId,
         status: statusEnabled ? "enabled" : "disabled",
         definition: merged,
       });
@@ -367,8 +400,15 @@ const AutomationEditContent: React.FC = () => {
   // "Input validation failed" toast. Validate it here so the Name field can
   // surface the error and Save can be disabled instead.
   const nameError = name.trim().length === 0 ? "Name is required" : undefined;
+  // A service account is required: the automation runs with its permissions,
+  // so the backend rejects a save without one. Block save + hint inline.
+  const runAsError =
+    runAsApplicationId.trim().length === 0
+      ? "A service account is required"
+      : undefined;
   const isSaving = createMutation.isPending || updateMutation.isPending;
-  const canSave = !nameError && validationErrors.length === 0 && !isSaving;
+  const canSave =
+    !nameError && !runAsError && validationErrors.length === 0 && !isSaving;
 
   return (
     <PageLayout
@@ -431,7 +471,11 @@ const AutomationEditContent: React.FC = () => {
       ) : !isNew && loadQuery.isLoading ? (
         <LoadingSpinner />
       ) : (
-        <div className="grid gap-4 lg:grid-cols-[1fr_2fr]">
+        <div className="space-y-4">
+          {isLocked && provenance && (
+            <GitOpsLockBanner provenance={provenance} />
+          )}
+          <div className="grid gap-4 lg:grid-cols-[1fr_2fr]">
           <Card>
             <CardHeader className="border-b">
               <CardTitle className="text-base">Metadata</CardTitle>
@@ -462,6 +506,25 @@ const AutomationEditContent: React.FC = () => {
                   placeholder="Optional"
                 />
               </div>
+              <div className="space-y-1">
+                <Label htmlFor="group">Group</Label>
+                <AutomationGroupCombobox
+                  id="group"
+                  value={group}
+                  onValueChange={setGroup}
+                  suggestions={groupSuggestions}
+                  disabled={!canManage}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Optional. Organises the automations list into sections.
+                </p>
+              </div>
+              <RunAsServiceAccountPicker
+                value={runAsApplicationId}
+                onValueChange={setRunAsApplicationId}
+                disabled={!canManage}
+                showError={!!runAsError}
+              />
               <div className="flex items-center justify-between">
                 <Label htmlFor="enabled">Enabled</Label>
                 <Toggle
@@ -523,25 +586,29 @@ const AutomationEditContent: React.FC = () => {
               />
             </div>
             <TabPanel id="visual" activeTab={tab}>
-              <ValidationProvider issues={validationErrors}>
-                {unattributedIssues.length > 0 && (
-                  <Alert variant="error" className="mb-2">
-                    <AlertTitle>Definition issues</AlertTitle>
-                    <AlertDescription>
-                      <ul className="space-y-1 text-xs font-mono">
-                        {unattributedIssues.map((issue, index) => (
-                          <li key={index}>{issue}</li>
-                        ))}
-                      </ul>
-                    </AlertDescription>
-                  </Alert>
-                )}
-                <AutomationDefinitionEditor
-                  value={definition}
-                  onChange={setDefinition}
-                  disabled={!canManage}
-                />
-              </ValidationProvider>
+              {unattributedIssues.length > 0 && (
+                <Alert variant="error" className="mb-2">
+                  <AlertTitle>Definition issues</AlertTitle>
+                  <AlertDescription>
+                    <ul className="space-y-1 text-xs font-mono">
+                      {unattributedIssues.map((issue, index) => (
+                        <li key={index}>{issue}</li>
+                      ))}
+                    </ul>
+                  </AlertDescription>
+                </Alert>
+              )}
+              {/* `AutomationDefinitionEditor` owns the `ValidationProvider`
+                  (inside its registry provider) so it can merge these
+                  structural issues with the live inline-script type issues it
+                  computes. */}
+              <AutomationDefinitionEditor
+                value={definition}
+                onChange={setDefinition}
+                disabled={!canManage}
+                automationId={isNew ? undefined : automationId}
+                structuralIssues={validationErrors}
+              />
             </TabPanel>
             <TabPanel id="yaml" activeTab={tab}>
               <Card>
@@ -558,6 +625,7 @@ const AutomationEditContent: React.FC = () => {
               </Card>
             </TabPanel>
           </div>
+          </div>
         </div>
       )}
     </PageLayout>

package/src/pages/AutomationListPage.tsx

@@ -11,6 +11,7 @@ import {
   AutomationApi,
   automationAccess,
   automationRoutes,
+  type Automation,
 } from "@checkstack/automation-common";
 import {
   PageLayout,
@@ -31,10 +32,15 @@ import {
   QueryErrorState,
   EmptyState,
   ConfirmationModal,
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
   useToast,
 } from "@checkstack/ui";
 import { extractErrorMessage, resolveRoute } from "@checkstack/common";
 import { formatDistanceToNow } from "date-fns";
+import { groupAutomations } from "./automation-grouping";
 
 /**
  * Lists every automation the operator can see, with quick enable / disable
@@ -85,9 +91,123 @@ const AutomationListContent: React.FC = () => {
     onError: (error) => toast.error(extractErrorMessage(error)),
   });
 
-  const automations = query.data?.items ?? [];
+  const items = query.data?.items;
+  const automations = React.useMemo(() => items ?? [], [items]);
   const isEmpty = !query.isLoading && automations.length === 0;
 
+  // Collapsible sections, sorted alphabetically with "Ungrouped" last.
+  const groups = React.useMemo(
+    () => groupAutomations({ automations }),
+    [automations],
+  );
+  // All sections expanded by default so nothing is hidden on first load.
+  const allGroupKeys = React.useMemo(() => groups.map((g) => g.key), [groups]);
+
+  const renderRow = (automation: Automation) => (
+    <TableRow
+      key={automation.id}
+      className="cursor-pointer hover:bg-accent/40"
+      onClick={() =>
+        navigate(
+          resolveRoute(automationRoutes.routes.edit, {
+            automationId: automation.id,
+          }),
+        )
+      }
+    >
+      <TableCell onClick={(e) => e.stopPropagation()}>
+        {canManage ? (
+          <Toggle
+            checked={automation.status === "enabled"}
+            onCheckedChange={(enabled) =>
+              toggleMutation.mutate({
+                id: automation.id,
+                enabled,
+              })
+            }
+            aria-label={
+              automation.status === "enabled"
+                ? "Disable automation"
+                : "Enable automation"
+            }
+          />
+        ) : (
+          <Badge
+            variant={
+              automation.status === "enabled" ? "success" : "outline"
+            }
+          >
+            {automation.status}
+          </Badge>
+        )}
+      </TableCell>
+      <TableCell>
+        <div className="flex flex-col">
+          <span className="font-medium">{automation.name}</span>
+          {automation.description && (
+            <span className="text-xs text-muted-foreground">
+              {automation.description}
+            </span>
+          )}
+        </div>
+      </TableCell>
+      <TableCell>
+        <div className="flex flex-wrap gap-1">
+          {automation.definition.triggers.slice(0, 3).map((trigger, index) => (
+            <Badge
+              key={`${trigger.event}-${index}`}
+              variant="outline"
+              className="text-[10px] font-mono"
+            >
+              {trigger.event}
+            </Badge>
+          ))}
+          {automation.definition.triggers.length > 3 && (
+            <Badge variant="outline" className="text-[10px]">
+              +{automation.definition.triggers.length - 3}
+            </Badge>
+          )}
+        </div>
+      </TableCell>
+      <TableCell>
+        <Badge variant="secondary" className="text-[10px]">
+          {automation.definition.mode}
+        </Badge>
+      </TableCell>
+      <TableCell>
+        <span className="text-xs text-muted-foreground">
+          {formatDistanceToNow(new Date(automation.updatedAt), {
+            addSuffix: true,
+          })}
+        </span>
+      </TableCell>
+      <TableCell onClick={(e) => e.stopPropagation()} className="text-right">
+        <div className="flex justify-end gap-1">
+          <Link
+            to={resolveRoute(automationRoutes.routes.runs, {
+              automationId: automation.id,
+            })}
+          >
+            <Button variant="ghost" size="sm">
+              Runs
+            </Button>
+          </Link>
+          {canManage && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 text-destructive hover:bg-destructive/10"
+              onClick={() => setDeleteId(automation.id)}
+              aria-label="Delete automation"
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+
   return (
     <PageLayout
       title="Automations"
@@ -154,131 +274,60 @@ const AutomationListContent: React.FC = () => {
               }
             />
           ) : (
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-8" />
-                  <TableHead>Name</TableHead>
-                  <TableHead>Triggers</TableHead>
-                  <TableHead>Mode</TableHead>
-                  <TableHead>Updated</TableHead>
-                  <TableHead className="w-24 text-right">Actions</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {automations.map((automation) => (
-                  <TableRow
-                    key={automation.id}
-                    className="cursor-pointer hover:bg-accent/40"
-                    onClick={() =>
-                      navigate(
-                        resolveRoute(automationRoutes.routes.edit, {
-                          automationId: automation.id,
-                        }),
-                      )
-                    }
-                  >
-                    <TableCell onClick={(e) => e.stopPropagation()}>
-                      {canManage ? (
-                        <Toggle
-                          checked={automation.status === "enabled"}
-                          onCheckedChange={(enabled) =>
-                            toggleMutation.mutate({
-                              id: automation.id,
-                              enabled,
-                            })
-                          }
-                          aria-label={
-                            automation.status === "enabled"
-                              ? "Disable automation"
-                              : "Enable automation"
-                          }
-                        />
-                      ) : (
-                        <Badge
-                          variant={
-                            automation.status === "enabled"
-                              ? "success"
-                              : "outline"
-                          }
-                        >
-                          {automation.status}
-                        </Badge>
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex flex-col">
-                        <span className="font-medium">{automation.name}</span>
-                        {automation.description && (
-                          <span className="text-xs text-muted-foreground">
-                            {automation.description}
-                          </span>
-                        )}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex flex-wrap gap-1">
-                        {automation.definition.triggers
-                          .slice(0, 3)
-                          .map((trigger, index) => (
-                            <Badge
-                              key={`${trigger.event}-${index}`}
-                              variant="outline"
-                              className="text-[10px] font-mono"
-                            >
-                              {trigger.event}
-                            </Badge>
-                          ))}
-                        {automation.definition.triggers.length > 3 && (
-                          <Badge variant="outline" className="text-[10px]">
-                            +{automation.definition.triggers.length - 3}
-                          </Badge>
-                        )}
-                      </div>
-                    </TableCell>
-                    <TableCell>
+            <Accordion
+              // Re-key on the group set so newly-appearing sections (after a
+              // status-filter change) start expanded rather than collapsed.
+              key={allGroupKeys.join("|")}
+              type="multiple"
+              defaultValue={allGroupKeys}
+              className="w-full"
+            >
+              {groups.map((group) => (
+                <AccordionItem
+                  key={group.key}
+                  value={group.key}
+                  className="last:border-b-0"
+                >
+                  <AccordionTrigger className="px-4">
+                    <span className="flex items-center gap-2">
+                      <span
+                        className={
+                          group.ungrouped
+                            ? "text-muted-foreground"
+                            : undefined
+                        }
+                      >
+                        {group.label}
+                      </span>
                       <Badge variant="secondary" className="text-[10px]">
-                        {automation.definition.mode}
+                        {group.items.length}
                       </Badge>
-                    </TableCell>
-                    <TableCell>
-                      <span className="text-xs text-muted-foreground">
-                        {formatDistanceToNow(new Date(automation.updatedAt), {
-                          addSuffix: true,
-                        })}
-                      </span>
-                    </TableCell>
-                    <TableCell
-                      onClick={(e) => e.stopPropagation()}
-                      className="text-right"
-                    >
-                      <div className="flex justify-end gap-1">
-                        <Link
-                          to={resolveRoute(automationRoutes.routes.runs, {
-                            automationId: automation.id,
-                          })}
-                        >
-                          <Button variant="ghost" size="sm">
-                            Runs
-                          </Button>
-                        </Link>
-                        {canManage && (
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-8 w-8 text-destructive hover:bg-destructive/10"
-                            onClick={() => setDeleteId(automation.id)}
-                            aria-label="Delete automation"
-                          >
-                            <Trash2 className="h-4 w-4" />
-                          </Button>
+                    </span>
+                  </AccordionTrigger>
+                  <AccordionContent className="px-0 pb-0">
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead className="w-8" />
+                          <TableHead>Name</TableHead>
+                          <TableHead>Triggers</TableHead>
+                          <TableHead>Mode</TableHead>
+                          <TableHead>Updated</TableHead>
+                          <TableHead className="w-24 text-right">
+                            Actions
+                          </TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {group.items.map((automation) =>
+                          renderRow(automation),
                         )}
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+                      </TableBody>
+                    </Table>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
           )}
         </CardContent>
       </Card>

package/src/pages/automation-grouping.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from "bun:test";
+import type { Automation, AutomationDefinition } from "@checkstack/automation-common";
+import {
+  groupAutomations,
+  UNGROUPED_LABEL,
+} from "./automation-grouping";
+
+const DEFINITION: AutomationDefinition = {
+  name: "n",
+  triggers: [{ event: "incident.incident.created" }],
+  conditions: [],
+  actions: [],
+  mode: "single",
+  concurrency_scope: "automation",
+  max_runs: 10,
+};
+
+function make({
+  id,
+  group,
+}: {
+  id: string;
+  group?: string;
+}): Automation {
+  return {
+    id,
+    name: `Automation ${id}`,
+    group,
+    runAs: null,
+    status: "enabled",
+    definition: DEFINITION,
+    createdAt: new Date("2026-01-01T00:00:00Z"),
+    updatedAt: new Date("2026-01-01T00:00:00Z"),
+  };
+}
+
+describe("groupAutomations", () => {
+  it("returns an empty list for no automations", () => {
+    expect(groupAutomations({ automations: [] })).toEqual([]);
+  });
+
+  it("puts automations with no group into the Ungrouped bucket", () => {
+    const groups = groupAutomations({
+      automations: [make({ id: "1" }), make({ id: "2", group: "  " })],
+    });
+    expect(groups).toHaveLength(1);
+    expect(groups[0]?.label).toBe(UNGROUPED_LABEL);
+    expect(groups[0]?.ungrouped).toBe(true);
+    expect(groups[0]?.items.map((a) => a.id)).toEqual(["1", "2"]);
+  });
+
+  it("groups by group value and sorts named groups alphabetically", () => {
+    const groups = groupAutomations({
+      automations: [
+        make({ id: "1", group: "Zeta" }),
+        make({ id: "2", group: "alpha" }),
+        make({ id: "3", group: "Zeta" }),
+      ],
+    });
+    expect(groups.map((g) => g.label)).toEqual(["alpha", "Zeta"]);
+    expect(groups[1]?.items.map((a) => a.id)).toEqual(["1", "3"]);
+  });
+
+  it("always places the Ungrouped bucket last", () => {
+    const groups = groupAutomations({
+      automations: [
+        make({ id: "1" }),
+        make({ id: "2", group: "Networking" }),
+        make({ id: "3", group: "Alerting" }),
+      ],
+    });
+    expect(groups.map((g) => g.label)).toEqual([
+      "Alerting",
+      "Networking",
+      UNGROUPED_LABEL,
+    ]);
+  });
+
+  it("never emits empty groups", () => {
+    const groups = groupAutomations({
+      automations: [make({ id: "1", group: "Only" })],
+    });
+    expect(groups).toHaveLength(1);
+    expect(groups[0]?.label).toBe("Only");
+    expect(groups.some((g) => g.items.length === 0)).toBe(false);
+  });
+});