@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -3,10 +3,16 @@ import { computed, onMounted, reactive, ref } from "vue";
 import {
   RefreshCircle as Loader2,
   AddCircle as Plus,
-  TrashBinTrash as Trash2,
+  TrashBinMinimalistic as TrashBin,
   TestTube as TestIcon
 } from "#solar-icons";
 import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
   Badge,
   Button,
   Dialog,
@@ -24,9 +30,13 @@ import {
   SelectTrigger,
   SelectValue
 } from "@revenexx/studio";
-import { toast } from "vue-sonner";
-import { credentialState } from "../../utils/credentialState";
-useHead({ title: "Credentials \xB7 Revenexx Cockpit" });
+import { toast } from "../../utils/notify";
+import { apiFieldErrors, refusalReason } from "../../utils/apiError";
+import { CREDENTIAL_STATES, credentialState, credentialStateLabel } from "../../utils/credentialState";
+import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
+import { resolveLocalized } from "../../utils/localize";
+const t = useIntegrationsT();
+useHead({ title: () => t("integration.credentials.list.head.title") });
 const { credentials, loading, error, load, create, update, remove, testInline, test, oauthAuthorizeUrl } = useIntegrationsCredentials();
 const { types, load: loadTypes, bySlug } = useCredentialTypes();
 onMounted(async () => {
@@ -35,17 +45,11 @@ 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";
+function isOAuthAuthcode(t2) {
+  return t2?.auth_kind === "oauth2-authcode";
 }
 function formatDateTime(iso) {
   if (!iso) return "\u2014";
@@ -55,15 +59,32 @@ function formatDateTime(iso) {
     return iso;
   }
 }
-const columns = [
-  { key: "system", label: "System", width: "minmax(160px,220px)", sortable: true, sortGetter: (c) => typeName(c.credential_type_slug).toLowerCase(), searchGetter: (c) => `${typeName(c.credential_type_slug)} ${c.credential_type_slug}` },
-  { key: "name", label: "Name", sortable: true, sortGetter: (c) => c.name.toLowerCase(), searchGetter: (c) => c.name },
-  { key: "status", label: "Status", width: "150px", sortable: true, sortGetter: (c) => credentialState(c).key },
-  { key: "connected", label: "Connected", width: "150px", sortable: true, sortGetter: (c) => c.last_test_ok ? c.last_test_at ?? "" : "" },
-  { key: "created", label: "Created", width: "150px", sortable: true, sortGetter: (c) => c.created_at ?? "" },
-  { key: "updated", label: "Updated", width: "150px", sortable: true, sortGetter: (c) => c.updated_at ?? "" },
+const filterTabs = computed(() => {
+  const systems = [...new Set(credentials.value.map((c) => c.credential_type_slug))].map((slug) => ({ value: slug, label: typeName(slug) })).sort((a, b) => a.label.localeCompare(b.label));
+  return [
+    {
+      key: "state",
+      label: t("integration.credentials.list.table.column.status"),
+      getter: (c) => credentialState(c).key,
+      options: CREDENTIAL_STATES.map((key) => ({ value: key, label: credentialStateLabel(key) }))
+    },
+    {
+      key: "system",
+      label: t("integration.credentials.list.table.column.system"),
+      getter: (c) => c.credential_type_slug,
+      options: systems
+    }
+  ];
+});
+const columns = computed(() => [
+  { key: "system", label: t("integration.credentials.list.table.column.system"), width: "minmax(160px,220px)", sortable: true, sortGetter: (c) => typeName(c.credential_type_slug).toLowerCase(), searchGetter: (c) => `${typeName(c.credential_type_slug)} ${c.credential_type_slug}` },
+  { key: "name", label: t("integration.credentials.list.table.column.name"), sortable: true, sortGetter: (c) => c.name.toLowerCase(), searchGetter: (c) => c.name },
+  { key: "status", label: t("integration.credentials.list.table.column.status"), width: "150px", sortable: true, sortGetter: (c) => credentialState(c).key },
+  { key: "connected", label: t("integration.credentials.list.table.column.connected"), width: "150px", sortable: true, sortGetter: (c) => c.last_test_ok ? c.last_test_at ?? "" : "" },
+  { key: "created", label: t("integration.credentials.list.table.column.created"), width: "150px", sortable: true, sortGetter: (c) => c.created_at ?? "" },
+  { key: "updated", label: t("integration.credentials.list.table.column.updated"), width: "150px", sortable: true, sortGetter: (c) => c.updated_at ?? "" },
   { key: "actions", label: "", width: "80px" }
-];
+]);
 const dialogOpen = ref(false);
 const editing = ref(null);
 const pickedType = ref(null);
@@ -71,17 +92,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 fieldsOf(t2) {
+  return t2?.fields ?? [];
+}
+function configFieldAria(key) {
+  return fieldErrors.value[`config.${key}`] ? { "aria-invalid": "true", "aria-describedby": `cred-field-${key}-error` } : {};
 }
-function openCreate(t) {
+function clearRefusal() {
+  saveError.value = null;
+  fieldErrors.value = {};
+}
+function openCreate(t2) {
   editing.value = null;
-  pickedType.value = t ?? null;
+  pickedType.value = t2 ?? null;
   form.name = "";
   form.config = {};
   testResult.value = null;
+  clearRefusal();
   sourceActive.value = false;
   dialogOpen.value = true;
 }
@@ -116,6 +147,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,24 +157,28 @@ 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() });
-      toast.success("Credential updated");
+      dialogOpen.value = false;
+      toast.success(t("integration.credentials.toast.updated"));
     } else {
       const created = await create({
         credential_type_slug: pickedType.value.slug,
         name: form.name.trim(),
         config: buildConfigPayload()
       });
-      toast.success("Credential created");
+      dialogOpen.value = false;
+      toast.success(t("integration.credentials.toast.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, t("integration.credentials.error.save"));
+    toast.error(saveError.value);
   } finally {
     saving.value = false;
   }
@@ -157,7 +193,7 @@ async function connect(c) {
       if (ev.data?.type === "integrations-oauth-complete") {
         window.removeEventListener("message", onMessage);
         await load(true);
-        toast.success("Connected");
+        toast.success(t("integration.credentials.toast.connected"));
       }
     };
     window.addEventListener("message", onMessage);
@@ -169,18 +205,25 @@ async function connect(c) {
       }
     }, 1e3);
   } catch (e) {
-    toast.error(e?.message ?? "Could not start OAuth connect.");
+    toast.error(e?.message ?? t("integration.credentials.error.oauthConnect"));
   } finally {
     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");
+    toast.success(t("integration.credentials.toast.deleted"));
+    pendingDelete.value = null;
   } catch (e) {
-    toast.error(e?.message ?? "Could not delete credential.");
+    toast.error(e?.message ?? t("integration.credentials.error.delete"));
+  } finally {
+    deleting.value = false;
   }
 }
 </script>
