@gorgo/medusa-integration 0.0.3 → 0.0.5

package/.medusa/server/src/admin/index.mjs

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { defineRouteConfig } from "@medusajs/admin-sdk";
-import { PuzzleSolid, CogSixTooth, Spinner, EllipsisHorizontal, Trash, PencilSquare } from "@medusajs/icons";
-import { clx, Container, Heading, Text, Badge, StatusBadge, Label, Input, Select, Switch, Textarea, toast, Drawer, Button, usePrompt, DropdownMenu, IconButton } from "@medusajs/ui";
-import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query";
+import { PuzzleSolid, CogSixTooth, Trash, Spinner, EllipsisHorizontal, PencilSquare, Plus } from "@medusajs/icons";
+import { clx, createDataTableColumnHelper, usePrompt, toast, Text, Badge, useDataTable, Container, Heading, Button, DataTable, Tabs, StatusBadge, Label, Input, Select, Switch, Textarea, Drawer, DropdownMenu, IconButton, Copy } from "@medusajs/ui";
+import { useQueryClient, useQuery, keepPreviousData, useMutation } from "@tanstack/react-query";
+import React, { useState, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useParams, useNavigate } from "react-router-dom";
+import { useNavigate, useParams, Link } from "react-router-dom";
 import Medusa from "@medusajs/js-sdk";
-import React, { useState } from "react";
 import { LayoutComposer } from "@medusajs/dashboard/components";
 const sdk = new Medusa({
   baseUrl: "/",
@@ -18,9 +18,23 @@ const sdk = new Medusa({
 const IntegrationIcon = ({
   src,
   alt,
-  size = "base"
+  size = "base",
+  framed = true
 }) => {
-  const dim = size === "small" ? "h-6 w-6" : "h-8 w-8";
+  const dim = size === "small" ? "h-6 w-6" : "h-10 w-10";
+  const [errored, setErrored] = useState(false);
+  const showImage = !!src && !errored;
+  if (showImage && !framed) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt,
+        className: clx("shrink-0 object-contain", dim),
+        onError: () => setErrored(true)
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -28,50 +42,237 @@ const IntegrationIcon = ({
         "bg-ui-bg-component shadow-borders-base flex shrink-0 items-center justify-center overflow-hidden rounded-md",
         dim
       ),
-      children: src ? /* @__PURE__ */ jsx("img", { src, alt, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx(PuzzleSolid, { className: "text-ui-fg-subtle" })
+      children: showImage ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt,
+          className: "h-full w-full object-cover",
+          onError: () => setErrored(true)
+        }
+      ) : /* @__PURE__ */ jsx(PuzzleSolid, { className: "text-ui-fg-subtle" })
     }
   );
 };
+const PAGE_SIZE = 20;
+const DOCS_URL = "https://docs.gorgojs.com/ru/medusa-plugins/integration-module";
+const IntegrationCell = ({ item }) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx(IntegrationIcon, { src: item.icon, alt: t(item.display_name), size: "base" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: t(item.display_name) }),
+        item.provider_id && /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: item.provider_id })
+      ] }),
+      item.version && /* @__PURE__ */ jsxs(Text, { size: "xsmall", leading: "compact", className: "text-ui-fg-subtle", children: [
+        t("integration.meta.version", { version: item.version }),
+        item.author && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " • ",
+          t("integration.meta.authorPrefix"),
+          " ",
+          item.author_url ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: item.author_url,
+              target: "_blank",
+              rel: "noreferrer",
+              className: "text-ui-fg-interactive",
+              onClick: (e) => e.stopPropagation(),
+              children: item.author
+            }
+          ) : item.author
+        ] })
+      ] })
+    ] })
+  ] });
+};
+const StatusCell = ({ item }) => {
+  const { t } = useTranslation();
+  const lifecycle = !item.is_configured ? { color: "grey", label: t("integration.status.notConfigured") } : !item.is_complete ? { color: "orange", label: t("integration.status.incomplete") } : item.is_enabled ? { color: "green", label: t("integration.status.enabled") } : { color: "grey", label: t("integration.status.disabled") };
+  const connection = item.has_test_connection ? item.last_test_status === "passed" ? { color: "green", label: t("integration.status.connected") } : item.last_test_status === "failed" ? { color: "red", label: t("integration.status.connectionFailed") } : null : null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-1", children: [
+    /* @__PURE__ */ jsx(StatusBadge, { color: lifecycle.color, children: lifecycle.label }),
+    connection && /* @__PURE__ */ jsx(StatusBadge, { color: connection.color, children: connection.label })
+  ] });
+};
+const columnHelper = createDataTableColumnHelper();
 const IntegrationsPage = () => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
