@revenexx/studio-integrations 0.6.0 → 0.7.0

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, onMounted, ref, watch } from "vue";
-import { AddCircle as Plus, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import { AddCircle as Plus, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import {
   Button,
   Input,
@@ -29,6 +29,7 @@ const props = defineProps({
   refused: { type: String, required: false }
 });
 const emit = defineEmits(["set"]);
+const t = useIntegrationsT();
 const value = computed(() => props.config[props.field.key]);
 function write(v) {
   emit("set", props.field.key, v);
@@ -44,18 +45,18 @@ const formatError = computed(() => {
   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.minLength != null && v.length < val.minLength) return t("integration.nodeConfig.validation.minLength", { min: val.minLength });
+    if (val.maxLength != null && v.length > val.maxLength) return t("integration.nodeConfig.validation.maxLength", { max: val.maxLength });
     if (val.pattern) {
       try {
-        if (!new RegExp(val.pattern).test(v)) return "Does not match the required format";
+        if (!new RegExp(val.pattern).test(v)) return t("integration.nodeConfig.validation.pattern");
       } 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}`;
+    if (val.min != null && v < val.min) return t("integration.nodeConfig.validation.min", { min: val.min });
+    if (val.max != null && v > val.max) return t("integration.nodeConfig.validation.max", { max: val.max });
   }
   return null;
 });
@@ -69,9 +70,9 @@ const constraintHint = computed(() => {
     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`;
+    if (val.minLength != null && val.maxLength != null) return t("integration.nodeConfig.hint.charRange", { min: val.minLength, max: val.maxLength });
+    if (val.minLength != null) return t("integration.nodeConfig.hint.charMin", { min: val.minLength });
+    if (val.maxLength != null) return t("integration.nodeConfig.hint.charMax", { max: val.maxLength });
   }
   return "";
 });
@@ -103,11 +104,11 @@ const bound = computed(() => {
 const credOptions = computed(
   () => credsForField(props.field).map((c) => ({ credential: c, state: credentialState(c) }))
 );
-const UNKNOWN_CREDENTIAL = "Unknown credential \u2014 pick again";
+const UNKNOWN_CREDENTIAL = computed(() => t("integration.nodeConfig.credential.unknown"));
 function credTriggerLabel(field) {
   const label = resolveLocalized(field.label);
-  if (bound.value) return `${label}: ${bound.value.credential.name}, ${bound.value.state.label}`;
-  if (value.value && credentialsLoaded.value) return `${label}: ${UNKNOWN_CREDENTIAL}`;
+  if (bound.value) return t("integration.nodeConfig.credential.trigger.bound", { label, name: bound.value.credential.name, state: bound.value.state.label });
+  if (value.value && credentialsLoaded.value) return t("integration.nodeConfig.credential.trigger.unknown", { label, unknown: UNKNOWN_CREDENTIAL.value });
   return label;
 }
 const credCreateOpen = ref(false);
@@ -126,8 +127,8 @@ function onCredentialSelect(v) {
   write(v);
 }
 function acceptsSftp(field) {
-  const t = field.credentialType;
-  return t === "revenexx:sftp" || Array.isArray(t) && t.includes("revenexx:sftp");
+  const t2 = field.credentialType;
+  return t2 === "revenexx:sftp" || Array.isArray(t2) && t2.includes("revenexx:sftp");
 }
 const EXPR_TOKEN = "${{";
 const canToggleExpression = computed(
@@ -231,7 +232,7 @@ function writeJson(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.";
+    jsonError.value = t("integration.nodeConfig.json.invalid");
   }
 }
 function readArray() {
@@ -266,28 +267,28 @@ function setArrayItemField(index, fieldKey, v) {
            without the required marker, which is a state and not part of a
            name. -->
       <Label class="text-mono" :class="invalid ? 'text-rose-600' : 'text-muted-foreground'">
-        {{ resolveLocalized(field.label) }}<span v-if="field.required" class="text-rose-500" title="Required"> *</span>
+        {{ resolveLocalized(field.label) }}<span v-if="field.required" class="text-rose-500" :title="t('integration.nodeConfig.field.requiredMark')"> *</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"
+            :title="t('integration.nodeConfig.object.toggle.fieldsTitle')"
             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
+            {{ t("integration.nodeConfig.object.toggle.fields") }}
           </button>
           <button
             type="button"
-            title="Edit as raw JSON"
+            :title="t('integration.nodeConfig.object.toggle.jsonTitle')"
             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
+            {{ t("integration.nodeConfig.object.toggle.json") }}
           </button>
         </div>
         <button
@@ -295,7 +296,7 @@ function setArrayItemField(index, fieldKey, v) {
           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'"
+          :title="showExpression ? t('integration.nodeConfig.expression.toggle.off') : t('integration.nodeConfig.expression.toggle.on')"
           @click="toggleExpression"
         >
           {{ exprHint }}
@@ -303,7 +304,7 @@ function setArrayItemField(index, fieldKey, v) {
         <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"
+          :title="t('integration.nodeConfig.expression.badge.title')"
         >
           {{ exprHint }}
         </span>
@@ -338,26 +339,26 @@ function setArrayItemField(index, fieldKey, v) {
         <!-- A repeating row has no room for visible labels, so each control
              names itself and says which row of which field it belongs to. -->
         <Input
-          :aria-label="`${resolveLocalized(field.label)} \u2014 key of row ${idx + 1}`"
+          :aria-label="t('integration.nodeConfig.object.row.keyAria', { label: resolveLocalized(field.label), n: idx + 1 })"
           :model-value="row.key"
-          placeholder="key"
+          :placeholder="t('integration.nodeConfig.object.row.keyPlaceholder')"
           class="h-7 w-[38%] rounded-md border border-black/[0.08] ring-0 shadow-none bg-white text-sm"
           @update:model-value="(v) => setKvRow(idx, { key: String(v) })"
         />
         <Input
-          :aria-label="`${resolveLocalized(field.label)} \u2014 value of row ${idx + 1}`"
+          :aria-label="t('integration.nodeConfig.object.row.valueAria', { label: resolveLocalized(field.label), n: idx + 1 })"
           :model-value="row.value"
-          placeholder="value"
+          :placeholder="t('integration.nodeConfig.object.row.valuePlaceholder')"
           class="h-7 min-w-0 flex-1 rounded-md border border-black/[0.08] ring-0 shadow-none bg-white text-sm"
           @update:model-value="(v) => setKvRow(idx, { value: String(v) })"
         />
         <button
           type="button"
-          :aria-label="`Remove row ${idx + 1} of ${resolveLocalized(field.label)}`"
+          :aria-label="t('integration.nodeConfig.object.row.removeAria', { label: resolveLocalized(field.label), n: idx + 1 })"
           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" />
+          <TrashBin :size="11" />
         </button>
       </div>
       <Button
@@ -368,7 +369,7 @@ function setArrayItemField(index, fieldKey, v) {
         @click="addKvRow"
       >
         <Plus :size="11" />
-        Add row
+        {{ t("integration.nodeConfig.action.addRow") }}
       </Button>
     </div>
 
@@ -464,7 +465,7 @@ function setArrayItemField(index, fieldKey, v) {
       @update:model-value="(v) => write(v)"
     >
       <SelectTrigger :aria-label="resolveLocalized(field.label)" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
-        <SelectValue :placeholder="resolveLocalized(field.placeholder) || 'Pick one'" />
+        <SelectValue :placeholder="resolveLocalized(field.placeholder) || t('integration.nodeConfig.select.placeholder')" />
       </SelectTrigger>
       <SelectContent>
         <SelectItem v-for="opt in field.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
@@ -498,7 +499,7 @@ function setArrayItemField(index, fieldKey, v) {
       @update:model-value="(v) => write(v)"
     >
       <SelectTrigger :aria-label="resolveLocalized(field.label)" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
-        <SelectValue placeholder="Pick a secret" />
+        <SelectValue :placeholder="t('integration.nodeConfig.secretRef.placeholder')" />
       </SelectTrigger>
       <SelectContent>
         <SelectItem v-for="k in secretKeys" :key="k" :value="k">{{ k }}</SelectItem>
@@ -520,7 +521,7 @@ function setArrayItemField(index, fieldKey, v) {
                "Revenexx APIConnected". Rendering it here keeps the pill a pill, and
                the placeholder has to be drawn by hand because a slot replaces the
                fallback that would otherwise show it. -->
-          <SelectValue placeholder="Pick a credential">
+          <SelectValue :placeholder="t('integration.nodeConfig.credential.placeholder')">
             <span v-if="bound" class="flex min-w-0 items-center gap-1.5">
               <span class="min-w-0 truncate">{{ bound.credential.name }}</span>
               <!-- No `title` on this badge: `SelectValue` renders itself with
@@ -539,7 +540,7 @@ function setArrayItemField(index, fieldKey, v) {
                  while the workflow still runs into the dead reference. `loaded`
                  keeps the wait before the first response out of it. -->
             <span v-else-if="value && credentialsLoaded" class="text-rose-600">{{ UNKNOWN_CREDENTIAL }}</span>
-            <span v-else class="text-muted-foreground">Pick a credential</span>
+            <span v-else class="text-muted-foreground">{{ t("integration.nodeConfig.credential.placeholder") }}</span>
           </SelectValue>
         </SelectTrigger>
         <SelectContent>
@@ -562,24 +563,24 @@ function setArrayItemField(index, fieldKey, v) {
             </span>
           </SelectItem>
           <div v-if="!credOptions.length" class="px-2 py-1.5 text-sm text-muted-foreground">
-            No credentials yet.
+            {{ t("integration.nodeConfig.credential.empty") }}
           </div>
           <SelectSeparator />
           <SelectItem :value="CRED_ACTION_NEW" class="font-medium text-violet-600 data-[highlighted]:text-violet-700">
-            New credential
+            {{ t("integration.nodeConfig.credential.action.new") }}
           </SelectItem>
           <SelectItem v-if="acceptsSftp(field)" :value="CRED_ACTION_SFTP" class="font-medium text-violet-600 data-[highlighted]:text-violet-700">
-            Import existing Revenue Cloud SFTP account
+            {{ t("integration.nodeConfig.credential.action.importSftp") }}
           </SelectItem>
         </SelectContent>
       </Select>
       <!-- What the state has to add, as text rather than as a tooltip — the shape
            the detail dialog uses beneath its own badge. -->
       <p v-if="bound?.state.key === 'needs_reauth'" class="text-sm text-amber-600">
-        This credential needs reconnect.
+        {{ t("integration.nodeConfig.credential.state.needsReauth") }}
       </p>
       <p v-else-if="bound?.state.key === 'failed' && bound.state.message" class="text-sm break-words text-rose-600">
-        Last test failed: {{ bound.state.message }}
+        {{ t("integration.nodeConfig.credential.state.failed", { message: bound.state.message }) }}
       </p>
       <IntegrationsCredentialCreateDialog
         v-model:open="credCreateOpen"
@@ -606,11 +607,11 @@ function setArrayItemField(index, fieldKey, v) {
           </span>
           <button
             type="button"
-            :aria-label="`Remove item ${idx + 1} of ${resolveLocalized(field.label)}`"
+            :aria-label="t('integration.nodeConfig.array.removeItemAria', { label: resolveLocalized(field.label), n: idx + 1 })"
             class="flex size-5 items-center justify-center rounded text-muted-foreground hover:text-rose-600"
             @click="removeArrayItem(idx)"
           >
-            <Trash2 :size="11" />
+            <TrashBin :size="11" />
           </button>
         </div>
         <div
@@ -624,7 +625,7 @@ function setArrayItemField(index, fieldKey, v) {
           <!-- The label above repeats per item, so it cannot own an id; the
                input carries its own name including the item number. -->
           <Input
-            :aria-label="`${resolveLocalized(sub.label)} of item ${idx + 1}`"
+            :aria-label="t('integration.nodeConfig.array.subFieldAria', { label: resolveLocalized(sub.label), n: idx + 1 })"
             :model-value="item[sub.key] ?? ''"
             :placeholder="resolveLocalized(sub.placeholder)"
             class="h-7 text-sm bg-white"
@@ -641,7 +642,7 @@ function setArrayItemField(index, fieldKey, v) {
         @click="pushArrayItem(Object.fromEntries((field.items?.properties ?? []).map((p) => [p.key, ''])))"
       >
         <Plus :size="11" />
-        Add row
+        {{ t("integration.nodeConfig.action.addRow") }}
       </Button>
     </div>