@revenexx/studio-integrations 3.0.0 → 3.0.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @revenexx/studio-integrations
 
+## 3.0.2
+
+### Patch Changes
+
+- 1c65e26: A run started from the editor in waiting mode that fails now says "Sync run failed", as promised, instead of passing on the service's own "Workflow execution failed.".
+- 7c148a6: "Keep editing" in the question about leaving unsaved work is readable in every host, the cockpit included. Under `@revenexx/studio` 0.2.2 and 0.2.3 the design system painted the outline variant's white face over the label, so the fix in PO-415 only showed in the playground. The answer is now a plain filled button and still holds the keyboard when the question opens. The design-system peer moves to `^0.2.10`, the version the cockpit runs.
+- 9277849: A step test that ends on the node's error output is announced as failed — "Test of “Fetch orders” failed" — with the node's own message under it, such as "unauthorized access" when a service refuses the token. Before, it got the same green "Test run finished" as a step that worked, and the reason stood only in the output's JSON. The notice names the step because the answer can arrive after you have moved to another one. A node that ends on its error output without a message is still announced as failed, and the notice says it gave no reason (PO-651).
+
+## 3.0.1
+
+### Patch Changes
+
+- 259fe08: A template card whose definition could not be fetched now says "Couldn't load the flow" instead of showing "Loading the flow" for the rest of the visit, on every surface that draws the card. Sorting the gallery by most steps puts templates whose step count is not known after every template whose count is, rather than ranking them as having no steps (PO-249).
+
 ## 3.0.0
 
 ### Major Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenexx/studio-integrations",
   "configKey": "studioIntegrations",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

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

@@ -886,6 +886,17 @@ function toggleTestInput() {
   if (!testInputOpen.value && !testInputDraft.value) testInputDraft.value = defaultTestInput();
   testInputOpen.value = !testInputOpen.value;
 }
+function errorOutputTaken(branch, ports) {
+  if (!branch) return null;
+  if (branch === "error") return branch;
+  return ports.some((p) => p.name === branch && p.kind === "error") ? branch : null;
+}
+function errorOutputMessage(outputs, port) {
+  const error = outputs[port];
+  if (!error || typeof error !== "object") return null;
+  const message = error.message;
+  return typeof message === "string" ? message.trim() || null : null;
+}
 async function runTestStep() {
   const wn = draftNode.value;
   if (!wn || testRunning.value) return;
@@ -920,12 +931,20 @@ async function runTestStep() {
       }
     );
     testLogs.value = res.logs ?? [];
-    testOutputs.value = {
-      ...testOutputs.value,
-      [wn.id]: res.outputs && typeof res.outputs === "object" ? res.outputs : {}
-    };
+    const outputs = res.outputs && typeof res.outputs === "object" ? res.outputs : {};
+    testOutputs.value = { ...testOutputs.value, [wn.id]: outputs };
     outputView.value = "json";
-    toast.success(t("integration.nodeInspector.toast.testRunFinished"));
+    const nodeManifest = findManifest(wn.nodeSlug, wn.nodeVersion);
+    const failedOn = errorOutputTaken(res.branch, portsForNode(wn, nodeManifest, props.dynamicOutputs?.[wn.id]));
+    if (failedOn) {
+      const name = resolveDisplayName(wn.name) || resolveLocalized(nodeManifest?.name) || wn.nodeSlug;
+      toast.error(t("integration.nodeInspector.toast.testRunFailed", { name }), {
+        description: errorOutputMessage(outputs, failedOn) ?? t("integration.nodeInspector.toast.testRunFailedNoMessage"),
+        duration: 8e3
+      });
+    } else {
+      toast.success(t("integration.nodeInspector.toast.testRunFinished"));
+    }
   } catch (e) {
     const body = e.body;
     testError.value = body?.error?.message ?? body?.message ?? e?.message ?? t("integration.nodeInspector.output.test.runFailed");

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, resolveComponent } from "vue";
-import { RefreshCircle as Loader2 } from "#solar-icons";
+import { RefreshCircle as Loader2, DangerTriangle as AlertTriangle } from "#solar-icons";
 import { triggerGlyph as glyphForTrigger } from "../../data/triggerGlyphs";
 import { templateCategoryLabel, templatePackageLabel } from "../../data/integrationTemplates";
 import TemplateFlowPreview from "./TemplateFlowPreview.vue";