+  const qc = useQueryClient();
+  const prompt = usePrompt();
+  const [activeTab, setActiveTab] = useState("all");
+  const [search, setSearch] = useState("");
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: PAGE_SIZE });
+  const category = activeTab === "all" ? void 0 : activeTab;
+  const queryParams = {
+    q: search || void 0,
+    category,
+    limit: pagination.pageSize,
+    offset: pagination.pageIndex * pagination.pageSize
+  };
   const { data, isLoading } = useQuery({
-    queryKey: ["integration-overview"],
-    queryFn: () => sdk.client.fetch("/admin/integrations")
+    queryKey: ["integration-overview", queryParams],
+    queryFn: () => sdk.client.fetch("/admin/integrations", { query: queryParams }),
+    placeholderData: keepPreviousData
   });
-  const items = (data == null ? void 0 : data.integrations) ?? [];
-  const byModule = items.reduce((acc, i) => {
-    var _a;
-    (acc[_a = i.module] ?? (acc[_a] = [])).push(i);
-    return acc;
-  }, {});
+  const integrations = (data == null ? void 0 : data.integrations) ?? [];
+  const count = (data == null ? void 0 : data.count) ?? 0;
+  const categories = (data == null ? void 0 : data.categories) ?? [];
+  const invalidate = () => qc.invalidateQueries({ queryKey: ["integration-overview"] });
+  const toggleEnabled = useMutation({
+    mutationFn: ({ providerId, next }) => sdk.client.fetch(`/admin/integrations/${providerId}/enable`, {
+      method: "POST",
+      body: { is_enabled: next }
+    }),
+    onSuccess: (_d, { next }) => {
+      toast.success(next ? t("integration.toast.enabled") : t("integration.toast.disabled"));
+      invalidate();
+    },
+    onError: (e) => toast.error((e == null ? void 0 : e.message) ?? t("integration.toast.updateFailed"))
+  });
+  const test = useMutation({
+    mutationFn: (providerId) => sdk.client.fetch(
+      `/admin/integrations/${providerId}/test-connection`,
+      { method: "POST" }
+    ),
+    onSuccess: (r) => {
+      r.status === "passed" ? toast.success(t("integration.toast.connectionOk")) : toast.warning(r.message ?? r.status);
+      invalidate();
+    },
+    onError: (e) => toast.error((e == null ? void 0 : e.message) ?? t("integration.toast.testFailed"))
+  });
+  const remove = useMutation({
+    mutationFn: (providerId) => sdk.client.fetch(`/admin/integrations/${providerId}`, { method: "DELETE" }),
+    onSuccess: () => {
+      toast.success(t("integration.toast.deleted"));
+      invalidate();
+    },
+    onError: (e) => toast.error((e == null ? void 0 : e.message) ?? t("integration.toast.deleteFailed"))
+  });
+  const onDelete = async (item) => {
+    const confirmed = await prompt({
+      title: t("integration.delete.title"),
+      description: t("integration.delete.description", { name: t(item.display_name) }),
+      confirmText: t("integration.actions.delete"),
+      cancelText: t("integration.actions.cancel")
+    });
+    if (confirmed) remove.mutate(item.provider_id);
+  };
+  const buildActions = (item) => {
+    const groups = [];
+    const primary = [];
+    if (item.is_configured) {
+      primary.push({
+        label: item.is_enabled ? t("integration.actions.disable") : t("integration.actions.enable"),
+        onClick: () => toggleEnabled.mutate({ providerId: item.provider_id, next: !item.is_enabled })
+      });
+    }
+    if (item.is_configured && item.has_test_connection && item.is_complete) {
+      primary.push({
+        label: t("integration.actions.test"),
+        onClick: () => test.mutate(item.provider_id)
+      });
+    }
+    if (primary.length) groups.push(primary);
+    if (item.is_configured) {
+      groups.push([
+        {
+          label: t("integration.actions.delete"),
+          icon: /* @__PURE__ */ jsx(Trash, {}),
+          onClick: () => onDelete(item)
+        }
+      ]);
+    }
+    return groups.length > 0 ? groups : null;
+  };
+  const columns = useMemo(
+    () => [
+      columnHelper.display({
+        id: "integration",
+        header: t("integration.columns.integration"),
+        cell: ({ row }) => /* @__PURE__ */ jsx(IntegrationCell, { item: row.original })
+      }),
+      columnHelper.display({
+        id: "description",
+        header: t("integration.columns.description"),
+        cell: ({ row }) => row.original.description ? /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle line-clamp-2", children: t(row.original.description) }) : null
+      }),
+      columnHelper.display({
+        id: "category",
+        header: t("integration.columns.category"),
+        cell: ({ row }) => /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: t(`integration.categories.${row.original.category}`) })
+      }),
+      columnHelper.display({
+        id: "status",
+        header: t("integration.columns.status"),
+        cell: ({ row }) => /* @__PURE__ */ jsx(StatusCell, { item: row.original })
+      }),
+      columnHelper.action({
+        actions: (ctx) => buildActions(ctx.row.original)
+      })
+    ],
+    // Safe to memo on [t] only: react-query keeps each mutation's `mutate` ref stable across
+    // renders (options updated internally), so the closed-over buildActions/mutations stay current.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t]
+  );
+  const table = useDataTable({
+    data: integrations,
+    columns,
+    rowCount: count,
+    isLoading,
+    getRowId: (row) => row.provider_id,
+    onRowClick: (_e, row) => {
+      const item = row.original;
+      navigate(`/settings/integrations/${item.provider_id}`);
+    },
+    search: { state: search, onSearchChange: setSearch },
+    pagination: { state: pagination, onPaginationChange: setPagination }
+  });
+  const isFiltered = activeTab !== "all" || search.trim().length > 0;
   return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("integration.list.title") }) }),
