@workos-inc/widgets 1.18.0-next.1788904392369 → 1.18.0

package/CHANGELOG.md

@@ -1,9 +1,11 @@
 # Changelog
 
-## 1.18.0-next.1788904392369
+## 1.18.0
 
 ### Minor Changes
 
+- Add an opt-in `enableSharedConnections` prop to `<PipesAdmin>`, which splits the widget into a "Shared connections" section of the accounts the organization owns and shares with everyone (with configure, connect, reauthorize and disconnect actions as the server allows), followed by the existing "Provider settings" list. Omitting the prop leaves the existing unsectioned list and its requests unchanged.
+
 - Add an opt-in `enableSharedConnections` prop to `<Pipes>`, which splits the widget into a read-only section of the connections the organization owns and shares with everyone, followed by the member's own connections. Omitting the prop leaves the existing unsectioned list and its requests unchanged.
 
   An empty list now says which kind of empty it is, in both the sectioned and the unsectioned widget: "No integrations are available yet." when the endpoint returned nothing, and "No integrations to show." when `filter` matched nothing. The shared section is still omitted outright when the organization shares nothing.

package/dist/cjs/lib/pipes-admin.cjs

@@ -32,7 +32,9 @@ __export(pipes_admin_exports, {
   PipesAdmin: () => PipesAdmin,
   PipesAdminError: () => PipesAdminError,
   PipesAdminLoading: () => PipesAdminLoading,
-  useManageableIntegrations: () => useManageableIntegrations
+  PipesAdminSections: () => PipesAdminSections,
+  useManageableIntegrations: () => useManageableIntegrations,
+  useOrganizationOwnedIntegrations: () => useOrganizationOwnedIntegrations
 });
 module.exports = __toCommonJS(pipes_admin_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -50,6 +52,7 @@ var import_status = require("./status.js");
 var import_endpoint = require("../api/endpoint.js");
 var import_react_query = require("@tanstack/react-query");
 var import_generic_error = require("./generic-error.js");
+var import_pipes = require("./pipes.js");
 var import_use_permissions = require("./use-permissions.js");
 var import_utils = require("./utils.js");
 var import_translation = require("./i18n/translation.js");
@@ -74,12 +77,42 @@ function RedirectUriField({ value }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_copy_text.CopyText, { value, label: copyLabel })
   ] });
 }
+function useUpsertConfiguration(owner, onSuccess) {
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const user = (0, import_endpoint.useUpsertDataIntegrationConfiguration)({
+    mutation: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: (0, import_endpoint.getListDataIntegrationConfigurationsQueryKey)()
+        });
+        queryClient.invalidateQueries({
+          queryKey: (0, import_endpoint.getMyDataIntegrationsQueryKey)()
+        });
+        onSuccess();
+      }
+    }
+  });
+  const organization = (0, import_endpoint.useUpsertOrganizationDataIntegrationConfiguration)({
+    mutation: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: (0, import_endpoint.getOrganizationDataIntegrationsQueryKey)()
+        });
+        queryClient.invalidateQueries({
+          queryKey: (0, import_endpoint.getSharedDataConnectionsQueryKey)()
+        });
+        onSuccess();
+      }
+    }
+  });
+  return owner === "organization" ? organization : user;
+}
 function OrgCredentialsDialog({
   integration,
   open,
-  onOpenChange
+  onOpenChange,
+  owner = "user"
 }) {
-  const queryClient = (0, import_react_query.useQueryClient)();
   const credentials = integration.credentials;
   const hasCredentials = credentials.hasCredentials;
   const isOrgCredentials = credentials.credentialsType === "organization";
@@ -113,19 +146,7 @@ function OrgCredentialsDialog({
     mutate: upsertOverride,
     error,
     isPending
-  } = (0, import_endpoint.useUpsertDataIntegrationConfiguration)({
-    mutation: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({
-          queryKey: (0, import_endpoint.getListDataIntegrationConfigurationsQueryKey)()
-        });
-        queryClient.invalidateQueries({
-          queryKey: (0, import_endpoint.getMyDataIntegrationsQueryKey)()
-        });
-        onOpenChange(false);
-      }
-    }
-  });
+  } = useUpsertConfiguration(owner, () => onOpenChange(false));
   const translate = (0, import_use_translation.useTranslation)();
   const defaultScopes = integration.defaultScopes;
   const effectiveScopes = integration.scopes ?? [];
@@ -645,6 +666,459 @@ function useManageableIntegrations() {
     error: null
   };
 }
