@revenexx/studio-integrations 0.1.4 → 0.3.0

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

@@ -0,0 +1,342 @@
+<script setup>
+import { computed, reactive, ref, watch } from "vue";
+import {
+  CheckCircle as CheckCircle2,
+  CloseCircle as XCircle,
+  RefreshCircle as Loader2,
+  TestTube as TestIcon,
+  TrashBinTrash as Trash2
+} from "#solar-icons";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Switch,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import { toast } from "vue-sonner";
+import { credentialState, relativeTime } from "../../utils/credentialState";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  credential: { type: [Object, null], required: true },
+  type: { type: [Object, null], required: true }
+});
+const emit = defineEmits(["update:open", "changed"]);
+const { update, remove, test, oauthAuthorizeUrl, load } = useIntegrationsCredentials();
+const tab = ref("credentials");
+const tabs = [
+  { key: "credentials", label: "Credentials" },
+  { key: "details", label: "Details" }
+];
+const form = reactive({ name: "", config: {} });
+const sourceActive = ref(false);
+const saving = ref(false);
+const deleting = ref(false);
+const testing = ref(false);
+const liveTest = ref(null);
+const connecting = ref(false);
+function loc(v) {
+  if (!v) return "";
+  if (typeof v === "string") return v;
+  const o = v;
+  return o.en ?? o.de ?? Object.values(o)[0] ?? "";
+}
+const typeName = computed(() => loc(props.type?.name) || props.credential?.credential_type_slug || "");
+const isOAuthAuthcode = computed(() => props.type?.auth_kind === "oauth2-authcode");
+const state = computed(() => props.credential ? credentialState(props.credential) : null);
+function fieldsOf(t) {
+  return t?.fields ?? [];
+}
+function formatDateTime(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return String(iso);
+  }
+}
+watch(
+  () => [props.open, props.credential?.id],
+  () => {
+    if (!props.open || !props.credential) return;
+    tab.value = "credentials";
+    form.name = props.credential.name;
+    form.config = { ...props.credential.public_config ?? {} };
+    sourceActive.value = false;
+    liveTest.value = null;
+  },
+  { immediate: true }
+);
+function buildConfigPayload() {
+  const out = {};
+  for (const f of fieldsOf(props.type)) {
+    const v = form.config[f.key];
+    if (f.type === "secret" && (v === void 0 || v === "")) continue;
+    if (v !== void 0) out[f.key] = v;
+  }
+  return out;
+}
+async function runTest() {
+  if (!props.credential) return;
+  testing.value = true;
+  liveTest.value = null;
+  try {
+    liveTest.value = await test(props.credential.id);
+    await load(true);
+    emit("changed");
+  } finally {
+    testing.value = false;
+  }
+}
+async function save() {
+  if (!props.credential || !form.name.trim()) return;
+  saving.value = true;
+  try {
+    await update(props.credential.id, { name: form.name.trim(), config: buildConfigPayload() });
+    toast.success("Credential updated");
+    emit("changed");
+    emit("update:open", false);
+  } catch (e) {
+    toast.error(e?.message ?? "Could not save credential.");
+  } finally {
+    saving.value = false;
+  }
+}
+async function destroy() {
+  if (!props.credential) return;
+  if (!confirm(`Delete credential "${props.credential.name}"? Workflows referencing it will fail until re-bound.`)) return;
+  deleting.value = true;
+  try {
+    await remove(props.credential.id);
+    toast.success("Credential deleted");
+    emit("changed");
+    emit("update:open", false);
+  } catch (e) {
+    toast.error(e?.message ?? "Could not delete credential.");
+  } finally {
+    deleting.value = false;
+  }
+}
+async function connect() {
+  if (!props.credential) return;
+  connecting.value = true;
+  try {
+    const authorizeUrl = await oauthAuthorizeUrl(props.credential.id);
+    const popup = window.open(authorizeUrl, "oauth-connect", "width=600,height=720");
+    const onMessage = async (ev) => {
+      if (ev.data?.type === "integrations-oauth-complete") {
+        window.removeEventListener("message", onMessage);
+        await load(true);
+        emit("changed");
+        toast.success("Connected");
+      }
+    };
+    window.addEventListener("message", onMessage);
+    const poll = window.setInterval(async () => {
+      if (popup?.closed) {
+        window.clearInterval(poll);
+        window.removeEventListener("message", onMessage);
+        await load(true);
+        emit("changed");
+      }
+    }, 1e3);
+  } catch (e) {
+    toast.error(e?.message ?? "Could not start OAuth connect.");
+  } finally {
+    connecting.value = false;
+  }
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
+    <DialogContent class="sm:max-w-3xl">
+      <DialogHeader>
+        <div class="flex items-start gap-3">
+          <IntegrationsCredentialLogo :type="type" :size="22" />
+          <div class="min-w-0 flex-1">
+            <DialogTitle class="truncate">{{ credential?.name }}</DialogTitle>
+            <DialogDescription class="text-sm truncate">{{ typeName }}</DialogDescription>
+          </div>
+        </div>
+      </DialogHeader>
+
+      <div v-if="credential && state">
+        <!-- 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">
+        <!-- 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">
+            <CheckCircle2 v-if="state.key === 'connected'" :size="16" class="shrink-0" />
+            <XCircle v-else-if="state.key === 'failed'" :size="16" class="shrink-0" />
+            <span class="font-medium">{{ state.label }}</span>
+            <span v-if="state.at" class="text-sm opacity-70">· verified {{ relativeTime(state.at) }}</span>
+            <div class="flex-1" />
+            <Button
+              v-if="isOAuthAuthcode"
+              size="sm"
+              variant="outline"
+              class="bg-white/60"
+              :disabled="connecting"
+              @click="connect"
+            >
+              <Loader2 v-if="connecting" :size="13" class="mr-1 animate-spin" />
+              Reconnect
+            </Button>
+          </div>
+          <p v-if="state.key === 'failed' && state.message" class="mt-1 text-sm break-words opacity-90">
+            {{ state.message }}
+          </p>
+          <p v-else-if="state.key === 'untested'" class="mt-1 text-sm opacity-80">
+            Run a test to verify these credentials actually connect.
+          </p>
+        </div>
+
+        <!-- Editable fields -->
+        <div class="space-y-3">
+          <div class="space-y-1.5">
+            <Label for="detail-cred-name">Name</Label>
+            <Input id="detail-cred-name" v-model="form.name" class="bg-white" />
+          </div>
+
+          <!-- "Use revenexx …" source picker (SFTP / Mail / API key) -->
+          <IntegrationsCredentialRevenexxSource
+            :type="type"
+            @update:active="(v) => sourceActive = v"
+            @apply="(c) => Object.assign(form.config, c)"
+          />
+
+          <div v-for="f in fieldsOf(type)" v-show="!sourceActive" :key="f.key" class="space-y-1.5">
+            <Label>{{ loc(f.label) }}{{ f.required ? " *" : "" }}</Label>
+
+            <Input
+              v-if="f.type === 'secret'"
+              :model-value="form.config[f.key] ?? ''"
+              type="password"
+              autocomplete="new-password"
+              placeholder="Leave blank to keep current"
+              class="bg-white"
+              @update:model-value="(v) => form.config[f.key] = v"
+            />
+            <Input
+              v-else-if="f.type === 'number'"
+              type="number"
+              :model-value="form.config[f.key] ?? ''"
+              class="bg-white"
+              @update:model-value="(v) => form.config[f.key] = v === '' ? void 0 : Number(v)"
+            />
+            <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" />
+            </div>
+            <Select
+              v-else-if="f.type === 'select'"
+              :model-value="form.config[f.key] ?? ''"
+              @update:model-value="(v) => form.config[f.key] = v"
+            >
+              <SelectTrigger class="bg-white">
+                <SelectValue placeholder="Pick one" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
+                  {{ loc(opt.label) }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Input
+              v-else
+              :model-value="form.config[f.key] ?? ''"
+              class="bg-white"
+              @update:model-value="(v) => form.config[f.key] = v"
+            />
+          </div>
+
+          <!-- Live test feedback (from the test the operator just ran) -->
+          <div
+            v-if="liveTest"
+            class="rounded-md px-3 py-2 text-sm"
+            :class="liveTest.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
+          >
+            {{ liveTest.ok ? "Connection ok." : liveTest.error ?? "Connection failed." }}
+          </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" />
+              Connect
+            </Button>
+            <Button :disabled="saving || !form.name.trim()" @click="save">
+              <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
+              Save
+            </Button>
+          </div>
+        </div>
+
+        </div>
+
+        <!-- Tab 2: Details -->
+        <div v-else class="space-y-5 max-h-[62vh] overflow-y-auto pr-1 pt-4">
+          <div class="grid grid-cols-[9rem_1fr] gap-x-4 gap-y-2 text-sm">
+            <span class="text-muted-foreground">Type</span>
+            <span>{{ typeName }}</span>
+
+            <span class="text-muted-foreground">Type slug</span>
+            <span class="font-mono text-xs">{{ credential.credential_type_slug }}</span>
+
+            <span class="text-muted-foreground">Version</span>
+            <span class="font-mono text-xs">{{ type?.version ?? "\u2014" }}</span>
+
+            <span class="text-muted-foreground">Auth kind</span>
+            <span class="font-mono text-xs">{{ type?.auth_kind ?? "\u2014" }}</span>
+
+            <span class="text-muted-foreground">Last tested</span>
+            <span class="tabular-nums">{{ formatDateTime(credential.last_test_at) }}</span>
+
+            <span class="text-muted-foreground">Credential ID</span>
+            <span class="font-mono text-xs break-all">{{ credential.id }}</span>
+
+            <span class="text-muted-foreground">Created</span>
+            <span class="tabular-nums">{{ formatDateTime(credential.created_at) }}</span>
+
+            <span class="text-muted-foreground">Updated</span>
+            <span class="tabular-nums">{{ formatDateTime(credential.updated_at) }}</span>
+          </div>
+
+          <!-- Danger zone -->
+          <div class="rounded-lg border border-rose-500/30 bg-rose-500/[0.03] p-3">
+            <div class="text-sm font-semibold text-rose-700">Danger zone</div>
+            <div class="mt-1.5 flex items-center justify-between gap-3">
+              <p class="text-sm text-muted-foreground">
+                Deleting this credential breaks any workflow that references it until it's re-bound.
+              </p>
+              <Button
+                variant="outline"
+                size="sm"
+                class="shrink-0 border-rose-500/40 text-rose-700 hover:bg-rose-500/10"
+                :disabled="deleting"
+                @click="destroy"
+              >
+                <Loader2 v-if="deleting" :size="14" class="mr-1 animate-spin" />
+                <Trash2 v-else :size="14" class="mr-1" />
+                Delete credential
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,20 @@
+import type { Credential, CredentialType } from '../../types/integrations.js';
+/**
+ * Credential detail / edit view — a single scrolling page (no tabs): the
+ * connection state up top, the editable fields, then read-only metadata.
+ * Self-contained — owns update / delete / test / OAuth reconnect against the
+ * Integrations service via the shared composable.
+ */
+type __VLS_Props = {
+    open: boolean;
+    credential: Credential | null;
+    type: CredentialType | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    changed: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    onChanged?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/CredentialLogo.d.vue.ts

@@ -0,0 +1,14 @@
+import type { CredentialType } from '../../types/integrations.js';
+/**
+ * A credential type's brand logo. Renders the `logo` image from the type's
+ * `images[]` (a short-lived signed URL from the credential-types API), falling
+ * back to a generic key glyph when no image is present or the image fails to
+ * load (expired signature / 404). This is the single place that knows how a
+ * credential type renders its icon.
+ */
+type __VLS_Props = {
+    type?: CredentialType | null;
+    size?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,37 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { ShieldKeyhole as KeyIcon } from "#solar-icons";
+const props = defineProps({
+  type: { type: [Object, null], required: false },
+  size: { type: Number, required: false }
+});
+const box = computed(() => (props.size ?? 16) + 16);
+const glyph = computed(() => props.size ?? 16);
+const logoSrc = computed(() => {
+  const imgs = props.type?.images;
+  if (!imgs?.length) return null;
+  const pick = imgs.find((i) => i.category === "logo") ?? imgs[0];
+  return typeof pick?.src === "string" && pick.src ? pick.src : null;
+});
+const failed = ref(false);
+watch(logoSrc, () => {
+  failed.value = false;
+});
+const showImg = computed(() => !!logoSrc.value && !failed.value);
+</script>
+
+<template>
+  <span
+    class="flex items-center justify-center overflow-hidden rounded-md bg-slate-100 text-slate-500 shrink-0"
+    :style="{ width: `${box}px`, height: `${box}px` }"
+  >
+    <img
+      v-if="showImg"
+      :src="logoSrc"
+      alt=""
+      class="h-full w-full object-contain p-0.5"
+      @error="failed = true"
+    >
+    <KeyIcon v-else :size="glyph" />
+  </span>
+</template>

package/dist/runtime/components/Integrations/CredentialLogo.vue.d.ts

@@ -0,0 +1,14 @@
+import type { CredentialType } from '../../types/integrations.js';
+/**
+ * A credential type's brand logo. Renders the `logo` image from the type's
+ * `images[]` (a short-lived signed URL from the credential-types API), falling
+ * back to a generic key glyph when no image is present or the image fails to
+ * load (expired signature / 404). This is the single place that knows how a
+ * credential type renders its icon.
+ */
+type __VLS_Props = {
+    type?: CredentialType | null;
+    size?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/CredentialRevenexxSource.d.vue.ts

@@ -0,0 +1,12 @@
+import type { CredentialType } from '../../types/integrations.js';
+type __VLS_Props = {
+    type: CredentialType | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:active": (args_0: boolean) => any;
+    apply: (args_0: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:active"?: ((args_0: boolean) => any) | undefined;
+    onApply?: ((args_0: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;