@revenexx/studio-integrations 1.1.1 → 1.3.0

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

@@ -2,21 +2,52 @@
 import { RefreshCircle as Loader2, Refresh as ReplayIcon, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
 import { toast } from "vue-sonner";
+import LoadingAnnouncement from "../../components/Integrations/LoadingAnnouncement.vue";
 import RunsTable from "../../components/Integrations/RunsTable.vue";
 import { createPollBudget, SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { deadLetterStatusClass, deadLetterStatusLabel } from "../../utils/statusStyle";
+import { errorReason } from "../../utils/apiError";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.runs.list.head.title") });
 const route = useRoute();
-const { runs, loading, load } = useIntegrationsRuns();
+const { runs, loading, error, load, query, setQuery, narrowedTotal } = useIntegrationsRuns();
 const {
   globalItems: missed,
   globalLoading: missedLoading,
   pendingCount,
+  globalPage: missedPage,
+  globalLastPage: missedLastPage,
+  goGlobalPage,
+  resetGlobalPage,
   loadGlobal,
   replay,
-  discard
+  discard,
+  summary: missedSummary
 } = useIntegrationsDeadLetters();
+const page = computed({
+  get: () => query.value.page,
+  // Only when it actually moved. The shared table returns to its first page
+  // whenever the search or the page size changes, and reports that as a page
+  // change too — so an unguarded setter would send a second request for the page
+  // the list is already on, beside the one the search itself asks for.
+  set: (next) => {
+    if (next !== query.value.page) void setQuery({ page: next });
+  }
+});
+function onNarrow(patch) {
+  void setQuery(patch);
+}
+function onReorder(order) {
+  void setQuery(order);
+}
+let searchTimer;
+function onSearch(text) {
+  clearTimeout(searchTimer);
+  if (text === query.value.search) return;
+  searchTimer = setTimeout(() => {
+    void setQuery({ search: text });
+  }, 250);
+}
 const tab = ref(route.query.tab === "missed" ? "missed" : "runs");
 const tabs = computed(() => [
   { key: "runs", label: t("integration.runs.tabs.runs.label") },
@@ -36,7 +67,8 @@ watch([runTick, workflowTick], () => {
 });
 let pollTimer = null;
 onMounted(() => {
-  void load(true);
+  void setQuery({ search: "", page: 1 });
+  resetGlobalPage();
   void reloadMissedRuns();
   pollTimer = setInterval(() => {
     if (hasActiveRuns.value && !loading.value && budget.due(delivering.value)) void load(true);
@@ -47,8 +79,15 @@ onUnmounted(() => {
     clearInterval(pollTimer);
     pollTimer = null;
   }
+  clearTimeout(searchTimer);
 });
 const busyId = ref(null);
+async function goMissedPage(page2) {
+  try {
+    await goGlobalPage(page2);
+  } catch {
+  }
+}
 async function reloadMissedRuns() {
   try {
     await loadGlobal(true);
@@ -62,7 +101,7 @@ async function onReplay(dl) {
     const newId = res && typeof res === "object" && "id" in res ? String(res.id) : null;
     toast.success(newId ? t("integration.deadLetters.toast.replay.started", { id: newId }) : t("integration.deadLetters.toast.replay.done"));
   } catch (e) {
-    toast.error(e?.message ?? t("integration.deadLetters.toast.replay.error"));
+    toast.error(errorReason(e, t("integration.deadLetters.toast.replay.error")));
     busyId.value = null;
     return;
   }
@@ -76,7 +115,7 @@ async function onDiscard(dl) {
     await discard(dl.id);
     toast.success(t("integration.deadLetters.toast.discard.done"));
   } catch (e) {
-    toast.error(e?.message ?? t("integration.deadLetters.toast.discard.error"));
+    toast.error(errorReason(e, t("integration.deadLetters.toast.discard.error")));
     busyId.value = null;
     return;
   }
@@ -107,7 +146,49 @@ function fmt(iso) {
     <TabBar v-model="tab" :tabs="tabs" class="px-4" />
 
     <div class="p-4 space-y-4">
-      <RunsTable v-if="tab === 'runs'" :runs="runs" :loading="loading" @changed="reload" />
+      <!-- Above the tab chain on purpose: the missed-runs half is drawn by a
+           `v-else`, so a region placed inside it would mount together with the
+           placeholders it speaks for, and a live region that arrives with its own
+           content is one nothing was listening to. Out here it is on the page from
+           the first render and only its text moves (PO-251). -->
+      <LoadingAnnouncement
+        :label="t('integration.deadLetters.tabs.missed.label')"
+        :loading="tab === 'missed' && missedLoading && !missed.length"
+        :text="t('integration.deadLetters.state.loading')"
+      />
+
+      <!--
+        A refused read, said plainly. Without this the page kept the rows it had
+        while `query` had already moved on, so a failed page turn drew rows 1–25
+        under a footer reading "Showing 26–50", and a refused narrowing left the
+        old rows under the new selection — both reading as an answer.
+      -->
+      <div
+        v-if="tab === 'runs' && error"
+        class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700"
+        role="alert"
+      >
+        {{ error }}
+      </div>
+
+      <RunsTable
+        v-if="tab === 'runs'"
+        v-model:page="page"
+        :runs="runs"
+        :loading="loading"
+        server-mode
+        :total="narrowedTotal"
+        :per-page="query.perPage"
+        :status="query.status"
+        :trigger-type="query.triggerType"
+        :sort="query.sort"
+        :direction="query.direction"
+        @narrow="onNarrow"
+        @search="onSearch"
+        @page-size="(size) => setQuery({ perPage: size })"
+        @reorder="onReorder"
+        @changed="reload"
+      />
 
       <!-- Missed runs — trigger firings that never produced a run (the
            workflow wasn't runnable when its schedule/event fired). -->
@@ -122,7 +203,7 @@ function fmt(iso) {
           </Button>
         </div>
 
-        <div v-if="missedLoading && !missed.length"><div class="rounded-lg border border-black/[0.06] bg-white divide-y divide-black/[0.04]">
+        <div v-if="missedLoading && !missed.length" aria-hidden="true"><div class="rounded-lg border border-black/[0.06] bg-white divide-y divide-black/[0.04]">
           <div v-for="n in 4" :key="`sk-${n}`" class="flex items-start gap-3 px-3 py-3">
             <div class="h-5 w-16 shrink-0 rounded bg-black/[0.07] animate-pulse" />
             <div class="min-w-0 flex-1 space-y-2">
@@ -168,6 +249,34 @@ function fmt(iso) {
             </div>
           </div>
         </div>
+
+        <!--
+          Server pagination — the endpoint pages, so the whole backlog is
+          reachable. It used to read one page of a hundred and offer no way past
+          it, while `has_more` came back on every read and was shown to nobody
+          (PO-369).
+        -->
+        <div v-if="missedLastPage > 1" class="flex items-center justify-between text-sm text-muted-foreground">
+          <span class="tabular-nums">
+            {{ t("integration.deadLetters.pagination.summary", { page: missedPage, lastPage: missedLastPage, total: missedSummary.total }) }}
+          </span>
+          <div class="flex gap-2">
+            <Button
+              variant="outline" size="sm" class="h-7 text-sm"
+              :disabled="missedPage <= 1 || missedLoading"
+              @click="goMissedPage(missedPage - 1)"
+            >
+              {{ t("integration.deadLetters.pagination.newer") }}
+            </Button>
+            <Button
+              variant="outline" size="sm" class="h-7 text-sm"
+              :disabled="missedPage >= missedLastPage || missedLoading"
+              @click="goMissedPage(missedPage + 1)"
+            >
+              {{ t("integration.deadLetters.pagination.older") }}
+            </Button>
+          </div>
+        </div>
       </template>
     </div>
   </IntegrationsLayout>

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

@@ -24,6 +24,7 @@ import {
   Input,
   Label
 } from "@revenexx/studio";
+import { errorReason } from "../../utils/apiError";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.secrets.head.title") });
 const { secrets, loading, error, isValidKey, upsert, remove, load } = useIntegrationsSecrets();
@@ -58,7 +59,7 @@ async function submitCreate() {
     await upsert(key, newValue.value);
     createOpen.value = false;
   } catch (e) {
-    formError.value = e.message;
+    formError.value = errorReason(e, t("integration.secrets.form.error.saveFailed"));
   } finally {
     saving.value = false;
   }

package/dist/runtime/pages/integrations/templates/[slug].vue

@@ -24,6 +24,7 @@ import TemplateFlowPreview from "../../../components/Integrations/TemplateFlowPr
 import NodeMark from "../../../components/Integrations/NodeMark.vue";
 import { templateCategoryLabel, templatePackageLabel } from "../../../data/integrationTemplates";
 import { describeCron } from "../../../utils/schedule";
+import { errorReason } from "../../../utils/apiError";
 const SELECT_LATER = "__later__";
 const t = useIntegrationsT();
 const route = useRoute();
@@ -165,7 +166,7 @@ async function confirmInstall() {
     });
     if (id) await router.push(`/integrations/workflows/${id}`);
   } catch (e) {
-    installError.value = e.message || t("integration.templates.detail.install.error.fallback");
+    installError.value = errorReason(e, t("integration.templates.detail.install.error.fallback"));
   } finally {
     installing.value = false;
   }

package/dist/runtime/pages/integrations/templates/index.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watch } from "vue";
 import { Magnifier as Search, Layers, DangerTriangle as AlertTriangle } from "#solar-icons";
 import { Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@revenexx/studio";
+import LoadingAnnouncement from "../../../components/Integrations/LoadingAnnouncement.vue";
 import TemplateCard from "../../../components/Integrations/TemplateCard.vue";
 import { templateCategoryLabel, templatePackageLabel } from "../../../data/integrationTemplates";
 const t = useIntegrationsT();
@@ -55,7 +56,6 @@ watch(() => templates.value.length, () => {
   if (templates.value.length) void ensureDetails(templates.value.map((t2) => t2.slug));
 });
 const awaitingCatalogue = computed(() => loading.value && !templates.value.length);
-const statusText = computed(() => awaitingCatalogue.value ? t("integration.templates.gallery.state.loading") : "");
 </script>
 
 <template>
@@ -115,22 +115,25 @@ const statusText = computed(() => awaitingCatalogue.value ? t("integration.templ
     </PageHeader>
 
     <div class="p-4">
-      <!-- What the page is doing, in words (specs/templates.md AC-9).
-           The shimmer says "still working" only to somebody who can see it, and
-           six blank tiles carry no text, no name and no state — so waiting and
-           "nothing is registered" were the same silence, which are the two states
-           that ask for opposite reactions.
+      <!-- What the page is doing, in words (specs/templates.md AC-9). The mechanics are
+           in LoadingAnnouncement; three things about this page in particular are not.
 
-           The region is OUTSIDE the v-if chain below and always in the DOM, with
-           only its text changing. A live region that appears together with its
-           content is a region assistive technology may never have been watching:
-           what is announced is a change inside an existing region.
+           The region is NAMED because every card draws a status region of its own while
+           its flow miniature loads, so an unnamed one here would be indistinguishable
+           from six of those.
 
-           Named, because it is not the only `role="status"` on this page: every
-           card draws one while its flow miniature loads ("Loading the flow"). Two
-           unnamed status regions on one page are two things a reader — and a test —
-           cannot tell apart, and this one is about the gallery rather than a card. -->
-      <p role="status" aria-live="polite" :aria-label="t('integration.templates.gallery.state.regionLabel')" class="sr-only">{{ statusText }}</p>
+           Only the WAIT gets words. The empty registry and a filter without a match say
+           which they are in copy the reader arrives at or already has focus in, so
+           announcing them too would tell each of them twice.
+
+           A refused catalogue IS announced, but not from here: it is said by the block
+           that shows it, which carries `role="alert"`. Saying it here as well would put
+           the same sentence twice in the DOM, heard twice by anybody walking the page. -->
+      <LoadingAnnouncement
+        :label="t('integration.templates.gallery.state.regionLabel')"
+        :loading="awaitingCatalogue"
+        :text="t('integration.templates.gallery.state.loading')"
+      />
 
       <!-- The placeholders are taken out of the accessibility tree rather than
            marked busy. `aria-busy` only asks assistive technology to defer