@revenexx/studio-integrations 0.1.3 → 0.2.0

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

@@ -1,7 +1,6 @@
 <script setup>
 import {
   ShieldCheck,
-  Magnifier as Search,
   CloseCircle as Close,
   Copy as CopyIcon,
   ShieldKeyhole as Credential,
@@ -10,23 +9,15 @@ import {
   Bolt as Trigger,
   Play as Run
 } from "#solar-icons";
-import { Badge, Button, Input } from "@revenexx/studio";
+import { Badge, Button } from "@revenexx/studio";
 import { toast } from "vue-sonner";
 useHead({ title: "Audit Log \xB7 Integration Studio" });
 const { entries, loading, error, hasMore, load, loadMore } = useIntegrationsAudit();
 const resourceTypes = ["credential", "secret", "workflow", "trigger", "workflow_run"];
 const actions = ["create", "update", "delete", "run.started", "run.finished", "run.failed"];
-const resourceType = ref(null);
-const action = ref(null);
-const actor = ref("");
-function filters() {
-  return { resource_type: resourceType.value ?? void 0, action: action.value ?? void 0, sub: actor.value.trim() || void 0 };
-}
-function reload() {
-  void load(filters());
-}
-onMounted(reload);
-watch([resourceType, action], reload);
+onMounted(() => {
+  void load();
+});
 const resourceIcon = { credential: Credential, secret: Secret, workflow: Workflow, trigger: Trigger, workflow_run: Run };
 function actionTone(a) {
   if (a === "create" || a === "run.finished") return "bg-emerald-500/10 text-emerald-700 border-emerald-500/20";
@@ -46,6 +37,20 @@ function resourceName(e) {
 function fmtDate(iso) {
   return iso ? new Date(iso).toLocaleString() : "\u2014";
 }
+const filterTabs = [
+  {
+    key: "resource",
+    label: "Resource",
+    getter: (e) => e.resource_type,
+    options: resourceTypes.map((t) => ({ value: t, label: prettyType(t) }))
+  },
+  {
+    key: "action",
+    label: "Action",
+    getter: (e) => e.action,
+    options: actions.map((a) => ({ value: a, label: prettyAction(a) }))
+  }
+];
 const columns = [
   { key: "action", label: "Action", width: "130px", sortable: true, sortGetter: (e) => e.action },
   { key: "resource", label: "Resource", sortable: true, sortGetter: (e) => `${e.resource_type} ${resourceName(e)}`, searchGetter: (e) => `${e.resource_type} ${resourceName(e)} ${e.action} ${e.actor_sub ?? ""}` },
@@ -66,23 +71,6 @@ function copy(t) {
     <PageHeader title="Audit Log" description="Who changed what, and when. Append-only, per-tenant — credentials, secrets, workflows, triggers and runs." />
 
     <div class="p-4 space-y-3">
-      <!-- Filters -->
-      <div class="flex flex-wrap items-center gap-2">
-        <div class="flex flex-wrap gap-1.5">
-          <button class="rounded-full border px-3 py-1 text-xs transition-colors" :class="!resourceType ? 'border-primary/40 bg-primary/10 text-primary' : 'border-black/[0.06] text-muted-foreground hover:bg-black/[0.03]'" @click="resourceType = null">All</button>
-          <button v-for="t in resourceTypes" :key="t" class="rounded-full border px-3 py-1 text-xs capitalize transition-colors" :class="resourceType === t ? 'border-primary/40 bg-primary/10 text-primary' : 'border-black/[0.06] text-muted-foreground hover:bg-black/[0.03]'" @click="resourceType = t">{{ prettyType(t) }}</button>
-        </div>
-        <div class="flex-1" />
-        <select v-model="action" class="h-9 rounded-md border border-black/[0.1] bg-white px-2 text-sm">
-          <option :value="null">All actions</option>
-          <option v-for="a in actions" :key="a" :value="a">{{ prettyAction(a) }}</option>
-        </select>
-        <div class="relative">
-          <Search :size="14" class="absolute left-2.5 top-2.5 text-muted-foreground" />
-          <Input v-model="actor" class="h-9 w-44 pl-8 text-sm" placeholder="Actor (sub)…" @keydown.enter="reload" />
-        </div>
-      </div>
-
       <p v-if="error" class="text-sm text-rose-700">{{ error }}</p>
 
       <DataTable
@@ -90,12 +78,14 @@ function copy(t) {
         :columns="columns"
         :row-key="(e) => e.id"
         :default-sort="{ column: 'when', direction: 'desc' }"
-        :search="{ placeholder: 'Search this page\u2026' }"
-        :empty-text="loading ? 'Loading\u2026' : 'No audit entries match.'"
+        :search="{ placeholder: 'Search action, resource, actor\u2026' }"
+        :filter-tabs="filterTabs"
+        :loading="loading"
+        empty-text="No audit entries match."
         @row-click="(e) => selected = e"
       >
         <template #cell-action="{ row }">
-          <Badge variant="outline" :class="['text-xs border', actionTone(row.action)]">{{ prettyAction(row.action) }}</Badge>
+          <Badge variant="outline" :class="['border text-xs font-medium uppercase', actionTone(row.action)]">{{ prettyAction(row.action) }}</Badge>
         </template>
         <template #cell-resource="{ row }">
           <div class="flex items-center gap-2 min-w-0">
@@ -115,7 +105,7 @@ function copy(t) {
       </DataTable>
 
       <div v-if="hasMore" class="flex justify-center pt-1">
-        <Button variant="outline" size="sm" :disabled="loading" @click="loadMore(filters())">{{ loading ? "Loading\u2026" : "Load more" }}</Button>
+        <Button variant="outline" size="sm" :disabled="loading" @click="loadMore()">{{ loading ? "Loading\u2026" : "Load more" }}</Button>
       </div>
     </div>
 
@@ -125,7 +115,7 @@ function copy(t) {
         <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 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="['text-xs border', actionTone(selected.action)]">{{ prettyAction(selected.action) }}</Badge>
+            <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>
           </div>

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

@@ -1,13 +1,10 @@
 <script setup>
 import { computed, onMounted, reactive, ref } from "vue";
 import {
-  CheckCircle as CheckCircle2,
   RefreshCircle as Loader2,
-  Magnifier as Search,
   AddCircle as Plus,
   TrashBinTrash as Trash2,
-  TestTube as TestIcon,
-  ShieldKeyhole as KeyIcon
+  TestTube as TestIcon
 } from "#solar-icons";
 import {
   Badge,
@@ -28,19 +25,13 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
+import { credentialState } from "../../utils/credentialState";
 useHead({ title: "Credentials \xB7 Revenexx Cockpit" });
 const { credentials, loading, error, load, create, update, remove, testInline, test, oauthAuthorizeUrl } = useIntegrationsCredentials();
 const { types, load: loadTypes, bySlug } = useCredentialTypes();
 onMounted(async () => {
   await Promise.all([load(), loadTypes()]);
 });
-const search = ref("");
-const filtered = computed(() => {
-  const q = search.value.trim().toLowerCase();
-  const list = [...credentials.value].sort((a, b) => a.name.localeCompare(b.name));
-  if (!q) return list;
-  return list.filter((c) => c.name.toLowerCase().includes(q) || c.credential_type_slug.toLowerCase().includes(q));
-});
 function typeFor(slug) {
   return bySlug(slug);
 }
@@ -64,6 +55,15 @@ 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 ?? "" },
+  { key: "actions", label: "", width: "80px" }
+];
 const dialogOpen = ref(false);
 const editing = ref(null);
 const pickedType = ref(null);
@@ -71,6 +71,7 @@ const form = reactive({ name: "", config: {} });
 const saving = ref(false);
 const testing = ref(false);
 const testResult = ref(null);
+const sourceActive = ref(false);
 const isEdit = computed(() => editing.value !== null);
 function fieldsOf(t) {
   return t?.fields ?? [];
@@ -81,15 +82,24 @@ function openCreate(t) {
   form.name = "";
   form.config = {};
   testResult.value = null;
+  sourceActive.value = false;
   dialogOpen.value = true;
 }
+const detailOpen = ref(false);
+const detailCredential = ref(null);
+const detailType = ref(null);
 function openEdit(c) {
-  editing.value = c;
-  pickedType.value = typeFor(c.credential_type_slug);
-  form.name = c.name;
-  form.config = { ...c.public_config ?? {} };
-  testResult.value = null;
-  dialogOpen.value = true;
+  detailCredential.value = c;
+  detailType.value = typeFor(c.credential_type_slug);
+  detailOpen.value = true;
+}
+async function onDetailChanged() {
+  const id = detailCredential.value?.id;
+  await load(true);
+  if (id) {
+    const fresh = credentials.value.find((c) => c.id === id);
+    if (fresh) detailCredential.value = fresh;
+  }
 }
 function buildConfigPayload() {
   const out = {};
@@ -164,17 +174,6 @@ async function connect(c) {
     connecting.value = null;
   }
 }
-const cardTesting = ref(null);
-async function testCard(c) {
-  cardTesting.value = c.id;
-  try {
-    const res = await test(c.id);
-    if (res.ok) toast.success(`${c.name}: connection ok`);
-    else toast.error(`${c.name}: ${res.error ?? "connection failed"}`);
-  } finally {
-    cardTesting.value = null;
-  }
-}
 async function destroy(c) {
   if (!confirm(`Delete credential "${c.name}"? Workflows referencing it will fail until re-bound.`)) return;
   try {
@@ -200,84 +199,76 @@ async function destroy(c) {
       </template>
     </PageHeader>
 
-    <div class="flex items-center justify-between gap-3 border-b border-black/[0.06] px-4 py-2">
-      <div class="text-sm text-muted-foreground">
-        {{ filtered.length }} credential{{ filtered.length === 1 ? "" : "s" }}
-      </div>
-      <div class="relative w-64">
-        <Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
-        <Input v-model="search" placeholder="Search…" class="h-7 pl-7 text-sm bg-white" />
-      </div>
-    </div>
-
     <div v-if="error" class="m-4 rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
       {{ error }}
     </div>
 
-    <div class="p-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-      <div
-        v-for="c in filtered"
-        :key="c.id"
-        class="rounded-lg border border-black/[0.06] bg-white p-4 space-y-3 transition hover:shadow-sm"
+    <div class="p-4">
+      <DataTable
+        :data="credentials"
+        :columns="columns"
+        :row-key="(c2) => c2.id"
+        :default-sort="{ column: 'name', direction: 'asc' }"
+        :search="{ placeholder: 'Search credentials\u2026' }"
+        :filter="true"
+        :loading="loading"
+        empty-text="No credentials yet — hit “New credential” to connect your first system."
+        @row-click="(c2) => openEdit(c2)"
       >
-        <div class="flex items-start gap-3">
-          <span class="flex size-10 items-center justify-center rounded-md bg-slate-100 text-slate-500 shrink-0">
-            <KeyIcon :size="18" />
-          </span>
-          <div class="flex-1 min-w-0">
-            <div class="text-sm font-semibold truncate">
-              {{ c.name }}
-            </div>
-            <div class="text-sm text-muted-foreground truncate">
-              {{ typeName(c.credential_type_slug) }}
-            </div>
+        <template #cell-system="{ row: c }">
+          <div class="flex items-center gap-2 min-w-0">
+            <IntegrationsCredentialLogo :type="typeFor(c.credential_type_slug)" :size="16" />
+            <span class="font-medium text-sm truncate">{{ typeName(c.credential_type_slug) }}</span>
           </div>
+        </template>
+
+        <template #cell-name="{ row: c }">
+          <span class="text-sm truncate">{{ c.name }}</span>
+        </template>
+
+        <template #cell-status="{ row: c }">
           <Badge
-            v-if="c.status === 'active'"
-            variant="outline"
-            class="text-sm border bg-emerald-500/10 border-emerald-500/20 text-emerald-700 gap-1"
-          >
-            <CheckCircle2 :size="12" />
-            Active
-          </Badge>
-          <Badge
-            v-else
             variant="outline"
-            class="text-sm border bg-amber-500/10 border-amber-500/20 text-amber-700"
+            class="border text-xs font-medium uppercase"
+            :class="credentialState(c).toneClass"
+            :title="credentialState(c).message ?? void 0"
           >
-            Needs reconnect
+            {{ credentialState(c).label }}
           </Badge>
-        </div>
+        </template>
 
-        <div class="flex items-center justify-between border-t border-black/[0.04] pt-2 text-sm text-muted-foreground">
-          <span>Updated {{ formatDateTime(c.updated_at) }}</span>
-          <div class="flex items-center gap-2">
-            <button
+        <template #cell-connected="{ row: c }">
+          <span class="text-sm text-muted-foreground tabular-nums">
+            {{ c.last_test_ok ? formatDateTime(c.last_test_at) : "\u2014" }}
+          </span>
+        </template>
+
+        <template #cell-created="{ row: c }">
+          <span class="text-sm text-muted-foreground tabular-nums">{{ formatDateTime(c.created_at) }}</span>
+        </template>
+
+        <template #cell-updated="{ row: c }">
+          <span class="text-sm text-muted-foreground tabular-nums">{{ formatDateTime(c.updated_at) }}</span>
+        </template>
+
+        <template #cell-actions="{ row: c }">
+          <div class="flex items-center justify-end gap-2 text-sm" @click.stop>
+            <Button
               v-if="c.status === 'needs_reauth' && isOAuthAuthcode(typeFor(c.credential_type_slug))"
-              type="button"
-              class="text-amber-600 hover:underline"
+              variant="outline"
+              size="sm"
+              class="h-7 text-amber-600"
               :disabled="connecting === c.id"
               @click="connect(c)"
             >
               Reconnect
-            </button>
-            <button type="button" class="text-violet-600 hover:underline disabled:opacity-50" :disabled="cardTesting === c.id" @click="testCard(c)">
-              <Loader2 v-if="cardTesting === c.id" :size="12" class="inline animate-spin" />
-              <span v-else>Test</span>
-            </button>
-            <button type="button" class="text-foreground/50 hover:text-foreground" @click="openEdit(c)">
-              Edit
-            </button>
-            <button type="button" class="text-foreground/40 hover:text-rose-600" @click="destroy(c)">
+            </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>
           </div>
-        </div>
-      </div>
-
-      <div v-if="!loading && !filtered.length" class="col-span-full px-3 py-12 text-center text-sm text-muted-foreground">
-        No credentials yet. Hit "New credential" to connect your first system.
-      </div>
+        </template>
+      </DataTable>
     </div>
 
     <!-- Create / edit dialog -->
@@ -290,29 +281,15 @@ async function destroy(c) {
           </DialogDescription>
         </DialogHeader>
 
-        <!-- Step 1: type picker (create only) -->
-        <div v-if="!pickedType" class="grid grid-cols-2 gap-2 py-2 max-h-80 overflow-y-auto">
-          <button
-            v-for="t in types"
-            :key="t.slug"
-            type="button"
-            class="flex items-start gap-2 rounded-lg border border-black/[0.08] p-3 text-left transition hover:border-black/20 hover:bg-muted/30"
-            @click="pickedType = t;
-  form.name = loc(t.name)"
-          >
-            <span class="flex size-8 items-center justify-center rounded-md bg-slate-100 text-slate-500 shrink-0">
-              <KeyIcon :size="16" />
-            </span>
-            <div class="min-w-0">
-              <div class="text-sm font-semibold truncate">
-                {{ loc(t.name) }}
-              </div>
-              <div class="text-sm text-muted-foreground truncate">
-                {{ t.auth_kind }}
-              </div>
-            </div>
-          </button>
-        </div>
+        <!-- Step 1: searchable type picker (create only) -->
+        <IntegrationsCredentialTypePicker
+          v-if="!pickedType"
+          :types="types"
+          @pick="(t) => {
+  pickedType = t;
+  form.name = loc(t.name);
+}"
+        />
 
         <!-- Step 2: dynamic form -->
         <div v-else class="space-y-3 py-1 max-h-[28rem] overflow-y-auto pr-1">
@@ -321,7 +298,14 @@ async function destroy(c) {
             <Input id="cred-name" v-model="form.name" class="bg-white" placeholder="e.g. Production SMTP" />
           </div>
 
-          <div v-for="f in fieldsOf(pickedType)" :key="f.key" class="space-y-1.5">
+          <!-- "Use revenexx …" source picker (SFTP / Mail / API key) -->
+          <IntegrationsCredentialRevenexxSource
+            :type="pickedType"
+            @update:active="(v) => sourceActive = v"
+            @apply="(c2) => Object.assign(form.config, c2)"
+          />
+
+          <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>
 
             <!-- secret -->
@@ -383,21 +367,32 @@ async function destroy(c) {
           </div>
         </div>
 
-        <DialogFooter v-if="pickedType">
-          <Button v-if="!isEdit" variant="outline" :disabled="saving || testing" @click="pickedType = null">
+        <DialogFooter v-if="pickedType" class="sm:justify-between">
+          <Button v-if="!isEdit" variant="ghost" size="sm" :disabled="saving || testing" @click="pickedType = null">
             Back
           </Button>
-          <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" />
-            Test
-          </Button>
-          <Button :disabled="saving || !form.name.trim()" @click="submit">
-            <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
-            {{ isEdit ? "Save" : isOAuthAuthcode(pickedType) ? "Save & connect" : "Create" }}
-          </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
+            </Button>
+            <Button :disabled="saving || !form.name.trim()" @click="submit">
+              <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
+              Save
+            </Button>
+          </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>
+
+    <!-- Detail / edit view (single-page: connection state + fields + metadata) -->
+    <IntegrationsCredentialDetailDialog
+      v-model:open="detailOpen"
+      :credential="detailCredential"
+      :type="detailType"
+      @changed="onDetailChanged"
+    />
   </IntegrationsLayout>
 </template>