@revenexx/studio-integrations 0.6.0 → 1.0.0

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

@@ -25,6 +25,7 @@ defineProps({
   workflows: { type: Array, required: true },
   loading: { type: Boolean, required: false, default: false }
 });
+const t = useIntegrationsT();
 const router = useRouter();
 const { remove, toggleActive } = useIntegrationsWorkflows();
 const duplicateTarget = ref(null);
@@ -34,7 +35,7 @@ function askDuplicate(wf) {
   duplicateOpen.value = true;
 }
 async function onDuplicated(copy) {
-  toast.success(`Duplicated as \u201C${copy.name}\u201D`);
+  toast.success(t("integration.workflows.table.toast.duplicated", { name: copy.name }));
   await router.push(`/integrations/workflows/${copy.id}`);
 }
 const GROUP_BY_TAGS_KEY = "integrations.workflows.groupByTags";
@@ -60,15 +61,15 @@ function lastRunFor(id) {
 function runBadge(status) {
   switch (status) {
     case "succeeded":
-      return { label: "Success", class: "bg-emerald-500/15 text-emerald-700 border-emerald-500/20" };
+      return { label: t("integration.workflows.table.status.run.succeeded"), class: "bg-emerald-500/15 text-emerald-700 border-emerald-500/20" };
     case "failed":
-      return { label: "Failed", class: "bg-rose-500/15 text-rose-700 border-rose-500/20" };
+      return { label: t("integration.workflows.table.status.run.failed"), class: "bg-rose-500/15 text-rose-700 border-rose-500/20" };
     case "running":
-      return { label: "Running", class: "bg-sky-500/15 text-sky-700 border-sky-500/20" };
+      return { label: t("integration.workflows.table.status.run.running"), class: "bg-sky-500/15 text-sky-700 border-sky-500/20" };
     case "queued":
-      return { label: "Queued", class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
+      return { label: t("integration.workflows.table.status.run.queued"), class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
     case "cancelled":
-      return { label: "Cancelled", class: "bg-slate-100 text-slate-700 border-slate-200" };
+      return { label: t("integration.workflows.table.status.run.cancelled"), class: "bg-slate-100 text-slate-700 border-slate-200" };
   }
 }
 const pendingDelete = ref(null);
@@ -93,27 +94,38 @@ async function onToggleActive(wf) {
   } catch (e) {
     const issues = apiValidationIssues(e);
     if (issues.length) {
-      toast.error(`Can\u2019t activate \u201C${wf.name}\u201D \u2014 ${issues.length} validation issue${issues.length === 1 ? "" : "s"} to fix. Open the editor to resolve them.`);
+      toast.error(t("integration.workflows.table.toast.activateBlocked", issues.length, { name: wf.name }));
       return;
     }
-    toast.error(e?.message ?? "Could not change the workflow status.");
+    toast.error(e?.message ?? t("integration.workflows.table.toast.statusChangeFailed"));
   }
 }
+function lifecycleOf(wf) {
+  if (!wf.active) return "paused";
+  return wf.revision === 0 ? "draft" : "active";
+}
+function lifecycleLabel(state) {
+  return t(`integration.workflows.table.status.lifecycle.${state}`);
+}
+const LIFECYCLE_TONE = {
+  active: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20",
+  draft: "bg-amber-500/10 text-amber-700 border-amber-500/20",
+  paused: "bg-slate-100 text-slate-700 border-slate-200"
+};
 function statusBadge(wf) {
-  if (!wf.active) return { label: "Paused", class: "bg-slate-100 text-slate-700 border-slate-200" };
-  if (wf.revision === 0) return { label: "Draft", class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
-  return { label: "Active", class: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20" };
+  const state = lifecycleOf(wf);
+  return { label: lifecycleLabel(state), class: LIFECYCLE_TONE[state] };
 }
 function buildState(wf) {
   switch (wf.buildStatus) {
     case "building":
-      return { label: "Building\u2026", class: "bg-sky-500/15 text-sky-700 border-sky-500/20" };
+      return { label: t("integration.workflows.table.status.build.building"), class: "bg-sky-500/15 text-sky-700 border-sky-500/20" };
     case "pending":
-      return { label: "Pending", class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
+      return { label: t("integration.workflows.table.status.build.pending"), class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
     case "failed":
-      return { label: "Failed", class: "bg-rose-500/15 text-rose-700 border-rose-500/20" };
+      return { label: t("integration.workflows.table.status.build.failed"), class: "bg-rose-500/15 text-rose-700 border-rose-500/20" };
     case "ready":
-      return { label: "Ready", class: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20" };
+      return { label: t("integration.workflows.table.status.build.ready"), class: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20" };
     default:
       return { label: "\u2014", class: "bg-slate-100 text-slate-700 border-slate-200" };
   }
@@ -121,11 +133,11 @@ function buildState(wf) {
 function modeLabel(m) {
   switch (m) {
     case "sync_only":
-      return "sync";
+      return t("integration.workflows.table.mode.sync");
     case "caller_decides":
-      return "caller";
+      return t("integration.workflows.table.mode.caller");
     case "async_only":
-      return "async";
+      return t("integration.workflows.table.mode.async");
     default:
       return "\u2014";
   }
@@ -143,45 +155,71 @@ function formatDateTime(iso) {
     return iso;
   }
 }
-const columns = [
+const LIFECYCLE = ["active", "draft", "paused"];
+const BUILD_STATES = ["pending", "building", "ready", "failed"];
+const MODES = ["async_only", "sync_only", "caller_decides"];
+const filterTabs = computed(() => [
+  {
+    key: "status",
+    label: t("integration.workflows.table.column.status"),
+    getter: (wf) => lifecycleOf(wf),
+    options: LIFECYCLE.map((v) => ({ value: v, label: lifecycleLabel(v) }))
+  },
+  {
+    key: "build",
+    label: t("integration.workflows.table.column.build"),
+    getter: (wf) => wf.buildStatus ?? "",
+    options: BUILD_STATES.map((v) => ({
+      value: v,
+      label: t(`integration.workflows.table.status.build.${v}`)
+    }))
+  },
+  {
+    key: "mode",
+    label: t("integration.workflows.table.column.mode"),
+    getter: (wf) => wf.execution_mode ?? "",
+    options: MODES.map((v) => ({ value: v, label: modeLabel(v) }))
+  }
+]);
+const columns = computed(() => [
   {
     key: "name",
-    label: "Name",
+    label: t("integration.workflows.table.column.name"),
     sortable: true,
     sortGetter: (w) => w.name.toLowerCase(),
     searchGetter: (w) => `${w.name} ${w.description ?? ""} ${(w.blob.tags ?? []).join(" ")}`
   },
   {
     key: "status",
-    label: "Status",
+    label: t("integration.workflows.table.column.status"),
     width: "100px",
     sortable: true,
-    sortGetter: (w) => w.active ? w.revision === 0 ? "draft" : "active" : "paused"
+    sortGetter: (w) => lifecycleOf(w)
   },
   {
     key: "build",
-    label: "Build",
+    label: t("integration.workflows.table.column.build"),
     width: "120px",
     sortable: true,
     sortGetter: (w) => w.buildStatus ?? ""
   },
   {
     key: "mode",
-    label: "Mode",
+    label: t("integration.workflows.table.column.mode"),
     width: "120px",
     sortable: true,
     sortGetter: (w) => w.execution_mode ?? ""
   },
   {
     key: "triggers",
-    label: "Triggers",
+    label: t("integration.workflows.table.column.triggers"),
     width: "140px",
     sortable: true,
-    sortGetter: (w) => w.blob.triggers.map((t) => t.type).join(",")
+    sortGetter: (w) => w.blob.triggers.map((tr) => tr.type).join(",")
   },
   {
     key: "lastRun",
-    label: "Last run",
+    label: t("integration.workflows.table.column.lastRun"),
     // Wide enough for badge + full timestamp — the flexible Name column has
     // the slack to give; a truncated "18. Juli, 1…" helps nobody.
     width: "210px",
@@ -190,7 +228,7 @@ const columns = [
   },
   {
     key: "updated",
-    label: "Updated",
+    label: t("integration.workflows.table.column.updated"),
     width: "120px",
     sortable: true,
     sortGetter: (w) => w.updated_at ?? ""
@@ -201,21 +239,21 @@ const columns = [
     width: "40px",
     toggleable: false
   }
-];
+]);
 </script>
 
 <template>
   <DataTable
     :data="workflows"
     :group-by="groupByTags ? (w) => w.blob.tags ?? [] : null"
-    group-empty-label="No tags"
+    :group-empty-label="t('integration.workflows.table.group.noTags')"
     :columns="columns"
     :row-key="(wf2) => wf2.id"
     :default-sort="{ column: 'updated', direction: 'desc' }"
-    :search="{ placeholder: 'Search workflows\u2026' }"
-    :filter="true"
+    :search="{ placeholder: t('integration.workflows.table.search.placeholder') }"
+    :filter-tabs="filterTabs"
     :loading="loading"
-    empty-text="No workflows yet."
+    :empty-text="t('integration.workflows.table.state.empty')"
     @row-click="(wf2) => router.push(`/integrations/workflows/${wf2.id}`)"
   >
     <template #toolbar-left>
@@ -227,7 +265,7 @@ const columns = [
         @click="groupByTags = !groupByTags"
       >
         <Layers :size="13" />
-        Group by tags
+        {{ t("integration.workflows.table.action.groupByTags") }}
       </Button>
     </template>
 
@@ -317,7 +355,7 @@ const columns = [
       <span
         v-else
         class="text-sm text-muted-foreground"
-        :aria-label="runsLoaded ? `${wf.name} last run: Never run` : void 0"
+        :aria-label="runsLoaded ? t('integration.workflows.table.lastRun.aria.never', { name: wf.name }) : void 0"
       >—</span>
     </template>
 
@@ -333,28 +371,28 @@ const columns = [
           <DropdownMenuTrigger as-child>
             <!-- Icon-only, so it needs a name of its own — the rows are plain
                  divs, which leaves nothing else to address this button by. -->
-            <Button variant="ghost" size="icon" class="size-7" :aria-label="`Actions for ${wf.name}`">
+            <Button variant="ghost" size="icon" class="size-7" :aria-label="t('integration.workflows.table.menu.actions.aria', { name: wf.name })">
               <MoreHorizontal :size="14" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuLabel>{{ t("integration.workflows.table.menu.actions.label") }}</DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuItem @select="router.push(`/integrations/workflows/${wf.id}`)">
-              Open editor
+              {{ t("integration.workflows.table.menu.action.openEditor") }}
             </DropdownMenuItem>
             <DropdownMenuItem @select="askDuplicate(wf)">
-              Duplicate
+              {{ t("integration.workflows.action.duplicate") }}
             </DropdownMenuItem>
             <DropdownMenuItem @select="onToggleActive(wf)">
-              {{ wf.active ? "Pause" : "Activate" }}
+              {{ wf.active ? t("integration.workflows.table.menu.action.pause") : t("integration.workflows.table.menu.action.activate") }}
             </DropdownMenuItem>
             <DropdownMenuSeparator />
             <DropdownMenuItem
               class="text-destructive focus:text-destructive"
               @select="askDelete(wf)"
             >
-              Delete
+              {{ t("integration.common.action.delete") }}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -367,21 +405,21 @@ const columns = [
 }">
     <AlertDialogContent>
       <AlertDialogHeader>
-        <AlertDialogTitle>Delete workflow?</AlertDialogTitle>
+        <AlertDialogTitle>{{ t("integration.workflows.table.deleteDialog.title") }}</AlertDialogTitle>
         <AlertDialogDescription>
           <span v-if="pendingDelete">
             <span class="font-medium text-foreground">{{ pendingDelete.name }}</span>
-            and all its revision history will be permanently deleted.
+            {{ t("integration.workflows.table.deleteDialog.description") }}
           </span>
         </AlertDialogDescription>
       </AlertDialogHeader>
       <AlertDialogFooter>
         <Button variant="outline" :disabled="deleting" @click="pendingDelete = null">
-          Cancel
+          {{ t("integration.common.action.cancel") }}
         </Button>
         <Button class="bg-destructive text-white hover:bg-destructive/90" :disabled="deleting" @click="confirmDelete">
           <Loader2 v-if="deleting" :size="14" class="animate-spin" />
-          {{ deleting ? "Deleting\u2026" : "Delete" }}
+          {{ deleting ? t("integration.workflows.table.deleteDialog.action.deleting") : t("integration.common.action.delete") }}
         </Button>
       </AlertDialogFooter>
     </AlertDialogContent>

package/dist/runtime/composables/integrationsApi.js

@@ -1,15 +1,17 @@
 import { computed } from "vue";
 import { IntegrationsApiError } from "../utils/apiError.js";
+import { useIntegrationsT } from "./useIntegrationsT.js";
 export function useIntegrationsApi() {
   const config = useRuntimeConfig();
   const { getToken } = usePlatformAuth();
   const { slug: onlyTenantSlug, load: loadTenants } = usePlatformTenant();
+  const t = useIntegrationsT();
   const baseUrl = computed(
     () => config.public.integrationsApi ?? "https://integrations.revenexx.com/api/v1"
   );
   async function buildHeaders(extra = {}) {
     const token = await getToken();
-    if (!token) throw new IntegrationsApiError(401, null, "Not signed in.");
+    if (!token) throw new IntegrationsApiError(401, null, t("integration.common.error.notSignedIn"));
     if (!onlyTenantSlug.value) await loadTenants();
     const headers = {
       Accept: "application/json",
@@ -34,7 +36,7 @@ export function useIntegrationsApi() {
     } catch (err) {
       const fe = err;
       const data = fe?.response?._data;
-      const detail = data?.message ?? fe?.message ?? "Integrations request failed";
+      const detail = data?.message ?? fe?.message ?? t("integration.common.error.requestFailed");
       throw new IntegrationsApiError(fe?.response?.status ?? 0, data, detail);
     }
   }

package/dist/runtime/composables/useCredentialTypes.js

@@ -1,4 +1,5 @@
 import { useIntegrationsApi } from "./integrationsApi.js";
+import { useIntegrationsT } from "./useIntegrationsT.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
 import { useLoadGate } from "./useLoadGate.js";
 export function useCredentialTypes() {
@@ -8,6 +9,7 @@ export function useCredentialTypes() {
   const loaded = useState("integrations.credentialTypes.loaded", () => false);
   const gate = useLoadGate("integrations.credentialTypes", { loading, loaded });
   const api = useIntegrationsApi();
+  const t = useIntegrationsT();
   function normalize(res) {
     const obj = res;
     if (Array.isArray(obj)) return obj;
@@ -25,14 +27,14 @@ export function useCredentialTypes() {
       types.value = normalize(await api.get("/credential-types"));
       loaded.value = true;
     } catch (e) {
-      error.value = captureError(e, "Could not load credential types.");
+      error.value = captureError(e, t("integration.credentials.error.loadTypes"));
     } finally {
       gate.release();
     }
     return types.value;
   }
   function bySlug(slug) {
-    return types.value.find((t) => t.slug === slug) ?? null;
+    return types.value.find((t2) => t2.slug === slug) ?? null;
   }
   async function get(slug) {
     const cached = bySlug(slug);

package/dist/runtime/composables/useIntegrationsCredentials.d.ts

@@ -13,8 +13,19 @@ import type { Credential } from '../types/integrations.js';
  *   POST   /credentials/{id}/test        → test saved instance
  *   POST   /credentials/{id}/oauth/authorize-url → { authorize_url, state }
  */
+/**
+ * `message` is what the credential type said about the test, whichever way it went —
+ * which host answered, which environment, which plan, or why it was refused. The
+ * service sends it on every path, and it may be absent.
+ *
+ * `error` is not the service's: it is what THIS composable puts there when the call
+ * never arrived — a network failure, a refusal that is not an answer. Nothing on the
+ * wire ever carries it, so a surface that reads `error` alone and falls back to a
+ * fixed sentence throws away every reason the platform did send.
+ */
 export interface CredentialTestResult {
     ok: boolean;
+    message?: string;
     error?: string;
 }
 export declare function useIntegrationsCredentials(): {

package/dist/runtime/composables/useIntegrationsCredentials.js

@@ -1,5 +1,6 @@
 import { computed } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
+import { useIntegrationsT } from "./useIntegrationsT.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
 import { useLoadGate } from "./useLoadGate.js";
 export function useIntegrationsCredentials() {
@@ -9,6 +10,7 @@ export function useIntegrationsCredentials() {
   const loaded = useState("integrations.credentials.loaded", () => false);
   const gate = useLoadGate("integrations.credentials", { loading, loaded });
   const api = useIntegrationsApi();
+  const t = useIntegrationsT();
   function normalize(res) {
     const obj = res;
     if (Array.isArray(obj)) return obj;
@@ -29,7 +31,7 @@ export function useIntegrationsCredentials() {
       credentials.value = normalize(await api.get("/credentials"));
       loaded.value = true;
     } catch (e) {
-      error.value = captureError(e, "Could not load credentials.");
+      error.value = captureError(e, t("integration.credentials.error.loadFailed"));
     } finally {
       gate.release();
     }
@@ -58,23 +60,23 @@ export function useIntegrationsCredentials() {
   async function testInline(credentialTypeSlug, config) {
     try {
       const res = await api.post("/credentials/test", { credential_type_slug: credentialTypeSlug, config });
-      return res?.ok === false ? res : { ok: true };
+      return res?.ok === false ? res : { ok: true, message: res?.message };
     } catch (e) {
-      return { ok: false, error: captureError(e, "Connection test failed.") };
+      return { ok: false, error: captureError(e, t("integration.credentials.error.testFailed")) };
     }
   }
   async function test(id) {
     try {
       const res = await api.post(`/credentials/${encodeURIComponent(id)}/test`);
-      return res?.ok === false ? res : { ok: true };
+      return res?.ok === false ? res : { ok: true, message: res?.message };
     } catch (e) {
-      return { ok: false, error: captureError(e, "Connection test failed.") };
+      return { ok: false, error: captureError(e, t("integration.credentials.error.testFailed")) };
     }
   }
   async function oauthAuthorizeUrl(id) {
     const res = await api.post(`/credentials/${encodeURIComponent(id)}/oauth/authorize-url`);
     const authorizeUrl = res?.authorize_url ?? res?.data?.authorize_url;
-    if (!authorizeUrl) throw new IntegrationsApiError(0, res, "No authorize URL returned.");
+    if (!authorizeUrl) throw new IntegrationsApiError(0, res, t("integration.credentials.error.noAuthorizeUrl"));
     return authorizeUrl;
   }
   const total = computed(() => credentials.value.length);

package/dist/runtime/composables/useIntegrationsFocus.d.ts

@@ -6,6 +6,18 @@
  * Pages opt in by calling `useIntegrationsFocus().enable()` in onMounted
  * and `disable()` in onUnmounted (we provide an `autoEnable()` helper
  * that wires both).
+ *
+ * **A page that hides the sidebar renders the control that brings it back** — see
+ * specs/studio-navigation.md. The control belongs to the page and not to the
+ * shell, because the cockpit ships its own shell and reads this same state: a
+ * control in the module's shell would be missing in the cockpit, which is the
+ * one-way switch PO-273 was filed about.
+ *
+ * `autoEnable()` *is* that one-way switch, and `toggle()` has no caller: the
+ * workflow editor derives the state from a remembered preference and applies it
+ * with `enable()`/`disable()`, which a derived state can do idempotently and a
+ * flip cannot. Both are kept because they are part of what this module publishes,
+ * and a host driving the fold itself may still want them.
  */
 export declare function useIntegrationsFocus(): {
     focused: any;

package/dist/runtime/composables/useIntegrationsLocale.d.ts

@@ -0,0 +1,26 @@
+import type { ComputedRef } from 'vue';
+/**
+ * The studio's interface language, for a host to read and to set.
+ *
+ * This is the seam between the application the studio is embedded in and the
+ * text the Integrations API returns. The module is published and installed into
+ * hosts it knows nothing about, so it never reads a browser store or a cockpit
+ * i18n instance: the host owns the choice and hands it over here.
+ *
+ * A host with a language switcher wires it once, at boot:
+ *
+ *   const { setLocale } = useIntegrationsLocale()
+ *   watch(uiLocale, l => setLocale(l), { immediate: true })
+ *
+ * A host with a fixed language sets `studioIntegrations.locale` in its Nuxt
+ * config and never calls this. Neither is required — with nothing set the
+ * studio renders English.
+ *
+ * `locale` is reactive, and so is every name, label and description on screen:
+ * they are resolved through the same value, so a switch reaches surfaces that
+ * are already mounted without reloading anything.
+ */
+export declare function useIntegrationsLocale(): {
+    locale: ComputedRef<string>;
+    setLocale: (locale: string | null | undefined) => void;
+};

package/dist/runtime/composables/useIntegrationsLocale.js

@@ -0,0 +1,8 @@
+import { computed } from "vue";
+import { setStudioLocale, studioLocale } from "../utils/localize.js";
+export function useIntegrationsLocale() {
+  return {
+    locale: computed(() => studioLocale()),
+    setLocale: setStudioLocale
+  };
+}

package/dist/runtime/composables/useIntegrationsNodes.js

@@ -1,15 +1,20 @@
 import { applyNodeCatalog, findManifest } from "../data/integrationNodeCatalog.js";
 import { resolveLocalized } from "../utils/localize.js";
 import { useIntegrationsApi } from "./integrationsApi.js";
+import { useIntegrationsT } from "./useIntegrationsT.js";
 import { IntegrationsApiError } from "../utils/apiError.js";
 import { useLoadGate } from "./useLoadGate.js";
+const RETRY_COOLDOWN_MS = 3e4;
 export function useIntegrationsNodes() {
   const loading = useState("integrations.nodes.loading", () => false);
   const error = useState("integrations.nodes.error", () => null);
   const loaded = useState("integrations.nodes.loaded", () => false);
+  const failedAt = useState("integrations.nodes.failedAt", () => 0);
   const gate = useLoadGate("integrations.nodes", { loading, loaded });
   const api = useIntegrationsApi();
+  const t = useIntegrationsT();
   async function load(force = false) {
+    if (!force && failedAt.value && Date.now() - failedAt.value < RETRY_COOLDOWN_MS) return;
     if (!await gate.claim(force)) return;
     error.value = null;
     try {
@@ -21,13 +26,20 @@ export function useIntegrationsNodes() {
         version: n.manifest.version ?? n.version,
         name: n.manifest.name ?? n.name,
         // Keep the source package — the palette groups app nodes by it.
-        __package: n.package ? { name: n.package.name, label: n.package.label ?? null } : void 0
+        __package: n.package ? { name: n.package.name, label: n.package.label ?? null } : void 0,
+        // Registered and built are two different things: a version whose code
+        // was never built can be drawn but not executed, so the palette must
+        // be able to leave it out (PO-338). Missing field = assume built.
+        __hasBundle: n.has_bundle !== false
       }));
       applyNodeCatalog(manifests);
       loaded.value = true;
+      failedAt.value = 0;
     } catch (e) {
       applyNodeCatalog([]);
-      error.value = e instanceof IntegrationsApiError ? e.message : e?.message ?? "Could not load nodes.";
+      loaded.value = false;
+      failedAt.value = Date.now();
+      error.value = e instanceof IntegrationsApiError ? e.message : e?.message ?? t("integration.nodes.error.loadFailed");
     } finally {
       gate.release();
     }