@checkstack/automation-frontend 0.2.0

package/src/editor/editor-validation.tsx

@@ -0,0 +1,200 @@
+import React from "react";
+import type { ActionPath, ActionPathStep } from "@checkstack/automation-common";
+
+export interface DefinitionIssue {
+  path: Array<string | number>;
+  message: string;
+}
+
+/**
+ * Convert an editor `ActionPath` (slot/index segments) into the
+ * definition path the validator reports against (e.g.
+ * `["actions", 0, "choose", 1, "sequence", 0]`), so a card can find its
+ * own issues.
+ */
+export function actionPathToDefPath(
+  path: ActionPath,
+): Array<string | number> {
+  return path.flatMap((step) => stepToDefSegments(step));
+}
+
+function stepToDefSegments(step: ActionPathStep): Array<string | number> {
+  switch (step.slot) {
+    case "root": {
+      return ["actions", step.index];
+    }
+    case "choose-when": {
+      return ["choose", step.whenIndex ?? 0, "sequence", step.index];
+    }
+    case "choose-else": {
+      return ["else", step.index];
+    }
+    case "parallel": {
+      return ["parallel", step.index];
+    }
+    case "repeat": {
+      return ["repeat", "sequence", step.index];
+    }
+    case "sequence": {
+      return ["sequence", step.index];
+    }
+  }
+}
+
+export function defPathKey(path: Array<string | number>): string {
+  return path.join("\u0000");
+}
+
+/**
+ * Parse an issue path into the deepest *action node* that owns it plus
+ * the field tail within that action. Walks the action-node grammar
+ * (`actions[i]`, then repeating `choose[j].sequence[k]` / `else[k]` /
+ * `parallel[k]` / `repeat.sequence[k]` / `sequence[k]`) greedily; the
+ * first segment that doesn't continue the grammar starts the field
+ * tail. So `actions.0.config.level` → owner `actions.0`, tail
+ * `config.level`; `actions.0.choose.0.when` → owner `actions.0`, tail
+ * `choose.0.when` (the choose's own condition); a nested provider's
+ * config attaches to the nested card.
+ *
+ * Returns null for non-action issues (triggers / conditions / top-level).
+ */
+function resolveActionOwner(
+  path: Array<string | number>,
+): { owner: Array<string | number>; tail: Array<string | number> } | null {
+  if (path[0] !== "actions" || typeof path[1] !== "number") return null;
+  const owner: Array<string | number> = ["actions", path[1]];
+  let i = 2;
+  for (;;) {
+    const key = path[i];
+    if (
+      key === "choose" &&
+      typeof path[i + 1] === "number" &&
+      path[i + 2] === "sequence" &&
+      typeof path[i + 3] === "number"
+    ) {
+      owner.push("choose", path[i + 1]!, "sequence", path[i + 3]!);
+      i += 4;
+      continue;
+    }
+    if (key === "else" && typeof path[i + 1] === "number") {
+      owner.push("else", path[i + 1]!);
+      i += 2;
+      continue;
+    }
+    if (key === "parallel" && typeof path[i + 1] === "number") {
+      owner.push("parallel", path[i + 1]!);
+      i += 2;
+      continue;
+    }
+    if (
+      key === "repeat" &&
+      path[i + 1] === "sequence" &&
+      typeof path[i + 2] === "number"
+    ) {
+      owner.push("repeat", "sequence", path[i + 2]!);
+      i += 3;
+      continue;
+    }
+    if (key === "sequence" && typeof path[i + 1] === "number") {
+      owner.push("sequence", path[i + 1]!);
+      i += 2;
+      continue;
+    }
+    break;
+  }
+  return { owner, tail: path.slice(i) };
+}
+
+function formatIssue(tail: Array<string | number>, message: string): string {
+  return tail.length > 0 ? `${tail.join(".")}: ${message}` : message;
+}
+
+export interface PartitionedIssues {
+  /** Keyed by `defPathKey(ownerDefPath)`. */
+  actions: Map<string, string[]>;
+  /** Keyed by trigger index. */
+  triggers: Map<number, string[]>;
+  /** Keyed by condition index. */
+  conditions: Map<number, string[]>;
+  /** Issues not attributable to a specific card (top-level fields). */
+  other: string[];
+}
+
+/**
+ * Group flat validation issues by the editor surface that should
+ * display them.
+ */
+export function partitionIssues(issues: DefinitionIssue[]): PartitionedIssues {
+  const actions = new Map<string, string[]>();
+  const triggers = new Map<number, string[]>();
+  const conditions = new Map<number, string[]>();
+  const other: string[] = [];
+
+  const pushTo = <K,>(map: Map<K, string[]>, key: K, value: string): void => {
+    const existing = map.get(key) ?? [];
+    existing.push(value);
+    map.set(key, existing);
+  };
+
+  for (const issue of issues) {
+    if (issue.path[0] === "triggers" && typeof issue.path[1] === "number") {
+      pushTo(triggers, issue.path[1], formatIssue(issue.path.slice(2), issue.message));
+      continue;
+    }
+    if (issue.path[0] === "conditions" && typeof issue.path[1] === "number") {
+      pushTo(
+        conditions,
+        issue.path[1],
+        formatIssue(issue.path.slice(2), issue.message),
+      );
+      continue;
+    }
+    const owner = resolveActionOwner(issue.path);
+    if (owner) {
+      pushTo(actions, defPathKey(owner.owner), formatIssue(owner.tail, issue.message));
+    } else {
+      other.push(formatIssue(issue.path, issue.message));
+    }
+  }
+
+  return { actions, triggers, conditions, other };
+}
+
+// ─── Context ─────────────────────────────────────────────────────────────
+
+const ValidationContext = React.createContext<PartitionedIssues | null>(null);
+
+export const ValidationProvider: React.FC<{
+  issues: DefinitionIssue[];
+  children: React.ReactNode;
+}> = ({ issues, children }) => {
+  const partitioned = React.useMemo(() => partitionIssues(issues), [issues]);
+  return (
+    <ValidationContext.Provider value={partitioned}>
+      {children}
+    </ValidationContext.Provider>
+  );
+};
+
+function usePartition(): PartitionedIssues | null {
+  return React.useContext(ValidationContext);
+}
+
+/** Issues attached to the action at the given editor `ActionPath`. */
+export function useActionIssues(path: ActionPath): string[] {
+  const partition = usePartition();
+  const key = defPathKey(actionPathToDefPath(path));
+  return partition?.actions.get(key) ?? [];
+}
+
+/** Issues attached to the trigger at the given index. */
+export function useTriggerIssues(index: number): string[] {
+  const partition = usePartition();
+  return partition?.triggers.get(index) ?? [];
+}
+
+/** Issues attached to the pre-run condition at the given index. */
+export function useConditionIssues(index: number): string[] {
+  const partition = usePartition();
+  return partition?.conditions.get(index) ?? [];
+}