-    isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center px-6 py-8", children: /* @__PURE__ */ jsx(Spinner, { className: "text-ui-fg-subtle animate-spin" }) }) : items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.list.empty") }) }) : Object.entries(byModule).map(([module, group]) => /* @__PURE__ */ jsxs("div", { className: "px-6 py-4", children: [
-      /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: t(`integration.modules.${module}`) }),
-      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-col gap-2", children: group.map((i) => {
-        const configured = i.is_configured && i.is_enabled;
-        return /* @__PURE__ */ jsxs(
-          Link,
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("integration.list.title") }),
+        /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.list.subtitle") })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "small", variant: "primary", onClick: () => navigate("/settings/integrations/browse"), children: t("integration.list.browseIntegrations") })
+    ] }),
+    /* @__PURE__ */ jsxs(DataTable, { instance: table, className: "[&_td]:py-3", children: [
+      /* @__PURE__ */ jsx(DataTable.Toolbar, { children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx(
+          Tabs,
           {
-            to: `/settings/integrations/${i.provider_id}`,
-            className: "flex items-center justify-between rounded-md border px-3 py-2 hover:bg-ui-bg-base-hover",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(IntegrationIcon, { src: i.icon, alt: t(i.display_name), size: "small" }),
-                /* @__PURE__ */ jsx(Text, { size: "small", children: t(i.display_name) }),
-                i.instance_id && /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: i.instance_id })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                i.last_test_status === "passed" && /* @__PURE__ */ jsx(Badge, { color: "green", size: "2xsmall", children: t("integration.list.tested") }),
-                i.last_test_status === "failed" && /* @__PURE__ */ jsx(Badge, { color: "red", size: "2xsmall", children: t("integration.list.testFailed") }),
-                i.is_configured && !i.is_complete ? /* @__PURE__ */ jsx(StatusBadge, { color: "orange", children: t("integration.status.incomplete") }) : /* @__PURE__ */ jsx(StatusBadge, { color: configured ? "green" : "grey", children: !i.is_configured ? t("integration.status.notConfigured") : i.is_enabled ? t("integration.status.enabled") : t("integration.status.disabled") })
-              ] })
-            ]
-          },
-          i.provider_id
-        );
-      }) })
-    ] }, module))
+            value: activeTab,
+            onValueChange: (v) => {
+              setActiveTab(v);
+              setPagination((p) => ({ ...p, pageIndex: 0 }));
+            },
+            children: /* @__PURE__ */ jsxs(Tabs.List, { children: [
+              /* @__PURE__ */ jsx(Tabs.Trigger, { value: "all", children: t("integration.list.tabs.all") }),
+              categories.map((c) => /* @__PURE__ */ jsx(Tabs.Trigger, { value: c, children: t(`integration.categories.${c}`) }, c))
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(DataTable.Search, { placeholder: t("integration.list.searchPlaceholder") })
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        DataTable.Table,
+        {
+          emptyState: {
+            empty: { heading: isFiltered ? t("integration.list.emptyFiltered") : t("integration.list.empty") },
+            filtered: { heading: t("integration.list.emptyFiltered") }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(DataTable.Pagination, {})
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center px-6 py-4", children: /* @__PURE__ */ jsxs("a", { href: DOCS_URL, target: "_blank", rel: "noreferrer", className: "text-ui-fg-base txt-small", children: [
+      t("integration.list.learnMore"),
+      " →"
+    ] }) })
   ] });
 };
 const config = defineRouteConfig({
@@ -83,7 +284,7 @@ const IntegrationsBreadcrumb = () => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsx(Fragment, { children: t("integration.list.title") });
 };
-const handle$1 = {
+const handle$2 = {
   breadcrumb: () => /* @__PURE__ */ jsx(IntegrationsBreadcrumb, {})
 };
 const Dash = () => /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: "-" });
