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

package/dist/cjs/lib/pipes.cjs

@@ -29,9 +29,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var pipes_exports = {};
 __export(pipes_exports, {
+  ApiKeyDialog: () => ApiKeyDialog,
+  ClientCredentialsDialog: () => ClientCredentialsDialog,
+  ConnectDialog: () => ConnectDialog,
   Pipes: () => Pipes,
+  PipesEmptyItem: () => PipesEmptyItem,
   PipesError: () => PipesError,
-  PipesLoading: () => PipesLoading
+  PipesLoading: () => PipesLoading,
+  PipesSection: () => PipesSection,
+  PipesSections: () => PipesSections,
+  getUnpinnedInstallationFields: () => getUnpinnedInstallationFields,
+  useOpenDataIntegrationAuthorizeUrl: () => useOpenDataIntegrationAuthorizeUrl
 });
 module.exports = __toCommonJS(pipes_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -59,8 +67,16 @@ const CONNECT_AUTH_METHODS = [
   "client_credentials",
   "api_key"
 ];
-const useOpenDataIntegrationAuthorizeUrl = (integration) => {
+const useAuthorizeConnection = (owner) => {
   const authorizeDataIntegration = (0, import_endpoint.useAuthorizeDataIntegrationHook)();
+  const authorizeOrganizationDataIntegration = (0, import_endpoint.useAuthorizeOrganizationDataIntegrationHook)();
+  return (0, import_react.useCallback)(
+    (slug, config) => owner === "organization" ? authorizeOrganizationDataIntegration(slug, { config }) : authorizeDataIntegration(slug, { requireHandoff: true, config }),
+    [owner, authorizeDataIntegration, authorizeOrganizationDataIntegration]
+  );
+};
+const useOpenDataIntegrationAuthorizeUrl = (integration, owner = "user") => {
+  const authorizeDataIntegration = useAuthorizeConnection(owner);
   const settings = (0, import_endpoint.useSettings)();
   const baseUrl = settings.data?.authkitOrigin ?? "";
   const intervalRef = (0, import_react.useRef)(
@@ -95,10 +111,10 @@ const useOpenDataIntegrationAuthorizeUrl = (integration) => {
       }
       let authorization;
       try {
-        authorization = await authorizeDataIntegration(integration.slug, {
-          requireHandoff: true,
+        authorization = await authorizeDataIntegration(
+          integration.slug,
           config
-        });
+        );
       } catch (error) {
         win.close();
         throw error;
@@ -410,14 +426,15 @@ function ConnectDialog({
   integration,
   fields,
   open,
-  onOpenChange
+  onOpenChange,
+  owner = "user"
 }) {
   const initialStep = fields.length > 0 ? "fields" : "review";
   const [step, setStep] = (0, import_react.useState)(initialStep);
   const [submitError, setSubmitError] = (0, import_react.useState)(null);
   const [isSubmitting, setIsSubmitting] = (0, import_react.useState)(false);
   const configForm = useConfigFieldsForm(fields);
-  const eventHandler = useOpenDataIntegrationAuthorizeUrl(integration);
+  const eventHandler = useOpenDataIntegrationAuthorizeUrl(integration, owner);
   const translate = (0, import_use_translation.useTranslation)();
   const genericConnectError = translate({
     defaultMessage: "We couldn't start the connection. Please try again.",
@@ -577,13 +594,31 @@ function ConnectIntegrationButton({
   ] });
 }
 const API_KEY_REDACTED_PREFIX = "\u2022\u2022\u2022\u2022";
+function useInvalidateConnections(owner) {
+  const queryClient = (0, import_react_query.useQueryClient)();
+  return (0, import_react.useCallback)(() => {
+    if (owner === "organization") {
+      queryClient.invalidateQueries({
+        queryKey: (0, import_endpoint.getOrganizationDataIntegrationsQueryKey)()
+      });
+      queryClient.invalidateQueries({
+        queryKey: (0, import_endpoint.getSharedDataConnectionsQueryKey)()
+      });
+    } else {
+      queryClient.invalidateQueries({
+        queryKey: (0, import_endpoint.getMyDataIntegrationsQueryKey)()
+      });
+    }
+  }, [owner, queryClient]);
+}
 function ApiKeyDialog({
   integration,
+  installation = integration.installation,
+  owner = "user",
   open,
   onOpenChange
 }) {
-  const queryClient = (0, import_react_query.useQueryClient)();
-  const installation = integration.installation;
+  const invalidateConnections = useInvalidateConnections(owner);
   const isRotation = installation?.auth_method === "api_key" && installation.state === "connected";
   const last4 = installation?.api_key_last_4;
   const maskedKey = last4 ? `${API_KEY_REDACTED_PREFIX}${last4}` : "";
@@ -594,21 +629,22 @@ function ApiKeyDialog({
     id: "MzSxEF",
     description: "Placeholder for the API key input field"
   });
+  const onUpserted = () => {
+    onOpenChange(false);
+    invalidateConnections();
+  };
+  const userUpsert = (0, import_endpoint.useUpsertDataIntegrationApiKey)({
+    mutation: { onSuccess: onUpserted }
+  });
+  const organizationUpsert = (0, import_endpoint.useUpsertOrganizationDataIntegrationApiKey)({
+    mutation: { onSuccess: onUpserted }
+  });
   const {
     mutate: upsertApiKey,
     error,
     reset,
     isPending
-  } = (0, import_endpoint.useUpsertDataIntegrationApiKey)({
-    mutation: {
-      onSuccess: () => {
-        onOpenChange(false);
-        queryClient.invalidateQueries({
-          queryKey: (0, import_endpoint.getMyDataIntegrationsQueryKey)()
-        });
-      }
-    }
-  });
+  } = owner === "organization" ? organizationUpsert : userUpsert;
   (0, import_react.useEffect)(() => {
     reset();
   }, [reset]);
@@ -749,12 +785,13 @@ function ApiKeyConnectButton({
 }
 function ClientCredentialsDialog({
   integration,
+  installation = integration.installation,
+  owner = "user",
   fields,
   open,
   onOpenChange
 }) {
-  const queryClient = (0, import_react_query.useQueryClient)();
-  const installation = integration.installation;
+  const invalidateConnections = useInvalidateConnections(owner);
   const isUpdate = installation?.auth_method === "client_credentials";
   const storedConfig = (0, import_react.useMemo)(
     () => isUpdate ? installation?.config ?? {} : {},
@@ -784,20 +821,21 @@ function ClientCredentialsDialog({
     description: "Placeholder for the client credentials client secret input"
   });
   const secretMissing = !clientSecret.trim() || (0, import_redacted_secret.isRedactedSecret)(clientSecret);
+  const onUpserted = () => {
+    onOpenChange(false);
+    invalidateConnections();
+  };
+  const userUpsert = (0, import_endpoint.useUpsertDataIntegrationClientCredentials)({
+    mutation: { onSuccess: onUpserted }
+  });
+  const organizationUpsert = (0, import_endpoint.useUpsertOrganizationDataIntegrationClientCredentials)({
+    mutation: { onSuccess: onUpserted }
+  });
   const {
     mutate: upsertClientCredentials,
     error,
     isPending
-  } = (0, import_endpoint.useUpsertDataIntegrationClientCredentials)({
-    mutation: {
-      onSuccess: () => {
-        onOpenChange(false);
-        queryClient.invalidateQueries({
-          queryKey: (0, import_endpoint.getMyDataIntegrationsQueryKey)()
-        });
-      }
-    }
-  });
+  } = owner === "organization" ? organizationUpsert : userUpsert;
   const errorMessage = error instanceof import_errors.ApiError && error.message ? error.message : null;
   const handleSubmit = () => {
     if (!configForm.validate()) {
@@ -1371,8 +1409,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 +1430,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 }) });
@@ -1416,8 +1847,16 @@ function getWidgetRootDomProps(state, domProps) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ApiKeyDialog,
+  ClientCredentialsDialog,
+  ConnectDialog,
   Pipes,
+  PipesEmptyItem,
   PipesError,
-  PipesLoading
+  PipesLoading,
+  PipesSection,
+  PipesSections,
+  getUnpinnedInstallationFields,
+  useOpenDataIntegrationAuthorizeUrl
 });
 //# sourceMappingURL=pipes.cjs.map