@checkstack/ui 1.11.0 → 1.13.0

package/src/components/DynamicForm/FormField.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { Plus, Trash2 } from "lucide-react";
+import { renderTemplatePreview } from "@checkstack/template-engine";
 
 import {
   Input,
@@ -14,13 +15,21 @@ import {
   Toggle,
   ColorPicker,
   TemplateValueInput,
+  DurationInput,
+  type DurationValue,
 } from "../../index";
 
 import type { FormFieldProps, JsonSchemaProperty } from "./types";
-import { getCleanDescription, NONE_SENTINEL } from "./utils";
+import {
+  getCleanDescription,
+  NONE_SENTINEL,
+  findSecretEnvSibling,
+  nestedChildrenRequired,
+} from "./utils";
 import { DynamicOptionsField } from "./DynamicOptionsField";
 import { JsonField } from "./JsonField";
 import { MultiTypeEditorField } from "./MultiTypeEditorField";
+import { SecretEnvEditor } from "./SecretEnvEditor";
 
 /**
  * Recursive field renderer that handles all supported JSON Schema types.
@@ -38,6 +47,15 @@ export const FormField: React.FC<FormFieldProps> = ({
   typeDefinitions,
   shellEnvVars,
   starterTemplates,
+  scriptTestRenderer,
+  secretNames,
+  acquireTypes,
+  acquireResetKey,
+  sdkTypes,
+  sdkTypesResetKey,
+  importablePackages,
+  templatePreviewContext,
+  siblingSecretEnv,
   onChange,
 }) => {
   const description = propSchema.description || "";
@@ -74,6 +92,34 @@ export const FormField: React.FC<FormFieldProps> = ({
     return <></>;
   }
 
+  // Duration field — render the DurationInput (single-unit duration
+  // object). Marked via `x-duration: true` or `format: "duration"`. This
+  // branch is intentionally additive and sits before the generic union /
+  // object handlers so a `for:` / threshold-window config renders the
+  // widget rather than the raw oneOf discriminator picker.
+  const isDuration =
+    propSchema["x-duration"] === true || propSchema.format === "duration";
+  if (isDuration) {
+    const cleanDesc = getCleanDescription(description);
+    return (
+      <div className="space-y-2">
+        <div>
+          <Label htmlFor={id}>
+            {label} {isRequired && "*"}
+          </Label>
+          {cleanDesc && (
+            <p className="text-sm text-muted-foreground mt-0.5">{cleanDesc}</p>
+          )}
+        </div>
+        <DurationInput
+          id={id}
+          value={value as DurationValue | undefined}
+          onChange={(next) => onChange(next)}
+        />
+      </div>
+    );
+  }
+
   // Enum handling
   if (propSchema.enum) {
     const cleanDesc = getCleanDescription(description);
@@ -126,19 +172,39 @@ export const FormField: React.FC<FormFieldProps> = ({
     const editorTypes = propSchema["x-editor-types"];
     if (editorTypes && editorTypes.length > 0) {
       return (
-        <MultiTypeEditorField
-          id={id}
-          label={label}
-          description={cleanDesc}
-          value={value as string | undefined}
-          isRequired={isRequired}
-          editorTypes={editorTypes}
-          templateProperties={templateProperties}
-          typeDefinitions={typeDefinitions}
-          shellEnvVars={shellEnvVars}
-          starterTemplates={starterTemplates}
-          onChange={onChange as (val: string | undefined) => void}
-        />
+        <div className="space-y-2">
+          <MultiTypeEditorField
+            id={id}
+            label={label}
+            description={cleanDesc}
+            value={value as string | undefined}
+            isRequired={isRequired}
+            editorTypes={editorTypes}
+            templateProperties={templateProperties}
+            typeDefinitions={typeDefinitions}
+            shellEnvVars={shellEnvVars}
+            starterTemplates={starterTemplates}
+            scriptTestRenderer={
+              propSchema["x-script-testable"] === true
+                ? scriptTestRenderer
+                : undefined
+            }
+            acquireTypes={acquireTypes}
+            acquireResetKey={acquireResetKey}
+            sdkTypes={sdkTypes}
+            sdkTypesResetKey={sdkTypesResetKey}
+            importablePackages={importablePackages}
+            fieldId={id}
+            siblingSecretEnv={siblingSecretEnv}
+            onChange={onChange as (val: string | undefined) => void}
+          />
+          {propSchema["x-templatable"] && templatePreviewContext && (
+            <TemplatePreviewLine
+              value={(value as string) || ""}
+              context={templatePreviewContext}
+            />
+          )}
+        </div>
       );
     }
 
@@ -268,6 +334,12 @@ export const FormField: React.FC<FormFieldProps> = ({
             placeholder={placeholder}
           />
         )}
+        {propSchema["x-templatable"] && templatePreviewContext && (
+          <TemplatePreviewLine
+            value={(value as string) || ""}
+            context={templatePreviewContext}
+          />
+        )}
       </div>
     );
   }
@@ -331,6 +403,34 @@ export const FormField: React.FC<FormFieldProps> = ({
   }
 
   // Dictionary/Record (headers)
+  // Secret -> env mapping: a dedicated editor (env name + secret-name
+  // picker) instead of the raw JSON record fallback.
+  if (
+    propSchema.type === "object" &&
+    propSchema.additionalProperties &&
+    propSchema["x-secret-env"]
+  ) {
+    const cleanDesc = getCleanDescription(description);
+    return (
+      <div className="space-y-2">
+        <div>
+          <Label htmlFor={id}>
+            {label} {isRequired && "*"}
+          </Label>
+          {cleanDesc && (
+            <p className="text-sm text-muted-foreground mt-0.5">{cleanDesc}</p>
+          )}
+        </div>
+        <SecretEnvEditor
+          id={id}
+          value={(value as Record<string, string> | undefined) ?? {}}
+          secretNames={secretNames}
+          onChange={(next) => onChange(next)}
+        />
+      </div>
+    );
+  }
+
   if (propSchema.type === "object" && propSchema.additionalProperties) {
     const cleanDesc = getCleanDescription(description);
     return (
@@ -355,6 +455,20 @@ export const FormField: React.FC<FormFieldProps> = ({
 
   // Object (Nested Form)
   if (propSchema.type === "object" && propSchema.properties) {
+    // Resolve the secret→env sibling within THIS object so a nested
+    // testable script field forwards the right mapping to the test panel.
+    const nestedSecretEnv = findSecretEnvSibling({
+      properties: propSchema.properties,
+      values: value as Record<string, unknown> | undefined,
+    });
+    // An OPTIONAL nested object (e.g. an opt-in spend cap) only marks its
+    // schema-required children with `*` once the operator starts providing the
+    // object; while empty, supplying it is optional. A required object always
+    // marks them. (See nestedChildrenRequired.)
+    const childrenRequired = nestedChildrenRequired({
+      objectRequired: isRequired ?? false,
+      objectValue: value,
+    });
     return (
       <div className="space-y-4 p-4 border rounded-lg bg-muted/30">
         <p className="text-sm font-semibold">{label}</p>
@@ -365,7 +479,7 @@ export const FormField: React.FC<FormFieldProps> = ({
             label={key.charAt(0).toUpperCase() + key.slice(1)}
             propSchema={subSchema}
             value={(value as Record<string, unknown>)?.[key]}
-            isRequired={propSchema.required?.includes(key)}
+            isRequired={childrenRequired && (propSchema.required?.includes(key) ?? false)}
             formValues={formValues}
             optionsResolvers={optionsResolvers}
             templateProperties={templateProperties}
@@ -373,6 +487,15 @@ export const FormField: React.FC<FormFieldProps> = ({
             typeDefinitions={typeDefinitions}
             shellEnvVars={shellEnvVars}
             starterTemplates={starterTemplates}
+            scriptTestRenderer={scriptTestRenderer}
+            secretNames={secretNames}
+            acquireTypes={acquireTypes}
+            acquireResetKey={acquireResetKey}
+            sdkTypes={sdkTypes}
+            sdkTypesResetKey={sdkTypesResetKey}
+            importablePackages={importablePackages}
+            templatePreviewContext={templatePreviewContext}
+            siblingSecretEnv={nestedSecretEnv}
             onChange={(val) =>
               onChange({ ...(value as Record<string, unknown>), [key]: val })
             }
@@ -485,6 +608,14 @@ export const FormField: React.FC<FormFieldProps> = ({
                   typeDefinitions={typeDefinitions}
                   shellEnvVars={shellEnvVars}
                   starterTemplates={starterTemplates}
+                  scriptTestRenderer={scriptTestRenderer}
+                  secretNames={secretNames}
+                  acquireTypes={acquireTypes}
+                  acquireResetKey={acquireResetKey}
+                  sdkTypes={sdkTypes}
+                  sdkTypesResetKey={sdkTypesResetKey}
+                  importablePackages={importablePackages}
+                  templatePreviewContext={templatePreviewContext}
                   onChange={(val) => {
                     const next = [...(items as unknown[])];
                     next[index] = val;
@@ -543,6 +674,12 @@ export const FormField: React.FC<FormFieldProps> = ({
     const displayDiscriminatorField =
       discriminatorField.charAt(0).toUpperCase() + discriminatorField.slice(1);
 
+    // Secret→env sibling within the selected variant's object.
+    const variantSecretEnv = findSecretEnvSibling({
+      properties: selectedVariant.properties,
+      values: currentValue,
+    });
+
     return (
       <div className="space-y-3 p-3 border rounded-lg bg-background">
         {/* Discriminator selector */}