@@ -1679,7 +1880,7 @@ function useForm(props = {}) {
   _formControl.current.formState = getProxyFormState(formState, control);
   return _formControl.current;
 }
-const jsonToText = (v) => v === void 0 || v === "" ? "" : JSON.stringify(v, null, 2);
+const jsonToText = (v) => v == null || v === "" ? "" : JSON.stringify(v, null, 2);
 const JsonField = ({ field, f }) => {
   const { t } = useTranslation();
   const [raw, setRaw] = useState(() => jsonToText(f.value));
@@ -1699,7 +1900,7 @@ const JsonField = ({ field, f }) => {
           setRaw(text);
           if (text.trim() === "") {
             setError(null);
-            f.onChange(void 0);
+            f.onChange(null);
             return;
           }
           try {
@@ -1769,7 +1970,18 @@ function renderControl(field, f, secretConfigured, t) {
           placeholder,
           value: f.value ?? "",
           disabled,
-          onChange: (e) => f.onChange(e.target.value === "" ? void 0 : e.target.valueAsNumber)
+          onChange: (e) => f.onChange(e.target.value === "" ? null : e.target.valueAsNumber)
+        }
+      );
+    case "url":
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "url",
+          placeholder,
+          value: f.value ?? "",
+          disabled,
+          onChange: f.onChange
         }
       );
     case "secret":
@@ -1780,7 +1992,8 @@ function renderControl(field, f, secretConfigured, t) {
           placeholder: secretConfigured ? t("integration.form.keepSecret") : placeholder ?? "",
           value: f.value ?? "",
           disabled,
-          onChange: f.onChange
+          onChange: f.onChange,
+          className: !f.value ? "[&~div]:hidden" : void 0
         }
       );
     case "json":
@@ -1818,10 +2031,11 @@ const EditSectionDrawer = ({
   providerId,
   section,
   values,
-  hasSecrets = false
+  configuredSecrets = []
 }) => {
   const { t } = useTranslation();
   const qc = useQueryClient();
+  const configured = new Set(configuredSecrets);
   const [defaults] = useState(() => sectionDefaults(section, values));
   const form = useForm({ values: defaults });
   const current = form.watch();
@@ -1848,7 +2062,7 @@ const EditSectionDrawer = ({
       {
         field: f,
         control: form.control,
-        secretConfigured: hasSecrets
+        secretConfigured: configured.has(f.name)
       },
       f.name
     )) }),
@@ -1866,7 +2080,6 @@ const EditSectionDrawer = ({
     ] })
   ] }) });
 };
-const testColor = (s) => s === "passed" ? "green" : s === "failed" ? "red" : "grey";
 const Row = ({ label, children }) => /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 px-6 py-4", children: [
   /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: label }),
   /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2", children })
@@ -1938,10 +2151,16 @@ const EditPage = () => {
   if (!descriptor) {
     return /* @__PURE__ */ jsxs(Container, { className: "p-6", children: [
       /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.unknown", { id: provider_id }) }),
-      /* @__PURE__ */ jsx(Link, { to: "/settings/integrations", className: "text-ui-fg-interactive", children: t("integration.back") })
+      /* @__PURE__ */ jsx(Link, { to: "/settings/integrations", className: "text-ui-fg-base", children: t("integration.back") })
     ] });
   }
+  const version = (data == null ? void 0 : data.version) ?? null;
+  const author = (data == null ? void 0 : data.author) ?? null;
+  const authorUrl = (data == null ? void 0 : data.author_url) ?? null;
+  const lifecycle = !isConfigured ? { color: "grey", label: t("integration.status.notConfigured") } : !isComplete ? { color: "orange", label: t("integration.status.incomplete") } : record.is_enabled ? { color: "green", label: t("integration.status.enabled") } : { color: "grey", label: t("integration.status.disabled") };
+  const connection = descriptor.hasTestConnection ? (record == null ? void 0 : record.last_test_status) === "passed" ? { color: "green", label: t("integration.status.connected") } : (record == null ? void 0 : record.last_test_status) === "failed" ? { color: "red", label: t("integration.status.connectionFailed") } : null : null;
   const editing = descriptor.sections.find((s) => s.id === editingSection) ?? null;
+  const configuredSecrets = new Set((record == null ? void 0 : record.configured_secrets) ?? []);
   const sectionData = {
     providerId: provider_id,
     identifier: descriptor.identifier,
@@ -1966,7 +2185,7 @@ const EditPage = () => {
         {
           field: f,
           value: (_a = record == null ? void 0 : record.values) == null ? void 0 : _a[f.name],
-          secretConfigured: !!(record == null ? void 0 : record.has_secrets)
+          secretConfigured: configuredSecrets.has(f.name)
         }
       ) }, f.name);
     })
