@revenexx/studio-integrations 1.4.0 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @revenexx/studio-integrations
 
+## 1.4.1
+
+### Patch Changes
+
+- 7bb1913: A refused credential save states each reason once: at its field, or below the form
+  when no field can show it (PO-477).
+
+  **What a field can carry is marked there and nowhere else.** Until now the service's
+  lead reason was also repeated in a red box above the Save button, so the one sentence
+  the operator had already read was the one thing on the surface they had to read twice
+  — and it crowded out the reasons that had no other place to appear.
+
+  **What no field can carry is what the box is for now.** The service keys a refusal by
+  validation rule, and several of those shapes name nothing either dialog draws an input
+  for: the access data taken as a whole, a field the credential type never handed out, a
+  field hidden while a managed revenexx resource is being reused, or a refusal that is
+  not field-keyed at all, such as a conflict or a gateway error. Any of them was silent
+  unless the service happened to lead with it. All of them are now stated below the form,
+  every message of them, still without the service's count of everything else it found.
+
+  **The refusal also puts the operator in the first marked field.** The box was what
+  guaranteed a refusal could not be rendered below the fold of a form that scrolls; the
+  focus is what guarantees it now, and it leaves the cursor where the correction has to
+  be typed.
+
+  Both dialogs read the refusal through one seam, so the create-and-edit dialog on
+  Credentials and the credential detail dialog answer the same way.
+
+  Promised behaviour: `specs/credential-create.md` AC-8 and AC-11,
+  `specs/credential-detail.md` AC-6.
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenexx/studio-integrations",
   "configKey": "studioIntegrations",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, watch } from "vue";