@@ -617,6 +754,15 @@ export const FormField: React.FC<FormFieldProps> = ({
                 typeDefinitions={typeDefinitions}
                 shellEnvVars={shellEnvVars}
                 starterTemplates={starterTemplates}
+                scriptTestRenderer={scriptTestRenderer}
+                secretNames={secretNames}
+                acquireTypes={acquireTypes}
+                acquireResetKey={acquireResetKey}
+                sdkTypes={sdkTypes}
+                sdkTypesResetKey={sdkTypesResetKey}
+                importablePackages={importablePackages}
+                templatePreviewContext={templatePreviewContext}
+                siblingSecretEnv={variantSecretEnv}
                 onChange={(val) => onChange({ ...currentValue, [key]: val })}
               />
             ))}
@@ -627,6 +773,28 @@ export const FormField: React.FC<FormFieldProps> = ({
   return <></>;
 };
 
+/**
+ * Inline preview of a templatable field's rendered output against a sample
+ * context. Shown below `x-templatable` string fields when the owning form
+ * supplies a `templatePreviewContext`. Pure render (no DOM/Monaco), so it
+ * matches the run-time `x-templatable` pass exactly.
+ */
+const TemplatePreviewLine: React.FC<{
+  value: string;
+  context: Record<string, unknown>;
+}> = ({ value, context }) => {
+  if (!value || !value.includes("{{")) return null;
+  const rendered = renderTemplatePreview({ value, context });
+  return (
+    <p className="text-xs text-muted-foreground">
+      Preview:{" "}
+      <span className="font-mono break-all text-foreground">
+        {rendered || "(empty)"}
+      </span>
+    </p>
+  );
+};
+
 /**
  * Shared visibility toggle button for secret fields.
  */

package/src/components/DynamicForm/MultiTypeEditorField.tsx

@@ -1,7 +1,12 @@
 import React from "react";
 import { Label } from "../Label";
 import { Textarea } from "../Textarea";
-import { CodeEditor, type TemplateProperty } from "../CodeEditor";
+import {
+  CodeEditor,
+  type TemplateProperty,
+  type AcquireTypes,
+  type AcquiredTypeFile,
+} from "../CodeEditor";
 import {
   Select,
   SelectContent,
@@ -17,7 +22,11 @@ import {
   parseFormData,
   EDITOR_TYPE_LABELS,
 } from "./utils";
-import type { EditorStarterTemplates, ShellEnvVar } from "./types";
+import type {
+  EditorStarterTemplates,
+  ScriptTestRenderer,
+  ShellEnvVar,
+} from "./types";
 import { pickStarterForEmptyField } from "./starterTemplateSelector";
 
 export interface MultiTypeEditorFieldProps {
@@ -54,6 +63,38 @@ export interface MultiTypeEditorFieldProps {
    * working example instead of a blank canvas.
    */
   starterTemplates?: EditorStarterTemplates;
+  /**
+   * Optional renderer for the inline script-test panel. When supplied (the
+   * field is `x-script-testable`), it is rendered beneath the editor for
+   * `typescript` / `shell` modes, with the currently-selected language as
+   * `kind`. The owning page wires it to the `testScript` RPC.
+   */
+  scriptTestRenderer?: ScriptTestRenderer;
+  /**
+   * Optional lazy type-acquisition resolver, forwarded to the TS/JS
+   * `CodeEditor` so imported npm packages autocomplete (lazy ATA).
+   */
+  acquireTypes?: AcquireTypes;
+  /** Install identity (lockfile hash); resets acquired types on a new install. */
+  acquireResetKey?: string;
+  /** The running release's `@checkstack/sdk` editor bundle (helpers + client). */
+  sdkTypes?: ReadonlyArray<AcquiredTypeFile>;
+  /** Release version; resets the mounted SDK libs on a deployment upgrade. */
+  sdkTypesResetKey?: string;
+  /**
+   * Importable installed package names (`@types/*`-free), forwarded to the
+   * TS/JS `CodeEditor` so the import specifier itself autocompletes.
+   */
+  importablePackages?: string[];
+  /** Form key of this field, forwarded to {@link scriptTestRenderer}. */
+  fieldId?: string;
+  /**
+   * Current value of the sibling `x-secret-env` mapping (located by
+   * annotation in the parent config object), forwarded to
+   * {@link scriptTestRenderer} so the test panel injects placeholders /
+   * overrides for the same secrets the action declares.
+   */
+  siblingSecretEnv?: Record<string, string>;
   /** Callback when value changes */
   onChange: (value: string | undefined) => void;
 }
@@ -74,6 +115,14 @@ export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
   typeDefinitions,
   shellEnvVars,
   starterTemplates,
+  scriptTestRenderer,
+  acquireTypes,
+  acquireResetKey,
+  sdkTypes,
+  sdkTypesResetKey,
+  importablePackages,
+  fieldId,
+  siblingSecretEnv,
   onChange,
 }) => {
   // Detect initial editor type from value
@@ -352,6 +401,11 @@ export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
           language="javascript"
           minHeight="150px"
           typeDefinitions={typeDefinitions}
+          acquireTypes={acquireTypes}
+          acquireResetKey={acquireResetKey}
+          sdkTypes={sdkTypes}
+          sdkTypesResetKey={sdkTypesResetKey}
+          importablePackages={importablePackages}
         />
       )}
 
@@ -363,6 +417,11 @@ export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
           language="typescript"
           minHeight="150px"
           typeDefinitions={typeDefinitions}
+          acquireTypes={acquireTypes}
+          acquireResetKey={acquireResetKey}
+          sdkTypes={sdkTypes}
+          sdkTypesResetKey={sdkTypesResetKey}
+          importablePackages={importablePackages}
         />
       )}
 
@@ -376,6 +435,23 @@ export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
           shellEnvVars={shellEnvVars}
         />
       )}
+
+      {/* Inline script-test panel for testable code fields. Shell maps to
+          the `shell` test kind; both typescript and javascript map to the
+          `typescript` runner kind (the ESM runner handles both). */}
+      {scriptTestRenderer !== undefined &&
+        (selectedType === "typescript" ||
+          selectedType === "javascript" ||
+          selectedType === "shell") &&
+        scriptTestRenderer({
+          fieldId: fieldId ?? id,
+          kind: selectedType === "shell" ? "shell" : "typescript",
+          script: value ?? "",
+          secretEnv:
+            siblingSecretEnv && Object.keys(siblingSecretEnv).length > 0
+              ? siblingSecretEnv
+              : undefined,
+        })}
     </div>
   );
 };