@revenexx/studio-integrations 0.6.0 → 1.0.0

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

@@ -2,8 +2,10 @@
 import { computed, ref } from "vue";
 import { Handle, Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
-import { ClockCircle as Clock, Play, TrashBinMinimalistic as Trash2, LinkRound as Webhook, Bolt } from "#solar-icons";
+import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import { triggerGlyph as glyphForTrigger } from "../../data/triggerGlyphs";
 import { resolveDisplayName } from "../../utils/localize";
+import { triggerTypeLabel } from "../../data/integrationNodeCatalog";
 import { describeCron } from "../../utils/schedule";
 const props = defineProps({
   id: { type: String, required: true },
@@ -12,19 +14,18 @@ const props = defineProps({
 });
 defineOptions({ inheritAttrs: false });
 defineEmits(["updateNodeInternals"]);
-const icon = computed(() => {
-  return props.data.type === "schedule" ? Clock : props.data.type === "webhook" ? Webhook : props.data.type === "event" ? Bolt : Play;
-});
+const t = useIntegrationsT();
+const icon = computed(() => glyphForTrigger(props.data.type));
 const subtitle = computed(() => {
   const c = props.data.config;
-  if (props.data.type === "schedule") return describeCron(c.cron) ?? c.cron ?? "no schedule set";
+  if (props.data.type === "schedule") return describeCron(c.cron) ?? c.cron ?? t("integration.canvas.trigger.subtitle.noSchedule");
   if (props.data.type === "webhook") return `${c.method ?? "POST"} ${c.path ?? "/"}`;
-  if (props.data.type === "event") return c.event_type ? `on ${c.event_type}` : "no event set";
-  return "On demand";
+  if (props.data.type === "event") return c.event_type ? t("integration.canvas.trigger.subtitle.onEvent", { event: c.event_type }) : t("integration.canvas.trigger.subtitle.noEvent");
+  return t("integration.canvas.trigger.subtitle.onDemand");
 });
 const title = computed(() => {
   const n = props.data.name;
-  if (!n) return props.data.type.charAt(0).toUpperCase() + props.data.type.slice(1);
+  if (!n) return triggerTypeLabel(props.data.type);
   return resolveDisplayName(n);
 });
 const hovered = ref(false);
@@ -54,10 +55,11 @@ function sideToPosition(s) {
     <button
       type="button"
       class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-rose-600 hover:bg-rose-50"
-      title="Delete"
+      :title="t('integration.common.action.delete')"
+      :aria-label="t('integration.canvas.trigger.action.deleteAria')"
       @click="remove"
     >
-      <Trash2 :size="11" />
+      <TrashBin :size="11" />
     </button>
   </NodeToolbar>
 
@@ -74,7 +76,7 @@ function sideToPosition(s) {
          identically (icon chip size-8/15, subtitle plain text-sm, mt-0.5). -->
     <div class="flex items-center gap-2.5 px-3 py-2.5">
       <span class="flex size-8 shrink-0 items-center justify-center rounded-md bg-emerald-500 text-white shadow-sm">
-        <component :is="icon" :size="15" :stroke-width="2.5" />
+        <component :is="icon" :size="15" />
       </span>
       <div class="min-w-0 flex-1">
         <div class="text-sm font-semibold text-foreground leading-tight truncate">
@@ -86,8 +88,8 @@ function sideToPosition(s) {
       </div>
     </div>
     <div class="flex items-center justify-between border-t border-emerald-500/15 bg-emerald-500/[0.04] rounded-b-md px-3 py-1 text-mono text-emerald-700/80 font-semibold">
-      <span>Trigger · {{ data.type }}</span>
-      <span v-if="data.active === false" class="text-amber-600">Inactive</span>
+      <span>{{ t("integration.canvas.badge.trigger") }} · {{ data.type }}</span>
+      <span v-if="data.active === false" class="text-amber-600">{{ t("integration.canvas.trigger.badge.inactive") }}</span>
     </div>
   </div>
 

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

@@ -1,11 +1,12 @@
 <script setup>
 import { computed, reactive, ref, watch } from "vue";
-import { AddCircle as Plus, Copy, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import { AddCircle as Plus, Copy, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import {
   Button,
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   Input,
@@ -18,40 +19,59 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
-import { resolveDisplayName } from "../../utils/localize";
+import { languageKeyRead, languageKeyToWrite, resolveDisplayName } from "../../utils/localize";
 const props = defineProps({
   open: { type: Boolean, required: true },
   variables: { type: Object, required: true }
 });
 const emit = defineEmits(["update:open", "update:variables"]);
+const t = useIntegrationsT();
 const KEY_PATTERN = /^[a-z_][a-z0-9_]*$/i;
 const TYPES = ["string", "number", "boolean", "object", "array"];
+const working = ref({});
 const jsonDrafts = reactive({});
 const jsonErrors = reactive({});
+const descDrafts = reactive({});
 watch(() => props.open, (o) => {
   if (!o) return;
+  working.value = JSON.parse(JSON.stringify(props.variables));
   for (const k of Object.keys(jsonDrafts)) delete jsonDrafts[k];
   for (const k of Object.keys(jsonErrors)) delete jsonErrors[k];
-  for (const [key, v] of Object.entries(props.variables)) {
+  for (const k of Object.keys(descDrafts)) delete descDrafts[k];
+  for (const [key, v] of Object.entries(working.value)) {
+    descDrafts[key] = descriptionText(v);
     if (v.type === "object" || v.type === "array") {
       jsonDrafts[key] = v.default === void 0 ? "" : JSON.stringify(v.default, null, 2);
       jsonErrors[key] = null;
     }
   }
 });
-const entries = computed(() => Object.entries(props.variables));
+const entries = computed(() => Object.entries(working.value));
+const changed = computed(() => JSON.stringify(working.value) !== JSON.stringify(props.variables));
+const hasJsonError = computed(() => Object.values(jsonErrors).some(Boolean));
 function commit(next) {
-  emit("update:variables", next);
+  working.value = next;
+}
+function applyAndClose() {
+  for (const [key, v] of Object.entries(working.value)) {
+    if ((v.type === "object" || v.type === "array") && jsonDrafts[key] !== void 0) {
+      applyJsonDraft(key, v.type);
+    }
+  }
+  if (hasJsonError.value) return;
+  if (changed.value) emit("update:variables", working.value);
+  emit("update:open", false);
 }
 function patchVar(key, patch) {
-  const cur = props.variables[key];
+  const cur = working.value[key];
   if (!cur) return;
-  commit({ ...props.variables, [key]: { ...cur, ...patch } });
+  commit({ ...working.value, [key]: { ...cur, ...patch } });
 }
 function removeVar(key) {
-  const next = { ...props.variables };
+  const next = { ...working.value };
   delete next[key];
   delete jsonDrafts[key];
+  delete descDrafts[key];
   delete jsonErrors[key];
   commit(next);
 }
@@ -64,6 +84,8 @@ function changeType(key, type) {
     array: void 0
   };
   patchVar(key, { type, default: blank[type] });
+  delete jsonDrafts[key];
+  delete jsonErrors[key];
   if (type === "object" || type === "array") {
     jsonDrafts[key] = "";
     jsonErrors[key] = null;
@@ -80,49 +102,55 @@ function applyJsonDraft(key, type) {
     const parsed = JSON.parse(raw);
     const ok = type === "array" ? Array.isArray(parsed) : parsed !== null && typeof parsed === "object" && !Array.isArray(parsed);
     if (!ok) {
-      jsonErrors[key] = type === "array" ? "Must be a JSON array." : "Must be a JSON object.";
+      jsonErrors[key] = type === "array" ? t("integration.workflows.variables.error.mustBeArray") : t("integration.workflows.variables.error.mustBeObject");
       return;
     }
     jsonErrors[key] = null;
     patchVar(key, { default: parsed });
   } catch {
-    jsonErrors[key] = "Not valid JSON.";
+    jsonErrors[key] = t("integration.workflows.variables.error.invalidJson");
   }
 }
 function descriptionText(v) {
   return resolveDisplayName(v.description);
 }
 function writeDescription(key, text) {
-  const cur = props.variables[key];
+  const cur = working.value[key];
   if (!cur) return;
+  descDrafts[key] = text;
+  const existing = typeof cur.description === "object" && cur.description !== null ? { ...cur.description } : {};
   if (!text.trim()) {
+    delete existing[languageKeyRead(cur.description)];
+    if (Object.keys(existing).length) {
+      patchVar(key, { description: existing });
+      return;
+    }
     const { description: _drop, ...rest } = cur;
-    commit({ ...props.variables, [key]: rest });
+    commit({ ...working.value, [key]: rest });
     return;
   }
-  const existing = typeof cur.description === "object" && cur.description !== null ? cur.description : {};
-  patchVar(key, { description: { ...existing, en: text } });
+  patchVar(key, { description: { ...existing, [languageKeyToWrite(cur.description)]: text } });
 }
 const newKey = ref("");
 const newKeyError = computed(() => {
   const k = newKey.value.trim();
   if (!k) return null;
-  if (!KEY_PATTERN.test(k)) return "Letters, digits and _ only; must not start with a digit.";
-  if (props.variables[k]) return "Key already exists.";
+  if (!KEY_PATTERN.test(k)) return t("integration.workflows.variables.error.invalidKey");
+  if (working.value[k]) return t("integration.workflows.variables.error.keyExists");
   return null;
 });
 function addVariable() {
   const k = newKey.value.trim();
   if (!k || newKeyError.value) return;
-  commit({ ...props.variables, [k]: { type: "string", default: "" } });
+  commit({ ...working.value, [k]: { type: "string", default: "" } });
   newKey.value = "";
 }
 async function copyUsage(key) {
   try {
     await navigator.clipboard.writeText(`\${{ vars.${key} }}`);
-    toast.success("Expression copied");
+    toast.success(t("integration.workflows.variables.toast.copied"));
   } catch {
-    toast.error("Could not copy");
+    toast.error(t("integration.workflows.variables.toast.copyFailed"));
   }
 }
 </script>
@@ -131,24 +159,24 @@ async function copyUsage(key) {
   <Dialog :open="open" @update:open="(v2) => emit('update:open', v2)">
     <DialogContent class="max-w-[94vw] sm:max-w-3xl">
       <DialogHeader>
-        <DialogTitle>Workflow variables</DialogTitle>
+        <DialogTitle>{{ t("integration.workflows.variables.dialog.title") }}</DialogTitle>
         <DialogDescription class="text-sm">
-          Reusable values for this workflow — reference them in any config field as
+          {{ t("integration.workflows.variables.dialog.description.before") }}
           <code v-pre class="rounded bg-black/[0.05] px-1 py-0.5 font-mono text-xs">${{ vars.key }}</code>.
-          Changes persist with the workflow Save.
+          {{ t("integration.workflows.variables.dialog.description.after") }}
         </DialogDescription>
       </DialogHeader>
 
       <div class="max-h-[62vh] space-y-3 overflow-y-auto pr-1">
         <p v-if="!entries.length" class="rounded-lg border border-dashed border-black/[0.12] px-4 py-6 text-center text-sm text-muted-foreground">
-          No variables yet — add the first one below.
+          {{ t("integration.workflows.variables.state.empty") }}
         </p>
 
         <div
           v-for="[key, v] in entries"
           :key="key"
           role="group"
-          :aria-label="`Variable ${key}`"
+          :aria-label="t('integration.workflows.variables.row.aria', { key })"
           class="rounded-lg border border-black/[0.06] bg-white p-3"
         >
           <div class="flex items-center gap-2">
@@ -156,7 +184,7 @@ async function copyUsage(key) {
             <button
               type="button"
               class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-              :title="`Copy \${{ vars.${key} }}`"
+              :title="t('integration.workflows.variables.action.copyUsage.title', { key })"
               @click="copyUsage(key)"
             >
               <Copy :size="12" />
@@ -165,10 +193,10 @@ async function copyUsage(key) {
             <button
               type="button"
               class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
-              title="Delete variable"
+              :title="t('integration.workflows.variables.action.delete')"
               @click="removeVar(key)"
             >
-              <Trash2 :size="13" />
+              <TrashBin :size="13" />
             </button>
           </div>
 
@@ -176,12 +204,12 @@ async function copyUsage(key) {
             <!-- One row per variable, so every id carries its key — otherwise
                  the labels of the second row point at the first row's fields. -->
             <div class="space-y-1">
-              <Label :for="`var-${key}-type`" class="text-mono text-muted-foreground">Type</Label>
-              <Select :model-value="v.type" @update:model-value="(t) => changeType(key, t)">
+              <Label :for="`var-${key}-type`" class="text-mono text-muted-foreground">{{ t("integration.workflows.variables.field.type.label") }}</Label>
+              <Select :model-value="v.type" @update:model-value="(vt) => changeType(key, vt)">
                 <!-- Both: the `id` lets the visible Label's `for` resolve, and the
                      `aria-label` names the trigger without relying on an engine
                      naming a button from a <label> — see the sweep's docblock. -->
-                <SelectTrigger :id="`var-${key}-type`" aria-label="Type" class="h-8 bg-white text-sm">
+                <SelectTrigger :id="`var-${key}-type`" :aria-label="t('integration.workflows.variables.field.type.label')" class="h-8 bg-white text-sm">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -193,7 +221,7 @@ async function copyUsage(key) {
             <div class="space-y-1">
               <!-- "Value", not "Default": PO-206. The `for`/`id` still name the
                    blob field, which is called `default` and stays that way. -->
-              <Label :for="`var-${key}-default`" class="text-mono text-muted-foreground">Value</Label>
+              <Label :for="`var-${key}-default`" class="text-mono text-muted-foreground">{{ t("integration.workflows.variables.field.value.label") }}</Label>
 
               <!-- Only one of these renders, so they share the one `id` the Label
                    points at. The labelable ones take their name from that Label —
@@ -221,7 +249,7 @@ async function copyUsage(key) {
                 <Switch
                   :id="`var-${key}-default`"
                   :model-value="v.default === true"
-                  aria-label="Value"
+                  :aria-label="t('integration.workflows.variables.field.value.label')"
                   @update:model-value="(val) => patchVar(key, { default: val })"
                 />
               </div>
@@ -233,7 +261,7 @@ async function copyUsage(key) {
                   spellcheck="false"
                   class="w-full rounded-md border bg-white p-2 font-mono text-xs focus:outline-none focus:ring-2 focus:ring-primary/40"
                   :class="jsonErrors[key] ? 'border-rose-400' : 'border-black/[0.08]'"
-                  :placeholder="v.type === 'array' ? 'JSON array, e.g. [1, 2]' : 'JSON object, e.g. { \u2026 }'"
+                  :placeholder="v.type === 'array' ? t('integration.workflows.variables.field.value.placeholder.array') : t('integration.workflows.variables.field.value.placeholder.object')"
                   @input="(e) => jsonDrafts[key] = e.target.value"
                   @blur="applyJsonDraft(key, v.type)"
                 />
@@ -243,12 +271,12 @@ async function copyUsage(key) {
           </div>
 
           <div class="mt-2 space-y-1">
-            <Label :for="`var-${key}-desc`" class="text-mono text-muted-foreground">Description</Label>
+            <Label :for="`var-${key}-desc`" class="text-mono text-muted-foreground">{{ t("integration.workflows.variables.field.description.label") }}</Label>
             <Input
               :id="`var-${key}-desc`"
-              :model-value="descriptionText(v)"
+              :model-value="descDrafts[key] ?? descriptionText(v)"
               class="h-8 bg-white text-sm"
-              placeholder="What this variable is for"
+              :placeholder="t('integration.workflows.variables.field.description.placeholder')"
               @update:model-value="(val) => writeDescription(key, String(val))"
             />
           </div>
@@ -256,23 +284,35 @@ async function copyUsage(key) {
 
         <!-- Add row -->
         <div class="rounded-lg border border-dashed border-black/[0.12] p-3">
-          <Label for="var-new-key" class="text-mono text-muted-foreground">New variable</Label>
+          <Label for="var-new-key" class="text-mono text-muted-foreground">{{ t("integration.workflows.variables.field.newKey.label") }}</Label>
           <div class="mt-1 flex items-center gap-2">
             <Input
               id="var-new-key"
               v-model="newKey"
               class="h-8 flex-1 bg-white font-mono text-sm"
-              placeholder="e.g. base_url"
+              :placeholder="t('integration.workflows.variables.field.newKey.placeholder')"
               @keydown.enter.prevent="addVariable"
             />
             <Button size="sm" class="h-8" :disabled="!newKey.trim() || !!newKeyError" @click="addVariable">
               <Plus :size="14" class="mr-1" />
-              Add
+              {{ t("integration.workflows.variables.action.add") }}
             </Button>
           </div>
           <p v-if="newKeyError" class="mt-1 text-xs text-rose-600">{{ newKeyError }}</p>
         </div>
       </div>
+
+      <!-- Cancel / Done, the same pair every dialog in the editor closes on. Done
+           reaches the workflow's unsaved state; only the header's Save reaches the
+           platform. -->
+      <DialogFooter>
+        <Button variant="outline" size="sm" class="h-8" @click="emit('update:open', false)">
+          {{ t("integration.common.action.cancel") }}
+        </Button>
+        <Button size="sm" class="h-8" :disabled="hasJsonError" @click="applyAndClose">
+          {{ t("integration.workflows.variables.action.done") }}
+        </Button>
+      </DialogFooter>
     </DialogContent>
   </Dialog>
 </template>