@revenexx/studio-integrations 0.1.4 → 0.3.0

package/README.md

@@ -49,3 +49,34 @@ Adjust the relative paths to reach `node_modules` from your CSS file.
 `@revenexx/studio`, `@revenexx/studio-shared`, `nuxt` ^4, `vue` ^3.5,
 `@vue-flow/*` + `@dagrejs/dagre` (workflow editor), `lucide-vue-next`; register
 `@solar-icons/nuxt` in the host.
+
+## Develop
+
+This repo is the source of truth for the module (it used to live in the
+cockpit monorepo under `packages/studio-integrations`).
+
+```bash
+pnpm install     # runs the module `prepare` (nuxt-module-build)
+pnpm test        # vitest
+pnpm build       # dist/
+```
+
+Hosts to develop against:
+
+* **Playground** (`playground/`, in this repo): thin standalone Nuxt host that
+  loads the module from `src/` — see `playground/README.md` for the full
+  runbook against a local integrations service
+  (`docker compose -f playground/docker-compose.dev.yml up`).
+* **Cockpit** (`../revenexx-cockpit`): its dev server loads this module from
+  the sibling checkout's `src/module.ts` automatically (dev-from-source, see
+  the cockpit's `nuxt.config.ts`). Edit `src/**` here, the cockpit HMRs.
+* **Integrations service** (`../integrations`): the `studio-ui` dev host
+  consumes a packed tarball — `studio-ui/scripts/pack-vendor.sh` builds and
+  packs this repo into `studio-ui/vendor/`.
+
+## Release
+
+Bump `version` in `package.json` and push to `main` — CI
+(`.github/workflows/publish.yml`) publishes any version that isn't on npm
+yet, via npm Trusted Publishing (the trusted publisher on npmjs is bound to
+this repo + workflow file).

package/dist/module.d.mts

@@ -1,6 +1,6 @@
-import * as nuxt_schema from 'nuxt/schema';
+import * as _nuxt_schema from '@nuxt/schema';
 export * from '../dist/runtime/types/integrations.js';
 
-declare const _default: nuxt_schema.NuxtModule<nuxt_schema.ModuleOptions, nuxt_schema.ModuleOptions, false>;
+declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
 
 export { _default as default };

