@revenexx/studio-integrations 0.5.1 → 0.6.0

package/dist/runtime/pages/integrations/audit.vue

@@ -64,6 +64,53 @@ function copy(t) {
     toast.success("Copied");
   }
 }
+const panelEl = ref(null);
+let opener = null;
+function tabStops() {
+  const root = panelEl.value;
+  if (!root) return [];
+  const sel = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+  return [...root.querySelectorAll(sel)].filter((el) => el.offsetParent !== null);
+}
+function onKeydown(e) {
+  if (e.key === "Escape") {
+    selected.value = null;
+    return;
+  }
+  if (e.key !== "Tab") return;
+  const root = panelEl.value;
+  if (!root) return;
+  const stops = tabStops();
+  if (!stops.length) {
+    e.preventDefault();
+    root.focus();
+    return;
+  }
+  const first = stops[0];
+  const last = stops[stops.length - 1];
+  const active = document.activeElement;
+  const inside = active instanceof Node && root.contains(active);
+  if (e.shiftKey && (!inside || active === first || active === root)) {
+    e.preventDefault();
+    last.focus();
+  } else if (!e.shiftKey && (!inside || active === last)) {
+    e.preventDefault();
+    first.focus();
+  }
+}
+watch(selected, async (entry, previous) => {
+  if (entry) {
+    document.addEventListener("keydown", onKeydown);
+    if (!previous) opener = document.activeElement;
+    await nextTick();
+    panelEl.value?.focus();
+  } else {
+    document.removeEventListener("keydown", onKeydown);
+    if (opener?.isConnected) opener.focus();
+    opener = null;
+  }
+});
+onUnmounted(() => document.removeEventListener("keydown", onKeydown));
 </script>
 
 <template>
@@ -73,11 +120,18 @@ function copy(t) {
     <div class="p-4 space-y-3">
       <p v-if="error" class="text-sm text-rose-700">{{ error }}</p>
 
+      <!-- `:pagination="false"` — one pagination, not two. The feed is loaded a
+           page at a time by "Load more" below; the table's own pager (on by
+           default, twenty rows) would then hold the entries just fetched behind a
+           control nobody asked for, so the operator presses "Load more" and sees
+           nothing change. `templates/[slug].vue` and `workflows/[id].vue` switch
+           it off for the same reason. -->
       <DataTable
         :data="entries"
         :columns="columns"
         :row-key="(e) => e.id"
         :default-sort="{ column: 'when', direction: 'desc' }"
+        :pagination="false"
         :search="{ placeholder: 'Search action, resource, actor\u2026' }"
         :filter-tabs="filterTabs"
         :loading="loading"