+function useOrganizationOwnedIntegrations() {
+  const permission = (0, import_use_permissions.usePermissions)("widgets:pipes:manage");
+  const organization = (0, import_endpoint.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 = (0, import_react_query.useQueryClient)();
+  const {
+    mutate: deleteInstallation,
+    error,
+    reset,
+    isPending
+  } = (0, import_endpoint.useDeleteOrganizationDataInstallation)({
+    mutation: {
+      onSuccess: () => {
+        onOpenChange(false);
+        queryClient.invalidateQueries({
+          queryKey: (0, import_endpoint.getOrganizationDataIntegrationsQueryKey)()
+        });
+        queryClient.invalidateQueries({
+          queryKey: (0, import_endpoint.getSharedDataConnectionsQueryKey)()
+        });
+      }
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    if (open) {
+      reset();
+    }
+  }, [open, reset]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.AlertDialog.Content, { style: { width: "80vw", maxWidth: "520px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
+      {
+        defaultMessage: "Disconnect shared connection",
+        id: "Xy5Xq1",
+        description: "Dialog title for disconnecting an organization-owned connection"
+      }
+    ) }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Root, { my: "5", color: "red", role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Text, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.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__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Description, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.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__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "span", weight: "bold", children: integrationName })
+        }
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "3", justify: "end", mt: "5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Cancel",
+          id: "hHNj31",
+          description: "Cancel button text"
+        }
+      ) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_elements.Button,
+        {
+          variant: "destructive",
+          disabled: isPending,
+          loading: isPending,
+          onClick: () => deleteInstallation({ installationId }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Disconnect",
+              id: "vMVXQh",
+              description: "Button to disconnect an account"
+            }
+          )
+        }
+      )
+    ] })
+  ] }) });
+}
+function AdminRow({
+  integration,
+  status,
+  description = integration.description,
+  dimmed = false,
+  actions
+}) {
+  const translate = (0, import_use_translation.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__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "row", justify: "between", align: "center", gap: "4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", align: "center", style: dimmed ? { opacity: 0.6 } : {}, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { color: "panel", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_data_integration_icon.DataIntegrationIcon, { integration, size: "2" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { align: "center", gap: "2", wrap: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", weight: "bold", color: dimmed ? "gray" : void 0, children: integration.name }),
+          status
+        ] }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", children: description })
+      ] })
+    ] }),
+    (promoted || overflow.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { align: "center", gap: "2", flexShrink: "0", children: [
+      promoted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_elements.Button,
+        {
+          variant: promoted.destructive ? "destructive" : "secondary",
+          onClick: promoted.onSelect,
+          children: promoted.label
+        }
+      ),
+      overflow.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.DropdownMenu.Root, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.IconButton, { title: actionsTitle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.DotsHorizontalIcon, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DropdownMenu.Content, { align: "end", children: overflow.map((action) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_elements.DropdownMenu.Item,
+          {
+            variant: action.destructive ? "destructive" : void 0,
+            onClick: action.onSelect,
+            children: action.external ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_themes.Flex,
+              {
+                gap: "4",
+                width: "100%",
+                justify: "between",
+                align: "center",
+                children: [
+                  action.label,
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.ExternalLinkIcon, { "aria-hidden": true })
+                ]
+              }
+            ) : action.label
+          },
+          action.key
+        )) })
+      ] })
+    ] })
+  ] }) });
+}
+function ConnectedViaStatus({
+  method
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_status.Status, { state: "success", children: method === "api_key" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "Connected via API key",
+      id: "jQLTNe",
+      description: "Status text for a connection established with an API key"
+    }
+  ) : method === "client_credentials" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "Connected via client credentials",
+      id: "hQKIrx",
+      description: "Status text for a connection established with client credentials"
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "Connected via OAuth",
+      id: "pJcK_M",
+      description: "Status text for a connection established with OAuth"
+    }
+  ) });
+}
+function DisabledForOrganizationStatus() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_status.Status, { state: "neutral", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.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__ */ (0, import_jsx_runtime.jsx)(import_status.Status, { state: "neutral", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
+      {
+        defaultMessage: "Disabled by developer",
+        id: "k2Jd9W",
+        description: "Status text for a shared connection the developer has disabled"
+      }
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DisabledForOrganizationStatus, {});
+  }
+  if (!account) {
+    return null;
+  }
+  return account.state === "connected" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectedViaStatus, { method }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_status.Status, { state: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.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] = (0, import_react.useState)(false);
+  const [connectOpen, setConnectOpen] = (0, import_react.useState)(false);
+  const [disconnectOpen, setDisconnectOpen] = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "Connect",
+      id: "quvdFp",
+      description: "Button to connect an integration"
+    }
+  ) : method === "api_key" ? needsAttention ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "Update API key",
+      id: "E7pMj/",
+      description: "Menu option to update the API key for a needs-reauthorization installation"
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "Rotate API key",
+      id: "kR7pQz",
+      description: "Menu option to rotate an organization-owned API key"
+    }
+  ) : method === "client_credentials" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "Update client credentials",
+      id: "vB8dLq",
+      description: "Menu option to update an organization-owned integration's client credentials"
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.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__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.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__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    configureOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      OrgCredentialsDialog,
+      {
+        integration: toConfigurableIntegration(integration),
+        owner: "organization",
+        open: configureOpen,
+        onOpenChange: setConfigureOpen
+      }
+    ),
+    method === "api_key" ? connectOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_pipes.ApiKeyDialog,
+      {
+        integration,
+        installation: account,
+        owner: "organization",
+        open: connectOpen,
+        onOpenChange: setConnectOpen
+      }
+    ) : method === "client_credentials" ? connectOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_pipes.ClientCredentialsDialog,
+      {
+        integration,
+        installation: account,
+        fields: (0, import_pipes.getUnpinnedInstallationFields)(integration),
+        owner: "organization",
+        open: connectOpen,
+        onOpenChange: setConnectOpen
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_pipes.ConnectDialog,
+      {
+        integration,
+        fields: (0, import_pipes.getUnpinnedInstallationFields)(integration),
+        owner: "organization",
+        open: connectOpen,
+        onOpenChange: setConnectOpen
+      }
+    ),
+    account && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DisconnectSharedConnectionDialog,
+      {
+        integrationName: integration.name,
+        installationId: account.id,
+        open: disconnectOpen,
+        onOpenChange: setDisconnectOpen
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      AdminRow,
+      {
+        integration,
+        status: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          SharedConnectionAdminStatus,
+          {
+            integration,
+            method
+          }
+        ),
+        description: needsOrganizationCredentials ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_translation.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] = (0, import_react.useState)(false);
+  const available = isIntegrationAvailable(integration);
+  const dimmed = !integration.enabled;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    configureOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      OrgCredentialsDialog,
+      {
+        integration,
+        open: configureOpen,
+        onOpenChange: setConfigureOpen
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      AdminRow,
+      {
+        integration,
+        status: !integration.enabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DisabledForOrganizationStatus, {}) : !available ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_status.Status, { state: "neutral", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_translation.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__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.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;
@@ -667,7 +1141,12 @@ const PipesAdmin = ({
   integrations,
   ...domProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { ...getWidgetRootDomProps("resolved", domProps), children: integrations.map((integration) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { ...getWidgetRootDomProps("resolved", domProps), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipesAdminItems, { integrations }) });
+};
+function PipesAdminItems({
+  integrations
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: integrations.map((integration) => {
     const available = isIntegrationAvailable(integration);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", align: "center", children: [
@@ -694,12 +1173,91 @@ const PipesAdmin = ({
       ] })
     ] }) }, integration.id);
   }) });
