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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 1.18.0-next.1788904392369
+
+### Minor Changes
+
+- 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.
+
+  `filter` stays a single prop and keeps its existing signature — `PipesProps` is a union discriminated on `enableSharedConnections`, so only hosts that opt in see the widened predicate. With the prop on, `filter` narrows both sections: criteria narrow shared rows by `slugs` alone (their payload carries none of the provider metadata the other criteria read), and a predicate receives `DataIntegrationWithConnections | SharedDataConnection`, discriminated with `"integrationType" in connection` — both payloads carry `connected_accounts`, and `ownership` is `"organization"` on some of the member's own rows, so neither of those tells the shapes apart.
+
 ## 1.17.3
 
 ### Patch Changes

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export {\n  WorkOsWidgets,\n  type WorkOsWidgetsProps,\n} from \"./workos-widgets.client.js\";\nexport {\n  OrganizationSwitcher,\n  OrganizationSwitcherLoading,\n  type OrganizationSwitcherProps,\n} from \"./organization-switcher.client.js\";\nexport {\n  AdminPortalSsoConnection,\n  AdminPortalSsoConnectionLoading,\n  type AdminPortalSsoConnectionProps,\n} from \"./admin-portal-sso-connection.client.js\";\nexport {\n  UserProfile,\n  UserProfileLoading,\n  type UserProfileProps,\n} from \"./user-profile.client.js\";\nexport {\n  UserSecurity,\n  UserSecurityLoading,\n  type UserSecurityProps,\n} from \"./user-security.client.js\";\nexport {\n  UserSessions,\n  UserSessionsLoading,\n  type UserSessionsProps,\n} from \"./user-sessions.client.js\";\nexport {\n  UsersManagement,\n  UsersManagementLoading,\n  type UsersManagementProps,\n} from \"./users-management.client.js\";\nexport {\n  AdminPortalDomainVerification,\n  AdminPortalDomainVerificationLoading,\n  type AdminPortalDomainVerificationProps,\n} from \"./admin-portal-domain-verification.client.js\";\nexport {\n  AdminPortalAuditLogStreaming,\n  AdminPortalAuditLogStreamingLoading,\n  AdminPortalAuditLogStreamingError,\n  type AdminPortalAuditLogStreamingProps,\n  AdminPortalAuditLogStreamingPresentational,\n  AdminPortalAuditLogStreamingButton as AdminPortalAuditLogStreamingOpenButton,\n  type AdminPortalAuditLogStreamingStatusProps,\n} from \"./admin-portal-audit-log-streaming.client.js\";\nexport {\n  ApiKeys,\n  ApiKeysLoading,\n  type ApiKeysProps,\n} from \"./api-keys.client.js\";\nexport {\n  Pipes,\n  PipesLoading,\n  type PipesAuthMethod,\n  type PipesFilter,\n  type PipesFilterCriteria,\n  type PipesProps,\n} from \"./pipes.client.js\";\nexport type { DataIntegration } from \"./api/endpoint.js\";\nexport {\n  PipesAdmin,\n  PipesAdminLoading,\n  type PipesAdminProps,\n} from \"./pipes-admin.client.js\";\nexport {\n  DirectorySync,\n  DirectorySyncLoading,\n  type DirectorySyncProps,\n} from \"./directory-sync.client.js\";\nexport { IntlContext as internal_IntlContext } from \"./lib/i18n/intl-context.js\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAGO;AACP,0CAIO;AACP,gDAIO;AACP,iCAIO;AACP,kCAIO;AACP,kCAIO;AACP,qCAIO;AACP,qDAIO;AACP,qDAQO;AACP,6BAIO;AACP,0BAOO;AAEP,gCAIO;AACP,mCAIO;AACP,0BAAoD;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export {\n  WorkOsWidgets,\n  type WorkOsWidgetsProps,\n} from \"./workos-widgets.client.js\";\nexport {\n  OrganizationSwitcher,\n  OrganizationSwitcherLoading,\n  type OrganizationSwitcherProps,\n} from \"./organization-switcher.client.js\";\nexport {\n  AdminPortalSsoConnection,\n  AdminPortalSsoConnectionLoading,\n  type AdminPortalSsoConnectionProps,\n} from \"./admin-portal-sso-connection.client.js\";\nexport {\n  UserProfile,\n  UserProfileLoading,\n  type UserProfileProps,\n} from \"./user-profile.client.js\";\nexport {\n  UserSecurity,\n  UserSecurityLoading,\n  type UserSecurityProps,\n} from \"./user-security.client.js\";\nexport {\n  UserSessions,\n  UserSessionsLoading,\n  type UserSessionsProps,\n} from \"./user-sessions.client.js\";\nexport {\n  UsersManagement,\n  UsersManagementLoading,\n  type UsersManagementProps,\n} from \"./users-management.client.js\";\nexport {\n  AdminPortalDomainVerification,\n  AdminPortalDomainVerificationLoading,\n  type AdminPortalDomainVerificationProps,\n} from \"./admin-portal-domain-verification.client.js\";\nexport {\n  AdminPortalAuditLogStreaming,\n  AdminPortalAuditLogStreamingLoading,\n  AdminPortalAuditLogStreamingError,\n  type AdminPortalAuditLogStreamingProps,\n  AdminPortalAuditLogStreamingPresentational,\n  AdminPortalAuditLogStreamingButton as AdminPortalAuditLogStreamingOpenButton,\n  type AdminPortalAuditLogStreamingStatusProps,\n} from \"./admin-portal-audit-log-streaming.client.js\";\nexport {\n  ApiKeys,\n  ApiKeysLoading,\n  type ApiKeysProps,\n} from \"./api-keys.client.js\";\nexport {\n  Pipes,\n  PipesLoading,\n  type PipesAuthMethod,\n  type PipesConnection,\n  type PipesConnectionFilter,\n  type PipesFilter,\n  type PipesFilterCriteria,\n  type PipesProps,\n} from \"./pipes.client.js\";\nexport type { DataIntegration, SharedDataConnection } from \"./api/endpoint.js\";\nexport {\n  PipesAdmin,\n  PipesAdminLoading,\n  type PipesAdminProps,\n} from \"./pipes-admin.client.js\";\nexport {\n  DirectorySync,\n  DirectorySyncLoading,\n  type DirectorySyncProps,\n} from \"./directory-sync.client.js\";\nexport { IntlContext as internal_IntlContext } from \"./lib/i18n/intl-context.js\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAGO;AACP,0CAIO;AACP,gDAIO;AACP,iCAIO;AACP,kCAIO;AACP,kCAIO;AACP,qCAIO;AACP,qDAIO;AACP,qDAQO;AACP,6BAIO;AACP,0BASO;AAEP,gCAIO;AACP,mCAIO;AACP,0BAAoD;","names":[]}

