@revenexx/studio-integrations 3.7.1 → 3.8.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @revenexx/studio-integrations
 
+## 3.8.0
+
+### Minor Changes
+
+- 0933441: A trigger kind is named in the reader's language wherever the studio shows one — "Zeitplan", "Manuell" in German, "Schedule", "Manual" in English. The workflows list, the trigger card on the canvas, the template miniature and the origin of a missed run used to print the platform's own word ("schedule", "Trigger · manual") in every language. The workflows list's Mode column and its filter now use the same word as the workflow's header: "Async", "Sync" and "Caller decides" in English, "Asynchron", "Synchron" and "Aufrufer entscheidet" in German, where the list used to show "async", "sync" and "caller" (in German "Aufrufer"). The filter's option names change with it, which is why this is a minor. The list sorts both columns by the word it shows. The three `integration.workflows.table.mode.*` message keys are gone; the list reads `integration.editor.executionMode.*`.
+
+### Patch Changes
+
+- 78b99ec: A setting whose options the platform resolves is no longer held back by a setting it depends on that the node does not require. That setting is sent with the question when it is filled in, and left out when it is empty — so SOAP Request's operation list reads a WSDL behind a login with the chosen credential, and a public WSDL still without one. A setting the node requires still holds the list back and says so.
+- b3001f3: When the browser refuses to open the window for connecting a credential at the provider — a pop-up blocker, a hardened profile — the studio now says so and says what to do: "The browser blocked the window for signing in at the provider. Allow pop-ups for this site, then try again." Before, Connect and Reconnect did nothing visible in the credentials list, a credential's detail view, and the New-credential dialog straight after saving. The New-credential dialog now also reports an authorisation address the service could not hand back, which it used to drop silently. New message key `integration.credentials.error.popupBlocked`.
+- a3bbf46: The badges beside Workflows, Runs, Schedules, Credentials and Secrets in the navigation now show the tenant's counts — the same figure on every page — instead of the length of whatever the last page loaded. They are read from the Integrations service's new `GET /v1/summary`, which a host's own sidebar can read too through `useIntegrationsSummary()`.
+- 8e21845: Typing into a setting whose options come from the platform now narrows its list or says that nothing matches, instead of showing every option again, and puts the option whose code or name starts with what was typed first. While the answer to a typed term is awaited the options stay where they are and cannot be chosen, and the field shows that it is asking, so a click no longer lands on the option below the one aimed at.
+- 9e773ec: A workflow opens, and *Fit* and *Tidy up* fit it, into the part of the canvas that *Add node*, the Map and the control pane leave free, wherever each is docked or floated, so no step lands under a panel where it cannot be clicked; a panel collapsed to its pill takes no room (PO-660). The view a workflow opens on used to avoid only the control pane.
+- 5861e33: A run started from the editor that fails now says so in the run dialog: instead of a green "Run started" confirmation and "The run returned nothing", it shows that the run failed, the step it failed at (named as on the canvas) and the cause, with "View run" for the details. This holds for both the waiting and the immediate mode.
+
 ## 3.7.1
 
 ### Patch Changes

package/dist/module.json

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

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

