@workos-inc/widgets 1.17.3 → 1.18.0-next.1788970242803

package/dist/esm/lib/pipes-admin.js

@@ -1,15 +1,22 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Callout, Card, Flex, Switch, Text, Tooltip } from "@radix-ui/themes";
-import { useState } from "react";
-import { InfoCircledIcon } from "@radix-ui/react-icons";
+import { useEffect, useState } from "react";
+import {
+  DotsHorizontalIcon,
+  ExternalLinkIcon,
+  InfoCircledIcon
+} from "@radix-ui/react-icons";
 import * as CardList from "./card-list.js";
 import { CopyText } from "./copy-text.js";
 import { DataIntegrationIcon } from "./data-integration-icon.js";
 import { ProviderIcon } from "./provider-icon.js";
 import {
+  AlertDialog,
   Button,
   Dialog,
+  DropdownMenu,
+  IconButton,
   Label,
   PasswordField,
   Skeleton,
@@ -21,11 +28,24 @@ import { Status } from "./status.js";
 import {
   getListDataIntegrationConfigurationsQueryKey,
   getMyDataIntegrationsQueryKey,
+  getOrganizationDataIntegrationsQueryKey,
+  getSharedDataConnectionsQueryKey,
+  useDeleteOrganizationDataInstallation,
   useListDataIntegrationConfigurations,
-  useUpsertDataIntegrationConfiguration
+  useOrganizationDataIntegrations,
+  useUpsertDataIntegrationConfiguration,
+  useUpsertOrganizationDataIntegrationConfiguration
 } from "../api/endpoint.js";
 import { useQueryClient } from "@tanstack/react-query";
 import { GenericError } from "./generic-error.js";
+import {
+  ApiKeyDialog,
+  ClientCredentialsDialog,
+  ConnectDialog,
+  PipesEmptyItem,
+  PipesSection,
+  getUnpinnedInstallationFields
+} from "./pipes.js";
 import { usePermissions } from "./use-permissions.js";
 import { getDomProps } from "./utils.js";
 import { Translation } from "./i18n/translation.js";
@@ -50,12 +70,42 @@ function RedirectUriField({ value }) {
     /* @__PURE__ */ jsx(CopyText, { value, label: copyLabel })
   ] });
 }
+function useUpsertConfiguration(owner, onSuccess) {
+  const queryClient = useQueryClient();
+  const user = useUpsertDataIntegrationConfiguration({
+    mutation: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: getListDataIntegrationConfigurationsQueryKey()
+        });
+        queryClient.invalidateQueries({
+          queryKey: getMyDataIntegrationsQueryKey()
+        });
+        onSuccess();
+      }
+    }
+  });
+  const organization = useUpsertOrganizationDataIntegrationConfiguration({
+    mutation: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: getOrganizationDataIntegrationsQueryKey()
+        });
+        queryClient.invalidateQueries({
+          queryKey: getSharedDataConnectionsQueryKey()
+        });
+        onSuccess();
+      }
+    }
+  });
+  return owner === "organization" ? organization : user;
+}
 function OrgCredentialsDialog({
   integration,
   open,
-  onOpenChange
+  onOpenChange,
+  owner = "user"
 }) {
-  const queryClient = useQueryClient();
   const credentials = integration.credentials;
   const hasCredentials = credentials.hasCredentials;
   const isOrgCredentials = credentials.credentialsType === "organization";
@@ -89,19 +139,7 @@ function OrgCredentialsDialog({
     mutate: upsertOverride,
     error,
     isPending
-  } = useUpsertDataIntegrationConfiguration({
-    mutation: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({
-          queryKey: getListDataIntegrationConfigurationsQueryKey()
-        });
-        queryClient.invalidateQueries({
-          queryKey: getMyDataIntegrationsQueryKey()
-        });
-        onOpenChange(false);
-      }
-    }
-  });
+  } = useUpsertConfiguration(owner, () => onOpenChange(false));
   const translate = useTranslation();
   const defaultScopes = integration.defaultScopes;
   const effectiveScopes = integration.scopes ?? [];
@@ -621,6 +659,459 @@ function useManageableIntegrations() {
     error: null
   };
 }