@@ -1975,40 +2194,62 @@ const EditPage = () => {
   const sideSections = descriptor.sections.filter((s) => s.column === "side");
   const main = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(LayoutComposer.Entry, { id: "main", children: /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
-          /* @__PURE__ */ jsx(IntegrationIcon, { src: descriptor.icon, alt: t(descriptor.displayName) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
-              /* @__PURE__ */ jsx(Heading, { children: t(descriptor.displayName) }),
-              descriptor.instanceId && /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: descriptor.instanceId })
-            ] }),
-            descriptor.description && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t(descriptor.description) })
-          ] })
-        ] }),
-        isConfigured && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", variant: "transparent", children: /* @__PURE__ */ jsx(EllipsisHorizontal, {}) }) }),
-          /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
-            descriptor.hasTestConnection && record.is_enabled && isComplete && /* @__PURE__ */ jsx(DropdownMenu.Item, { disabled: test.isPending, onClick: () => test.mutate(), children: t("integration.actions.test") }),
-            isConfigured && /* @__PURE__ */ jsx(
-              DropdownMenu.Item,
-              {
-                disabled: toggleEnabled.isPending,
-                onClick: () => toggleEnabled.mutate(!record.is_enabled),
-                children: record.is_enabled ? t("integration.actions.disable") : t("integration.actions.enable")
-              }
-            ),
-            isConfigured && /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
-            isConfigured && /* @__PURE__ */ jsxs(DropdownMenu.Item, { className: "gap-x-2", onClick: onDelete, children: [
-              /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
-              t("integration.actions.delete")
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-3 px-6 py-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+            /* @__PURE__ */ jsx(IntegrationIcon, { src: descriptor.icon, alt: t(descriptor.displayName) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+                /* @__PURE__ */ jsx(Heading, { children: t(descriptor.displayName) }),
+                provider_id && /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: provider_id })
+              ] }),
+              version && /* @__PURE__ */ jsxs(Text, { size: "xsmall", leading: "compact", className: "text-ui-fg-subtle", children: [
+                t("integration.meta.version", { version }),
+                author && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  " • ",
+                  t("integration.meta.authorPrefix"),
+                  " ",
+                  authorUrl ? /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: authorUrl,
+                      target: "_blank",
+                      rel: "noreferrer",
+                      className: "text-ui-fg-interactive",
+                      children: author
+                    }
+                  ) : author
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsx(StatusBadge, { color: lifecycle.color, children: lifecycle.label }),
+            connection && /* @__PURE__ */ jsx(StatusBadge, { color: connection.color, children: connection.label }),
+            isConfigured && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", variant: "transparent", children: /* @__PURE__ */ jsx(EllipsisHorizontal, {}) }) }),
+              /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
+                descriptor.hasTestConnection && record.is_enabled && isComplete && /* @__PURE__ */ jsx(DropdownMenu.Item, { disabled: test.isPending, onClick: () => test.mutate(), children: t("integration.actions.test") }),
+                isConfigured && /* @__PURE__ */ jsx(
+                  DropdownMenu.Item,
+                  {
+                    disabled: toggleEnabled.isPending,
+                    onClick: () => toggleEnabled.mutate(!record.is_enabled),
+                    children: record.is_enabled ? t("integration.actions.disable") : t("integration.actions.enable")
+                  }
+                ),
+                isConfigured && /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+                isConfigured && /* @__PURE__ */ jsxs(DropdownMenu.Item, { className: "gap-x-2", onClick: onDelete, children: [
+                  /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
+                  t("integration.actions.delete")
+                ] })
+              ] })
             ] })
           ] })
-        ] })
+        ] }),
+        descriptor.description && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t(descriptor.description) })
       ] }),