package/dist/cjs/index.d.cts

@@ -8,8 +8,8 @@ export { UsersManagement, UsersManagementProps } from './users-management.client
 export { AdminPortalDomainVerification, AdminPortalDomainVerificationProps } from './admin-portal-domain-verification.client.cjs';
 export { AdminPortalAuditLogStreaming, AdminPortalAuditLogStreamingProps } from './admin-portal-audit-log-streaming.client.cjs';
 export { ApiKeys, ApiKeysProps } from './api-keys.client.cjs';
-export { Pipes, PipesAuthMethod, PipesFilter, PipesFilterCriteria, PipesProps } from './pipes.client.cjs';
-export { DataIntegration } from './api/endpoint.cjs';
+export { Pipes, PipesAuthMethod, PipesConnection, PipesConnectionFilter, PipesFilter, PipesFilterCriteria, PipesProps } from './pipes.client.cjs';
+export { DataIntegration, SharedDataConnection } from './api/endpoint.cjs';
 export { PipesAdmin, PipesAdminProps } from './pipes-admin.client.cjs';
 export { DirectorySync, DirectorySyncProps } from './directory-sync.client.cjs';
 export { IntlContext as internal_IntlContext } from './lib/i18n/intl-context.cjs';

package/dist/cjs/lib/pipes.cjs

@@ -31,7 +31,8 @@ var pipes_exports = {};
 __export(pipes_exports, {
   Pipes: () => Pipes,
   PipesError: () => PipesError,
-  PipesLoading: () => PipesLoading
+  PipesLoading: () => PipesLoading,
+  PipesSections: () => PipesSections
 });
 module.exports = __toCommonJS(pipes_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -1371,8 +1372,8 @@ function DisconnectAccountDialog({
     ] })
   ] }) });
 }
-const PipesLoading = ({ count, ...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: [
+function PipesSkeletonItems({ 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)(
@@ -1392,16 +1393,409 @@ const PipesLoading = ({ count, ...domProps }) => {
         description: "Placeholder button text for loading state"
       }
     ) }) })
-  ] }) }, index)) });
+  ] }) }, index));
+}
+const PipesLoading = ({ count, ...domProps }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { ...getWidgetRootDomProps("loading", domProps), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipesSkeletonItems, { count }) });
 };