+import { computed, nextTick, reactive, ref, watch } from "vue";
 import {
   CheckCircle as CheckCircle2,
   CloseCircle as XCircle,
@@ -30,7 +30,7 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import { toast } from "../../utils/notify";
-import { apiFieldErrors, errorReason } from "../../utils/apiError";
+import { apiRefusal, errorReason } from "../../utils/apiError";
 import { credentialState, relativeTime } from "../../utils/credentialState";
 import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
 import { resolveLocalized } from "../../utils/localize";
@@ -53,14 +53,31 @@ const saving = ref(false);
 const deleting = ref(false);
 const testing = ref(false);
 const liveTest = ref(null);
-const saveError = ref(null);
-const fieldErrors = ref({});
+const saveRefusal = ref(null);
+const drawnKeys = computed(() => [
+  "name",
+  ...sourceActive.value ? [] : fieldsOf(props.type).map((f) => `config.${f.key}`)
+]);
+const refusal = computed(() => apiRefusal(saveRefusal.value, drawnKeys.value));
+const fieldErrors = computed(() => refusal.value.atFields);
+const summaryReasons = computed(() => {
+  if (!saveRefusal.value) return [];
+  if (refusal.value.unshown.length) return refusal.value.unshown.map((u) => u.message);
+  if (Object.keys(refusal.value.atFields).length) return [];
+  return [errorReason(saveRefusal.value, t("integration.credentials.error.save"))];
+});
 function configFieldAria(key) {
   return fieldErrors.value[`config.${key}`] ? { "aria-invalid": "true", "aria-describedby": `detail-field-${key}-error` } : {};
 }
+async function focusFirstRefusedField() {
+  await nextTick();
+  const key = drawnKeys.value.find((k) => k in fieldErrors.value);
+  if (!key) return;
+  const id = key === "name" ? "detail-cred-name" : `detail-field-${key.slice("config.".length)}`;
+  document.getElementById(id)?.focus();
+}
 function clearRefusal() {
-  saveError.value = null;
-  fieldErrors.value = {};
+  saveRefusal.value = null;
 }
 const connecting = ref(false);
 const typeName = computed(() => resolveLocalized(props.type?.name) || props.credential?.credential_type_slug || "");
@@ -103,6 +120,7 @@ async function runTest() {
   if (!props.credential) return;
   testing.value = true;
   liveTest.value = null;
+  clearRefusal();
   try {
     liveTest.value = await test(props.credential.id);
     await load(true);
@@ -121,9 +139,9 @@ async function save() {
     emit("update:open", false);
     toast.success(t("integration.credentials.toast.updated"));
   } catch (e) {
-    fieldErrors.value = apiFieldErrors(e);
-    saveError.value = errorReason(e, t("integration.credentials.error.save"));
-    toast.error(saveError.value);
+    saveRefusal.value = e;
+    void focusFirstRefusedField();
+    toast.error(errorReason(e, t("integration.credentials.error.save")));
   } finally {
     saving.value = false;
   }
@@ -182,8 +200,11 @@ async function connect() {
         <!-- Standard cockpit tab bar (violet underline) -->
         <TabBar :model-value="tab" :tabs="tabs" @update:model-value="(k) => tab = k" />
 
-        <!-- Tab 1: Credentials -->
-        <div v-if="tab === 'credentials'" class="space-y-5 max-h-[62vh] overflow-y-auto pr-1 pt-4">
+        <!-- Tab 1: Credentials. A `template` rather than a wrapping element: the
+             scrolling pane and the block below it are siblings, as they were when the
+             pane was the whole tab, so nothing about the spacing around them moves. -->
+        <template v-if="tab === 'credentials'">
+        <div class="space-y-5 max-h-[62vh] overflow-y-auto pr-1 pt-4">
         <!-- Connection state — the headline answer: are these credentials correct? -->
         <div class="rounded-lg border p-3" :class="state.toneClass">
           <div class="flex items-center gap-2">
@@ -243,7 +264,10 @@ async function connect() {
           <IntegrationsCredentialRevenexxSource
             v-if="hasRevenexxSource(type?.slug)"
             :type="type"
-            @update:active="(v) => sourceActive = v"
+            @update:active="(v) => {
+  sourceActive = v;
+  clearRefusal();
+}"
             @apply="(c) => Object.assign(form.config, c)"
           />
 
@@ -313,27 +337,35 @@ async function connect() {
             {{ liveTest.ok ? liveTest.message ?? t("integration.credentials.shared.test.ok") : liveTest.error ?? liveTest.message ?? t("integration.credentials.shared.test.failed") }}
           </div>
 
-          <!-- The save was refused. Same rule as the create dialog: stated here, and at
-               the field where the service keyed it. -->
-          <div v-if="saveError" role="alert" class="rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
-            {{ saveError }}
-          </div>
+        </div>
 
-          <div class="flex items-center gap-2 pt-1">
-            <div class="flex-1" />
-            <Button variant="outline" :disabled="testing || saving" @click="runTest">
-              <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
-              <TestIcon v-else :size="14" class="mr-1" />
-              {{ t("integration.credentials.shared.action.testConnection") }}
-            </Button>
-            <Button :disabled="saving || !form.name.trim()" @click="save">
-              <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
-              {{ t("integration.common.action.save") }}
-            </Button>
-          </div>
         </div>
 
+        <!-- Outside the scrolling pane on purpose, the way the create dialog has it:
+             a refusal puts the operator in the first marked field, which scrolls that
+             pane back to the top — and a summary rendered at the end of the form would
+             be carried out of sight by the very focus meant to make the refusal
+             visible. What is marked at a field is not repeated here; what has no field
+             to be marked at would otherwise be silent. -->
+        <div v-if="summaryReasons.length" role="alert" class="mt-3 space-y-1 rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
+          <!-- Keyed by position: two undrawn keys can be refused with the same
+               sentence, and a duplicate key is how one of them goes unrendered. -->
+          <p v-for="(reason, i) in summaryReasons" :key="i">{{ reason }}</p>
+        </div>
+
+        <div class="flex items-center gap-2 pt-3">
+          <div class="flex-1" />
+          <Button variant="outline" :disabled="testing || saving" @click="runTest">
+            <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
+            <TestIcon v-else :size="14" class="mr-1" />
+            {{ t("integration.credentials.shared.action.testConnection") }}
+          </Button>
+          <Button :disabled="saving || !form.name.trim()" @click="save">
+            <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
+            {{ t("integration.common.action.save") }}
+          </Button>
         </div>
+        </template>
 
         <!-- Tab 2: Details -->
         <div v-else class="space-y-5 max-h-[62vh] overflow-y-auto pr-1 pt-4">

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, reactive, ref } from "vue";
+import { computed, nextTick, onMounted, reactive, ref } from "vue";
 import {
   RefreshCircle as Loader2,
   AddCircle as Plus,
@@ -31,7 +31,7 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import { toast } from "../../utils/notify";
-import { apiFieldErrors, errorReason } from "../../utils/apiError";
+import { apiRefusal, errorReason } from "../../utils/apiError";
 import { CREDENTIAL_STATES, credentialState, credentialStateLabel } from "../../utils/credentialState";
 import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
 import { resolveLocalized } from "../../utils/localize";
@@ -92,19 +92,36 @@ 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 saveRefusal = ref(null);
 const sourceActive = ref(false);
 const isEdit = computed(() => editing.value !== null);
 function fieldsOf(t2) {
   return t2?.fields ?? [];
 }
+const drawnKeys = computed(() => [
+  "name",
+  ...sourceActive.value ? [] : fieldsOf(pickedType.value).map((f) => `config.${f.key}`)
+]);
+const refusal = computed(() => apiRefusal(saveRefusal.value, drawnKeys.value));
+const fieldErrors = computed(() => refusal.value.atFields);
+const summaryReasons = computed(() => {
+  if (!saveRefusal.value) return [];
+  if (refusal.value.unshown.length) return refusal.value.unshown.map((u) => u.message);
+  if (Object.keys(refusal.value.atFields).length) return [];
+  return [errorReason(saveRefusal.value, t("integration.credentials.error.save"))];
+});
 function configFieldAria(key) {
   return fieldErrors.value[`config.${key}`] ? { "aria-invalid": "true", "aria-describedby": `cred-field-${key}-error` } : {};
 }
+async function focusFirstRefusedField() {
+  await nextTick();
+  const key = drawnKeys.value.find((k) => k in fieldErrors.value);
+  if (!key) return;
+  const id = key === "name" ? "cred-name" : `cred-field-${key.slice("config.".length)}`;
+  document.getElementById(id)?.focus();
+}
 function clearRefusal() {
-  saveError.value = null;
-  fieldErrors.value = {};
+  saveRefusal.value = null;
 }
 function openCreate(t2) {
   editing.value = null;
@@ -176,9 +193,9 @@ async function submit() {
       }
     }
   } catch (e) {
-    fieldErrors.value = apiFieldErrors(e);
-    saveError.value = errorReason(e, t("integration.credentials.error.save"));
-    toast.error(saveError.value);
+    saveRefusal.value = e;
+    void focusFirstRefusedField();
+    toast.error(errorReason(e, t("integration.credentials.error.save")));
   } finally {
     saving.value = false;
   }
@@ -351,7 +368,10 @@ async function confirmDelete() {
           <IntegrationsCredentialRevenexxSource
             v-if="hasRevenexxSource(pickedType?.slug)"
             :type="pickedType"
-            @update:active="(v) => sourceActive = v"
+            @update:active="(v) => {
+  sourceActive = v;
+  clearRefusal();
+}"
             @apply="(c2) => Object.assign(form.config, c2)"
           />
 
@@ -438,14 +458,16 @@ async function confirmDelete() {
 
         </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 }}
+        <!-- The save was refused for something no field shows. 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. What is marked at a field is not repeated
+             here; what has no field to be marked at — a service-side field, a conflict,
+             a gateway error — would otherwise be silent. -->
+        <div v-if="summaryReasons.length && pickedType" role="alert" class="space-y-1 rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
+          <!-- Keyed by position: two undrawn keys can be refused with the same
+               sentence, and a duplicate key is how one of them goes unrendered. -->
+          <p v-for="(reason, i) in summaryReasons" :key="i">{{ reason }}</p>
         </div>
 
         <DialogFooter v-if="pickedType" class="sm:justify-between">

package/dist/runtime/utils/apiError.d.ts

@@ -35,21 +35,48 @@ export declare function apiValidationIssues(err: unknown): {
     path: string;
     message: string;
 }[];
+/** One message the service keyed to a field, as it keyed it. */
+export interface RefusalMessage {
+    key: string;
+    message: string;
+}
+/**
+ * A refusal split by what the form on screen can show of it.
+ *
+ * `atFields` is what goes under an input, keyed the way the form draws it; `unshown`
+ * is everything left over — the reasons that have no input to stand at, in the order
+ * the service listed them.
+ */
+export interface Refusal {
+    atFields: Record<string, string>;
+    unshown: RefusalMessage[];
+}
 /**
- * Field-keyed validation messages from a rejection, as `{ field: message }`.
+ * A rejection split into the messages a form can show at a field and the messages it
+ * cannot, given the keys that form actually draws.
  *
  * The counterpart to `apiValidationIssues` above, for the ordinary case that has
  * nothing to do with the workflow blob: a form field the service refused, named the
  * way the form names it. Laravel answers a `422` with `errors` keyed by field and a
- * list of messages per key; the first message is the one a person reads, so that is
- * the one kept.
+ * list of messages per key; at a field the first message is the one a person reads,
+ * so that is the one kept.
+ *
+ * **`drawn` is the form's own list, in the order the form draws it** — the name, then
+ * the fields of the chosen type, and nothing while those are hidden behind another
+ * source. A key absent from it has no input to be shown at, whether because no form
+ * draws that field (`config` as a whole, a field the type never declared, a key that
+ * is not a field at all) or because this form is currently drawing something else.
+ * Both cases go to `unshown`, which is what the surface states below the form: a
+ * refusal nobody can see is the same as no answer at all (PO-275, PO-477).
+ *
+ * A container that is only at fault because one of its members is — `config` beside
+ * `config.authKey`, which the service reports as two — is dropped wherever the member
+ * is reported too: it says the same thing twice, and the member carries it either way.
  *
- * A form uses this to put the refusal where the operator is looking — "The name has
- * already been taken." under the Name field, rather than as a sentence somewhere
- * else about a field they then have to find (PO-275). Keys that address the blob are
- * left out: those belong to `apiValidationIssues`, which resolves them to nodes.
+ * Keys that address the blob are left out: those belong to `apiValidationIssues`,
+ * which resolves them to nodes. No credential surface can receive one.
  */
-export declare function apiFieldErrors(err: unknown): Record<string, string>;
+export declare function apiRefusal(err: unknown, drawn: readonly string[]): Refusal;
 /**
  * The reason a rejection gives, without the count of everything else it found.
  *

package/dist/runtime/utils/apiError.js

@@ -18,20 +18,20 @@ export function apiValidationIssues(err) {
   }
   return issues;
 }
-export function apiFieldErrors(err) {
-  if (!(err instanceof IntegrationsApiError) || err.status !== 422) return {};
+export function apiRefusal(err, drawn) {
+  const refusal = { atFields: {}, unshown: [] };
+  if (!(err instanceof IntegrationsApiError) || err.status !== 422) return refusal;
   const errors = err.body?.errors;
-  if (!errors || typeof errors !== "object") return {};
-  const out = {};
-  for (const [key, val] of Object.entries(errors)) {
-    if (key === "blob" || key.startsWith("blob.")) continue;
-    const first = Array.isArray(val) ? val[0] : val;
-    if (first !== void 0 && first !== null) out[key] = String(first);
-  }
-  for (const key of Object.keys(out)) {
-    if (Object.keys(out).some((other) => other.startsWith(`${key}.`))) delete out[key];
+  if (!errors || typeof errors !== "object") return refusal;
+  const keys = Object.keys(errors).filter((key) => key !== "blob" && !key.startsWith("blob."));
+  for (const key of keys) {
+    if (keys.some((other) => other.startsWith(`${key}.`))) continue;
+    const messages = (Array.isArray(errors[key]) ? errors[key] : [errors[key]]).filter((message) => message !== void 0 && message !== null).map(String);
+    if (!messages.length) continue;
+    if (drawn.includes(key)) refusal.atFields[key] = messages[0];
+    else refusal.unshown.push(...messages.map((message) => ({ key, message })));
   }
-  return out;
+  return refusal;
 }
 export function errorReason(err, fallback) {
   const raw = err?.message?.trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/studio-integrations",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "type": "module",
   "description": "Integration Studio (core: workflows, node editor, runs, schedules, credentials, secrets, audit) as a standalone, publishable Nuxt module.",
   "repository": {