+function useOrganizationOwnedIntegrations() {
+  const permission = usePermissions("widgets:pipes:manage");
+  const organization = useOrganizationDataIntegrations({
+    query: { enabled: permission.isSuccess }
+  });
+  if (organization.isSuccess) {
+    return { data: organization.data.data, isLoading: false };
+  }
+  return {
+    data: [],
+    isLoading: permission.isLoading || permission.isSuccess && organization.isPending && organization.failureCount === 0
+  };
+}
+function toConfigurableIntegration(integration) {
+  const { configuration } = integration;
+  return {
+    name: integration.name,
+    description: integration.description,
+    slug: integration.slug,
+    authMethods: integration.authMethods ?? ["oauth"],
+    enabled: configuration.enabled,
+    scopes: configuration.scopes,
+    defaultScopes: configuration.defaultScopes,
+    availableScopes: configuration.availableScopes,
+    credentials: configuration.credentials,
+    configFields: configuration.configFields,
+    config: configuration.config
+  };
+}
+function DisconnectSharedConnectionDialog({
+  integrationName,
+  installationId,
+  open,
+  onOpenChange
+}) {
+  const queryClient = useQueryClient();
+  const {
+    mutate: deleteInstallation,
+    error,
+    reset,
+    isPending
+  } = useDeleteOrganizationDataInstallation({
+    mutation: {
+      onSuccess: () => {
+        onOpenChange(false);
+        queryClient.invalidateQueries({
+          queryKey: getOrganizationDataIntegrationsQueryKey()
+        });
+        queryClient.invalidateQueries({
+          queryKey: getSharedDataConnectionsQueryKey()
+        });
+      }
+    }
+  });
+  useEffect(() => {
+    if (open) {
+      reset();
+    }
+  }, [open, reset]);
+  return /* @__PURE__ */ jsx(AlertDialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(AlertDialog.Content, { style: { width: "80vw", maxWidth: "520px" }, children: [
+    /* @__PURE__ */ jsx(AlertDialog.Title, { children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Disconnect shared connection",
+        id: "Xy5Xq1",
+        description: "Dialog title for disconnecting an organization-owned connection"
+      }
+    ) }),
+    error && /* @__PURE__ */ jsx(Callout.Root, { my: "5", color: "red", role: "alert", children: /* @__PURE__ */ jsx(Callout.Text, { children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "An error occurred while disconnecting this connection. Please refresh the page and try again.",
+        id: "q0Yb2E",
+        description: "Error message when disconnecting an organization-owned connection fails"
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(AlertDialog.Description, { children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Are you sure you want to disconnect the {integrationName} account your organization shares with everyone? Members will lose access to it.",
+        id: "mS2v8L",
+        description: "Confirmation message for disconnecting an organization-owned connection",
+        values: {
+          integrationName: /* @__PURE__ */ jsx(Text, { as: "span", weight: "bold", children: integrationName })
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", mt: "5", children: [
+      /* @__PURE__ */ jsx(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Cancel",
+          id: "hHNj31",
+          description: "Cancel button text"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "destructive",
+          disabled: isPending,
+          loading: isPending,
+          onClick: () => deleteInstallation({ installationId }),
+          children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Disconnect",
+              id: "vMVXQh",
+              description: "Button to disconnect an account"
+            }
+          )
+        }
+      )
+    ] })
+  ] }) });
+}
+function AdminRow({
+  integration,
+  status,
+  description = integration.description,
+  dimmed = false,
+  actions
+}) {
+  const translate = useTranslation();
+  const actionsTitle = translate({
+    defaultMessage: "More actions",
+    id: "eR4kYp",
+    description: "Accessible title for a provider row's overflow actions menu"
+  });
+  const promoted = actions.find((action) => action.promoted);
+  const overflow = actions.filter((action) => action !== promoted);
+  return /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", gap: "4", children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", style: dimmed ? { opacity: 0.6 } : {}, children: [
+      /* @__PURE__ */ jsx(IconPanel, { color: "panel", children: /* @__PURE__ */ jsx(DataIntegrationIcon, { integration, size: "2" }) }),
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
+        /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", wrap: "wrap", children: [
+          /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", color: dimmed ? "gray" : void 0, children: integration.name }),
+          status
+        ] }),
+        description && /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: description })
+      ] })
+    ] }),
+    (promoted || overflow.length > 0) && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", flexShrink: "0", children: [
+      promoted && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: promoted.destructive ? "destructive" : "secondary",
+          onClick: promoted.onSelect,
+          children: promoted.label
+        }
+      ),
+      overflow.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(IconButton, { title: actionsTitle, children: /* @__PURE__ */ jsx(DotsHorizontalIcon, {}) }) }),
+        /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "end", children: overflow.map((action) => /* @__PURE__ */ jsx(
+          DropdownMenu.Item,
+          {
+            variant: action.destructive ? "destructive" : void 0,
+            onClick: action.onSelect,
+            children: action.external ? /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                gap: "4",
+                width: "100%",
+                justify: "between",
+                align: "center",
+                children: [
+                  action.label,
+                  /* @__PURE__ */ jsx(ExternalLinkIcon, { "aria-hidden": true })
+                ]
+              }
+            ) : action.label
+          },
+          action.key
+        )) })
+      ] })
+    ] })
+  ] }) });
+}
+function ConnectedViaStatus({
+  method
+}) {
+  return /* @__PURE__ */ jsx(Status, { state: "success", children: method === "api_key" ? /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "Connected via API key",
+      id: "jQLTNe",
+      description: "Status text for a connection established with an API key"
+    }
+  ) : method === "client_credentials" ? /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "Connected via client credentials",
+      id: "hQKIrx",
+      description: "Status text for a connection established with client credentials"
+    }
+  ) : /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "Connected via OAuth",
+      id: "pJcK_M",
+      description: "Status text for a connection established with OAuth"
+    }
+  ) });
+}
+function DisabledForOrganizationStatus() {
+  return /* @__PURE__ */ jsx(Status, { state: "neutral", children: /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "Disabled for your organization",
+      id: "uH2sNc",
+      description: "Status for a provider the organization has disabled"
+    }
+  ) });
+}
+function SharedConnectionAdminStatus({
+  integration,
+  method
+}) {
+  const { configuration } = integration;
+  const account = integration.connected_accounts[0];
+  if (!configuration.enabled) {
+    return configuration.disabledSource === "developer" ? /* @__PURE__ */ jsx(Status, { state: "neutral", children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Disabled by developer",
+        id: "k2Jd9W",
+        description: "Status text for a shared connection the developer has disabled"
+      }
+    ) }) : /* @__PURE__ */ jsx(DisabledForOrganizationStatus, {});
+  }
+  if (!account) {
+    return null;
+  }
+  return account.state === "connected" ? /* @__PURE__ */ jsx(ConnectedViaStatus, { method }) : /* @__PURE__ */ jsx(Status, { state: "warning", children: /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "Needs attention",
+      id: "pL5wGd",
+      description: "Status for a shared connection that stopped working and needs the admin to fix it"
+    }
+  ) });
+}
+function SharedConnectionAdminItem({
+  integration
+}) {
+  const [configureOpen, setConfigureOpen] = useState(false);
+  const [connectOpen, setConnectOpen] = useState(false);
+  const [disconnectOpen, setDisconnectOpen] = useState(false);
+  const { capabilities, configuration } = integration;
+  const account = integration.connected_accounts[0];
+  const authMethods = integration.authMethods ?? [];
+  const method = account?.auth_method ?? (authMethods.includes("oauth") && configuration.configured ? "oauth" : authMethods.includes("client_credentials") ? "client_credentials" : authMethods.includes("api_key") ? "api_key" : "oauth");
+  const needsAttention = account !== void 0 && account.state !== "connected";
+  const showConnect = account ? method === "oauth" ? capabilities.canReauthorize : capabilities.canUpdateCredentials : capabilities.canConnect;
+  const showDisconnect = account !== void 0 && capabilities.canDisconnect;
+  const connectLabel = !account ? /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "Connect",
+      id: "quvdFp",
+      description: "Button to connect an integration"
+    }
+  ) : method === "api_key" ? needsAttention ? /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "Update API key",
+      id: "E7pMj/",
+      description: "Menu option to update the API key for a needs-reauthorization installation"
+    }
+  ) : /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "Rotate API key",
+      id: "kR7pQz",
+      description: "Menu option to rotate an organization-owned API key"
+    }
+  ) : method === "client_credentials" ? /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "Update client credentials",
+      id: "vB8dLq",
+      description: "Menu option to update an organization-owned integration's client credentials"
+    }
+  ) : /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "Reauthorize",
+      id: "0E29F1",
+      description: "Menu option to reauthorize an integration",
+      trailingSpace: true
+    }
+  );
+  const actions = [];
+  if (showConnect) {
+    actions.push({
+      key: "connect",
+      label: connectLabel,
+      onSelect: () => setConnectOpen(true),
+      promoted: !account || needsAttention,
+      external: method === "oauth"
+    });
+  }
+  if (capabilities.canConfigure) {
+    actions.push({
+      key: "configure",
+      label: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Configure",
+          id: "ADidi3",
+          description: "Button to configure organization credentials"
+        }
+      ),
+      onSelect: () => setConfigureOpen(true),
+      promoted: !account && !showConnect && configuration.enabled
+    });
+  }
+  if (showDisconnect) {
+    actions.push({
+      key: "disconnect",
+      label: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Disconnect",
+          id: "vMVXQh",
+          description: "Button to disconnect an account"
+        }
+      ),
+      onSelect: () => setDisconnectOpen(true),
+      destructive: true
+    });
+  }
+  const needsOrganizationCredentials = configuration.enabled && !account && configuration.credentials.credentialsType === "organization" && !configuration.configured;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    configureOpen && /* @__PURE__ */ jsx(
+      OrgCredentialsDialog,
+      {
+        integration: toConfigurableIntegration(integration),
+        owner: "organization",
+        open: configureOpen,
+        onOpenChange: setConfigureOpen
+      }
+    ),
+    method === "api_key" ? connectOpen && /* @__PURE__ */ jsx(
+      ApiKeyDialog,
+      {
+        integration,
+        installation: account,
+        owner: "organization",
+        open: connectOpen,
+        onOpenChange: setConnectOpen
+      }
+    ) : method === "client_credentials" ? connectOpen && /* @__PURE__ */ jsx(
+      ClientCredentialsDialog,
+      {
+        integration,
+        installation: account,
+        fields: getUnpinnedInstallationFields(integration),
+        owner: "organization",
+        open: connectOpen,
+        onOpenChange: setConnectOpen
+      }
+    ) : /* @__PURE__ */ jsx(
+      ConnectDialog,
+      {
+        integration,
+        fields: getUnpinnedInstallationFields(integration),
+        owner: "organization",
+        open: connectOpen,
+        onOpenChange: setConnectOpen
+      }
+    ),
+    account && /* @__PURE__ */ jsx(
+      DisconnectSharedConnectionDialog,
+      {
+        integrationName: integration.name,
+        installationId: account.id,
+        open: disconnectOpen,
+        onOpenChange: setDisconnectOpen
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AdminRow,
+      {
+        integration,
+        status: /* @__PURE__ */ jsx(
+          SharedConnectionAdminStatus,
+          {
+            integration,
+            method
+          }
+        ),
+        description: needsOrganizationCredentials ? /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Enter your organization's OAuth client to make this connectable.",
+            id: "rQ8mVz",
+            description: "Second line of a shared connection row whose organization OAuth credentials have not been entered yet"
+          }
+        ) : integration.description,
+        dimmed: !configuration.enabled,
+        actions
+      }
+    )
+  ] });
+}
+function ProviderSettingsItem({
+  integration
+}) {
+  const [configureOpen, setConfigureOpen] = useState(false);
+  const available = isIntegrationAvailable(integration);
+  const dimmed = !integration.enabled;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    configureOpen && /* @__PURE__ */ jsx(
+      OrgCredentialsDialog,
+      {
+        integration,
+        open: configureOpen,
+        onOpenChange: setConfigureOpen
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AdminRow,
+      {
+        integration,
+        status: !integration.enabled ? /* @__PURE__ */ jsx(DisabledForOrganizationStatus, {}) : !available ? /* @__PURE__ */ jsx(Status, { state: "neutral", children: /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Not configured",
+            id: "gV7bXe",
+            description: "Status for a provider whose organization credentials have not been entered yet"
+          }
+        ) }) : null,
+        dimmed,
+        actions: [
+          {
+            key: "configure",
+            label: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Configure",
+                id: "ADidi3",
+                description: "Button to configure organization credentials"
+              }
+            ),
+            onSelect: () => setConfigureOpen(true),
+            promoted: true
+          }
+        ]
+      }
+    )
+  ] });
+}
 function isIntegrationAvailable(integration) {
   if (!(integration.authMethods ?? ["oauth"]).includes("oauth")) {
     return integration.enabled;
@@ -643,7 +1134,12 @@ const PipesAdmin = ({
   integrations,
   ...domProps
 }) => {
-  return /* @__PURE__ */ jsx(CardList.Root, { ...getWidgetRootDomProps("resolved", domProps), children: integrations.map((integration) => {
+  return /* @__PURE__ */ jsx(CardList.Root, { ...getWidgetRootDomProps("resolved", domProps), children: /* @__PURE__ */ jsx(PipesAdminItems, { integrations }) });
+};
+function PipesAdminItems({
+  integrations
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: integrations.map((integration) => {
     const available = isIntegrationAvailable(integration);
     return /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
       /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
@@ -670,12 +1166,91 @@ const PipesAdmin = ({
       ] })
     ] }) }, integration.id);
   }) });