-const Pipes = ({ integrations, ...domProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { ...getWidgetRootDomProps("resolved", domProps), children: integrations.map((integration) => /* @__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: [
+function PipesItems({ integrations }) {
+  return integrations.map((integration) => /* @__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_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.jsx)(import_themes.Text, { size: "2", weight: "bold", children: integration.name })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProviderStatus, { integration })
-  ] }) }, integration.id)) });
+  ] }) }, integration.id));
+}
+function PipesEmptyItem({ isFiltered }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", children: isFiltered ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "No integrations to show.",
+      id: "cAs7JC",
+      description: "Empty state shown when the host's filter leaves no integrations to list"
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "No integrations are available yet.",
+      id: "oK0Rjh",
+      description: "Empty state shown when no integrations are enabled at all"
+    }
+  ) }) });
+}
+const Pipes = ({
+  integrations,
+  hasUnfilteredIntegrations,
+  ...domProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { ...getWidgetRootDomProps("resolved", domProps), children: integrations.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipesItems, { integrations }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipesEmptyItem, { isFiltered: hasUnfilteredIntegrations ?? false }) });
+};
+function SharedConnectionStatus({
+  connection
+}) {
+  const isAvailable = connection.connected_accounts.some(
+    (account) => account.availability === "available"
+  );
+  return isAvailable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_status.Status, { state: "success", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "Available",
+      id: "_jQjSu",
+      description: "Status text for a shared connection the member can use"
+    }
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_status.Status, { state: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "Needs admin attention",
+      id: "K5YoFj",
+      description: "Status text for a shared connection an administrator must repair"
+    }
+  ) });
+}
+function SectionedItem({
+  icon,
+  name,
+  status,
+  description,
+  actions
+}) {
+  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", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { color: "panel", children: icon }),
+      /* @__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", children: name }),
+          status
+        ] }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", children: description })
+      ] })
+    ] }),
+    actions
+  ] }) });
+}
+function SharedConnectionItem({
+  connection
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    SectionedItem,
+    {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_data_integration_icon.DataIntegrationIcon,
+        {
+          integration: {
+            integrationType: connection.slug,
+            iconSlug: connection.iconSlug,
+            iconUrl: connection.iconUrl,
+            iconDarkUrl: connection.iconDarkUrl
+          },
+          size: "2"
+        }
+      ),
+      name: connection.name,
+      status: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SharedConnectionStatus, { connection }),
+      description: connection.description
+    }
+  );
+}
+function MemberConnectionStatus({
+  integration
+}) {
+  const installation = integration.installation;
+  if (!installation) {
+    return null;
+  }
+  if (installation.state === "connected") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_status.Status, { state: "success", children: installation.auth_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"
+      }
+    ) : installation.auth_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"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_status.Status, { state: "warning", children: installation.auth_method === "api_key" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "Update your API key",
+      id: "-YLPTk",
+      description: "Status text for a connection whose API key stopped working"
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_translation.Translation,
+    {
+      defaultMessage: "Requires reauthorization",
+      id: "dqczQS",
+      description: "Status text for integration needing reauthorization"
+    }
+  ) });
+}
+function MemberConnectionActions({
+  integration
+}) {
+  const [disconnectOpen, setDisconnectOpen] = (0, import_react.useState)(false);
+  const [apiKeyOpen, setApiKeyOpen] = (0, import_react.useState)(false);
+  const [clientCredentialsOpen, setClientCredentialsOpen] = (0, import_react.useState)(false);
+  const [reauthConfigOpen, setReauthConfigOpen] = (0, import_react.useState)(false);
+  const authorizeEventHandler = useOpenDataIntegrationAuthorizeUrl(integration);
+  const translate = (0, import_use_translation.useTranslation)();
+  const pipeActionsTitle = translate({
+    defaultMessage: "Pipe actions",
+    id: "1uF9ve",
+    description: "Title for pipe actions dropdown button"
+  });
+  const unpinnedFields = getUnpinnedInstallationFields(integration);
+  if (!integration.installation) {
+    const authMethods = integration.authMethods ?? [];
+    const methods = CONNECT_AUTH_METHODS.filter(
+      (method) => authMethods.includes(method)
+    );
+    return methods.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MultiMethodConnectButton, { integration, methods }) : methods.length === 1 && methods[0] === "api_key" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ApiKeyConnectButton, { integration }) : methods.length === 1 && methods[0] === "client_credentials" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClientCredentialsConnectButton, { integration }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectIntegrationButton, { integration });
+  }
+  const connected = integration.installation.state === "connected";
+  const isApiKeyInstallation = integration.installation.auth_method === "api_key";
+  const isClientCredentialsInstallation = integration.installation.auth_method === "client_credentials";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DisconnectAccountDialog,
+      {
+        integrationName: integration.name,
+        installationId: integration.installation.id,
+        open: disconnectOpen,
+        onOpenChange: setDisconnectOpen
+      }
+    ),
+    apiKeyOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ApiKeyDialog,
+      {
+        integration,
+        open: apiKeyOpen,
+        onOpenChange: setApiKeyOpen
+      }
+    ),
+    clientCredentialsOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ClientCredentialsDialog,
+      {
+        integration,
+        fields: unpinnedFields,
+        open: clientCredentialsOpen,
+        onOpenChange: setClientCredentialsOpen
+      }
+    ),
+    unpinnedFields.length > 0 && !isClientCredentialsInstallation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ConnectDialog,
+      {
+        integration,
+        fields: unpinnedFields,
+        open: reauthConfigOpen,
+        onOpenChange: setReauthConfigOpen
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { align: "center", gap: "4", children: [
+      !connected && (isApiKeyInstallation ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", onClick: () => setApiKeyOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Update key",
+          id: "MP-aOE",
+          description: "Button to replace the API key of a connection that stopped working"
+        }
+      ) }) : isClientCredentialsInstallation ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_elements.Button,
+        {
+          variant: "secondary",
+          onClick: () => setClientCredentialsOpen(true),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Update credentials",
+              id: "1inB3Y",
+              description: "Button to update the client credentials of a connection that stopped working"
+            }
+          )
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_elements.Button,
+        {
+          variant: "secondary",
+          onClick: async () => {
+            if (unpinnedFields.length > 0) {
+              setReauthConfigOpen(true);
+              return;
+            }
+            try {
+              await authorizeEventHandler();
+            } catch {
+            }
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Reauthorize",
+              id: "3IbiTG",
+              description: "Button to reauthorize a connection that stopped working"
+            }
+          )
+        }
+      )),
+      /* @__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: pipeActionsTitle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.DotsHorizontalIcon, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.DropdownMenu.Content, { align: "end", children: [
+          connected && isApiKeyInstallation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DropdownMenu.Item, { onClick: () => setApiKeyOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Rotate API key",
+              id: "GML+c8",
+              description: "Menu option to rotate the API key"
+            }
+          ) }),
+          connected && isClientCredentialsInstallation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DropdownMenu.Item, { onClick: () => setClientCredentialsOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Update client credentials",
+              id: "daHKWE",
+              description: "Menu option to update stored client credentials"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_elements.DropdownMenu.Item,
+            {
+              variant: "destructive",
+              onClick: () => setDisconnectOpen(true),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_translation.Translation,
+                {
+                  defaultMessage: "Disconnect account",
+                  id: "esZQrd",
+                  description: "Menu option to disconnect an account"
+                }
+              )
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function MemberConnectionItems({
+  integrations
+}) {
+  return integrations.map((integration) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    SectionedItem,
+    {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_data_integration_icon.DataIntegrationIcon, { integration, size: "2" }),
+      name: integration.name,
+      status: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemberConnectionStatus, { integration }),
+      description: integration.description,
+      actions: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemberConnectionActions, { integration })
+    },
+    integration.id
+  ));
+}
+function PipesSection({
+  title,
+  description,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "3", weight: "bold", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", children: description })
+    ] }),
+    children
+  ] });
+}
+const PipesSections = ({
+  integrations,
+  hasUnfilteredIntegrations,
+  sharedConnections,
+  hasUnfilteredSharedConnections,
+  isSharedLoading,
+  organizationName,
+  ...domProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_themes.Flex,
+    {
+      direction: "column",
+      gap: "5",
+      ...getWidgetRootDomProps("resolved", domProps),
+      children: [
+        (isSharedLoading || sharedConnections.length > 0 || hasUnfilteredSharedConnections) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          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)(PipesSkeletonItems, { count: 2 }) : sharedConnections.length > 0 ? sharedConnections.map((connection) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              SharedConnectionItem,
+              {
+                connection
+              },
+              connection.id
+            )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipesEmptyItem, { isFiltered: true }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          PipesSection,
+          {
+            title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Your connections",
+                id: "-VDI3G",
+                description: "Heading for the section listing the member's own connections"
+              }
+            ),
+            description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.Translation,
+              {
+                defaultMessage: "Connect your account to access these connections.",
+                id: "ObXqUu",
+                description: "Description of the personal connections section"
+              }
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { children: integrations.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemberConnectionItems, { integrations }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipesEmptyItem, { isFiltered: hasUnfilteredIntegrations ?? false }) })
+          }
+        )
+      ]
+    }
+  );
 };
 const PipesError = ({ error, ...domProps }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", ...getWidgetRootDomProps("error", domProps), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_generic_error.GenericError, { error }) });
@@ -1418,6 +1812,7 @@ function getWidgetRootDomProps(state, domProps) {
 0 && (module.exports = {
   Pipes,
   PipesError,
-  PipesLoading
+  PipesLoading,
+  PipesSections
 });
 //# sourceMappingURL=pipes.cjs.map