-      /* @__PURE__ */ jsx(Row, { label: t("integration.labels.status"), children: !isConfigured ? /* @__PURE__ */ jsx(StatusBadge, { color: "grey", children: t("integration.status.notConfigured") }) : !isComplete ? /* @__PURE__ */ jsx(StatusBadge, { color: "orange", children: t("integration.status.incomplete") }) : /* @__PURE__ */ jsx(StatusBadge, { color: record.is_enabled ? "green" : "grey", children: record.is_enabled ? t("integration.status.enabled") : t("integration.status.disabled") }) }),
-      /* @__PURE__ */ jsx(Row, { label: t("integration.labels.module"), children: /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: t(`integration.modules.${descriptor.module}`) }) }),
-      /* @__PURE__ */ jsx(Row, { label: t("integration.labels.lastTest"), children: (record == null ? void 0 : record.last_test_status) ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(StatusBadge, { color: testColor(record.last_test_status), children: t(`integration.testStatus.${record.last_test_status}`) }) }) : /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: t("integration.labels.neverTested") }) })
+      /* @__PURE__ */ jsx(Row, { label: t("integration.labels.category"), children: /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: t(`integration.categories.${descriptor.category}`) }) })
     ] }) }),
     mainSections.map(renderSection),
     editing && /* @__PURE__ */ jsx(
@@ -2019,7 +2260,7 @@ const EditPage = () => {
         providerId: provider_id,
         section: editing,
         values: (record == null ? void 0 : record.values) ?? {},
-        hasSecrets: !!(record == null ? void 0 : record.has_secrets)
+        configuredSecrets: (record == null ? void 0 : record.configured_secrets) ?? []
       },
       editing.id
     )
@@ -2045,50 +2286,199 @@ const IntegrationBreadcrumb = ({ params }) => {
     enabled: !!providerId
   });
   const descriptor = data == null ? void 0 : data.descriptor;
-  if (!descriptor) return /* @__PURE__ */ jsx(Fragment, { children: providerId });
+  if (!descriptor) return /* @__PURE__ */ jsx(Fragment, {});
   const name = t(descriptor.displayName);
-  return /* @__PURE__ */ jsx(Fragment, { children: descriptor.instanceId ? `${name} · ${descriptor.instanceId}` : name });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    name + " ",
+    /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: providerId })
+  ] });
 };