@@ -111,13 +165,44 @@ function copy(t) {
 
     <!-- Detail flyout -->
     <Transition name="drawer">
-      <div v-if="selected" class="fixed inset-0 z-50 flex" @keydown.esc="selected = null">
-        <div class="flex-1 bg-black/20 backdrop-blur-[1px]" @click="selected = null" />
-        <aside class="w-full max-w-md overflow-y-auto border-l border-black/[0.06] bg-white shadow-xl">
+      <div v-if="selected" class="fixed inset-0 z-50 flex">
+        <!-- Clicking away dismisses the panel, and that is a pointer gesture by
+             design: the two routes that do not need a pointer — Escape and
+             `Close entry details` — are both inside the panel, where the Tab trap
+             keeps the focus. So this element is deliberately out of reach.
+             `tabindex="-1"` says so at the element rather than leaving it to the
+             trap, and `aria-modal` on the panel beside it already keeps the whole
+             overlay out of what a screen reader is offered. It stays a button and
+             keeps its name so that the day the trap changes, the fallback is a
+             named control rather than a clickable div. -->
+        <button
+          type="button"
+          tabindex="-1"
+          aria-label="Dismiss entry details"
+          class="flex-1 bg-black/20 backdrop-blur-[1px]"
+          @click="selected = null"
+        />
+        <!-- A dialog rather than a complementary landmark (PO-245). It covers the
+             page, holds the focus and closes on Escape, which is what a dialog is;
+             announcing it as supporting content beside the page while trapping the
+             focus inside it would be two answers to one question. `aria-modal` is
+             what tells a screen reader not to wander into what the overlay hides.
+             `tabindex="-1"` is what makes the container focusable at all, so
+             opening the panel can put the operator in it — see `onKeydown` above.
+             Still named: the shell has an <aside> for the sidebar, and this panel
+             needs to be tellable from it and addressable by a test. -->
+        <div
+          ref="panelEl"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Audit entry details"
+          tabindex="-1"
+          class="drawer-panel w-full max-w-md overflow-y-auto border-l border-black/[0.06] bg-white shadow-xl outline-none"
+        >
           <div class="sticky top-0 z-10 flex items-center gap-2 border-b border-black/[0.06] bg-white/90 backdrop-blur px-4 py-3">
             <Badge variant="outline" :class="['border text-xs font-medium uppercase', actionTone(selected.action)]">{{ prettyAction(selected.action) }}</Badge>
             <span class="text-sm font-semibold text-[#0B0522] capitalize">{{ prettyType(selected.resource_type) }}</span>
-            <Button variant="ghost" size="sm" class="ml-auto h-7 w-7 p-0" @click="selected = null"><Close :size="15" /></Button>
+            <Button variant="ghost" size="sm" aria-label="Close entry details" class="ml-auto h-7 w-7 p-0" @click="selected = null"><Close :size="15" /></Button>
           </div>
           <div class="p-4 space-y-4 text-sm">
             <div class="space-y-1.5">
@@ -135,12 +220,12 @@ function copy(t) {
               <pre class="overflow-x-auto rounded-md bg-[#0B0522] p-3 text-xs leading-relaxed text-[#E6E1F5]"><code>{{ JSON.stringify(selected.metadata, null, 2) }}</code></pre>
             </div>
           </div>
-        </aside>
+        </div>
       </div>
     </Transition>
   </IntegrationsLayout>
 </template>
 
 <style scoped>
-.drawer-enter-active,.drawer-leave-active{transition:opacity .2s ease}.drawer-enter-active aside,.drawer-leave-active aside{transition:transform .25s cubic-bezier(.22,1,.36,1)}.drawer-enter-from,.drawer-leave-to{opacity:0}.drawer-enter-from aside,.drawer-leave-to aside{transform:translateX(100%)}
+.drawer-enter-active,.drawer-leave-active{transition:opacity .2s ease}.drawer-enter-active .drawer-panel,.drawer-leave-active .drawer-panel{transition:transform .25s cubic-bezier(.22,1,.36,1)}.drawer-enter-from,.drawer-leave-to{opacity:0}.drawer-enter-from .drawer-panel,.drawer-leave-to .drawer-panel{transform:translateX(100%)}
 </style>

package/dist/runtime/pages/integrations/credentials/oauth-complete.vue

@@ -15,14 +15,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex min-h-screen items-center justify-center bg-white text-center">
+  <!-- Own landmark and heading: this popup renders without the studio shell
+       (`layout: false`), so it would otherwise be the one page with neither. -->
+  <main class="flex min-h-screen items-center justify-center bg-white text-center">
     <div class="space-y-2">
-      <p class="text-sm font-medium text-foreground">
+      <h1 class="text-sm font-medium text-foreground">
         Connection complete
-      </p>
+      </h1>
       <p class="text-sm text-muted-foreground">
         {{ closing ? "You can close this window." : "Done \u2014 closing\u2026" }}
       </p>
     </div>
-  </div>
+  </main>
 </template>

package/dist/runtime/pages/integrations/credentials.vue

@@ -7,6 +7,12 @@ import {
   TestTube as TestIcon
 } from "#solar-icons";
 import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
   Badge,
   Button,
   Dialog,
@@ -24,8 +30,11 @@ import {
   SelectTrigger,
   SelectValue
 } from "@revenexx/studio";
-import { toast } from "vue-sonner";
+import { toast } from "../../utils/notify";
+import { apiFieldErrors, refusalReason } from "../../utils/apiError";
 import { credentialState } from "../../utils/credentialState";
+import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
+import { resolveLocalized } from "../../utils/localize";
 useHead({ title: "Credentials \xB7 Revenexx Cockpit" });
 const { credentials, loading, error, load, create, update, remove, testInline, test, oauthAuthorizeUrl } = useIntegrationsCredentials();
 const { types, load: loadTypes, bySlug } = useCredentialTypes();
@@ -35,14 +44,8 @@ onMounted(async () => {
 function typeFor(slug) {
   return bySlug(slug);
 }
-function loc(v) {
-  if (!v) return "";
-  if (typeof v === "string") return v;
-  const o = v;
-  return o.en ?? o.de ?? Object.values(o)[0] ?? "";
-}
 function typeName(slug) {
-  return loc(typeFor(slug)?.name) || slug;
+  return resolveLocalized(typeFor(slug)?.name) || slug;
 }
 function isOAuthAuthcode(t) {
   return t?.auth_kind === "oauth2-authcode";
@@ -71,17 +74,27 @@ const form = reactive({ name: "", config: {} });
 const saving = ref(false);
 const testing = ref(false);
 const testResult = ref(null);
+const saveError = ref(null);
+const fieldErrors = ref({});
 const sourceActive = ref(false);
 const isEdit = computed(() => editing.value !== null);
 function fieldsOf(t) {
   return t?.fields ?? [];
 }
+function configFieldAria(key) {
+  return fieldErrors.value[`config.${key}`] ? { "aria-invalid": "true", "aria-describedby": `cred-field-${key}-error` } : {};
+}
+function clearRefusal() {
+  saveError.value = null;
+  fieldErrors.value = {};
+}
 function openCreate(t) {
   editing.value = null;
   pickedType.value = t ?? null;
   form.name = "";
   form.config = {};
   testResult.value = null;
+  clearRefusal();
   sourceActive.value = false;
   dialogOpen.value = true;
 }
@@ -116,6 +129,7 @@ async function runTest() {
   if (!pickedType.value) return;
   testing.value = true;
   testResult.value = null;
+  clearRefusal();
   try {
     testResult.value = isEdit.value && editing.value ? await test(editing.value.id) : await testInline(pickedType.value.slug, buildConfigPayload());
   } finally {
@@ -125,9 +139,11 @@ async function runTest() {
 async function submit() {
   if (!pickedType.value || !form.name.trim()) return;
   saving.value = true;
+  clearRefusal();
   try {
     if (isEdit.value && editing.value) {
       await update(editing.value.id, { name: form.name.trim(), config: buildConfigPayload() });
+      dialogOpen.value = false;
       toast.success("Credential updated");
     } else {
       const created = await create({
@@ -135,14 +151,16 @@ async function submit() {
         name: form.name.trim(),
         config: buildConfigPayload()
       });
+      dialogOpen.value = false;
       toast.success("Credential created");
       if (isOAuthAuthcode(pickedType.value)) {
         await connect(created);
       }
     }
-    dialogOpen.value = false;
   } catch (e) {
-    toast.error(e?.message ?? "Could not save credential.");
+    fieldErrors.value = apiFieldErrors(e);
+    saveError.value = refusalReason(e, "Could not save credential.");
+    toast.error(saveError.value);
   } finally {
     saving.value = false;
   }
@@ -174,13 +192,20 @@ async function connect(c) {
     connecting.value = null;
   }
 }
-async function destroy(c) {
-  if (!confirm(`Delete credential "${c.name}"? Workflows referencing it will fail until re-bound.`)) return;
+const pendingDelete = ref(null);
+const deleting = ref(false);
+async function confirmDelete() {
+  const c = pendingDelete.value;
+  if (!c) return;
+  deleting.value = true;
   try {
     await remove(c.id);
     toast.success("Credential deleted");
+    pendingDelete.value = null;
   } catch (e) {
     toast.error(e?.message ?? "Could not delete credential.");
+  } finally {
+    deleting.value = false;
   }
 }
 </script>
@@ -227,11 +252,15 @@ async function destroy(c) {
         </template>
 
         <template #cell-status="{ row: c }">
+          <!-- The name is part of the accessible label: on its own, "Connected"
+               says nothing about *which* credential is, and collides with the
+               column header of the same name. -->
           <Badge
             variant="outline"
             class="border text-xs font-medium uppercase"
             :class="credentialState(c).toneClass"
             :title="credentialState(c).message ?? void 0"
+            :aria-label="`${c.name}: ${credentialState(c).label}`"
           >
             {{ credentialState(c).label }}
           </Badge>
@@ -259,11 +288,12 @@ async function destroy(c) {
               size="sm"
               class="h-7 text-amber-600"
               :disabled="connecting === c.id"
+              :aria-label="`Reconnect ${c.name}`"
               @click="connect(c)"
             >
               Reconnect
             </Button>
-            <button type="button" class="flex size-7 items-center justify-center rounded text-foreground/40 hover:text-rose-600 hover:bg-rose-500/10" title="Delete" @click="destroy(c)">
+            <button type="button" class="flex size-7 items-center justify-center rounded text-foreground/40 hover:text-rose-600 hover:bg-rose-500/10" :title="`Delete ${c.name}`" :aria-label="`Delete ${c.name}`" @click="pendingDelete = c">
               <Trash2 :size="13" />
             </button>
           </div>
@@ -287,7 +317,8 @@ async function destroy(c) {
           :types="types"
           @pick="(t) => {
   pickedType = t;
-  form.name = loc(t.name);
+  form.name = resolveLocalized(t.name);
+  clearRefusal();
 }"
         />
 
@@ -295,40 +326,60 @@ async function destroy(c) {
         <div v-else class="space-y-3 py-1 max-h-[28rem] overflow-y-auto pr-1">
           <div class="space-y-1.5">
             <Label for="cred-name">Name</Label>
-            <Input id="cred-name" v-model="form.name" class="bg-white" placeholder="e.g. Production SMTP" />
+            <Input
+              id="cred-name"
+              v-model="form.name"
+              class="bg-white"
+              placeholder="e.g. Production SMTP"
+              :aria-invalid="fieldErrors.name ? 'true' : void 0"
+              :aria-describedby="fieldErrors.name ? 'cred-name-error' : void 0"
+            />
+            <p v-if="fieldErrors.name" id="cred-name-error" class="text-sm text-rose-700">
+              {{ fieldErrors.name }}
+            </p>
           </div>
 
-          <!-- "Use revenexx …" source picker (SFTP / Mail / API key) -->
+          <!-- "Use revenexx …" source picker (SFTP / Mail / API key) — mounted
+               only for the types it serves: it resolves cockpit-only sources at
+               setup, so mounting it elsewhere would take this form down. -->
           <IntegrationsCredentialRevenexxSource
+            v-if="hasRevenexxSource(pickedType?.slug)"
             :type="pickedType"
             @update:active="(v) => sourceActive = v"
             @apply="(c2) => Object.assign(form.config, c2)"
           />
 
+          <!-- Each label names its own control (`for`/`id`): without it a screen
+               reader reads the field as unlabelled, and the label text cannot be
+               used to reach it at all. -->
           <div v-for="f in fieldsOf(pickedType)" v-show="!sourceActive" :key="f.key" class="space-y-1.5">
-            <Label>{{ loc(f.label) }}{{ f.required ? " *" : "" }}</Label>
+            <Label :for="`cred-field-${f.key}`">{{ resolveLocalized(f.label) }}{{ f.required ? " *" : "" }}</Label>
 
             <!-- secret -->
             <Input
               v-if="f.type === 'secret'"
+              :id="`cred-field-${f.key}`"
               :model-value="form.config[f.key] ?? ''"
               type="password"
               autocomplete="new-password"
               :placeholder="isEdit ? 'Leave blank to keep current' : ''"
               class="bg-white"
+              v-bind="configFieldAria(f.key)"
               @update:model-value="(v) => form.config[f.key] = v"
             />
             <!-- number -->
             <Input
               v-else-if="f.type === 'number'"
+              :id="`cred-field-${f.key}`"
               type="number"
               :model-value="form.config[f.key] ?? ''"
               class="bg-white"
+              v-bind="configFieldAria(f.key)"
               @update:model-value="(v) => form.config[f.key] = v === '' ? void 0 : Number(v)"
             />
             <!-- boolean -->
             <div v-else-if="f.type === 'boolean'" class="flex items-center gap-2 pt-1">
-              <Switch :model-value="Boolean(form.config[f.key])" @update:model-value="(v) => form.config[f.key] = v" />
+              <Switch :id="`cred-field-${f.key}`" :model-value="Boolean(form.config[f.key])" v-bind="configFieldAria(f.key)" @update:model-value="(v) => form.config[f.key] = v" />
             </div>
             <!-- select -->
             <Select
@@ -336,22 +387,32 @@ async function destroy(c) {
               :model-value="form.config[f.key] ?? ''"
               @update:model-value="(v) => form.config[f.key] = v"
             >
-              <SelectTrigger class="bg-white">
+              <SelectTrigger :id="`cred-field-${f.key}`" class="bg-white" v-bind="configFieldAria(f.key)">
                 <SelectValue placeholder="Pick one" />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
-                  {{ loc(opt.label) }}
+                  {{ resolveLocalized(opt.label) }}
                 </SelectItem>
               </SelectContent>
             </Select>
             <!-- string (default) -->
             <Input
               v-else
+              :id="`cred-field-${f.key}`"
               :model-value="form.config[f.key] ?? ''"
               class="bg-white"
+              v-bind="configFieldAria(f.key)"
               @update:model-value="(v) => form.config[f.key] = v"
             />
+
+            <!-- The service keys a config refusal as `config.<key>`, which is this
+                 field. Same rule as the name above: the message belongs where the
+                 input is, not only in the summary, and the id is what the control's
+                 `aria-describedby` points at. -->
+            <p v-if="fieldErrors[`config.${f.key}`]" :id="`cred-field-${f.key}-error`" class="text-sm text-rose-700">
+              {{ fieldErrors[`config.${f.key}`] }}
+            </p>
           </div>
 
           <p v-if="isOAuthAuthcode(pickedType) && !isEdit" class="text-sm text-muted-foreground">
@@ -365,10 +426,22 @@ async function destroy(c) {
           >
             {{ testResult.ok ? "Connection ok." : testResult.error ?? "Connection failed." }}
           </div>
+
+        </div>
+
+        <!-- The save was refused. Outside the scrolling form on purpose: the Save
+             button sits in the footer below, so a summary at the end of a form that
+             scrolls — five fields already do — would be a refusal rendered under the
+             fold, which is the defect this whole change is about. Stated here as well
+             as at the field it belongs to, so a refusal with no field — a conflict, a
+             gateway error — is not silent either. -->
+        <div v-if="saveError && pickedType" role="alert" class="rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
+          {{ saveError }}
         </div>
 
         <DialogFooter v-if="pickedType" class="sm:justify-between">
-          <Button v-if="!isEdit" variant="ghost" size="sm" :disabled="saving || testing" @click="pickedType = null">
+          <Button v-if="!isEdit" variant="ghost" size="sm" :disabled="saving || testing" @click="pickedType = null;
+  clearRefusal()">
             Back
           </Button>
           <span v-else />
@@ -387,6 +460,31 @@ async function destroy(c) {
       </DialogContent>
     </Dialog>
 
+    <AlertDialog :open="!!pendingDelete" @update:open="(v) => {
+  if (!v) pendingDelete = null;
+}">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete credential?</AlertDialogTitle>
+          <AlertDialogDescription>
+            <span v-if="pendingDelete">
+              <span class="font-medium text-foreground">{{ pendingDelete.name }}</span>
+              will be removed. Workflows that reference it will fail until they are re-bound to another credential.
+            </span>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <Button variant="outline" :disabled="deleting" @click="pendingDelete = null">
+            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" }}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+
     <!-- Detail / edit view (single-page: connection state + fields + metadata) -->
     <IntegrationsCredentialDetailDialog
       v-model:open="detailOpen"