@@ -137,7 +137,9 @@ async function submit() {
     await load(true);
     toast.success(t("integration.credentials.toast.created"));
     if (isOAuthAuthcode(pickedType.value)) {
-      void connect(created.id);
+      connect(created.id).catch((e) => {
+        toast.error(errorReason(e, t("integration.credentials.error.oauthConnect")));
+      });
     }
     emit("created", created.id);
     emit("update:open", false);

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

@@ -7,6 +7,7 @@ import LoadingAnnouncement from "./LoadingAnnouncement.vue";
 import { deadLetterStatusClass, deadLetterStatusLabel } from "../../utils/statusStyle";
 import { errorReason } from "../../utils/apiError";
 import { formatDateTime } from "../../utils/formatDateTime";
+import { triggerTypeLabel } from "../../data/integrationNodeCatalog";
 const props = defineProps({
   workflowId: { type: Number, required: true }
 });
@@ -122,7 +123,7 @@ async function onDiscard(dl) {
           <div class="text-sm break-words">{{ dl.reason || t("integration.deadLetters.reason.fallback") }}</div>
           <div class="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground font-mono">
             <span>#{{ dl.id }}</span>
-            <span v-if="dl.source">{{ dl.source }}</span>
+            <span v-if="dl.source">{{ triggerTypeLabel(dl.source) }}</span>
             <span v-if="dl.trigger_handle">↳ {{ dl.trigger_handle }}</span>
             <span>{{ formatDateTime(dl.created_at) }}</span>
           </div>

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

@@ -1,9 +1,11 @@
 <script setup>
 import { computed, nextTick, ref, watch } from "vue";
 import { isVersionExecutable } from "../../data/integrationNodeCatalog";
-import { ChevronDown } from "lucide-vue-next";
+import { ChevronDown, LoaderCircle } from "lucide-vue-next";
 import { Input } from "@revenexx/studio";
+import { optionalDependencies } from "../../composables/useNodeConfigResolve";
 import { resolveLocalized } from "../../utils/localize";
+import { narrowOptions } from "../../utils/optionSearch";
 const props = defineProps({
   slug: { type: String, required: true },
   version: { type: String, required: true },
@@ -23,6 +25,7 @@ const q = useNodeConfigResolve({
   target: () => props.field.key,
   config: () => props.config,
   dependsOn: () => props.field.dependsOn,
+  optional: () => optionalDependencies(props.field.dependsOn, props.siblingFields),
   search: () => focused.value ? search.value : ""
 });
 const unsatisfiedLabels = computed(() => q.unsatisfied.value.map((key) => {
@@ -72,13 +75,10 @@ function onComboClick() {
   listDismissed.value = false;
 }
 const visibleOptions = computed(() => {
-  const term = search.value.trim().toLowerCase();
-  if (!focused.value || !term) return options.value;
-  const hits = options.value.filter(
-    (o) => (resolveLocalized(o.label) || "").toLowerCase().includes(term) || String(o.value).toLowerCase().includes(term)
-  );
-  return hits.length ? hits : options.value;
+  if (!focused.value) return options.value;
+  return narrowOptions(options.value, search.value, (o) => resolveLocalized(o.label) || "", (o) => String(o.value));
 });
+const answerPending = computed(() => listOpen.value && q.isPending.value);
 function onComboFocus() {
   search.value = "";
   listDismissed.value = false;
@@ -88,6 +88,7 @@ function onComboBlur() {
   focused.value = false;
 }
 function pick(value) {
+  if (answerPending.value) return;
   emit("update:modelValue", value);
   search.value = "";
   focused.value = false;
@@ -126,8 +127,10 @@ function toggleMulti(optValue) {
       <p class="mt-1 text-sm text-amber-600">{{ t("integration.nodeConfig.dynamicField.gated", { keys: unsatisfiedLabels.join(", ") }) }}</p>
     </template>
 
-    <!-- first load: no data yet -->
-    <template v-else-if="q.isFetching.value && options.length === 0">
+    <!-- first load: no answer yet. Not "no options": a search that found nothing
+         empties the list too, and swapping the field out then would take the focus
+         from an operator correcting their term (AC-13) -->
+    <template v-else-if="q.isFetching.value && !q.hasData.value">
       <div :class="disabledControlClass">{{ t("integration.nodeConfig.dynamicField.resolving") }}</div>
     </template>
 
@@ -198,26 +201,43 @@ function toggleMulti(optValue) {
           @keydown.down="onComboArrowDown"
           @blur="onComboBlur"
         />
-        <ChevronDown :size="14" class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+        <!-- waiting is shown in the field, not as a row of the list: a row that
+             comes and goes moves every option under the pointer (AC-14) -->
+        <LoaderCircle
+          v-if="answerPending"
+          :size="14"
+          role="status"
+          :aria-label="search ? t('integration.nodeConfig.dynamicField.searching') : t('integration.nodeConfig.dynamicField.resolving')"
+          class="absolute right-2 top-1/2 -translate-y-1/2 animate-spin text-muted-foreground"
+        />
+        <ChevronDown v-else :size="14" class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
         <div
           v-if="listOpen"
+          :aria-busy="answerPending"
           class="absolute left-0 right-0 top-full z-30 mt-1 max-h-56 overflow-y-auto rounded-md border border-black/[0.08] bg-white py-1 shadow-md"
         >
-          <div v-if="q.isFetching.value" class="px-2.5 py-1.5 text-sm text-muted-foreground">
-            {{ search ? t("integration.nodeConfig.dynamicField.searching") : t("integration.nodeConfig.dynamicField.resolving") }}
-          </div>
           <button
             v-for="opt in visibleOptions"
             :key="String(opt.value)"
             type="button"
-            class="flex w-full items-center px-2.5 py-1.5 text-left text-sm hover:bg-muted/50"
-            :class="String(opt.value) === currentValue ? 'bg-emerald-500/10 text-emerald-800' : ''"
+            :aria-disabled="answerPending || void 0"
+            class="flex w-full items-center px-2.5 py-1.5 text-left text-sm"
+            :class="[
+  String(opt.value) === currentValue ? 'bg-emerald-500/10 text-emerald-800' : '',
+  answerPending ? 'cursor-wait opacity-60' : 'hover:bg-muted/50'
+]"
             @mousedown.prevent="pick(String(opt.value))"
           >
             <span class="min-w-0 truncate">{{ resolveLocalized(opt.label) || String(opt.value) }}</span>
           </button>
-          <div v-if="!q.isFetching.value && visibleOptions.length === 0" class="px-2.5 py-1.5 text-sm text-muted-foreground">
-            {{ search ? t("integration.nodeConfig.dynamicField.noMatch", { query: search }) : t("integration.nodeConfig.dynamicField.empty") }}
+          <!-- with nothing to show, the one row says why: still asking, or nothing matches -->
+          <div v-if="visibleOptions.length === 0" class="px-2.5 py-1.5 text-sm text-muted-foreground">
+            <template v-if="answerPending">
+              {{ search ? t("integration.nodeConfig.dynamicField.searching") : t("integration.nodeConfig.dynamicField.resolving") }}
+            </template>
+            <template v-else>
+              {{ search.trim() ? t("integration.nodeConfig.dynamicField.noMatch", { query: search.trim() }) : t("integration.nodeConfig.dynamicField.empty") }}
+            </template>
           </div>
         </div>
       </div>

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

@@ -7,6 +7,8 @@ type __VLS_Props = {
     staticKeys: string[];
     secretKeys: string[];
     depth?: number;
+    /** The settings beside this one, so an optional `dependsOn` does not gate (IN-80). */
+    siblingFields?: ConfigField[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     set: (key: string, value: unknown) => any;

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

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { Button } from "@revenexx/studio";
 import { IntegrationsApiError } from "../../utils/apiError";
+import { optionalDependencies } from "../../composables/useNodeConfigResolve";
 import { resolveLocalized } from "../../utils/localize";
 import { applyingFields, staleKeys } from "../../utils/settingCondition";
 const props = defineProps({
@@ -11,7 +12,8 @@ const props = defineProps({
   config: { type: Object, required: true },
   staticKeys: { type: Array, required: true },
   secretKeys: { type: Array, required: true },
-  depth: { type: Number, required: false }
+  depth: { type: Number, required: false },
+  siblingFields: { type: Array, required: false }
 });
 const emit = defineEmits(["set"]);
 const t = useIntegrationsT();
@@ -22,7 +24,8 @@ const q = useNodeConfigResolve({
   version: () => props.version,
   target: () => "*",
   config: () => props.config,
-  dependsOn: () => props.field.dependsOn
+  dependsOn: () => props.field.dependsOn,
+  optional: () => optionalDependencies(props.field.dependsOn, props.siblingFields)
 });
 const resolvedFields = computed(() => q.data.value?.fields ?? []);
 const applyingResolvedFields = computed(() => applyingFields(resolvedFields.value, props.config));

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

@@ -7,6 +7,8 @@ type __VLS_Props = {
     staticKeys: string[];
     secretKeys: string[];
     depth?: number;
+    /** The settings beside this one, so an optional `dependsOn` does not gate (IN-80). */
+    siblingFields?: ConfigField[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     set: (key: string, value: unknown) => any;

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

@@ -594,6 +594,7 @@ function setArrayItemField(index, fieldKey, v) {
       :static-keys="staticKeys ?? []"
       :secret-keys="secretKeys"
       :depth="depth ?? 0"
+      :sibling-fields="siblingFields"
       @set="(k, v) => emit('set', k, v)"
     />
 

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

@@ -1,4 +1,5 @@
 import type { RunOutput } from '../../utils/runOutputs.js';
+import { type RunFailure } from '../../utils/runFailure.js';
 /**
  * Result surface for a manual run, sync and async alike.
  *
@@ -44,6 +45,11 @@ type __VLS_Props = {
      * which has the status code; `error` alone cannot tell the two apart.
      */
     refused?: boolean;
+    /**
+     * Why the run failed — the step, named as the canvas names it, and the cause —
+     * as far as the page has found out. Read only for a run that failed (PO-690).
+     */
+    failure?: RunFailure | null;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (args_0: boolean) => any;

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

@@ -12,6 +12,7 @@ import {
 import { formatDuration } from "../../utils/formatDuration";
 import { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
 import { isTerminalRun } from "../../utils/runEnvelope";
+import { isFailedRun } from "../../utils/runFailure";
 const props = defineProps({
   open: { type: Boolean, required: true },
   loading: { type: Boolean, required: false },
@@ -22,7 +23,8 @@ const props = defineProps({
   following: { type: Boolean, required: false },
   error: { type: [String, null], required: false },
   runId: { type: [String, null], required: false },
-  refused: { type: Boolean, required: false }
+  refused: { type: Boolean, required: false },
+  failure: { type: [Object, null], required: false }
 });
 const emit = defineEmits(["update:open", "view-run"]);
 const t = useIntegrationsT();
@@ -40,6 +42,8 @@ const ended = computed(() => {
   if (props.mode !== "async") return true;
   return isTerminalRun(props.run);
 });
+const failed = computed(() => ended.value && isFailedRun(props.run));
+const cancelled = computed(() => ["cancelled", "canceled"].includes(status.value.toLowerCase()));
 const returnedNothing = computed(() => props.result == null || typeof props.result === "object" && !Array.isArray(props.result) && !Object.keys(props.result).length);
 const refused = computed(() => !props.loading && !!props.refused);
 const unconfirmed = computed(() => !props.loading && !refused.value && props.mode === "async" && !!props.error && !runNumber.value);
@@ -94,8 +98,16 @@ function pretty(value) {
           >
             {{ error }}
           </DialogDescription>
-          <div v-else class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-rose-700">
-            {{ error }}
+          <div v-else role="alert" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-rose-700">
+            <p>{{ error }}</p>
+            <!-- A waiting run the engine failed ships the run, so it exists and has
+                 a failed step and a reason like any other (PO-690). -->
+            <p v-if="runId && failure?.step" class="mt-1">
+              {{ t("integration.runs.response.failure.step", { step: failure.step }) }}
+            </p>
+            <p v-if="runId && failure?.cause" class="mt-1 whitespace-pre-wrap break-words">
+              {{ failure.cause }}
+            </p>
           </div>
           <div v-if="runId" class="mt-3 flex justify-end">
             <Button class="h-8 text-sm" @click="emit('view-run', runId)">
@@ -107,8 +119,25 @@ function pretty(value) {
         <template v-else>
           <!-- The confirmation an async press earns: the run exists and is named,
                whatever the studio manages to read back about it afterwards. -->
+          <!-- A run that failed says so in place of the confirmation, rather than
+               beside it: green "started" above red "failed" is two answers (PO-690). -->
+          <div
+            v-if="failed"
+            role="alert"
+            class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-rose-700"
+          >
+            <p class="font-medium">
+              {{ runNumber ? t("integration.runs.response.failure.runWithId", { id: runNumber }) : t("integration.runs.response.failure.run") }}
+            </p>
+            <p v-if="failure?.step" class="mt-1">
+              {{ t("integration.runs.response.failure.step", { step: failure.step }) }}
+            </p>
+            <p v-if="failure?.cause" class="mt-1 whitespace-pre-wrap break-words">
+              {{ failure.cause }}
+            </p>
+          </div>
           <div
-            v-if="mode === 'async'"
+            v-else-if="mode === 'async'"
             class="flex items-center gap-2 rounded-md border border-emerald-500/20 bg-emerald-500/5 px-3 py-2 text-emerald-700"
           >
             <CheckCircle2 :size="15" class="shrink-0" />
@@ -148,7 +177,9 @@ function pretty(value) {
           <!-- Nothing at all where the run has not ended: the studio has stopped
                looking, which is not the same as the run having finished, and the
                confirmation and the status line above already say where it stands. -->
-          <template v-else-if="ended">
+          <!-- A failed run has said why above; "returned nothing" under it would read
+               as the explanation, and a `null` result printed whole as the answer. -->
+          <template v-else-if="ended && !failed && !cancelled">
             <p v-if="returnedNothing" class="mt-3 py-3 text-muted-foreground">
               {{ t("integration.runs.response.nothingReturned") }}
             </p>

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

@@ -1,4 +1,5 @@
 import type { RunOutput } from '../../utils/runOutputs.js';
+import { type RunFailure } from '../../utils/runFailure.js';
 /**
  * Result surface for a manual run, sync and async alike.
  *
@@ -44,6 +45,11 @@ type __VLS_Props = {
      * which has the status code; `error` alone cannot tell the two apart.
      */
     refused?: boolean;
+    /**
+     * Why the run failed — the step, named as the canvas names it, and the cause —
+     * as far as the page has found out. Read only for a run that failed (PO-690).
+     */
+    failure?: RunFailure | null;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (args_0: boolean) => any;

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

@@ -1,12 +1,29 @@
 <script setup>
+import { computed, onMounted, watch } from "vue";
 import { Pulse as Activity, ClockCircle as Clock, Home, Key as KeyRound, Layers, ShieldCheck, ShieldKeyhole as Credentials, Programming as Workflow } from "#solar-icons";
 import SidebarNav from "@revenexx/studio-shared/components/Shared/SidebarNav.vue";
 const t = useIntegrationsT();
+const route = useRoute();
+const { summary, load: loadSummary } = useIntegrationsSummary();
+onMounted(loadSummary);
+watch(() => route.path, () => {
+  void loadSummary();
+});
 const { workflows } = useIntegrationsWorkflows();
 const { runningCount } = useIntegrationsRuns();
 const { activeCount: schedulesActive } = useIntegrationsSchedules();
 const { total: credentialsTotal } = useIntegrationsCredentials();
 const { total: secretsTotal } = useIntegrationsSecrets();
+const { tenant } = useIntegrationsApi();
+watch(
+  () => [tenant.value, workflows.value.length, runningCount.value, schedulesActive.value, credentialsTotal.value, secretsTotal.value],
+  () => {
+    void loadSummary();
+  }
+);
+function badge(count) {
+  return count || null;
+}
 const sections = computed(() => [
   {
     key: "pinned",
@@ -21,12 +38,12 @@ const sections = computed(() => [
     // translator will look for it rather than only in a review comment.
     label: t("integration.nav.section.integrations"),
     items: [
-      { label: t("integration.nav.item.workflows"), to: "/integrations/workflows", icon: Workflow, badge: workflows.value.length || null },
+      { label: t("integration.nav.item.workflows"), to: "/integrations/workflows", icon: Workflow, badge: badge(summary.value?.workflows) },
       { label: t("integration.nav.item.templates"), to: "/integrations/templates", icon: Layers },
-      { label: t("integration.nav.item.runs"), to: "/integrations/runs", icon: Activity, badge: runningCount.value || null },
-      { label: t("integration.nav.item.schedules"), to: "/integrations/schedules", icon: Clock, badge: schedulesActive.value || null },
-      { label: t("integration.nav.item.credentials"), to: "/integrations/credentials", icon: Credentials, badge: credentialsTotal.value || null },
-      { label: t("integration.nav.item.secrets"), to: "/integrations/secrets", icon: KeyRound, badge: secretsTotal.value || null },
+      { label: t("integration.nav.item.runs"), to: "/integrations/runs", icon: Activity, badge: badge(summary.value?.runsInFlight) },
+      { label: t("integration.nav.item.schedules"), to: "/integrations/schedules", icon: Clock, badge: badge(summary.value?.schedulesActive) },
+      { label: t("integration.nav.item.credentials"), to: "/integrations/credentials", icon: Credentials, badge: badge(summary.value?.credentials) },
+      { label: t("integration.nav.item.secrets"), to: "/integrations/secrets", icon: KeyRound, badge: badge(summary.value?.secrets) },
       { label: t("integration.nav.item.audit"), to: "/integrations/audit", icon: ShieldCheck }
     ]
   }

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

@@ -2,7 +2,7 @@
 import { computed, onMounted } from "vue";
 import { nodeIcon } from "../../data/nodeIcons";
 import { triggerGlyph } from "../../data/triggerGlyphs";
-import { findManifest, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
+import { findManifest, NODE_CATEGORIES, TRIGGER_TEMPLATES, triggerTypeLabel } from "../../data/integrationNodeCatalog";
 import { resolveLocalized } from "../../utils/localize";
 import { describeCron } from "../../utils/schedule";
 import IntegrationsNodeMark from "./NodeMark.vue";
@@ -38,7 +38,7 @@ const boxes = computed(() => {
       y: pos.y,
       w: TRIG_W,
       h: TRIG_H,
-      label: typeof t2.name === "string" && t2.name || t2.type.charAt(0).toUpperCase() + t2.type.slice(1),
+      label: typeof t2.name === "string" && t2.name || triggerTypeLabel(t2.type),
       subtitle,
       type: t2.type,
       manifest: null,
@@ -175,7 +175,7 @@ const bounds = computed(() => {
             </div>
           </div>
           <div class="rounded-b-md border-t border-emerald-500/15 bg-emerald-500/[0.04] px-3 py-1 text-mono font-semibold text-emerald-700/80">
-            {{ t("integration.templates.preview.triggerLabel") }} · {{ b.type }}
+            {{ t("integration.templates.preview.triggerLabel") }} · {{ triggerTypeLabel(b.type) }}
           </div>
         </div>
 

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

@@ -6,6 +6,7 @@ import {
   MarkerType,
   SelectionMode,
   VueFlow,
+  getRectOfNodes,
   useVueFlow
 } from "@vue-flow/core";
 import { Background } from "@vue-flow/background";
@@ -58,6 +59,7 @@ import { copiedRefusalText, joinRefusalText, refusalText } from "../../data/refu
 import { inputHandleId, outputHandleId, portFromHandleId } from "../../data/handleId";
 import { OPPOSITE_SIDE } from "./canvasSides";
 import { deepClone } from "../../utils/deepClone";
+import { fitArea, paddingFor } from "../../utils/canvasFit";
 import { copyToClipboard } from "../../utils/clipboard";
 import { groupFindingsByNode, findingsByNodeField, nodeDisplayLabel } from "../../utils/validationFindings";
 import { reorderBranchSubtrees } from "../../data/branchReorder";
@@ -403,32 +405,10 @@ function edgeColorByKind(kind) {
 syncFromBlob();
 const paneReady = ref(false);
 const pendingReveal = ref(null);
-function liftAboveControlPane() {
-  const bar = controlBar.value?.getBoundingClientRect();
-  const wrap = canvasWrapRef.value?.getBoundingClientRect();
-  const vp = flow.viewport.value;
-  if (!bar || !wrap || !vp) return;
-  let top = Number.POSITIVE_INFINITY;
-  let bottom = Number.NEGATIVE_INFINITY;
-  for (const n of vfNodes.value) {
-    const height = flow.findNode(n.id)?.dimensions?.height ?? 76;
-    top = Math.min(top, n.position.y);
-    bottom = Math.max(bottom, n.position.y + height);
-  }
-  if (!Number.isFinite(top) || !Number.isFinite(bottom)) return;
-  const CLEARANCE = 8;
-  const overlap = wrap.top + vp.y + bottom * vp.zoom - bar.top + CLEARANCE;
-  if (overlap <= 0) return;
-  const roomAtTop = wrap.top + vp.y + top * vp.zoom - wrap.top - CLEARANCE;
-  const lift = Math.min(overlap, Math.max(roomAtTop, 0));
-  if (lift <= 0) return;
-  flow.setViewport({ ...vp, y: vp.y - lift });
-}
 flow.onPaneReady(async () => {
   await nextTick();
   void canvasWrapRef.value?.getBoundingClientRect();
-  await flow.fitView({ padding: { x: 0.2, top: 0.2, bottom: "96px" }, maxZoom: 1 });
-  liftAboveControlPane();
+  await fitClearOfPanels({ duration: 0 });
   paneReady.value = true;
   if (pendingReveal.value) {
     centerOnNode(pendingReveal.value);
@@ -864,7 +844,7 @@ function onMenuAction(id) {
       void tidyUp();
       break;
     case "fit-view":
-      flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 });
+      void fitClearOfPanels();
       break;
     case "add-node":
       void focusPalette();
@@ -1385,7 +1365,7 @@ async function tidyUp() {
   syncFromBlob();
   push();
   await nextTick();
-  flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 });
+  await fitClearOfPanels();
 }
 const POINTER_MODE_KEY = "integrations.editor.pointerMode";
 const pointerMode = ref("select");
@@ -1445,6 +1425,29 @@ const MINIMAP_CORNER_CLASS = {
 };
 const minimapPlacementClass = computed(() => minimapLayout.mode.value === "floating" ? "" : MINIMAP_CORNER_CLASS[minimapLayout.mode.value]);
 const minimapPreviewClass = computed(() => minimapLayout.dockPreview.value ? MINIMAP_CORNER_CLASS[minimapLayout.dockPreview.value] : "");
+async function fitClearOfPanels({ duration = 400 } = {}) {
+  const wrap = canvasWrapRef.value?.getBoundingClientRect();
+  const visible = flow.getNodes.value.filter((n) => !n.hidden && n.dimensions.width && n.dimensions.height);
+  if (!wrap || wrap.width === 0 || !visible.length) {
+    await flow.fitView({ padding: 0.2, duration, maxZoom: 1 });
+    return;
+  }
+  const canvas = { left: wrap.left, top: wrap.top, right: wrap.right, bottom: wrap.bottom };
+  const panels = [];
+  for (const el of [
+    palette.collapsed.value ? null : paletteShellRef.value,
+    minimapLayout.collapsed.value ? null : minimapShellRef.value,
+    controlBar.value
+  ]) {
+    const box = el?.getBoundingClientRect();
+    if (box && box.width > 0 && box.height > 0) {
+      panels.push({ left: box.left, top: box.top, right: box.right, bottom: box.bottom });
+    }
+  }
+  const bounds = getRectOfNodes(visible);
+  const area = fitArea(canvas, panels, { width: bounds.width, height: bounds.height }, flow.minZoom.value, 1);
+  await flow.fitView({ padding: paddingFor(canvas, area), duration, maxZoom: 1 });
+}
 async function focusPalette() {
   if (palette.collapsed.value) {
     palette.setCollapsed(false);
@@ -1519,7 +1522,9 @@ useCanvasShortcuts(() => ({
     void flow.zoomIn({ duration: 150 });
   },
   [shortcutKeys("zoomReset")]: () => setZoomPct(100),
-  [shortcutKeys("fitView")]: () => flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 }),
+  [shortcutKeys("fitView")]: () => {
+    void fitClearOfPanels();
+  },
   [shortcutKeys("addNode")]: () => {
     void focusPalette();
   },
@@ -1878,7 +1883,7 @@ const edgeTypes = {
                 <button
                   type="button"
                   class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
-                  @click="flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 })"
+                  @click="fitClearOfPanels()"
                 >
                   <Sparkles :size="13" />
                   {{ t("integration.editor.tool.fitView.label") }}

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

@@ -92,7 +92,7 @@ const OUT_SIDES = ["bottom"];
       </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>{{ t("integration.canvas.badge.trigger") }} · {{ data.type }}</span>
+      <span>{{ t("integration.canvas.badge.trigger") }} · {{ triggerTypeLabel(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/WorkflowsTable.vue

@@ -19,6 +19,8 @@ import {
   Switch
 } from "@revenexx/studio";
 import { formatShortDateTime } from "../../utils/formatDateTime";
+import { executionModeLabel } from "../../utils/executionMode";
+import { triggerTypeLabel } from "../../data/integrationNodeCatalog";
 defineProps({
   workflows: { type: Array, required: true },
   loading: { type: Boolean, required: false, default: false }
@@ -125,16 +127,7 @@ function buildState(wf) {
   }
 }
 function modeLabel(m) {
-  switch (m) {
-    case "sync_only":
-      return t("integration.workflows.table.mode.sync");
-    case "caller_decides":
-      return t("integration.workflows.table.mode.caller");
-    case "async_only":
-      return t("integration.workflows.table.mode.async");
-    default:
-      return "\u2014";
-  }
+  return executionModeLabel(m);
 }
 const LIFECYCLE = ["active", "draft", "paused"];
 const BUILD_STATES = ["pending", "building", "ready", "failed"];
@@ -187,16 +180,18 @@ const columns = computed(() => [
   {
     key: "mode",
     label: t("integration.workflows.table.column.mode"),
-    width: "120px",
+    // Wide enough for the longest word it shows, set in capitals: German
+    // "Aufrufer entscheidet" is about 160px and ran into the Trigger column at 120.
+    width: "170px",
     sortable: true,
-    sortGetter: (w) => w.execution_mode ?? ""
+    sortGetter: (w) => w.execution_mode ? modeLabel(w.execution_mode) : ""
   },
   {
     key: "triggers",
     label: t("integration.workflows.table.column.triggers"),
     width: "140px",
     sortable: true,
-    sortGetter: (w) => w.blob.triggers.map((tr) => tr.type).join(",")
+    sortGetter: (w) => w.blob.triggers.map((tr) => triggerTypeLabel(tr.type)).join(",")
   },
   {
     key: "lastRun",
@@ -321,7 +316,7 @@ const columns = computed(() => [
           :key="trigger.id"
           class="inline-flex items-center whitespace-nowrap rounded-md border border-black/[0.06] bg-muted/50 px-1.5 py-0.5 text-xs font-medium uppercase text-muted-foreground"
         >
-          {{ trigger.type }}
+          {{ triggerTypeLabel(trigger.type) }}
         </span>
       </div>
     </template>

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

@@ -0,0 +1,29 @@
+/**
+ * How much the tenant has, counted over the whole tenant (`GET /summary`) — the
+ * figures the navigation shows beside its entries (PO-617).
+ *
+ * Kept apart from the pages' own state on purpose. The badges used to be the
+ * length of whatever the last page had loaded: the editor puts the one workflow
+ * it opened into the workflows list, so a fresh visit to a workflow read "1"
+ * beside Workflows, and a page nobody had opened yet read nothing at all. These
+ * counts are asked for on their own and no page writes to them, so opening a
+ * page cannot change what a badge says.
+ *
+ * Each count means what its page counts: `runsInFlight` is the runs summary's
+ * `in_flight`, `schedulesActive` the schedules list's `live_count`.
+ *
+ * Exported through the module's auto-imports, so the cockpit's own sidebar can
+ * read the same figures (IN-85).
+ */
+export interface IntegrationsSummary {
+    workflows: number;
+    runsInFlight: number;
+    schedulesActive: number;
+    credentials: number;
+    secrets: number;
+}
+export declare function toIntegrationsSummary(res: unknown): IntegrationsSummary | null;
+export declare function useIntegrationsSummary(): {
+    summary: any;
+    load: () => Promise<IntegrationsSummary | null>;
+};