orkestr 1.0.0

data/app/javascript/orkestr-ui/src/components/Editor/EditorToolbar.tsx

@@ -0,0 +1,153 @@
+import React, { useState } from "react";
+import type { TriggerDefinition } from "../../types";
+import { JsonSchemaForm } from "../shared/JsonSchemaForm";
+import {
+  EntryConditionsEditor,
+  type EntryConditions,
+} from "../shared/EntryConditionsEditor";
+
+interface Props {
+  name: string;
+  triggerType: string | null;
+  triggerConfig: Record<string, unknown>;
+  triggers: TriggerDefinition[];
+  saving: boolean;
+  apiBaseUrl: string;
+  workflowId: string;
+  onNameChange: (name: string) => void;
+  onTriggerChange: (type: string | null, config: Record<string, unknown>) => void;
+  onSave: () => void;
+  onRun: () => void;
+  onBack: () => void;
+}
+
+export function EditorToolbar({
+  name,
+  triggerType,
+  triggerConfig,
+  triggers,
+  saving,
+  apiBaseUrl,
+  workflowId,
+  onNameChange,
+  onTriggerChange,
+  onSave,
+  onRun,
+  onBack,
+}: Props) {
+  const [showTriggerPanel, setShowTriggerPanel] = useState(false);
+  const selectedTrigger = triggers.find((t) => t.id === triggerType);
+
+  const webhookUrl = triggerType === "webhook"
+    ? `${apiBaseUrl.replace(/\/+$/, "")}/webhooks/${workflowId}`
+    : null;
+
+  return (
+    <div className="ork-editor-toolbar">
+      <div className="ork-editor-toolbar-title">
+        <button className="ork-btn ork-btn-sm" onClick={onBack}>
+          &larr;
+        </button>
+        <input type="text" value={name} onChange={(e) => onNameChange(e.target.value)} placeholder="Workflow name" />
+      </div>
+      <div className="ork-toolbar-actions">
+        <button
+          className={`ork-btn ork-btn-sm ${showTriggerPanel ? "ork-btn-primary" : ""}`}
+          onClick={() => setShowTriggerPanel(!showTriggerPanel)}
+        >
+          Trigger: {selectedTrigger?.label || triggerType || "none"}
+        </button>
+        <button className="ork-btn ork-btn-sm" onClick={onRun}>
+          Run
+        </button>
+        <button className="ork-btn ork-btn-primary ork-btn-sm" onClick={onSave} disabled={saving}>
+          {saving ? "Saving..." : "Save"}
+        </button>
+      </div>
+
+      {showTriggerPanel && (
+        <div className="ork-trigger-panel">
+          <div className="ork-trigger-panel-header">
+            <h3>Trigger Configuration</h3>
+            <button className="ork-btn ork-btn-sm" onClick={() => setShowTriggerPanel(false)}>
+              &times;
+            </button>
+          </div>
+
+          <div className="ork-form-group">
+            <label className="ork-label">Trigger Type</label>
+            <select
+              className="ork-select"
+              value={triggerType || ""}
+              onChange={(e) => {
+                const newType = e.target.value || null;
+                onTriggerChange(newType, {});
+              }}
+            >
+              <option value="">None</option>
+              {triggers.map((t) => (
+                <option key={t.id} value={t.id}>
+                  {t.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {selectedTrigger?.config_schema && (
+            <div className="ork-trigger-config-form">
+              <label className="ork-label">Settings</label>
+              <JsonSchemaForm
+                schema={selectedTrigger.config_schema}
+                values={triggerConfig}
+                onChange={(vals) => onTriggerChange(triggerType!, vals)}
+              />
+            </div>
+          )}
+
+          {/* Entry conditions */}
+          {triggerType && (
+            <div className="ork-trigger-config-form">
+              <label className="ork-label">Entry Conditions</label>
+              <div className="ork-field-description">
+                Restrict which entities or contexts can trigger this workflow
+              </div>
+              <EntryConditionsEditor
+                value={triggerConfig.entry_conditions as EntryConditions | undefined}
+                onChange={(conditions) => {
+                  const updated = { ...triggerConfig };
+                  if (conditions && conditions.rules.length > 0) {
+                    updated.entry_conditions = conditions;
+                  } else {
+                    delete updated.entry_conditions;
+                  }
+                  onTriggerChange(triggerType!, updated);
+                }}
+              />
+            </div>
+          )}
+
+          {webhookUrl && (
+            <div className="ork-form-group">
+              <label className="ork-label">Webhook URL</label>
+              <div className="ork-webhook-url">
+                <code>{webhookUrl}</code>
+                <button
+                  className="ork-btn ork-btn-sm"
+                  onClick={() => navigator.clipboard?.writeText(webhookUrl)}
+                  title="Copy URL"
+                >
+                  Copy
+                </button>
+              </div>
+              {typeof triggerConfig.secret === "string" && triggerConfig.secret && (
+                <div className="ork-field-description">
+                  Header: <code>X-Webhook-Secret: {triggerConfig.secret}</code>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

data/app/javascript/orkestr-ui/src/components/Editor/FormSchemaBuilder.tsx

@@ -0,0 +1,390 @@
+import React, { useEffect, useRef, useState } from "react";
+import { getCustomFieldTypes, getCustomRenderer, onFieldTypesChanged } from "../../fieldRegistry";
+
+interface FormField {
+  name: string;
+  type: string;
+  required: boolean;
+  description: string;
+  // Select-specific
+  options?: SelectOption[];
+  options_url?: string;
+  multiple?: boolean;
+  // Text
+  placeholder?: string;
+  // Extra properties for custom field types (e.g. min, max, step for slider)
+  [key: string]: unknown;
+}
+
+interface SelectOption {
+  label: string;
+  value: string;
+}
+
+export interface FormSchema {
+  type: string;
+  properties: Record<string, Record<string, unknown>>;
+  required: string[];
+}
+
+interface Props {
+  value: FormSchema | undefined;
+  onChange: (schema: FormSchema) => void;
+}
+
+const BUILT_IN_TYPES = [
+  { value: "string", label: "Text" },
+  { value: "text", label: "Textarea" },
+  { value: "number", label: "Number" },
+  { value: "boolean", label: "Checkbox" },
+  { value: "select", label: "Select" },
+  { value: "date", label: "Date" },
+  { value: "email", label: "Email" },
+  { value: "url", label: "URL" },
+  { value: "file", label: "File" },
+];
+
+function getFieldTypes(): { value: string; label: string }[] {
+  const custom = getCustomFieldTypes();
+  return [...BUILT_IN_TYPES, ...custom];
+}
+
+const KNOWN_SCHEMA_KEYS = new Set(["type", "format", "description", "options", "options_url", "multiple", "placeholder"]);
+const KNOWN_FORM_KEYS = new Set(["name", "type", "required", "description", "options", "options_url", "multiple", "placeholder"]);
+
+function parseFields(schema: FormSchema | undefined): FormField[] {
+  if (!schema?.properties) return [];
+  const required = schema.required || [];
+  return Object.entries(schema.properties).map(([name, prop]) => {
+    const field: FormField = {
+      name,
+      type: (prop.format as string) || (prop.type as string) || "string",
+      required: required.includes(name),
+      description: (prop.description as string) || "",
+      options: prop.options as SelectOption[] | undefined,
+      options_url: prop.options_url as string | undefined,
+      multiple: prop.multiple as boolean | undefined,
+      placeholder: prop.placeholder as string | undefined,
+    };
+    // Preserve extra properties for custom field types (e.g. min, max, step)
+    for (const [k, v] of Object.entries(prop)) {
+      if (!KNOWN_SCHEMA_KEYS.has(k)) {
+        field[k] = v;
+      }
+    }
+    return field;
+  });
+}
+
+function fieldsToSchema(fields: FormField[]): FormSchema {
+  const properties: Record<string, Record<string, unknown>> = {};
+  const required: string[] = [];
+
+  fields.forEach((f) => {
+    const key = f.name.trim();
+    if (!key) return;
+
+    const prop: Record<string, unknown> = {};
+
+    // Map UI types to JSON Schema types + format
+    switch (f.type) {
+      case "text":
+        prop.type = "string";
+        prop.format = "text";
+        break;
+      case "date":
+        prop.type = "string";
+        prop.format = "date";
+        break;
+      case "email":
+        prop.type = "string";
+        prop.format = "email";
+        break;
+      case "url":
+        prop.type = "string";
+        prop.format = "url";
+        break;
+      case "file":
+        prop.type = "string";
+        prop.format = "file";
+        break;
+      case "select":
+        prop.type = "string";
+        prop.format = "select";
+        if (f.multiple) prop.multiple = true;
+        if (f.options?.length) prop.options = f.options;
+        if (f.options_url) prop.options_url = f.options_url;
+        break;
+      case "number":
+        prop.type = "number";
+        break;
+      case "boolean":
+        prop.type = "boolean";
+        break;
+      default:
+        // Custom types or plain string
+        prop.type = "string";
+        if (f.type !== "string") prop.format = f.type;
+        // Carry over extra properties from custom field config
+        for (const [k, v] of Object.entries(f)) {
+          if (!KNOWN_FORM_KEYS.has(k) && v !== undefined) {
+            prop[k] = v;
+          }
+        }
+        break;
+    }
+
+    if (f.description) prop.description = f.description;
+    if (f.placeholder) prop.placeholder = f.placeholder;
+
+    properties[key] = prop;
+    if (f.required) required.push(key);
+  });
+
+  return { type: "object", properties, required };
+}
+
+export function FormSchemaBuilder({ value, onChange }: Props) {
+  const [fields, setFields] = useState<FormField[]>(() => parseFields(value));
+  const [, setFieldTypesVersion] = useState(0);
+
+  useEffect(() => {
+    setFields(parseFields(value));
+  }, [value?.properties ? Object.keys(value.properties).join(",") : ""]);
+
+  // Re-render when host app registers custom field types
+  useEffect(() => onFieldTypesChanged(() => setFieldTypesVersion((v) => v + 1)), []);
+
+  const commit = (updated: FormField[]) => {
+    setFields(updated);
+    onChange(fieldsToSchema(updated));
+  };
+
+  const addField = () => {
+    setFields([...fields, { name: "", type: "string", required: false, description: "" }]);
+  };
+
+  const removeField = (index: number) => {
+    commit(fields.filter((_, i) => i !== index));
+  };
+
+  const updateField = (index: number, patch: Partial<FormField>) => {
+    const updated = [...fields];
+    updated[index] = { ...updated[index], ...patch };
+    commit(updated);
+  };
+
+  const fieldTypes = getFieldTypes();
+
+  return (
+    <div className="ork-form-group">
+      <label className="ork-label">Form Fields</label>
+      <div className="ork-field-description">
+        Define the form that assignees will fill out
+      </div>
+      <div className="ork-array-items">
+        {fields.map((field, index) => (
+          <div key={index} className="ork-array-item">
+            <div className="ork-array-item-header">
+              <span className="ork-array-item-index">#{index + 1}</span>
+              <button
+                type="button"
+                className="ork-btn ork-btn-danger ork-btn-sm"
+                onClick={() => removeField(index)}
+              >
+                &times;
+              </button>
+            </div>
+            <div className="ork-form-group">
+              <label className="ork-label">Field Name *</label>
+              <input
+                className="ork-input"
+                type="text"
+                value={field.name}
+                placeholder="e.g. approved"
+                onChange={(e) => updateField(index, { name: e.target.value })}
+              />
+            </div>
+            <div className="ork-form-builder-row">
+              <div className="ork-form-group" style={{ flex: 1 }}>
+                <label className="ork-label">Type</label>
+                <select
+                  className="ork-select"
+                  value={field.type}
+                  onChange={(e) => updateField(index, { type: e.target.value })}
+                >
+                  {fieldTypes.map((t) => (
+                    <option key={t.value} value={t.value}>{t.label}</option>
+                  ))}
+                </select>
+              </div>
+              <div className="ork-form-group" style={{ flex: 0 }}>
+                <label className="ork-label">Required</label>
+                <label className="ork-checkbox-label">
+                  <input
+                    type="checkbox"
+                    checked={field.required}
+                    onChange={(e) => updateField(index, { required: e.target.checked })}
+                  />
+                </label>
+              </div>
+            </div>
+            <div className="ork-form-group">
+              <label className="ork-label">Description</label>
+              <input
+                className="ork-input"
+                type="text"
+                value={field.description}
+                placeholder="Optional description"
+                onChange={(e) => updateField(index, { description: e.target.value })}
+              />
+            </div>
+            <div className="ork-form-group">
+              <label className="ork-label">Placeholder</label>
+              <input
+                className="ork-input"
+                type="text"
+                value={field.placeholder || ""}
+                placeholder="Optional placeholder"
+                onChange={(e) => updateField(index, { placeholder: e.target.value || undefined })}
+              />
+            </div>
+
+            {/* Select-specific options */}
+            {field.type === "select" && (
+              <SelectFieldConfig field={field} onUpdate={(patch) => updateField(index, patch)} />
+            )}
+
+            {/* Custom field config from host app */}
+            {getCustomRenderer(field.type)?.configRender && (
+              <CustomConfigPanel
+                fieldType={field.type}
+                field={fieldsToSchemaField(field)}
+                onChange={(patch) => updateField(index, patch as Partial<FormField>)}
+              />
+            )}
+
+          </div>
+        ))}
+      </div>
+      <button type="button" className="ork-btn ork-btn-sm" onClick={addField}>
+        + Add Field
+      </button>
+    </div>
+  );
+}
+
+/* ── Helper: convert FormField to schema-like prop object for configRender ── */
+function fieldsToSchemaField(field: FormField): Record<string, unknown> {
+  const prop: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(field)) {
+    if (k !== "name" && k !== "required" && v !== undefined) {
+      prop[k] = v;
+    }
+  }
+  return prop;
+}
+
+/* ── Custom config panel (bridges DOM configRender to React) ── */
+function CustomConfigPanel({ fieldType, field, onChange }: {
+  fieldType: string;
+  field: Record<string, unknown>;
+  onChange: (patch: Record<string, unknown>) => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const renderer = getCustomRenderer(fieldType);
+
+  useEffect(() => {
+    if (!containerRef.current || !renderer?.configRender) return;
+    containerRef.current.innerHTML = "";
+    renderer.configRender(containerRef.current, { field, onChange });
+  }, [renderer, fieldType]);
+
+  return <div ref={containerRef} />;
+}
+
+/* ── Select field configuration ── */
+function SelectFieldConfig({ field, onUpdate }: { field: FormField; onUpdate: (patch: Partial<FormField>) => void }) {
+  const options = field.options || [];
+
+  const addOption = () => {
+    onUpdate({ options: [...options, { label: "", value: "" }] });
+  };
+
+  const removeOption = (index: number) => {
+    onUpdate({ options: options.filter((_, i) => i !== index) });
+  };
+
+  const updateOption = (index: number, patch: Partial<SelectOption>) => {
+    const updated = [...options];
+    updated[index] = { ...updated[index], ...patch };
+    onUpdate({ options: updated });
+  };
+
+  return (
+    <>
+      <div className="ork-form-builder-row">
+        <div className="ork-form-group" style={{ flex: 0 }}>
+          <label className="ork-label">Multiple</label>
+          <label className="ork-checkbox-label">
+            <input
+              type="checkbox"
+              checked={!!field.multiple}
+              onChange={(e) => onUpdate({ multiple: e.target.checked || undefined })}
+            />
+          </label>
+        </div>
+      </div>
+
+      <div className="ork-form-group">
+        <label className="ork-label">Options URL (dynamic)</label>
+        <div className="ork-field-description">
+          API endpoint returning JSON array of {"{ label, value }"} objects
+        </div>
+        <input
+          className="ork-input"
+          type="text"
+          value={field.options_url || ""}
+          placeholder="/api/users?format=options"
+          onChange={(e) => onUpdate({ options_url: e.target.value || undefined })}
+        />
+      </div>
+
+      <div className="ork-form-group">
+        <label className="ork-label">Static Options</label>
+        <div className="ork-array-items">
+          {options.map((opt, i) => (
+            <div key={i} className="ork-form-builder-row">
+              <input
+                className="ork-input"
+                type="text"
+                placeholder="Label"
+                value={opt.label}
+                onChange={(e) => updateOption(i, { label: e.target.value })}
+                style={{ flex: 1 }}
+              />
+              <input
+                className="ork-input"
+                type="text"
+                placeholder="Value"
+                value={opt.value}
+                onChange={(e) => updateOption(i, { value: e.target.value })}
+                style={{ flex: 1 }}
+              />
+              <button
+                type="button"
+                className="ork-btn ork-btn-danger ork-btn-sm"
+                onClick={() => removeOption(i)}
+              >
+                &times;
+              </button>
+            </div>
+          ))}
+        </div>
+        <button type="button" className="ork-btn ork-btn-sm" onClick={addOption}>
+          + Add Option
+        </button>
+      </div>
+    </>
+  );
+}