@revenexx/studio-integrations 1.2.0 → 1.4.0

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

@@ -14,7 +14,6 @@ import {
   RefreshCircle as Loader2
 } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
-import { toast } from "vue-sonner";
 import "@vue-flow/core/dist/style.css";
 import "@vue-flow/core/dist/theme-default.css";
 import WorkflowNodeView from "./WorkflowNodeView.vue";
@@ -27,7 +26,6 @@ import { findManifest } from "../../data/integrationNodeCatalog";
 import { OPPOSITE_SIDE } from "./canvasSides";
 import { inputHandleId, outputHandleId } from "../../data/handleId";
 import { nodeLoopData } from "../../data/loopBody";
-import { triggerGlyph } from "../../data/triggerGlyphs";
 import { formatDuration } from "../../utils/formatDuration";
 import { SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
@@ -37,7 +35,7 @@ const props = defineProps({
   initialRunId: { type: [String, null], required: false },
   single: { type: Boolean, required: false }
 });
-const { loadForWorkflow, getSteps } = useIntegrationsRuns();
+const { getSteps } = useIntegrationsRuns();
 const t = useIntegrationsT();
 const TERMINAL = /* @__PURE__ */ new Set(["completed", "succeeded", "failed", "cancelled", "terminated"]);
 const STEPS_POLL_MS = 4e3;
@@ -46,33 +44,7 @@ const { delivering: realtimeDelivering, runTick, lastRunEvent } = useIntegration
 function stepsPollDelay() {
   return realtimeDelivering.value ? SAFETY_POLL_MS : STEPS_POLL_MS;
 }
-const runs = ref([]);
-const runsPage = ref(1);
-const runsLastPage = ref(1);
-const runsLoading = ref(false);
 const selectedRunId = ref(null);
-async function loadRuns(reset = false) {
-  if (runsLoading.value) return;
-  runsLoading.value = true;
-  try {
-    const res = await loadForWorkflow(props.workflow.id, props.workflow.name, {
-      page: reset ? 1 : runsPage.value,
-      reconcile: true
-    });
-    runs.value = reset ? res.runs : [...runs.value, ...res.runs];
-    runsPage.value = res.page;
-    runsLastPage.value = res.lastPage;
-  } catch (e) {
-    toast.error(errorReason(e, t("integration.replay.toast.loadRunsFailed")));
-  } finally {
-    runsLoading.value = false;
-  }
-}
-function loadMoreRuns() {
-  if (runsPage.value >= runsLastPage.value) return;
-  runsPage.value += 1;
-  void loadRuns();
-}
 const steps = ref([]);
 const stepsSource = ref(null);
 const runStatus = ref(null);
@@ -382,14 +354,6 @@ const edgeTypes = {
 preview.onNodeClick((evt) => {
   if (evt.node.type === "workflow") onNodeClick(evt.node.id);
 });
-function formatDateTime(iso) {
-  if (!iso) return "\u2014";
-  try {
-    return new Date(iso).toLocaleString();
-  } catch {
-    return String(iso);
-  }
-}
 function formatTime(iso) {
   if (!iso) return "\u2014";
   try {
@@ -405,30 +369,16 @@ function pretty(v) {
     return String(v);
   }
 }
-function triggerIcon(type) {
-  return triggerGlyph(type);
-}
 const activeStepTitle = computed(() => {
   const s = activeStep.value;
   if (!s) return "";
   return `${s.node_slug || s.node_id}${s.attempt > 0 ? ` (#${s.attempt + 1})` : ""}`;
 });
-onMounted(async () => {
-  if (props.single && props.initialRunId) {
-    selectRun(props.initialRunId);
-    return;
-  }
-  await loadRuns(true);
-  const initial = props.initialRunId && runs.value.some((r) => r.id === props.initialRunId) ? props.initialRunId : runs.value[0]?.id;
-  if (initial) selectRun(initial);
+onMounted(() => {
+  if (props.initialRunId) selectRun(props.initialRunId);
 });
 watch(() => props.initialRunId, (id) => {
-  if (!id) return;
-  if (props.single) {
-    selectRun(id);
-    return;
-  }
-  if (runs.value.some((r) => r.id === id)) selectRun(id);
+  if (id) selectRun(id);
 });
 </script>
 
@@ -589,58 +539,6 @@ watch(() => props.initialRunId, (id) => {
       </p>
     </aside>
 
-    <!-- Run list — hidden in single mode (the run detail replays ONE run). -->
-    <aside v-if="!single" class="flex w-80 shrink-0 flex-col border-l border-black/[0.06] bg-white">
-      <div class="border-b border-black/[0.06] px-3 py-2">
-        <div class="text-sm font-semibold">{{ t("integration.replay.runsList.heading") }}</div>
-        <p class="text-sm text-muted-foreground">
-          {{ t("integration.replay.runsList.description") }}
-        </p>
-      </div>
-
-      <div class="flex-1 space-y-1 overflow-y-auto p-2">
-        <button
-          v-for="r in runs"
-          :key="r.id"
-          type="button"
-          class="w-full rounded-lg border p-2.5 text-left transition"
-          :class="selectedRunId === r.id ? 'border-primary/40 bg-primary/[0.04]' : 'border-transparent hover:border-black/[0.08] hover:bg-muted/30'"
-          @click="selectRun(r.id)"
-        >
-          <div class="flex items-center justify-between gap-2">
-            <span class="flex min-w-0 items-center gap-1.5 text-sm font-medium">
-              <component :is="triggerIcon(r.triggerType)" :size="12" class="shrink-0 text-muted-foreground" />
-              <span class="truncate">#{{ r.id }}</span>
-            </span>
-            <Badge variant="outline" class="shrink-0 border text-xs font-medium uppercase" :class="runStatusClass(r.status)">
-              {{ runStatusLabel(r.status) }}
-            </Badge>
-          </div>
-          <div class="mt-0.5 flex items-center justify-between gap-2 text-sm text-muted-foreground">
-            <span class="tabular-nums">{{ formatDateTime(r.startedAt) }}</span>
-            <span class="tabular-nums">{{ formatDuration(r.durationMs) }}</span>
-          </div>
-        </button>
-
-        <p v-if="!runs.length && !runsLoading" class="px-2 py-6 text-center text-sm text-muted-foreground">
-          {{ t("integration.replay.runsList.empty") }}
-        </p>
-
-        <div v-if="runsLoading" class="flex justify-center py-3">
-          <Loader2 :size="15" class="animate-spin text-muted-foreground" />
-        </div>
-        <Button
-          v-else-if="runsPage < runsLastPage"
-          variant="ghost"
-          size="sm"
-          class="w-full text-sm"
-          @click="loadMoreRuns"
-        >
-          {{ t("integration.replay.runsList.loadMore") }}
-        </Button>
-      </div>
-    </aside>
-
   </div>
 </template>
 

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

@@ -3,9 +3,13 @@ import '@vue-flow/core/dist/theme-default.css';
 import type { Workflow } from '../../types/integrations.js';
 type __VLS_Props = {
     workflow: Workflow;
-    /** Preselect a run (deep-link from the Runs table). */
+    /** The run to replay (deep-link from the Runs table). */
     initialRunId?: string | null;
-    /** Replay ONLY the initial run: no run list, no browsing (run detail view). */
+    /**
+     * @deprecated Accepted and ignored since PO-350 — the panel has no other mode
+     * to switch out of. Kept so a host passing it keeps working; drop it at the
+     * next major.
+     */
     single?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,13 @@
+import type { WorkflowStateNamespace } from '../../types/integrations.js';
+type __VLS_Props = {
+    open: boolean;
+    state: WorkflowStateNamespace[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    "update:state": (next: WorkflowStateNamespace[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    "onUpdate:state"?: ((next: WorkflowStateNamespace[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,216 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { AddCircle as Plus, TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import { deepClone } from "../../utils/deepClone";
+import { stateNamespaceErrorKey } from "../../utils/stateNamespaceName";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  state: { type: Array, required: true }
+});
+const emit = defineEmits(["update:open", "update:state"]);
+const t = useIntegrationsT();
+const ROLES = ["mapping", "cursor", "dedupe", "digest"];
+const working = ref([]);
+watch(() => props.open, (isOpen) => {
+  if (!isOpen) return;
+  working.value = deepClone(props.state ?? []);
+  newName.value = "";
+  newRole.value = "mapping";
+  newVisibility.value = "private";
+});
+const changed = computed(() => JSON.stringify(working.value) !== JSON.stringify(props.state ?? []));
+function applyAndClose() {
+  if (changed.value) emit("update:state", working.value);
+  emit("update:open", false);
+}
+function setVisibility(index, visibility) {
+  const next = [...working.value];
+  const row = next[index];
+  if (!row) return;
+  next[index] = { ...row, visibility };
+  working.value = next;
+}
+function removeNamespace(index) {
+  working.value = working.value.filter((_, i) => i !== index);
+}
+const newName = ref("");
+const newRole = ref("mapping");
+const newVisibility = ref("private");
+const newNameError = computed(() => {
+  const key = stateNamespaceErrorKey(newName.value, working.value.map((n) => n.namespace));
+  return key ? t(key) : null;
+});
+function addNamespace() {
+  const namespace = newName.value.trim();
+  if (!namespace || newNameError.value) return;
+  working.value = [...working.value, { namespace, role: newRole.value, visibility: newVisibility.value }];
+  newName.value = "";
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
+    <DialogContent class="max-w-[94vw] sm:max-w-3xl">
+      <DialogHeader>
+        <DialogTitle>{{ t("integration.workflows.state.dialog.title") }}</DialogTitle>
+        <DialogDescription class="text-sm">
+          {{ t("integration.workflows.state.dialog.description") }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="max-h-[62vh] space-y-3 overflow-y-auto pr-1">
+        <p v-if="!working.length" class="rounded-lg border border-dashed border-black/[0.12] px-4 py-6 text-center text-sm text-muted-foreground">
+          {{ t("integration.workflows.state.empty") }}
+        </p>
+
+        <div
+          v-for="(row, index) in working"
+          :key="row.namespace"
+          role="group"
+          :aria-label="t('integration.workflows.state.row.aria', { namespace: row.namespace })"
+          class="rounded-lg border border-black/[0.06] bg-white p-3"
+        >
+          <div class="flex items-center gap-2">
+            <code class="min-w-0 truncate font-mono text-sm font-semibold">{{ row.namespace }}</code>
+            <!-- The role is stated, not offered: entries written under one
+                 meaning cannot be re-read under another (specs AC-3). -->
+            <span class="shrink-0 rounded-lg bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
+              {{ t(`integration.workflows.state.role.${row.role}.label`) }}
+            </span>
+            <div class="flex-1" />
+            <button
+              type="button"
+              class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
+              :title="t('integration.workflows.state.action.remove')"
+              @click="removeNamespace(index)"
+            >
+              <TrashBin :size="13" />
+            </button>
+          </div>
+
+          <p class="mt-1 text-xs text-muted-foreground">
+            {{ t(`integration.workflows.state.role.${row.role}.hint`) }}
+            {{ t("integration.workflows.state.role.fixed") }}
+          </p>
+
+          <div class="mt-2 grid gap-2 sm:grid-cols-[10rem_1fr]">
+            <div class="space-y-1">
+              <Label :for="`state-${row.namespace}-visibility`" class="text-mono text-muted-foreground">
+                {{ t("integration.workflows.state.field.visibility.label") }}
+              </Label>
+              <Select
+                :model-value="row.visibility ?? 'private'"
+                @update:model-value="(v) => setVisibility(index, String(v))"
+              >
+                <SelectTrigger
+                  :id="`state-${row.namespace}-visibility`"
+                  :aria-label="t('integration.workflows.state.field.visibility.label')"
+                  class="h-8 bg-white text-sm"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="private">
+                    {{ t("integration.workflows.state.visibility.private.label") }}
+                  </SelectItem>
+                  <SelectItem value="shared">
+                    {{ t("integration.workflows.state.visibility.shared.label") }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <!-- What the choice costs, beside the choice — a shared namespace is
+                 written by every workflow in the tenant and outlives this one
+                 (specs AC-4). -->
+            <p class="self-end pb-1 text-xs text-muted-foreground">
+              {{ t(`integration.workflows.state.visibility.${row.visibility ?? "private"}.hint`) }}
+            </p>
+          </div>
+
+          <p class="mt-2 text-xs text-muted-foreground">
+            {{ t("integration.workflows.state.action.remove.hint") }}
+          </p>
+        </div>
+
+        <div class="rounded-lg border border-black/[0.06] bg-muted/30 p-3">
+          <Label for="state-new-name" class="text-mono text-muted-foreground">
+            {{ t("integration.workflows.state.field.newName.label") }}
+          </Label>
+          <div class="mt-1 grid gap-2 sm:grid-cols-[1fr_10rem_10rem_auto]">
+            <Input
+              id="state-new-name"
+              v-model="newName"
+              class="h-8 bg-white font-mono text-sm"
+              :placeholder="t('integration.workflows.state.field.newName.placeholder')"
+              @keydown.enter.prevent="addNamespace"
+            />
+            <!-- The role IS chosen here, and only here — the positive half of
+                 AC-3, without which "no role control on a row" proves nothing. -->
+            <Select v-model="newRole">
+              <SelectTrigger
+                id="state-new-role"
+                :aria-label="t('integration.workflows.state.field.newRole.label')"
+                class="h-8 bg-white text-sm"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="role in ROLES" :key="role" :value="role">
+                  {{ t(`integration.workflows.state.role.${role}.label`) }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Select v-model="newVisibility">
+              <SelectTrigger
+                id="state-new-visibility"
+                :aria-label="t('integration.workflows.state.field.newVisibility.label')"
+                class="h-8 bg-white text-sm"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="private">
+                  {{ t("integration.workflows.state.visibility.private.label") }}
+                </SelectItem>
+                <SelectItem value="shared">
+                  {{ t("integration.workflows.state.visibility.shared.label") }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Button size="sm" class="h-8" :disabled="!newName.trim() || !!newNameError" @click="addNamespace">
+              <Plus :size="14" class="mr-1" />
+              {{ t("integration.workflows.state.action.add") }}
+            </Button>
+          </div>
+          <p v-if="newNameError" class="mt-1 text-xs text-rose-600">{{ newNameError }}</p>
+          <p class="mt-1 text-xs text-muted-foreground">{{ t(`integration.workflows.state.role.${newRole}.hint`) }}</p>
+        </div>
+      </div>
+
+      <DialogFooter>
+        <Button variant="outline" size="sm" class="h-8" @click="emit('update:open', false)">
+          {{ t("integration.common.action.cancel") }}
+        </Button>
+        <Button size="sm" class="h-8" @click="applyAndClose">
+          {{ t("integration.workflows.state.action.done") }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,13 @@
+import type { WorkflowStateNamespace } from '../../types/integrations.js';
+type __VLS_Props = {
+    open: boolean;
+    state: WorkflowStateNamespace[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    "update:state": (next: WorkflowStateNamespace[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    "onUpdate:state"?: ((next: WorkflowStateNamespace[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -14,7 +14,9 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-  DropdownMenuTrigger
+  DropdownMenuTrigger,
+  Label,
+  Switch
 } from "@revenexx/studio";
 defineProps({
   workflows: { type: Array, required: true },
@@ -247,16 +249,25 @@ const columns = computed(() => [
     @row-click="(wf2) => router.push(`/integrations/workflows/${wf2.id}`)"
   >
     <template #toolbar-left>
-      <Button
-        variant="outline"
-        size="sm"
-        class="h-7 gap-1.5 text-sm"
-        :class="groupByTags ? 'border-primary/30 text-primary' : ''"
-        @click="groupByTags = !groupByTags"
-      >
-        <Layers :size="13" />
-        {{ t("integration.workflows.table.action.groupByTags") }}
-      </Button>
+      <!-- A switch rather than a button: the control is a state, not an action.
+           A button labelled "Group by tags" ungroups once grouping is on, and
+           said so neither to a reader nor to a screen reader — the state lived
+           in a colour class alone. The Label is what names the switch. -->
+      <div class="flex h-7 items-center gap-2">
+        <Switch
+          id="wf-group-by-tags"
+          :model-value="groupByTags"
+          @update:model-value="(on) => groupByTags = on"
+        />
+        <Label
+          for="wf-group-by-tags"
+          class="flex cursor-pointer items-center gap-1.5 text-sm font-normal"
+          :class="groupByTags ? 'text-primary' : 'text-muted-foreground'"
+        >
+          <Layers :size="13" />
+          {{ t("integration.workflows.table.action.groupByTags") }}
+        </Label>
+      </div>
     </template>
 
     <!-- Name (icon + title + description) -->

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

@@ -32,6 +32,40 @@ export type ShortcutHandler = ((event: KeyboardEvent) => void) | {
     run: (event: KeyboardEvent) => void;
 };
 export type ShortcutMap = Record<string, ShortcutHandler>;
+/**
+ * A map key in its comparable form.
+ *
+ * Exported for the unit suite: the whole layout question below is decided here
+ * and in {@link shortcutCandidates}, and both are cheaper to prove against
+ * hand-built events than against a browser per keyboard layout.
+ */
+export declare function normalizeShortcut(shortcut: string): string;
+/** Everything a match reads from a keydown — so the rule needs no DOM to prove. */
+export interface ShortcutKeyEvent {
+    key: string;
+    code?: string;
+    shiftKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+}
+/**
+ * The two forms a keydown is looked up under.
+ *
+ * `byKey` is what the layout PRODUCED and `byCode` is which key was pressed. Both
+ * are needed and neither is enough: a Dvorak or AZERTY layout moves the letters,
+ * so a letter binding is only found by key — while a character a layout reaches
+ * through a modifier, or a dead key that produces no useful character at all
+ * (⌥⇧T is `ˇ`), is only found by code.
+ *
+ * Shift is dropped from `byKey` alone, where it is part of the character. `byCode`
+ * stays strict: there the physical key says nothing about what was produced, so
+ * Shift is the only thing separating `shift+s` from `s`.
+ */
+export declare function shortcutCandidates(event: ShortcutKeyEvent, isMac?: boolean): {
+    byKey: string;
+    byCode: string;
+};
 export declare function useCanvasShortcuts(keymap: MaybeRefOrGetter<ShortcutMap>, options?: {
     disabled?: MaybeRefOrGetter<boolean>;
 }): void;

package/dist/runtime/composables/useCanvasShortcuts.js

@@ -1,26 +1,29 @@
 import { computed, onBeforeUnmount, onMounted, toValue } from "vue";
-const IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "");
+import { IS_MAC, shortcutTokens } from "../utils/shortcutLabel.js";
 function canonical(parts) {
   return parts.map((p) => p.toLowerCase()).sort((a, b) => a.localeCompare(b)).join("+");
 }
-function normalizeShortcut(shortcut) {
-  if (shortcut.length === 1) return shortcut.toLowerCase();
-  return canonical(shortcut.split("+"));
+export function normalizeShortcut(shortcut) {
+  return canonical(shortcutTokens(shortcut));
 }
 function codeToKey(code) {
   if (code.startsWith("Key")) return code.slice(3).toLowerCase();
   if (code.startsWith("Digit")) return code.slice(5);
   return code.toLowerCase();
 }
-function eventShortcuts(event) {
+function shiftMadeTheCharacter(loweredKey) {
+  return loweredKey.length === 1 && !/^[\p{L}\p{N}]$/u.test(loweredKey);
+}
+export function shortcutCandidates(event, isMac = IS_MAC) {
   const mods = [];
   if (event.shiftKey) mods.push("shift");
   if (event.altKey) mods.push("alt");
-  if (IS_MAC ? event.metaKey : event.ctrlKey) mods.push("mod");
+  if ((isMac ? event.metaKey : event.ctrlKey) ?? false) mods.push("mod");
   const key = event.key === " " ? "space" : event.key.toLowerCase();
   const code = codeToKey(event.code ?? "");
+  const keyMods = shiftMadeTheCharacter(key) ? mods.filter((m) => m !== "shift") : mods;
   return {
-    byKey: canonical([...mods, key]),
+    byKey: canonical([...keyMods, key]),
     byCode: canonical([...mods, code])
   };
 }
@@ -48,7 +51,7 @@ export function useCanvasShortcuts(keymap, options) {
     if (toValue(options?.disabled)) return;
     if (event.defaultPrevented) return;
     if (isEditingContext(event)) return;
-    const { byKey, byCode } = eventShortcuts(event);
+    const { byKey, byCode } = shortcutCandidates(event);
     const handler = normalized.value[byKey] ?? normalized.value[byCode];
     if (!handler) return;
     const run = typeof handler === "function" ? handler : handler.disabled() ? void 0 : handler.run;

package/dist/runtime/composables/useCredentialTypes.js

@@ -1,6 +1,7 @@
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { useIntegrationsT } from "./useIntegrationsT.js";
 import { errorReason } from "../utils/apiError.js";
+import { unwrapList, unwrapRecord } from "../utils/apiEnvelope.js";
 import { useLoadGate } from "./useLoadGate.js";
 export function useCredentialTypes() {
   const types = useState("integrations.credentialTypes", () => []);
@@ -10,17 +11,11 @@ export function useCredentialTypes() {
   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;
-    if (Array.isArray(obj?.data)) return obj.data;
-    return [];
-  }
   async function load(force = false) {
     if (!await gate.claim(force)) return types.value;
     error.value = null;
     try {
-      types.value = normalize(await api.get("/credential-types"));
+      types.value = unwrapList(await api.get("/credential-types"));
       loaded.value = true;
     } catch (e) {
       error.value = errorReason(e, t("integration.credentials.error.loadTypes"));
@@ -36,8 +31,7 @@ export function useCredentialTypes() {
     const cached = bySlug(slug);
     if (cached) return cached;
     try {
-      const res = await api.get(`/credential-types/${encodeURIComponent(slug)}`);
-      return res?.data ?? res ?? null;
+      return unwrapRecord(await api.get(`/credential-types/${encodeURIComponent(slug)}`));
     } catch {
       return null;
     }

package/dist/runtime/composables/useIntegrationsCredentials.js

@@ -2,6 +2,7 @@ import { computed } from "vue";
 import { useIntegrationsApi } from "./integrationsApi.js";
 import { useIntegrationsT } from "./useIntegrationsT.js";
 import { IntegrationsApiError, errorReason } from "../utils/apiError.js";
+import { unwrapList, unwrapRecord } from "../utils/apiEnvelope.js";
 import { useLoadGate } from "./useLoadGate.js";
 export function useIntegrationsCredentials() {
   const credentials = useState("integrations.credentials", () => []);
@@ -11,20 +12,11 @@ export function useIntegrationsCredentials() {
   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;
-    if (Array.isArray(obj?.data)) return obj.data;
-    return [];
-  }
-  function unwrap(res) {
-    return res?.data ?? res;
-  }
   async function load(force = false) {
     if (!await gate.claim(force)) return credentials.value;
     error.value = null;
     try {
-      credentials.value = normalize(await api.get("/credentials"));
+      credentials.value = unwrapList(await api.get("/credentials"));
       loaded.value = true;
     } catch (e) {
       error.value = errorReason(e, t("integration.credentials.error.loadFailed"));
@@ -37,15 +29,15 @@ export function useIntegrationsCredentials() {
     return credentials.value.filter((c) => c.credential_type_slug === slug);
   }
   async function get(id) {
-    return unwrap(await api.get(`/credentials/${encodeURIComponent(id)}`));
+    return unwrapRecord(await api.get(`/credentials/${encodeURIComponent(id)}`));
   }
   async function create(input) {
-    const created = unwrap(await api.post("/credentials", input));
+    const created = unwrapRecord(await api.post("/credentials", input));
     await load(true);
     return created;
   }
   async function update(id, input) {
-    const updated = unwrap(await api.patch(`/credentials/${encodeURIComponent(id)}`, input));
+    const updated = unwrapRecord(await api.patch(`/credentials/${encodeURIComponent(id)}`, input));
     await load(true);
     return updated;
   }
@@ -71,7 +63,7 @@ export function useIntegrationsCredentials() {
   }
   async function oauthAuthorizeUrl(id) {
     const res = await api.post(`/credentials/${encodeURIComponent(id)}/oauth/authorize-url`);
-    const authorizeUrl = res?.authorize_url ?? res?.data?.authorize_url;
+    const authorizeUrl = unwrapRecord(res).authorize_url;
     if (!authorizeUrl) throw new IntegrationsApiError(0, res, t("integration.credentials.error.noAuthorizeUrl"));
     return authorizeUrl;
   }