-const handle = {
+const handle$1 = {
   breadcrumb: ({ params }) => /* @__PURE__ */ jsx(IntegrationBreadcrumb, { params })
 };
+const PUBLISH_URL = "https://docs.gorgojs.com/integrations";
+const API_URL = "https://gorgojs.com";
+const InstallModal = ({ item, onOpenChange }) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(Drawer, { open: !!item, onOpenChange, children: /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+    /* @__PURE__ */ jsx(Drawer.Header, { children: /* @__PURE__ */ jsx(Drawer.Title, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      item && /* @__PURE__ */ jsx(IntegrationIcon, { src: API_URL + item.icon, alt: item.label, size: "small" }),
+      /* @__PURE__ */ jsx("span", { children: item == null ? void 0 : item.label })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(Drawer.Body, { className: "flex flex-1 flex-col gap-y-4 overflow-auto", children: item && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.browse.install_addToConfig") }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle flex items-center justify-between gap-x-2 rounded-md px-3 py-2", children: [
+        /* @__PURE__ */ jsx("code", { className: "txt-compact-small text-ui-fg-subtle", children: `npm i ${item.npm}` }),
+        /* @__PURE__ */ jsx(Copy, { content: `npm i ${item.npm}` })
+      ] }),
+      item.configSnippet && /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle flex flex-col gap-y-2 rounded-md px-3 py-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xsmall", weight: "plus", className: "text-ui-fg-subtle", children: "medusa-config.ts" }),
+          /* @__PURE__ */ jsx(Copy, { content: item.configSnippet })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "txt-compact-small text-ui-fg-subtle overflow-x-auto whitespace-pre", children: item.configSnippet })
+      ] }),
+      /* @__PURE__ */ jsxs("a", { href: item.docsUrl, target: "_blank", rel: "noreferrer", className: "text-ui-fg-base txt-small", children: [
+        t("integration.browse.install_docs"),
+        " →"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Drawer.Footer, { children: /* @__PURE__ */ jsx(Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: t("integration.actions.cancel") }) }) })
+  ] }) });
+};
+const BrowsePage = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState("all");
+  const [search, setSearch] = useState("");
+  const [installItem, setInstallItem] = useState(null);
+  const { data, isLoading } = useQuery({
+    queryKey: ["integration-catalog"],
+    queryFn: () => sdk.client.fetch("/admin/integrations/catalog")
+  });
+  const items = (data == null ? void 0 : data.integrations) ?? [];
+  const categories = useMemo(() => [...new Set(items.map((i) => i.category))], [items]);
+  const q = search.trim().toLowerCase();
+  const filtered = items.filter((i) => {
+    if (activeTab !== "all" && i.category !== activeTab) return false;
+    if (q && ![i.label, i.shortDescription, i.npm].some((s) => s.toLowerCase().includes(q))) return false;
+    return true;
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-3", children: [
+    /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between px-6 py-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("integration.browse.title") }),
+          /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.browse.subtitle") })
+        ] }),
+        false
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-6 py-4", children: [
+        /* @__PURE__ */ jsx(Tabs, { value: activeTab, onValueChange: setActiveTab, children: /* @__PURE__ */ jsxs(Tabs.List, { children: [
+          /* @__PURE__ */ jsx(Tabs.Trigger, { value: "all", children: t("integration.list.tabs.all") }),
+          categories.map((c) => /* @__PURE__ */ jsx(Tabs.Trigger, { value: c, children: t(`integration.categories.${c}`) }, c))
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "w-64", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: t("integration.browse.searchPlaceholder"),
+            value: search,
+            onChange: (e) => setSearch(e.target.value)
+          }
+        ) })
+      ] })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, { className: "text-ui-fg-subtle animate-spin" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("integration.list.emptyFiltered") }) }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4", children: filtered.map((item) => /* @__PURE__ */ jsxs("div", { className: "shadow-borders-base bg-ui-bg-base flex flex-col rounded-lg", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-y-3 p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+            /* @__PURE__ */ jsx(IntegrationIcon, { src: API_URL + item.icon, alt: item.label }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.label }),
+              /* @__PURE__ */ jsx(Text, { size: "xsmall", leading: "compact", className: "text-ui-fg-subtle", children: t("integration.browse.by", { author: item.authorLocalized }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(StatusBadge, { color: item.installed ? "green" : "grey", children: item.installed ? t("integration.browse.installed") : t("integration.browse.notInstalled") })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle line-clamp-2", children: item.shortDescription })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t px-4 py-3", children: [
+        item.installed && item.provider_id ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "primary",
+            onClick: () => navigate(`/settings/integrations/${item.provider_id}`),
+            children: t("integration.browse.settings")
+          }
+        ) : /* @__PURE__ */ jsxs(Button, { size: "small", variant: "secondary", onClick: () => setInstallItem(item), children: [
+          /* @__PURE__ */ jsx(Plus, {}),
+          t("integration.browse.add")
+        ] }),
+        /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t(`integration.categories.${item.category}`) })
+      ] })
+    ] }, item.integrationId)) }),
+    /* @__PURE__ */ jsx(Container, { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs("a", { href: PUBLISH_URL, target: "_blank", rel: "noreferrer", className: "text-ui-fg-base txt-small", children: [
+      t("integration.browse.learnMore"),
+      " →"
+    ] }) }),
+    /* @__PURE__ */ jsx(InstallModal, { item: installItem, onOpenChange: (open) => !open && setInstallItem(null) })
+  ] });
+};
+const BrowseBreadcrumb = () => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(Fragment, { children: t("integration.browse.title") });
+};
+const handle = {
+  breadcrumb: () => /* @__PURE__ */ jsx(BrowseBreadcrumb, {})
+};
 const integration$1 = {
   list: {
     title: "Integrations",
+    subtitle: "Manage integrations settings",
+    browseIntegrations: "Browse Integrations",
+    learnMore: "Learn how to build integrations",
+    searchPlaceholder: "Search integrations",
     empty: "No integrations registered. Declare providers under the integration plugin's options.providers in medusa-config.",
+    emptyFiltered: "No integrations match your filters.",
     tested: "tested",
-    testFailed: "test failed"
+    testFailed: "test failed",
+    tabs: {
+      all: "All"
+    }
+  },
+  browse: {
+    title: "Browse",
+    subtitle: "Find available integrations",
+    publish: "Add Integration",
+    learnMore: "Learn how to build and publish your own integration",
+    searchPlaceholder: "Search integrations",
+    by: "by {{author}}",
+    installed: "Installed",
+    notInstalled: "Not installed",
+    add: "Add",
+    settings: "Settings",
+    install_addToConfig: "Add this to your medusa-config.ts and restart the server.",
+    install_docs: "Documentation"
+  },
+  columns: {
+    integration: "Integration",
+    description: "Description",
+    category: "Category",
+    status: "Status"
   },
   status: {
     notConfigured: "Not configured",
     incomplete: "Incomplete",
     enabled: "Enabled",
     disabled: "Disabled",
-    configured: "Configured"
+    configured: "Configured",
+    connected: "Connected",
+    connectionFailed: "Connection failed"
+  },
+  meta: {
+    version: "v{{version}}",
+    authorPrefix: "by"
   },
   labels: {
-    status: "Status",
-    module: "Module",
-    lastTest: "Last test",
-    neverTested: "Never tested"
+    category: "Category"
   },
-  modules: {
+  categories: {
     payment: "Payment",
+    notification: "Notification",
     fulfillment: "Fulfillment",
-    marketplace: "Marketplace",
-    crm: "CRM",
+    search: "Search",
+    content: "Content",
+    analytics: "Analytics",
+    authentication: "Authentication",
     erp: "ERP",
+    crm: "CRM",
     pim: "PIM",
-    notification: "Notification",
+    marketplace: "Marketplace",
     feed: "Feed",
-    tax: "Tax",
+    file_providers: "File providers",
     other: "Other"
   },
-  testStatus: {
-    passed: "Passed",
-    failed: "Failed",
-    skipped: "Skipped"
-  },
   actions: {
     test: "Test connection",
     enable: "Enable",
@@ -2105,7 +2495,7 @@ const integration$1 = {
   form: {
     required: "{{field}} is required",
     invalidJson: "Invalid JSON",
-    keepSecret: "•••••• — leave blank to keep",
+    keepSecret: "•••••• – leave blank to keep",
     items: "{{count}} items"
   },
   toast: {
@@ -2128,40 +2518,70 @@ const en = {
 const integration = {
   list: {
     title: "Интеграции",
+    subtitle: "Управление настройками интеграций",
+    browseIntegrations: "Найти интеграции",
+    learnMore: "Как создавать интеграции",
+    searchPlaceholder: "Поиск интеграций",
     empty: "Нет зарегистрированных интеграций. Объявите провайдеров в options.providers плагина интеграций в medusa-config.",
+    emptyFiltered: "Нет интеграций по заданным фильтрам",
     tested: "проверено",
-    testFailed: "ошибка проверки"
+    testFailed: "ошибка проверки",
+    tabs: {
+      all: "Все"
+    }
+  },
+  browse: {
+    title: "Каталог",
+    subtitle: "Поиск доступных интеграций",
+    publish: "Добавить интеграцию",
+    learnMore: "Как создать и опубликовать свою интеграцию",
+    searchPlaceholder: "Поиск интеграций",
+    by: "от {{author}}",
+    installed: "Установлено",
+    notInstalled: "Не установлено",
+    add: "Добавить",
+    settings: "Настройки",
+    install_addToConfig: "Добавьте это в medusa-config.ts и перезапустите сервер.",
+    install_docs: "Документация"
+  },
+  columns: {
+    integration: "Интеграция",
+    description: "Описание",
+    category: "Категория",
+    status: "Статус"
   },
   status: {
     notConfigured: "Не настроено",
     incomplete: "Не завершено",
     enabled: "Включено",
     disabled: "Выключено",
-    configured: "Настроено"
+    configured: "Настроено",
+    connected: "Подключено",
+    connectionFailed: "Ошибка подключения"
+  },
+  meta: {
+    version: "v{{version}}",
+    authorPrefix: "от"
   },
   labels: {
-    status: "Статус",
-    module: "Модуль",
-    lastTest: "Последняя проверка",
-    neverTested: "Не проверялось"
+    category: "Категория"
   },
-  modules: {
+  categories: {
     payment: "Платежи",
+    notification: "Уведомления",
     fulfillment: "Доставка",
-    marketplace: "Маркетплейс",
-    crm: "CRM",
+    search: "Поиск",
+    content: "Контент",
+    analytics: "Аналитика",
+    authentication: "Аутентификация",
     erp: "ERP",
+    crm: "CRM",
     pim: "PIM",
-    notification: "Уведомления",
+    marketplace: "Маркетплейс",
     feed: "Фиды",
-    tax: "Налоги",
+    file_providers: "Файловые провайдеры",
     other: "Прочее"
   },
-  testStatus: {
-    passed: "Пройдено",
-    failed: "Ошибка",
-    skipped: "Пропущено"
-  },
   actions: {
     test: "Проверить соединение",
     enable: "Включить",
@@ -2178,7 +2598,7 @@ const integration = {
   form: {
     required: "Поле «{{field}}» обязательно",
     invalidJson: "Некорректный JSON",
-    keepSecret: "•••••• — оставьте пустым, чтобы не менять",
+    keepSecret: "•••••• – оставьте пустым, чтобы не менять",
     items: "{{count}} шт."
   },
   toast: {
@@ -2208,11 +2628,16 @@ const routeModule = {
     {
       Component: IntegrationsPage,
       path: "/settings/integrations",
-      handle: handle$1
+      handle: { label: config.label, translationNs: config.translationNs, ...handle$2 }
     },
     {
       Component: EditPage,
       path: "/settings/integrations/:provider_id",
+      handle: handle$1
+    },
+    {
+      Component: BrowsePage,
+      path: "/settings/integrations/browse",
       handle
     }
   ]
@@ -2234,6 +2659,7 @@ const displayModule = {
   displays: {}
 };
 const i18nModule = { resources: i18nTranslations0 };
+const cellRendererModule = {};
 const layoutModule = { layouts: [] };
 const plugin = {
   widgetModule,
@@ -2242,6 +2668,7 @@ const plugin = {
   formModule,
   displayModule,
   i18nModule,
+  cellRendererModule,
   layoutModule
 };
 export {