@@ -188,13 +231,13 @@ async function destroy(c) {
 <template>
   <IntegrationsLayout>
     <PageHeader
-      title="Credentials"
-      description="Typed, testable access data for the systems your workflows talk to — one per connection."
+      :title="t('integration.credentials.list.header.title')"
+      :description="t('integration.credentials.list.header.description')"
     >
       <template #actions>
         <Button class="h-7 text-sm" :disabled="!types.length" @click="openCreate()">
           <Plus :size="14" class="mr-1" />
-          New credential
+          {{ t("integration.credentials.list.action.new") }}
         </Button>
       </template>
     </PageHeader>
@@ -209,10 +252,10 @@ async function destroy(c) {
         :columns="columns"
         :row-key="(c2) => c2.id"
         :default-sort="{ column: 'name', direction: 'asc' }"
-        :search="{ placeholder: 'Search credentials\u2026' }"
-        :filter="true"
+        :search="{ placeholder: t('integration.credentials.list.search.placeholder') }"
+        :filter-tabs="filterTabs"
         :loading="loading"
-        empty-text="No credentials yet — hit “New credential” to connect your first system."
+        :empty-text="t('integration.credentials.list.empty', { action: t('integration.credentials.list.action.new') })"
         @row-click="(c2) => openEdit(c2)"
       >
         <template #cell-system="{ row: c }">
@@ -227,11 +270,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,12 +306,13 @@ async function destroy(c) {
               size="sm"
               class="h-7 text-amber-600"
               :disabled="connecting === c.id"
+              :aria-label="t('integration.credentials.list.action.reconnect.aria', { name: c.name })"
               @click="connect(c)"
             >
-              Reconnect
+              {{ t("integration.credentials.list.action.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)">
-              <Trash2 :size="13" />
+            <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="t('integration.credentials.list.action.delete.aria', { name: c.name })" :aria-label="t('integration.credentials.list.action.delete.aria', { name: c.name })" @click="pendingDelete = c">
+              <TrashBin :size="13" />
             </button>
           </div>
         </template>
@@ -275,9 +323,9 @@ async function destroy(c) {
     <Dialog v-model:open="dialogOpen">
       <DialogContent class="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>{{ isEdit ? "Edit credential" : "New credential" }}</DialogTitle>
+          <DialogTitle>{{ isEdit ? t("integration.credentials.shared.dialog.title.edit") : t("integration.credentials.shared.dialog.title.create") }}</DialogTitle>
           <DialogDescription class="text-sm">
-            {{ isEdit ? "Update the credential. Leave secret fields blank to keep the current value." : "Pick a type and fill in its access data." }}
+            {{ isEdit ? t("integration.credentials.list.dialog.description.edit") : t("integration.credentials.list.dialog.description.create") }}
           </DialogDescription>
         </DialogHeader>
 
@@ -285,50 +333,71 @@ async function destroy(c) {
         <IntegrationsCredentialTypePicker
           v-if="!pickedType"
           :types="types"
-          @pick="(t) => {
-  pickedType = t;
-  form.name = loc(t.name);
+          @pick="(picked) => {
+  pickedType = picked;
+  form.name = resolveLocalized(picked.name);
+  clearRefusal();
 }"
         />
 
         <!-- Step 2: dynamic form -->
         <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" />
+            <Label for="cred-name">{{ t("integration.credentials.shared.field.name.label") }}</Label>
+            <Input
+              id="cred-name"
+              v-model="form.name"
+              class="bg-white"
+              :placeholder="t('integration.credentials.list.dialog.field.name.placeholder')"
+              :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' : ''"
+              :placeholder="isEdit ? t('integration.credentials.shared.field.secret.placeholder') : ''"
               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,26 +405,36 @@ async function destroy(c) {
               :model-value="form.config[f.key] ?? ''"
               @update:model-value="(v) => form.config[f.key] = v"
             >
-              <SelectTrigger class="bg-white">
-                <SelectValue placeholder="Pick one" />
+              <SelectTrigger :id="`cred-field-${f.key}`" class="bg-white" v-bind="configFieldAria(f.key)">
+                <SelectValue :placeholder="t('integration.credentials.shared.field.select.placeholder')" />
               </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">
-            After saving, a window opens to connect with the provider.
+            {{ t("integration.credentials.shared.oauthHint") }}
           </p>
 
           <div
@@ -363,30 +442,67 @@ async function destroy(c) {
             class="rounded-md px-3 py-2 text-sm"
             :class="testResult.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
           >
-            {{ testResult.ok ? "Connection ok." : testResult.error ?? "Connection failed." }}
+            {{ testResult.ok ? t("integration.credentials.shared.test.ok") : testResult.error ?? t("integration.credentials.shared.test.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">
-            Back
+          <Button v-if="!isEdit" variant="ghost" size="sm" :disabled="saving || testing" @click="pickedType = null;
+  clearRefusal()">
+            {{ t("integration.credentials.list.dialog.action.back") }}
           </Button>
           <span v-else />
           <div class="flex items-center gap-2">
             <Button variant="outline" :disabled="saving || testing" @click="runTest">
               <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
               <TestIcon v-else :size="14" class="mr-1" />
-              Connect
+              {{ t("integration.credentials.shared.action.testConnection") }}
             </Button>
             <Button :disabled="saving || !form.name.trim()" @click="submit">
               <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
-              Save
+              {{ t("integration.common.action.save") }}
             </Button>
           </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>
 
+    <AlertDialog :open="!!pendingDelete" @update:open="(v) => {
+  if (!v) pendingDelete = null;
+}">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{{ t("integration.credentials.shared.confirm.delete.title") }}</AlertDialogTitle>
+          <AlertDialogDescription>
+            <span v-if="pendingDelete">
+              <span class="font-medium text-foreground">{{ pendingDelete.name }}</span>
+              {{ t("integration.credentials.shared.confirm.delete.body") }}
+            </span>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <Button variant="outline" :disabled="deleting" @click="pendingDelete = null">
+            {{ t("integration.common.action.cancel") }}
+          </Button>
+          <Button class="bg-destructive text-white hover:bg-destructive/90" :disabled="deleting" @click="confirmDelete">
+            <Loader2 v-if="deleting" :size="14" class="animate-spin" />
+            {{ deleting ? t("integration.common.state.deleting") : t("integration.common.action.delete") }}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+
     <!-- Detail / edit view (single-page: connection state + fields + metadata) -->
     <IntegrationsCredentialDetailDialog
       v-model:open="detailOpen"