package/dist/module.json

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

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

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    open: boolean;
+    /** Credential type slug(s) the field accepts — the dialog is scoped to these. */
+    credentialType?: string | string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    created: (credentialId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    onCreated?: ((credentialId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,279 @@
+<script setup>
+import { computed, reactive, ref, watch } from "vue";
+import { RefreshCircle as Loader2, TestTube as TestIcon } from "#solar-icons";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Switch,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import { toast } from "vue-sonner";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  credentialType: { type: [String, Array], required: false }
+});
+const emit = defineEmits(["update:open", "created"]);
+const { create, testInline, load, oauthAuthorizeUrl } = useIntegrationsCredentials();
+const { load: loadTypes, bySlug } = useCredentialTypes();
+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 authKindLabel(k) {
+  switch (k) {
+    case "api-key":
+      return "API Key";
+    case "oauth2-authcode":
+    case "oauth2-client-credentials":
+      return "OAuth2";
+    case "basic-auth":
+      return "Basic Auth";
+    case "static":
+      return "Static";
+    case "secret":
+      return "Secret";
+    default:
+      return k ?? "";
+  }
+}
+const allowedSlugs = computed(() => {
+  const t = props.credentialType;
+  if (!t) return [];
+  return (Array.isArray(t) ? t : [t]).map((s) => s.trim()).filter(Boolean);
+});
+const allowedTypes = computed(() => allowedSlugs.value.map((s) => bySlug(s)).filter((x) => !!x));
+const pickedType = ref(null);
+const form = reactive({ name: "", config: {} });
+const sourceActive = ref(false);
+const saving = ref(false);
+const testing = ref(false);
+const testResult = ref(null);
+function fieldsOf(t) {
+  return t?.fields ?? [];
+}
+function isOAuthAuthcode(t) {
+  return t?.auth_kind === "oauth2-authcode";
+}
+watch(() => props.open, async (o) => {
+  if (!o) return;
+  testResult.value = null;
+  sourceActive.value = false;
+  form.config = {};
+  await loadTypes();
+  if (allowedTypes.value.length === 1) {
+    pickedType.value = allowedTypes.value[0];
+    form.name = loc(pickedType.value.name);
+  } else {
+    pickedType.value = null;
+    form.name = "";
+  }
+}, { immediate: true });
+function pickType(t) {
+  pickedType.value = t;
+  form.config = {};
+  testResult.value = null;
+  sourceActive.value = false;
+  if (!form.name) form.name = loc(t.name);
+}
+function buildConfigPayload() {
+  const out = {};
+  for (const f of fieldsOf(pickedType.value)) {
+    const v = form.config[f.key];
+    if (v !== void 0 && v !== "") out[f.key] = v;
+  }
+  return out;
+}
+async function runTest() {
+  if (!pickedType.value) return;
+  testing.value = true;
+  testResult.value = null;
+  try {
+    testResult.value = await testInline(pickedType.value.slug, buildConfigPayload());
+  } finally {
+    testing.value = false;
+  }
+}
+function connect(id) {
+  return oauthAuthorizeUrl(id).then((authorizeUrl) => {
+    const popup = window.open(authorizeUrl, "oauth-connect", "width=600,height=720");
+    const onMessage = (ev) => {
+      if (ev.data?.type === "integrations-oauth-complete") {
+        window.removeEventListener("message", onMessage);
+        void load(true);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    const poll = window.setInterval(() => {
+      if (popup?.closed) {
+        window.clearInterval(poll);
+        window.removeEventListener("message", onMessage);
+        void load(true);
+      }
+    }, 1e3);
+  });
+}
+async function submit() {
+  if (!pickedType.value || !form.name.trim()) return;
+  saving.value = true;
+  try {
+    const created = await create({
+      credential_type_slug: pickedType.value.slug,
+      name: form.name.trim(),
+      config: buildConfigPayload()
+    });
+    await load(true);
+    toast.success("Credential created");
+    if (isOAuthAuthcode(pickedType.value)) {
+      void connect(created.id);
+    }
+    emit("created", created.id);
+    emit("update:open", false);
+  } catch (e) {
+    toast.error(e?.message ?? "Could not create credential.");
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
+    <DialogContent class="sm:max-w-lg">
+      <DialogHeader>
+        <DialogTitle>New credential</DialogTitle>
+        <DialogDescription class="text-sm">
+          Create a credential for this node without leaving the editor.
+        </DialogDescription>
+      </DialogHeader>
+
+      <!-- Choose the type when the field accepts more than one -->
+      <div v-if="!pickedType" class="space-y-2 py-1">
+        <p v-if="!allowedTypes.length" class="text-sm text-muted-foreground">
+          No credential type available for this field.
+        </p>
+        <button
+          v-for="t in allowedTypes"
+          :key="t.slug"
+          type="button"
+          class="flex w-full items-center gap-2 rounded-lg border border-black/[0.08] p-3 text-left transition hover:border-black/20 hover:bg-muted/30"
+          @click="pickType(t)"
+        >
+          <IntegrationsCredentialLogo :type="t" :size="18" />
+          <div class="min-w-0 truncate text-sm">
+            <span class="font-semibold">{{ loc(t.name) }}</span>
+            <span class="ml-1.5 text-muted-foreground">({{ authKindLabel(t.auth_kind) }})</span>
+          </div>
+        </button>
+      </div>
+
+      <!-- Dynamic form -->
+      <div v-else class="space-y-3 py-1 max-h-[26rem] overflow-y-auto pr-1">
+        <div class="flex items-center gap-2">
+          <IntegrationsCredentialLogo :type="pickedType" :size="18" />
+          <div class="text-sm font-medium">{{ loc(pickedType.name) }}</div>
+          <button
+            v-if="allowedTypes.length > 1"
+            type="button"
+            class="ml-auto text-sm text-muted-foreground hover:text-foreground"
+            @click="pickedType = null"
+          >
+            Change type
+          </button>
+        </div>
+
+        <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 key" />
+        </div>
+
+        <!-- "Use revenexx …" source picker (SFTP / Mail / API key) -->
+        <IntegrationsCredentialRevenexxSource
+          :type="pickedType"
+          @update:active="(v) => sourceActive = v"
+          @apply="(c) => Object.assign(form.config, c)"
+        />
+
+        <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>
+          <Input
+            v-if="f.type === 'secret'"
+            :model-value="form.config[f.key] ?? ''"
+            type="password"
+            autocomplete="new-password"
+            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>
+
+        <p v-if="isOAuthAuthcode(pickedType)" class="text-sm text-muted-foreground">
+          After saving, a window opens to connect with the provider.
+        </p>
+
+        <div
+          v-if="testResult"
+          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." }}
+        </div>
+      </div>
+
+      <DialogFooter v-if="pickedType">
+        <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>
+</template>

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

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    open: boolean;
+    /** Credential type slug(s) the field accepts — the dialog is scoped to these. */
+    credentialType?: string | string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    created: (credentialId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    onCreated?: ((credentialId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/CredentialDetailDialog.d.vue.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;