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

package/dist/esm/lib/pipes.js

@@ -1358,8 +1358,8 @@ function DisconnectAccountDialog({
     ] })
   ] }) });
 }
-const PipesLoading = ({ count, ...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: [
+function PipesSkeletonItems({ 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(
@@ -1379,16 +1379,409 @@ const PipesLoading = ({ count, ...domProps }) => {
         description: "Placeholder button text for loading state"
       }
     ) }) })
-  ] }) }, index)) });
+  ] }) }, index));
+}
+const PipesLoading = ({ count, ...domProps }) => {
+  return /* @__PURE__ */ jsx(CardList.Root, { ...getWidgetRootDomProps("loading", domProps), children: /* @__PURE__ */ jsx(PipesSkeletonItems, { count }) });
 };
-const Pipes = ({ integrations, ...domProps }) => {
-  return /* @__PURE__ */ jsx(CardList.Root, { ...getWidgetRootDomProps("resolved", domProps), children: integrations.map((integration) => /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
+function PipesItems({ integrations }) {
+  return integrations.map((integration) => /* @__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(IconPanel, { color: "panel", children: /* @__PURE__ */ jsx(DataIntegrationIcon, { integration, size: "2" }) }),
       /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", children: integration.name })
     ] }),
     /* @__PURE__ */ jsx(ProviderStatus, { integration })
-  ] }) }, integration.id)) });
+  ] }) }, integration.id));
+}
+function PipesEmptyItem({ isFiltered }) {
+  return /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: isFiltered ? /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "No integrations to show.",
+      id: "cAs7JC",
+      description: "Empty state shown when the host's filter leaves no integrations to list"
+    }
+  ) : /* @__PURE__ */ jsx(
+    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__ */ jsx(CardList.Root, { ...getWidgetRootDomProps("resolved", domProps), children: integrations.length > 0 ? /* @__PURE__ */ jsx(PipesItems, { integrations }) : /* @__PURE__ */ jsx(PipesEmptyItem, { isFiltered: hasUnfilteredIntegrations ?? false }) });
+};
+function SharedConnectionStatus({
+  connection
+}) {
+  const isAvailable = connection.connected_accounts.some(
+    (account) => account.availability === "available"
+  );
+  return isAvailable ? /* @__PURE__ */ jsx(Status, { state: "success", children: /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "Available",
+      id: "_jQjSu",
+      description: "Status text for a shared connection the member can use"
+    }
+  ) }) : /* @__PURE__ */ jsx(Status, { state: "warning", children: /* @__PURE__ */ jsx(
+    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__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", gap: "4", children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
+      /* @__PURE__ */ jsx(IconPanel, { color: "panel", children: icon }),
+      /* @__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", children: name }),
+          status
+        ] }),
+        description && /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: description })
+      ] })
+    ] }),
+    actions
+  ] }) });
+}
+function SharedConnectionItem({
+  connection
+}) {
+  return /* @__PURE__ */ jsx(
+    SectionedItem,
+    {
+      icon: /* @__PURE__ */ jsx(
+        DataIntegrationIcon,
+        {
+          integration: {
+            integrationType: connection.slug,
+            iconSlug: connection.iconSlug,
+            iconUrl: connection.iconUrl,
+            iconDarkUrl: connection.iconDarkUrl
+          },
+          size: "2"
+        }
+      ),
+      name: connection.name,
+      status: /* @__PURE__ */ jsx(SharedConnectionStatus, { connection }),
+      description: connection.description
+    }
+  );
+}
+function MemberConnectionStatus({
+  integration
+}) {
+  const installation = integration.installation;
+  if (!installation) {
+    return null;
+  }
+  if (installation.state === "connected") {
+    return /* @__PURE__ */ jsx(Status, { state: "success", children: installation.auth_method === "api_key" ? /* @__PURE__ */ jsx(
+      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__ */ 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"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Status, { state: "warning", children: installation.auth_method === "api_key" ? /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "Update your API key",
+      id: "-YLPTk",
+      description: "Status text for a connection whose API key stopped working"
+    }
+  ) : /* @__PURE__ */ jsx(
+    Translation,
+    {
+      defaultMessage: "Requires reauthorization",
+      id: "dqczQS",
+      description: "Status text for integration needing reauthorization"
+    }
+  ) });
+}
+function MemberConnectionActions({
+  integration
+}) {
+  const [disconnectOpen, setDisconnectOpen] = useState(false);
+  const [apiKeyOpen, setApiKeyOpen] = useState(false);
+  const [clientCredentialsOpen, setClientCredentialsOpen] = useState(false);
+  const [reauthConfigOpen, setReauthConfigOpen] = useState(false);
+  const authorizeEventHandler = useOpenDataIntegrationAuthorizeUrl(integration);
+  const translate = 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__ */ jsx(MultiMethodConnectButton, { integration, methods }) : methods.length === 1 && methods[0] === "api_key" ? /* @__PURE__ */ jsx(ApiKeyConnectButton, { integration }) : methods.length === 1 && methods[0] === "client_credentials" ? /* @__PURE__ */ jsx(ClientCredentialsConnectButton, { integration }) : /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      DisconnectAccountDialog,
+      {
+        integrationName: integration.name,
+        installationId: integration.installation.id,
+        open: disconnectOpen,
+        onOpenChange: setDisconnectOpen
+      }
+    ),
+    apiKeyOpen && /* @__PURE__ */ jsx(
+      ApiKeyDialog,
+      {
+        integration,
+        open: apiKeyOpen,
+        onOpenChange: setApiKeyOpen
+      }
+    ),
+    clientCredentialsOpen && /* @__PURE__ */ jsx(
+      ClientCredentialsDialog,
+      {
+        integration,
+        fields: unpinnedFields,
+        open: clientCredentialsOpen,
+        onOpenChange: setClientCredentialsOpen
+      }
+    ),
+    unpinnedFields.length > 0 && !isClientCredentialsInstallation && /* @__PURE__ */ jsx(
+      ConnectDialog,
+      {
+        integration,
+        fields: unpinnedFields,
+        open: reauthConfigOpen,
+        onOpenChange: setReauthConfigOpen
+      }
+    ),
+    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", children: [
+      !connected && (isApiKeyInstallation ? /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setApiKeyOpen(true), children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Update key",
+          id: "MP-aOE",
+          description: "Button to replace the API key of a connection that stopped working"
+        }
+      ) }) : isClientCredentialsInstallation ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: () => setClientCredentialsOpen(true),
+          children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Update credentials",
+              id: "1inB3Y",
+              description: "Button to update the client credentials of a connection that stopped working"
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: async () => {
+            if (unpinnedFields.length > 0) {
+              setReauthConfigOpen(true);
+              return;
+            }
+            try {
+              await authorizeEventHandler();
+            } catch {
+            }
+          },
+          children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Reauthorize",
+              id: "3IbiTG",
+              description: "Button to reauthorize a connection that stopped working"
+            }
+          )
+        }
+      )),
+      /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(IconButton, { title: pipeActionsTitle, children: /* @__PURE__ */ jsx(DotsHorizontalIcon, {}) }) }),
+        /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", children: [
+          connected && isApiKeyInstallation && /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick: () => setApiKeyOpen(true), children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Rotate API key",
+              id: "GML+c8",
+              description: "Menu option to rotate the API key"
+            }
+          ) }),
+          connected && isClientCredentialsInstallation && /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick: () => setClientCredentialsOpen(true), children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Update client credentials",
+              id: "daHKWE",
+              description: "Menu option to update stored client credentials"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            DropdownMenu.Item,
+            {
+              variant: "destructive",
+              onClick: () => setDisconnectOpen(true),
+              children: /* @__PURE__ */ jsx(
+                Translation,
+                {
+                  defaultMessage: "Disconnect account",
+                  id: "esZQrd",
+                  description: "Menu option to disconnect an account"
+                }
+              )
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function MemberConnectionItems({
+  integrations
+}) {
+  return integrations.map((integration) => /* @__PURE__ */ jsx(
+    SectionedItem,
+    {
+      icon: /* @__PURE__ */ jsx(DataIntegrationIcon, { integration, size: "2" }),
+      name: integration.name,
+      status: /* @__PURE__ */ jsx(MemberConnectionStatus, { integration }),
+      description: integration.description,
+      actions: /* @__PURE__ */ jsx(MemberConnectionActions, { integration })
+    },
+    integration.id
+  ));
+}
+function PipesSection({
+  title,
+  description,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
+      /* @__PURE__ */ jsx(Text, { size: "3", weight: "bold", children: title }),
+      /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: description })
+    ] }),
+    children
+  ] });
+}
+const PipesSections = ({
+  integrations,
+  hasUnfilteredIntegrations,
+  sharedConnections,
+  hasUnfilteredSharedConnections,
+  isSharedLoading,
+  organizationName,
+  ...domProps
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      gap: "5",
+      ...getWidgetRootDomProps("resolved", domProps),
+      children: [
+        (isSharedLoading || sharedConnections.length > 0 || hasUnfilteredSharedConnections) && /* @__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(PipesSkeletonItems, { count: 2 }) : sharedConnections.length > 0 ? sharedConnections.map((connection) => /* @__PURE__ */ jsx(
+              SharedConnectionItem,
+              {
+                connection
+              },
+              connection.id
+            )) : /* @__PURE__ */ jsx(PipesEmptyItem, { isFiltered: true }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PipesSection,
+          {
+            title: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Your connections",
+                id: "-VDI3G",
+                description: "Heading for the section listing the member's own connections"
+              }
+            ),
+            description: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Connect your account to access these connections.",
+                id: "ObXqUu",
+                description: "Description of the personal connections section"
+              }
+            ),
+            children: /* @__PURE__ */ jsx(CardList.Root, { children: integrations.length > 0 ? /* @__PURE__ */ jsx(MemberConnectionItems, { integrations }) : /* @__PURE__ */ jsx(PipesEmptyItem, { isFiltered: hasUnfilteredIntegrations ?? false }) })
+          }
+        )
+      ]
+    }
+  );
 };
 const PipesError = ({ error, ...domProps }) => {
   return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("error", domProps), children: /* @__PURE__ */ jsx(GenericError, { error }) });
@@ -1404,6 +1797,7 @@ function getWidgetRootDomProps(state, domProps) {
 export {
   Pipes,
   PipesError,
-  PipesLoading
+  PipesLoading,
+  PipesSections
 };
 //# sourceMappingURL=pipes.js.map