-};
-const PipesAdminLoading = ({
-  count,
+}
+const PipesAdminSections = ({
+  integrations,
+  sharedIntegrations,
+  isSharedLoading,
+  organizationName,
   ...domProps
 }) => {
-  return /* @__PURE__ */ jsx(CardList.Root, { ...getWidgetRootDomProps("loading", domProps), children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      gap: "5",
+      ...getWidgetRootDomProps("resolved", domProps),
+      children: [
+        (isSharedLoading || sharedIntegrations.length > 0) && /* @__PURE__ */ jsx(
+          PipesSection,
+          {
+            title: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Shared connections",
+                id: "Fcd-bK",
+                description: "Heading for the section listing connections the organization owns"
+              }
+            ),
+            description: organizationName ? /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Accounts {organizationName} owns and shares with everyone.",
+                id: "7U8P0v",
+                description: "Description of the shared connections section, naming the organization",
+                values: { organizationName }
+              }
+            ) : /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Accounts your organization owns and shares with everyone.",
+                id: "72FEZi",
+                description: "Description of the shared connections section when the organization name is unknown"
+              }
+            ),
+            children: /* @__PURE__ */ jsx(CardList.Root, { children: isSharedLoading ? /* @__PURE__ */ jsx(PipesAdminSkeletonItems, { count: 2 }) : sharedIntegrations.map((integration) => /* @__PURE__ */ jsx(
+              SharedConnectionAdminItem,
+              {
+                integration
+              },
+              integration.id
+            )) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PipesSection,
+          {
+            title: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Provider settings",
+                id: "Zq7Lr3",
+                description: "Heading for the section of provider settings governing members' own connections"
+              }
+            ),
+            description: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "What members of this organization can connect to, and with which scopes.",
+                id: "c3Vb8N",
+                description: "Description of the provider settings section"
+              }
+            ),
+            children: /* @__PURE__ */ jsx(CardList.Root, { children: integrations.length > 0 ? integrations.map((integration) => /* @__PURE__ */ jsx(
+              ProviderSettingsItem,
+              {
+                integration
+              },
+              integration.id
+            )) : /* @__PURE__ */ jsx(PipesEmptyItem, { isFiltered: false }) })
+          }
+        )
+      ]
+    }
+  );
+};
+function PipesAdminSkeletonItems({ count }) {
+  return Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
     /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
       /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(IconPanel, { children: /* @__PURE__ */ jsx(ProviderIcon, { provider: "google", size: "2" }) }) }),
       /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", children: /* @__PURE__ */ jsx(
@@ -695,7 +1270,13 @@ const PipesAdminLoading = ({
         description: "Button to configure organization credentials"
       }
     ) }) })
-  ] }) }, index)) });
+  ] }) }, index));
+}
+const PipesAdminLoading = ({
+  count,
+  ...domProps
+}) => {
+  return /* @__PURE__ */ jsx(CardList.Root, { ...getWidgetRootDomProps("loading", domProps), children: /* @__PURE__ */ jsx(PipesAdminSkeletonItems, { count }) });
 };
 const PipesAdminError = ({
   error,
@@ -707,6 +1288,8 @@ export {
   PipesAdmin,
   PipesAdminError,
   PipesAdminLoading,
-  useManageableIntegrations
+  PipesAdminSections,
+  useManageableIntegrations,
+  useOrganizationOwnedIntegrations
 };
 //# sourceMappingURL=pipes-admin.js.map