@@ -68,6 +68,17 @@ const chipSize = computed(() => full.value ? "px-2 py-0.5 text-xs" : "px-1.5 py-
         :height="full ? 116 : 96"
         :class="full ? 'mt-7' : ''"
       />
+      <!-- The read came back without a definition. Said in words, because a
+           spinner here would wait for the rest of the visit, and the card would
+           go on looking like a template still worth waiting for (PO-249). -->
+      <div
+        v-else-if="template.detailFailed"
+        role="status"
+        class="flex h-full items-center justify-center gap-1.5 px-3 text-xs text-muted-foreground"
+      >
+        <AlertTriangle :size="full ? 14 : 12" class="shrink-0" />
+        {{ t("integration.templates.card.state.flowUnavailable") }}
+      </div>
       <!-- Named, because "still on its way" and "this template draws nothing"
            are the same sight otherwise — and a spinner nobody can address is a
            promise no test can hold to. -->

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

@@ -4,7 +4,7 @@ type __VLS_Props = {
     size?: number;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    icon: WorkflowIcon | null;
     size: number;
+    icon: WorkflowIcon | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -4,7 +4,7 @@ type __VLS_Props = {
     size?: number;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    icon: WorkflowIcon | null;
     size: number;
+    icon: WorkflowIcon | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/composables/useIntegrationsTemplates.js

@@ -95,10 +95,12 @@ export function useIntegrationsTemplates() {
   const t = useIntegrationsT();
   const rawList = useState("integrations.templates.raw", () => []);
   const rawDetails = useState("integrations.templates.rawDetails", () => ({}));
+  const failedDetails = useState("integrations.templates.failedDetails", () => ({}));
   const templates = computed(() => rawList.value.map((item) => {
     const base = mapListItem(item);
     const detail = rawDetails.value[item.slug];
-    return detail ? applyDetail(base, detail) : base;
+    if (detail) return applyDetail(base, detail);
+    return failedDetails.value[item.slug] ? { ...base, detailFailed: true } : base;
   }));
   const loaded = useState("integrations.templates.loaded", () => false);
   const loading = useState("integrations.templates.loading", () => false);
@@ -112,11 +114,13 @@ export function useIntegrationsTemplates() {
       const list2 = unwrapList(await api.get("/templates"));
       rawList.value = list2;
       rawDetails.value = {};
+      failedDetails.value = {};
       loaded.value = true;
     } catch (e) {
       error.value = errorReason(e, t("integration.templates.state.error.fallback"));
       rawList.value = [];
       rawDetails.value = {};
+      failedDetails.value = {};
       loaded.value = true;
     } finally {
       gate.release();
@@ -142,14 +146,19 @@ export function useIntegrationsTemplates() {
   });
   function remember(details) {
     const found = [...details].filter((entry) => entry[1] !== null);
-    if (!found.length) return;
-    rawDetails.value = { ...rawDetails.value, ...Object.fromEntries(found) };
+    const missing = [...details].filter(([, detail]) => detail === null).map(([slug]) => slug);
+    if (found.length) rawDetails.value = { ...rawDetails.value, ...Object.fromEntries(found) };
+    if (found.length || missing.length) {
+      const failed = { ...failedDetails.value };
+      for (const [slug] of found) delete failed[slug];
+      for (const slug of missing) failed[slug] = true;
+      failedDetails.value = failed;
+    }
   }
   async function fetchDetail(slug) {
     const base = get(slug);
     if (!base?.fromApi) return base;
-    const detail = await loader.one(slug);
-    if (detail) remember(/* @__PURE__ */ new Map([[slug, detail]]));
+    remember(/* @__PURE__ */ new Map([[slug, await loader.one(slug)]]));
     return get(slug);
   }
   async function ensureDetails(slugs, _concurrency = 4) {

package/dist/runtime/i18n/messages/de.json

@@ -818,6 +818,8 @@
   "integration.nodeInspector.toast.samplePinned": "Beispielausgabe angeheftet",
   "integration.nodeInspector.toast.secretCopied": "Secret kopiert",
   "integration.nodeInspector.toast.secretCopyFailed": "Secret konnte nicht kopiert werden",
+  "integration.nodeInspector.toast.testRunFailed": "Test von „{name}“ fehlgeschlagen",
+  "integration.nodeInspector.toast.testRunFailedNoMessage": "Der Schritt endete am Fehlerausgang, ohne einen Grund zu nennen.",
   "integration.nodeInspector.toast.testRunFinished": "Testlauf abgeschlossen",
   "integration.nodeInspector.toast.webhookUrlCopied": "Webhook-URL kopiert",
   "integration.nodeInspector.toast.webhookUrlCopyFailed": "URL konnte nicht kopiert werden",
@@ -1113,6 +1115,7 @@
   "integration.secrets.table.column.key": "Schlüssel",
   "integration.secrets.table.column.updated": "Aktualisiert",
   "integration.shell.action.skipToContent": "Zum Inhalt springen",
+  "integration.templates.card.state.flowUnavailable": "Der Ablauf konnte nicht geladen werden",
   "integration.templates.card.state.loadingFlow": "Der Ablauf wird geladen",
   "integration.templates.card.trigger.event": "Event-gesteuert",
   "integration.templates.card.trigger.schedule": "Geplant",

package/dist/runtime/i18n/messages/en.json

@@ -818,6 +818,8 @@
   "integration.nodeInspector.toast.samplePinned": "Sample output pinned",
   "integration.nodeInspector.toast.secretCopied": "Secret copied",
   "integration.nodeInspector.toast.secretCopyFailed": "Could not copy the secret",
+  "integration.nodeInspector.toast.testRunFailed": "Test of “{name}” failed",
+  "integration.nodeInspector.toast.testRunFailedNoMessage": "The step ended on its error output without saying why.",
   "integration.nodeInspector.toast.testRunFinished": "Test run finished",
   "integration.nodeInspector.toast.webhookUrlCopied": "Webhook URL copied",
   "integration.nodeInspector.toast.webhookUrlCopyFailed": "Could not copy the URL",
@@ -1113,6 +1115,7 @@
   "integration.secrets.table.column.key": "Key",
   "integration.secrets.table.column.updated": "Updated",
   "integration.shell.action.skipToContent": "Skip to content",
+  "integration.templates.card.state.flowUnavailable": "Couldn't load the flow",
   "integration.templates.card.state.loadingFlow": "Loading the flow",
   "integration.templates.card.trigger.event": "Event-driven",
   "integration.templates.card.trigger.schedule": "Scheduled",

package/dist/runtime/pages/integrations/templates/index.vue

@@ -49,7 +49,7 @@ const filtered = computed(() => {
   const sorted = [...items];
   if (sortBy.value === "name") sorted.sort((a, b) => a.name.localeCompare(b.name));
   else if (sortBy.value === "level") sorted.sort((a, b) => (LEVEL_RANK[a.level] ?? 0) - (LEVEL_RANK[b.level] ?? 0) || a.name.localeCompare(b.name));
-  else sorted.sort((a, b) => b.nodeCount - a.nodeCount || a.name.localeCompare(b.name));
+  else sorted.sort((a, b) => Number(!!b.detailLoaded) - Number(!!a.detailLoaded) || b.nodeCount - a.nodeCount || a.name.localeCompare(b.name));
   return sorted;
 });
 watch(() => templates.value.length, () => {

package/dist/runtime/pages/integrations/workflows/[id].vue

@@ -234,6 +234,10 @@ function answerLeave(leave) {
   leaveDecision?.(leave);
   leaveDecision = null;
 }
+function focusStay(event) {
+  event.preventDefault();
+  event.target?.querySelector('[data-leave-answer="stay"]')?.focus();
+}
 let leavingOnPurpose = false;
 async function leaveTo(path) {
   leavingOnPurpose = true;
@@ -339,6 +343,10 @@ function extractRunId(res) {
   }
   return null;
 }
+function bodyRunId(e) {
+  if (!(e instanceof IntegrationsApiError)) return null;
+  return extractRunId(e.body?.run);
+}
 function asRunObject(res) {
   if (!res || typeof res !== "object" || Array.isArray(res)) return null;
   const o = res;
@@ -353,12 +361,12 @@ function viewRunFromModal(id2) {
 function isRefusal(e) {
   if (!(e instanceof IntegrationsApiError)) return false;
   if (e.status < 400 || e.status >= 500 || e.status === 408) return false;
-  return extractRunId(e.body?.run) === null;
+  return bodyRunId(e) === null;
 }
 function syncErrorMessage(e) {
   if (e instanceof IntegrationsApiError) {
     if (e.status === 504) return t("integration.editor.run.error.syncTimeout");
-    if (e.status === 422 && e.body?.status === "failed") return t("integration.editor.run.error.syncFailed");
+    if (e.status === 422 && bodyRunId(e) !== null) return t("integration.editor.run.error.syncFailed");
   }
   return errorReason(e, t("integration.editor.run.error.syncFailed"));
 }
@@ -418,9 +426,7 @@ async function run(mode) {
       runObject.value = asRunObject(syncResponse.value);
     } catch (e) {
       await reportRunFailure(e, syncErrorMessage);
-      if (e instanceof IntegrationsApiError) {
-        runModalRunId.value = extractRunId(e.body?.run);
-      }
+      runModalRunId.value = bodyRunId(e);
     } finally {
       syncLoading.value = false;
       void loadRuns(1);
@@ -1368,29 +1374,24 @@ async function confirmDeactivate() {
 
     <!-- Leaving the workflow with unsaved work.
          Staying is the default in the only sense that decides anything: it holds the
-         focus when the dialog opens, so Enter or Space keeps the work. That is what
-         `AlertDialogCancel` is for — the dialog focuses its cancel element, and with
-         none declared it focuses the first tabbable button instead, which was
-         "Discard and leave". A breadcrumb click followed by Enter then threw away the
-         afternoon this dialog exists to protect.
-         `as-child` so the studio's own Button is that element rather than a second one
-         beside it. Escape means the same thing, through `update:open`; a click beside
-         the dialog does nothing at all, which an alert dialog is entitled to.
+         focus when the dialog opens, so Enter or Space keeps the work — `focusStay`
+         puts it there. Escape means the same thing, through `update:open`; a click
+         beside the dialog does nothing at all, which an alert dialog is entitled to.
 
-         The class list on that Button is the price of `as-child`: `AlertDialogCancel`
-         applies the outline variant to whatever it renders, and every dialog in this
-         module draws the answer on the right as a filled one. So the two variants meet
-         on one element and `tailwind-merge` decides between them per group — which it
-         cannot do where the outline variant names a group the default one does not, and
-         those are the five that have to be said here. Left to itself the merge produced
-         a background from the outline variant and a text colour from the default, which
-         resolve to the same colour in this theme: the label was invisible until hovered
-         (PO-415). Nothing marks this answer as the one holding the keyboard otherwise —
-         `focus-visible` does not match after the click that opened the dialog. -->
+         The answer on the right is a plain filled Button, as in every other dialog in
+         this module, and deliberately not wrapped in `AlertDialogCancel`. The cancel
+         adds its own variant to whatever it renders, so two variants met on one
+         element, and the design system paints a button's face as a background image
+         over its background colour: no class written here decides what is seen. Under
+         `@revenexx/studio` 0.2.2 and 0.2.3 the outline variant painted a white face
+         over the label, and the answer that keeps the work was unreadable in the
+         cockpit (PO-415, PO-598). Nothing marks this answer as the one holding the
+         keyboard otherwise — `focus-visible` does not match after the click that
+         opened the dialog. -->
     <AlertDialog :open="leaveOpen" @update:open="(v) => {
   if (!v) answerLeave(false);
 }">
-      <AlertDialogContent>
+      <AlertDialogContent @open-auto-focus="focusStay">
         <AlertDialogHeader>
           <AlertDialogTitle>{{ t("integration.editor.leave.dialog.title") }}</AlertDialogTitle>
           <AlertDialogDescription>
@@ -1401,14 +1402,9 @@ async function confirmDeactivate() {
           <Button variant="outline" @click="answerLeave(true)">
             {{ t("integration.editor.leave.dialog.discard") }}
           </Button>
-          <AlertDialogCancel as-child>
-            <Button
-              class="border-transparent bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground dark:border-transparent dark:bg-primary dark:hover:bg-primary/90"
-              @click="answerLeave(false)"
-            >
-              {{ t("integration.editor.leave.dialog.stay") }}
-            </Button>
-          </AlertDialogCancel>
+          <Button data-leave-answer="stay" @click="answerLeave(false)">
+            {{ t("integration.editor.leave.dialog.stay") }}
+          </Button>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>

package/dist/runtime/types/integrations.d.ts

@@ -616,6 +616,8 @@ export interface WorkflowTemplate {
     }>;
     /** True once the heavy definition blob has been merged via fetchDetail. */
     detailLoaded?: boolean;
+    /** True when the definition was asked for and did not arrive — not "still on its way". */
+    detailFailed?: boolean;
     /** Source node package this template ships with (e.g. Business Central). */
     package?: {
         name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/studio-integrations",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "type": "module",
   "description": "Integration Studio (core: workflows, node editor, runs, schedules, credentials, secrets, audit) as a standalone, publishable Nuxt module.",
   "repository": {
@@ -34,7 +34,7 @@
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^3.0.0",
-    "@revenexx/studio": "^0.2.3",
+    "@revenexx/studio": "^0.2.10",
     "@tiptap/core": "^3.28.0",
     "@tiptap/extension-document": "^3.28.0",
     "@tiptap/extension-history": "^3.28.0",