-};
-const PipesAdminLoading = ({
-  count,
+}
+const PipesAdminSections = ({
+  integrations,
+  sharedIntegrations,
+  isSharedLoading,
+  organizationName,
   ...domProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { ...getWidgetRootDomProps("loading", domProps), children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_themes.Flex,
+    {
+      direction: "column",
+      gap: "5",
+      ...getWidgetRootDomProps("resolved", domProps),
+      children: [
+        (isSharedLoading || sharedIntegrations.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_pipes.PipesSection,
+          {
+            title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Shared connections",
+                id: "Fcd-bK",
+                description: "Heading for the section listing connections the organization owns"
+              }
+            ),
+            description: organizationName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Accounts {organizationName} owns and shares with everyone.",
+                id: "7U8P0v",
+                description: "Description of the shared connections section, naming the organization",
+                values: { organizationName }
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.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__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { children: isSharedLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipesAdminSkeletonItems, { count: 2 }) : sharedIntegrations.map((integration) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              SharedConnectionAdminItem,
+              {
+                integration
+              },
+              integration.id
+            )) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_pipes.PipesSection,
+          {
+            title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Provider settings",
+                id: "Zq7Lr3",
+                description: "Heading for the section of provider settings governing members' own connections"
+              }
+            ),
+            description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.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__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { children: integrations.length > 0 ? integrations.map((integration) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              ProviderSettingsItem,
+              {
+                integration
+              },
+              integration.id
+            )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pipes.PipesEmptyItem, { isFiltered: false }) })
+          }
+        )
+      ]
+    }
+  );
+};
+function PipesAdminSkeletonItems({ count }) {
+  return Array.from({ length: count }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", align: "center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_provider_icon.ProviderIcon, { provider: "google", size: "2" }) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", weight: "bold", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -719,7 +1277,13 @@ const PipesAdminLoading = ({
         description: "Button to configure organization credentials"
       }
     ) }) })
-  ] }) }, index)) });
+  ] }) }, index));
+}
+const PipesAdminLoading = ({
+  count,
+  ...domProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { ...getWidgetRootDomProps("loading", domProps), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipesAdminSkeletonItems, { count }) });
 };
 const PipesAdminError = ({
   error,
@@ -732,6 +1296,8 @@ const PipesAdminError = ({
   PipesAdmin,
   PipesAdminError,
   PipesAdminLoading,
-  useManageableIntegrations
+  PipesAdminSections,
+  useManageableIntegrations,
+  useOrganizationOwnedIntegrations
 });
 //# sourceMappingURL=pipes-admin.cjs.map