package/src/editor/registry-context.tsx

@@ -0,0 +1,192 @@
+import React from "react";
+import {
+  usePluginClient,
+} from "@checkstack/frontend-api";
+import {
+  AutomationApi,
+  resolveVariableScope,
+  type ActionInfo,
+  type ActionPath,
+  type ArtifactTypeInfo,
+  type AutomationDefinition,
+  type TriggerInfo,
+  type VariableEntry,
+} from "@checkstack/automation-common";
+import type {
+  ShellEnvVar,
+  TemplateCompletionProvider,
+  TemplateProperty,
+  VariableNode,
+} from "@checkstack/ui";
+import {
+  TEMPLATE_FILTERS,
+  fieldsToShellEnvVars,
+  flattenScopeToFields,
+} from "./template-helpers";
+import { createTemplateCompletionProvider } from "./template-completion";
+import { generateAutomationContextTypes } from "../script-context";
+
+/**
+ * Registry context — loads the trigger / action / artifact-type catalog
+ * once, exposes it via hooks, and provides a `useVariableScope(path)`
+ * shortcut so every template field in the visual editor can get the
+ * right `templateProperties` without re-running the scope resolver
+ * by hand. The scope hook also returns the hierarchical
+ * `VariableNode[]` tree used by `VariablePicker`.
+ *
+ * Loaded eagerly because: (a) the catalog is small (dozens of items
+ * total), (b) every action card in the visual editor needs to look up
+ * its own action info to render the right config form, (c) the scope
+ * resolver needs the action catalog to compute upstream artifact
+ * entries.
+ */
+interface RegistryContextValue {
+  triggers: TriggerInfo[];
+  actions: ActionInfo[];
+  artifactTypes: ArtifactTypeInfo[];
+  /** True until all three queries have resolved. */
+  loading: boolean;
+}
+
+const RegistryContext = React.createContext<RegistryContextValue | null>(null);
+
+export const AutomationRegistryProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const client = usePluginClient(AutomationApi);
+  const triggers = client.listTriggers.useQuery();
+  const actions = client.listActions.useQuery();
+  const artifactTypes = client.listArtifactTypes.useQuery();
+
+  const value = React.useMemo<RegistryContextValue>(
+    () => ({
+      triggers: triggers.data?.items ?? [],
+      actions: actions.data?.items ?? [],
+      artifactTypes: artifactTypes.data?.items ?? [],
+      loading:
+        triggers.isLoading || actions.isLoading || artifactTypes.isLoading,
+    }),
+    [triggers, actions, artifactTypes],
+  );
+
+  return (
+    <RegistryContext.Provider value={value}>
+      {children}
+    </RegistryContext.Provider>
+  );
+};
+
+export function useAutomationRegistry(): RegistryContextValue {
+  const ctx = React.useContext(RegistryContext);
+  if (!ctx) {
+    throw new Error(
+      "useAutomationRegistry must be used inside <AutomationRegistryProvider>",
+    );
+  }
+  return ctx;
+}
+
+/**
+ * Resolve the variable scope at a specific action path inside the given
+ * automation definition. Returned in both formats the editor needs:
+ *
+ *   - `templateProperties` for `TemplateValueInput`'s `{{` autocomplete.
+ *   - `variableNodes` for `VariablePicker`'s hierarchical tree.
+ *
+ * Re-runs whenever the definition or path changes — small enough that
+ * memoising is a clarity win, not a perf necessity.
+ */
+export function useVariableScope(args: {
+  definition: AutomationDefinition;
+  path: ActionPath;
+}): {
+  /**
+   * Flat field list for the legacy `templateProperties` shorthand —
+   * consumed by `DynamicForm` config fields that only need simple
+   * `{{ path }}` insertion.
+   */
+  templateProperties: TemplateProperty[];
+  /** Hierarchical tree for the explicit "fx" `VariablePicker`. */
+  variableNodes: VariableNode[];
+  /**
+   * Staged completion provider for `{{ … }}` template fields (filter
+   * templates, delay templates, …). Fields → comparators/filters →
+   * enum values.
+   */
+  templateCompletion: TemplateCompletionProvider;
+  /**
+   * Staged completion provider for bare expression fields (conditions /
+   * `choose: when` clauses) — same staging, no `{{ }}` wrapper.
+   */
+  expressionCompletion: TemplateCompletionProvider;
+  /**
+   * Monaco `addExtraLib` declarations for inline-script action editors
+   * (`Run Script (TypeScript)`). Types `context.trigger.payload` as a
+   * discriminated union over the automation's subscribed triggers, plus
+   * `context.artifacts` / `context.var` / `context.repeat` in scope at
+   * this action position — so the script editor autocompletes the real
+   * runtime context instead of falling back to an untyped default.
+   */
+  typeDefinitions: string;
+  /**
+   * `$CHECKSTACK_*` env var names a shell script action receives, for the
+   * shell editor's `$` autocomplete. Mirrors what the backend injects at
+   * run time (shell scripts read context from env vars, not `{{ }}`).
+   */
+  shellEnvVars: ShellEnvVar[];
+} {
+  const { triggers, actions, artifactTypes } = useAutomationRegistry();
+  return React.useMemo(() => {
+    const scope = resolveVariableScope({
+      definition: args.definition,
+      triggers,
+      actions,
+      artifactTypes,
+      path: args.path,
+    });
+    const fields = flattenScopeToFields(scope);
+    const { typeDefinitions } = generateAutomationContextTypes({
+      definition: args.definition,
+      triggers,
+      actions: actions.map((a) => ({
+        qualifiedId: a.qualifiedId,
+        produces: a.produces,
+      })),
+      artifactTypes,
+      path: args.path,
+    });
+    return {
+      templateProperties: fields.map((f) => ({
+        path: f.path,
+        templateRef: f.templateRef,
+        type: f.type,
+        description: f.description,
+        enumValues: f.enumValues,
+      })),
+      variableNodes: scope.entries.map((child) => toNode(child)),
+      templateCompletion: createTemplateCompletionProvider({
+        fields,
+        filters: [...TEMPLATE_FILTERS],
+        mode: "template",
+      }),
+      expressionCompletion: createTemplateCompletionProvider({
+        fields,
+        filters: [...TEMPLATE_FILTERS],
+        mode: "expression",
+      }),
+      typeDefinitions,
+      shellEnvVars: fieldsToShellEnvVars(fields),
+    };
+  }, [args.definition, args.path, triggers, actions, artifactTypes]);
+}
+
+function toNode(entry: VariableEntry): VariableNode {
+  return {
+    path: entry.path,
+    templateRef: entry.templateRef,
+    type: entry.type,
+    description: entry.description,
+    children: entry.children?.map((child) => toNode(child)),
+    conditionalOnTriggers: entry.conditionalOnTriggers,
+  };
+}