@revenexx/studio-integrations 0.1.3 → 0.2.0

package/dist/runtime/components/Integrations/NodeConfigField.vue

@@ -0,0 +1,587 @@
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import { AddCircle as Plus, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import {
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+  Textarea
+} from "@revenexx/studio";
+const props = defineProps({
+  field: { type: Object, required: true },
+  config: { type: Object, required: true },
+  slug: { type: String, required: true },
+  version: { type: String, required: true },
+  secretKeys: { type: Array, required: true },
+  staticKeys: { type: Array, required: false },
+  depth: { type: Number, required: false },
+  variables: { type: Object, required: false },
+  upstreamOutputs: { type: Array, required: false }
+});
+const emit = defineEmits(["set"]);
+const value = computed(() => props.config[props.field.key]);
+function write(v) {
+  emit("set", props.field.key, v);
+}
+function labelText(v) {
+  if (!v) return "";
+  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
+}
+const exprHint = "${{ \u2026 }}";
+const descriptionText = computed(() => labelText(props.field.description));
+function isEmpty(v) {
+  return v === void 0 || v === null || v === "" || Array.isArray(v) && v.length === 0;
+}
+const requiredMissing = computed(() => !!props.field.required && isEmpty(value.value));
+const formatError = computed(() => {
+  const v = value.value;
+  if (isEmpty(v)) return null;
+  const val = props.field.validation;
+  if (!val) return null;
+  if (typeof v === "string") {
+    if (val.minLength != null && v.length < val.minLength) return `Must be at least ${val.minLength} characters`;
+    if (val.maxLength != null && v.length > val.maxLength) return `Must be at most ${val.maxLength} characters`;
+    if (val.pattern) {
+      try {
+        if (!new RegExp(val.pattern).test(v)) return "Does not match the required format";
+      } catch {
+      }
+    }
+  }
+  if (typeof v === "number") {
+    if (val.min != null && v < val.min) return `Must be \u2265 ${val.min}`;
+    if (val.max != null && v > val.max) return `Must be \u2264 ${val.max}`;
+  }
+  return null;
+});
+const invalid = computed(() => !!formatError.value);
+const constraintHint = computed(() => {
+  const val = props.field.validation;
+  if (!val) return "";
+  if (props.field.type === "number") {
+    if (val.min != null && val.max != null) return `${val.min}\u2013${val.max}`;
+    if (val.min != null) return `\u2265 ${val.min}`;
+    if (val.max != null) return `\u2264 ${val.max}`;
+  } else {
+    if (val.minLength != null && val.maxLength != null) return `${val.minLength}\u2013${val.maxLength} characters`;
+    if (val.minLength != null) return `at least ${val.minLength} characters`;
+    if (val.maxLength != null) return `up to ${val.maxLength} characters`;
+  }
+  return "";
+});
+const { credentials, load: loadCredentials } = useIntegrationsCredentials();
+onMounted(() => {
+  void loadCredentials();
+});
+function credsOfType(slug) {
+  if (!slug) return credentials.value;
+  const slugs = (Array.isArray(slug) ? slug : [slug]).map((s) => s.trim()).filter(Boolean);
+  if (!slugs.length) return credentials.value;
+  const wanted = new Set(slugs);
+  return credentials.value.filter((c) => wanted.has(c.credential_type_slug));
+}
+function credsForField(field) {
+  const list = credsOfType(field.credentialType);
+  const selectedId = value.value;
+  if (selectedId && !list.some((c) => c.id === selectedId)) {
+    const sel = credentials.value.find((c) => c.id === selectedId);
+    if (sel) return [sel, ...list];
+  }
+  return list;
+}
+function credNeedsReauth(id) {
+  return credentials.value.some((c) => c.id === id && c.status === "needs_reauth");
+}
+const credCreateOpen = ref(false);
+const sftpImportOpen = ref(false);
+function acceptsSftp(field) {
+  const t = field.credentialType;
+  return t === "revenexx:sftp" || Array.isArray(t) && t.includes("revenexx:sftp");
+}
+const EXPR_TOKEN = "${{";
+const canToggleExpression = computed(
+  () => !!props.field.dynamic || ["number", "boolean", "select", "multiselect"].includes(props.field.type)
+);
+const exprMode = ref(false);
+const valueIsExpression = computed(() => typeof value.value === "string" && value.value.includes(EXPR_TOKEN));
+const showExpression = computed(() => canToggleExpression.value && (exprMode.value || valueIsExpression.value));
+function toggleExpression() {
+  if (showExpression.value) {
+    if (valueIsExpression.value) write(void 0);
+    exprMode.value = false;
+  } else {
+    exprMode.value = true;
+  }
+}
+const isObjectField = computed(() => props.field.type === "object");
+function isFlatObject(v) {
+  return !!v && typeof v === "object" && !Array.isArray(v) && Object.values(v).every((x) => x === null || ["string", "number", "boolean"].includes(typeof x));
+}
+const flatCapable = computed(() => {
+  const v = value.value;
+  return v === void 0 || v === null || isFlatObject(v);
+});
+const objectMode = ref("form");
+watch(flatCapable, (flat) => {
+  if (!flat) objectMode.value = "json";
+}, { immediate: true });
+const kvRows = ref([]);
+function rowsToObject(rows) {
+  const out = {};
+  for (const r of rows) {
+    if (r.key.trim() !== "") out[r.key.trim()] = r.value;
+  }
+  return out;
+}
+watch(
+  () => props.config[props.field.key],
+  (v) => {
+    if (!isObjectField.value) return;
+    const external = v && typeof v === "object" && !Array.isArray(v) ? v : {};
+    if (JSON.stringify(rowsToObject(kvRows.value)) !== JSON.stringify(external)) {
+      kvRows.value = Object.entries(external).map(([k, val]) => ({
+        key: k,
+        value: typeof val === "string" ? val : JSON.stringify(val)
+      }));
+    }
+  },
+  { immediate: true }
+);
+function commitKvRows() {
+  const obj = rowsToObject(kvRows.value);
+  write(Object.keys(obj).length || kvRows.value.length ? obj : void 0);
+}
+function setKvRow(idx, patch) {
+  kvRows.value = kvRows.value.map((r, i) => i === idx ? { ...r, ...patch } : r);
+  commitKvRows();
+}
+function addKvRow() {
+  kvRows.value = [...kvRows.value, { key: "", value: "" }];
+}
+function removeKvRow(idx) {
+  kvRows.value = kvRows.value.filter((_, i) => i !== idx);
+  commitKvRows();
+}
+const isQueryField = computed(
+  () => props.field.type === "array" && props.field.items?.type !== "object" && /(^|__)queries$/.test(props.field.key)
+);
+const isJsonField = computed(
+  () => isObjectField.value && objectMode.value === "json" || props.field.type === "array" && props.field.items?.type !== "object" && !isQueryField.value
+);
+const jsonError = ref(null);
+const jsonDraft = ref("");
+watch(
+  () => [props.config[props.field.key], isJsonField.value],
+  ([v]) => {
+    if (!isJsonField.value) return;
+    const current = (() => {
+      try {
+        return JSON.parse(jsonDraft.value);
+      } catch {
+        return /* @__PURE__ */ Symbol("invalid");
+      }
+    })();
+    if (JSON.stringify(current) !== JSON.stringify(v)) {
+      jsonDraft.value = v === void 0 || v === null ? "" : JSON.stringify(v, null, 2);
+      jsonError.value = null;
+    }
+  },
+  { immediate: true }
+);
+function writeJson(text) {
+  jsonDraft.value = text;
+  if (text.trim() === "") {
+    jsonError.value = null;
+    emit("set", props.field.key, void 0);
+    return;
+  }
+  try {
+    const parsed = JSON.parse(text);
+    jsonError.value = null;
+    emit("set", props.field.key, parsed);
+  } catch {
+    jsonError.value = "Not valid JSON yet \u2014 the value is kept once it parses.";
+  }
+}
+function readArray() {
+  return Array.isArray(value.value) ? value.value : [];
+}
+function pushArrayItem(defaultItem) {
+  write([...readArray(), defaultItem]);
+}
+function removeArrayItem(index) {
+  const arr = readArray().slice();
+  arr.splice(index, 1);
+  write(arr);
+}
+function setArrayItemField(index, fieldKey, v) {
+  const arr = readArray().slice();
+  arr[index] = { ...arr[index] ?? {}, [fieldKey]: v };
+  write(arr);
+}
+</script>
+
+<template>
+  <div class="space-y-1.5">
+    <div class="flex items-center justify-between gap-2">
+      <Label class="text-mono text-muted-foreground">
+        {{ labelText(field.label) }}<span v-if="field.required" class="text-rose-500" title="Required"> *</span>
+      </Label>
+      <div class="flex shrink-0 items-center gap-1.5">
+        <div v-if="isObjectField && !showExpression" class="flex items-center rounded border border-black/[0.08] bg-white p-px">
+          <button
+            type="button"
+            :disabled="!flatCapable"
+            title="Edit as key/value rows"
+            class="rounded px-1 py-px text-[10px] font-medium transition disabled:pointer-events-none disabled:opacity-40"
+            :class="objectMode === 'form' ? 'bg-slate-100 text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="objectMode = 'form'"
+          >
+            Fields
+          </button>
+          <button
+            type="button"
+            title="Edit as raw JSON"
+            class="rounded px-1 py-px text-[10px] font-medium transition"
+            :class="objectMode === 'json' ? 'bg-slate-100 text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="objectMode = 'json'"
+          >
+            JSON
+          </button>
+        </div>
+        <button
+          v-if="canToggleExpression"
+          type="button"
+          class="rounded border px-1 py-0.5 font-mono text-[10px] transition"
+          :class="showExpression ? 'border-emerald-500/40 bg-emerald-500/15 text-emerald-700' : 'border-black/[0.08] bg-white text-muted-foreground hover:text-foreground'"
+          :title="showExpression ? 'Back to the regular control (clears the expression)' : 'Map this value from a previous step instead'"
+          @click="toggleExpression"
+        >
+          {{ exprHint }}
+        </button>
+        <span
+          v-else-if="field.expressionAllowed"
+          class="rounded border border-emerald-500/25 bg-emerald-500/10 px-1 py-0.5 font-mono text-[10px] text-emerald-600"
+          title="Accepts ${{ … }} expressions"
+        >
+          {{ exprHint }}
+        </span>
+      </div>
+    </div>
+    <!-- inline help (boolean uses its description as the toggle label instead) -->
+    <p v-if="descriptionText && field.type !== 'boolean'" class="text-sm text-muted-foreground leading-snug">
+      {{ descriptionText }}
+    </p>
+
+    <!-- object / plain-array fields: JSON editor (expressions stay usable
+         inside string values). Wins over expressionAllowed — an object value
+         in a text input would render as [object Object]. -->
+    <!-- queries parameter: filter builder -->
+    <IntegrationsQueryBuilder
+      v-if="isQueryField"
+      :model-value="value"
+      @update:model-value="(v) => write(v)"
+    />
+
+    <template v-else-if="isJsonField">
+      <Textarea
+        :model-value="jsonDraft"
+        :rows="8"
+        spellcheck="false"
+        class="font-mono text-xs"
+        :placeholder="labelText(field.placeholder) || '{ }'"
+        @update:model-value="(v) => writeJson(String(v))"
+      />
+      <p v-if="jsonError" class="text-sm text-amber-600">{{ jsonError }}</p>
+    </template>
+
+    <!-- object field in key/value mode -->
+    <div v-else-if="isObjectField && objectMode === 'form'" class="space-y-1.5">
+      <div v-for="(row, idx) in kvRows" :key="idx" class="flex items-center gap-1.5">
+        <Input
+          :model-value="row.key"
+          placeholder="key"
+          class="h-7 w-[38%] bg-white font-mono text-sm"
+          @update:model-value="(v) => setKvRow(idx, { key: String(v) })"
+        />
+        <Input
+          :model-value="row.value"
+          placeholder="value"
+          class="h-7 min-w-0 flex-1 bg-white text-sm"
+          @update:model-value="(v) => setKvRow(idx, { value: String(v) })"
+        />
+        <button
+          type="button"
+          class="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:text-rose-600"
+          @click="removeKvRow(idx)"
+        >
+          <Trash2 :size="11" />
+        </button>
+      </div>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        class="h-7 w-full text-sm"
+        @click="addKvRow"
+      >
+        <Plus :size="11" />
+        Add row
+      </Button>
+    </div>
+
+    <!-- typed control flipped to expression mode -->
+    <IntegrationsExpressionInput
+      v-else-if="showExpression"
+      :model-value="typeof value === 'string' ? value : ''"
+      :placeholder="labelText(field.placeholder)"
+      :variables="variables"
+      :upstream-outputs="upstreamOutputs"
+      @update:model-value="(v) => write(v)"
+    />
+
+    <!-- dynamic options — resolved at author time via config:resolve. Ahead of
+         the generic expression branch so a dynamic select with
+         expressionAllowed still renders as a dropdown by default. -->
+    <IntegrationsNodeConfigDynamicField
+      v-else-if="field.dynamic"
+      :slug="slug"
+      :version="version"
+      :field="field"
+      :config="config"
+      :model-value="value"
+      @update:model-value="write"
+    />
+
+    <!-- expression-capable string: token-autocomplete input -->
+    <IntegrationsExpressionInput
+      v-else-if="field.type === 'expression' || field.expressionAllowed"
+      :model-value="value"
+      :placeholder="labelText(field.placeholder)"
+      :variables="variables"
+      :upstream-outputs="upstreamOutputs"
+      @update:model-value="(v) => write(v)"
+    />
+
+    <!-- plain string (no expressions) -->
+    <Input
+      v-else-if="field.type === 'string'"
+      :model-value="value ?? ''"
+      :placeholder="labelText(field.placeholder)"
+      class="h-8 text-sm bg-white"
+      :class="invalid ? 'border-rose-400 focus-visible:ring-rose-400/40' : ''"
+      @update:model-value="(v) => write(v)"
+    />
+
+    <!-- number -->
+    <Input
+      v-else-if="field.type === 'number'"
+      type="number"
+      :model-value="value ?? ''"
+      class="h-8 text-sm bg-white"
+      :class="invalid ? 'border-rose-400 focus-visible:ring-rose-400/40' : ''"
+      @update:model-value="(v) => write(v === '' ? null : Number(v))"
+    />
+
+    <!-- boolean -->
+    <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2 pt-1">
+      <Switch
+        :model-value="Boolean(value)"
+        @update:model-value="(v) => write(v)"
+      />
+      <span class="text-sm text-muted-foreground">
+        {{ labelText(field.description) }}
+      </span>
+    </div>
+
+    <!-- dynamic schema — child fields resolved at author time, written into the flat config -->
+    <IntegrationsNodeConfigDynamicSchema
+      v-else-if="field.type === 'dynamic-schema'"
+      :slug="slug"
+      :version="version"
+      :field="field"
+      :config="config"
+      :static-keys="staticKeys ?? []"
+      :secret-keys="secretKeys"
+      :depth="depth ?? 0"
+      @set="(k, v) => emit('set', k, v)"
+    />
+
+    <!-- select -->
+    <Select
+      v-else-if="field.type === 'select'"
+      :model-value="value ?? ''"
+      @update:model-value="(v) => write(v)"
+    >
+      <SelectTrigger class="h-8 text-sm bg-white">
+        <SelectValue :placeholder="labelText(field.placeholder) || 'Pick one'" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem v-for="opt in field.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
+          {{ labelText(opt.label) }}
+        </SelectItem>
+      </SelectContent>
+    </Select>
+
+    <!-- multiselect — pill toggles for now -->
+    <div v-else-if="field.type === 'multiselect'" class="flex flex-wrap gap-1">
+      <button
+        v-for="opt in field.options ?? []"
+        :key="String(opt.value)"
+        type="button"
+        class="rounded-md border border-black/[0.08] px-1.5 py-0.5 text-sm transition"
+        :class="(value ?? []).includes(opt.value) ? 'bg-emerald-500/15 text-emerald-700 border-emerald-500/30' : 'bg-white text-muted-foreground hover:text-foreground'"
+        @click="() => {
+  const current = value ?? [];
+  const has = current.includes(opt.value);
+  write(has ? current.filter((v) => v !== opt.value) : [...current, opt.value]);
+}"
+      >
+        {{ labelText(opt.label) }}
+      </button>
+    </div>
+
+    <!-- secret-ref -->
+    <Select
+      v-else-if="field.type === 'secret-ref'"
+      :model-value="value ?? ''"
+      @update:model-value="(v) => write(v)"
+    >
+      <SelectTrigger class="h-8 text-sm bg-white">
+        <SelectValue placeholder="Pick a secret" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem v-for="k in secretKeys" :key="k" :value="k">{{ k }}</SelectItem>
+      </SelectContent>
+    </Select>
+
+    <!-- credentials-ref — pick a credential of the required type -->
+    <template v-else-if="field.type === 'credentials-ref'">
+      <Select
+        :model-value="value ?? ''"
+        @update:model-value="(v) => write(v)"
+      >
+        <SelectTrigger class="h-8 text-sm bg-white">
+          <SelectValue placeholder="Pick a credential" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem v-for="c in credsForField(field)" :key="c.id" :value="c.id">
+            <span class="flex items-center gap-1.5">
+              <span class="size-1.5 shrink-0 rounded-full" :class="c.status === 'needs_reauth' ? 'bg-amber-500' : 'bg-emerald-500'" />
+              <span class="min-w-0 truncate">{{ c.name }}</span>
+              <span v-if="c.status === 'needs_reauth'" class="shrink-0 text-[10px] text-amber-600">reconnect</span>
+            </span>
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      <p v-if="credNeedsReauth(value)" class="text-sm text-amber-600">
+        This credential needs reconnect.
+      </p>
+      <div class="flex items-center gap-3">
+        <button type="button" class="text-sm font-medium text-violet-600 hover:underline" @click="credCreateOpen = true">
+          + New credential
+        </button>
+        <button
+          v-if="acceptsSftp(field)"
+          type="button"
+          class="text-sm font-medium text-violet-600 hover:underline"
+          @click="sftpImportOpen = true"
+        >
+          Import SFTP account
+        </button>
+        <NuxtLink to="/integrations/credentials" class="text-sm text-muted-foreground hover:underline">
+          Manage →
+        </NuxtLink>
+      </div>
+      <IntegrationsCredentialCreateDialog
+        v-model:open="credCreateOpen"
+        :credential-type="field.credentialType"
+        @created="(id) => write(id)"
+      />
+      <IntegrationsSftpAccountImportDialog
+        v-if="acceptsSftp(field)"
+        v-model:open="sftpImportOpen"
+        @created="(id) => write(id)"
+      />
+    </template>
+
+    <!-- array of objects (e.g. headers / mappings) -->
+    <div v-else-if="field.type === 'array' && field.items?.type === 'object'" class="space-y-2">
+      <div
+        v-for="(item, idx) in readArray()"
+        :key="idx"
+        class="rounded-md border border-black/[0.06] bg-muted/20 p-2 space-y-1.5"
+      >
+        <div class="flex items-center justify-between">
+          <span class="text-mono text-muted-foreground">
+            #{{ idx + 1 }}
+          </span>
+          <button
+            type="button"
+            class="flex size-5 items-center justify-center rounded text-muted-foreground hover:text-rose-600"
+            @click="removeArrayItem(idx)"
+          >
+            <Trash2 :size="11" />
+          </button>
+        </div>
+        <div
+          v-for="sub in field.items.properties ?? []"
+          :key="sub.key"
+          class="space-y-1"
+        >
+          <Label class="text-mono text-muted-foreground">
+            {{ labelText(sub.label) }}
+          </Label>
+          <Input
+            :model-value="item[sub.key] ?? ''"
+            :placeholder="labelText(sub.placeholder)"
+            class="h-7 text-sm bg-white"
+            :class="sub.type === 'expression' ? 'font-mono' : ''"
+            @update:model-value="(v) => setArrayItemField(idx, sub.key, v)"
+          />
+        </div>
+      </div>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        class="h-7 text-sm w-full"
+        @click="pushArrayItem(Object.fromEntries((field.items?.properties ?? []).map((p) => [p.key, ''])))"
+      >
+        <Plus :size="11" />
+        Add row
+      </Button>
+    </div>
+
+    <!-- fallback: JSON textarea for complex types -->
+    <Textarea
+      v-else
+      :model-value="value === void 0 ? '' : JSON.stringify(value, null, 2)"
+      rows="3"
+      class="text-sm font-mono bg-white"
+      @update:model-value="(v) => {
+  try {
+    write(v ? JSON.parse(String(v)) : void 0);
+  } catch {
+  }
+}"
+    />
+
+    <!-- validation feedback: hard error, else soft required hint, else constraint hint -->
+    <p v-if="formatError" class="text-sm text-rose-600">
+      {{ formatError }}
+    </p>
+    <p v-else-if="requiredMissing" class="text-sm text-amber-600">
+      Required
+    </p>
+    <p v-else-if="constraintHint" class="text-sm text-muted-foreground">
+      {{ constraintHint }}
+    </p>
+  </div>
+</template>

package/dist/runtime/components/Integrations/NodeConfigField.vue.d.ts

@@ -0,0 +1,23 @@
+import type { ConfigField, WorkflowVariable } from '../../types/integrations.js';
+type __VLS_Props = {
+    field: ConfigField;
+    config: Record<string, unknown>;
+    slug: string;
+    version: string;
+    secretKeys: string[];
+    staticKeys?: string[];
+    depth?: number;
+    variables?: Record<string, WorkflowVariable>;
+    upstreamOutputs?: Array<{
+        nodeId: string;
+        nodeName?: string;
+        output: string;
+        fields?: string[];
+    }>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    set: (key: string, value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSet?: ((key: string, value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/NodeDynamicOutputsResolver.d.vue.ts

@@ -0,0 +1,14 @@
+import type { NodeManifestOutput } from '../../types/integrations.js';
+type __VLS_Props = {
+    nodeId: string;
+    slug: string;
+    version: string;
+    config: Record<string, unknown>;
+    staticOutputs: NodeManifestOutput[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    resolved: (nodeId: string, outputs: NodeManifestOutput[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onResolved?: ((nodeId: string, outputs: NodeManifestOutput[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;