@workos-inc/widgets 1.16.0-next.1785954585478 → 1.16.0

package/dist/esm/lib/pipes.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Callout, Card, Flex, Text } from "@radix-ui/themes";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import * as CardList from "./card-list.js";
 import { DataIntegrationIcon } from "./data-integration-icon.js";
 import { ProviderIcon } from "./provider-icon.js";
@@ -29,7 +29,8 @@ import {
   useAuthorizeDataIntegrationHook,
   useDeleteDataInstallation,
   useSettings,
-  useUpsertDataIntegrationApiKey
+  useUpsertDataIntegrationApiKey,
+  useUpsertDataIntegrationClientCredentials
 } from "../api/endpoint.js";
 import { useQueryClient } from "@tanstack/react-query";
 import { GenericError } from "./generic-error.js";
@@ -37,8 +38,14 @@ import { getDomProps } from "./utils.js";
 import { Translation } from "./i18n/translation.js";
 import { useTranslation } from "./i18n/use-translation.js";
 import { ApiError } from "../api/errors.js";
+import { buildRedactedSecret, isRedactedSecret } from "./redacted-secret.js";
 const HANDOFF_INTERVAL_MS = 100;
 const HANDOFF_MAX_ATTEMPTS = 100;
+const CONNECT_AUTH_METHODS = [
+  "oauth",
+  "client_credentials",
+  "api_key"
+];
 const useOpenDataIntegrationAuthorizeUrl = (integration) => {
   const authorizeDataIntegration = useAuthorizeDataIntegrationHook();
   const settings = useSettings();
@@ -127,6 +134,140 @@ function getUnpinnedInstallationFields(integration) {
     (field) => field.scope === "installation" && !integration.config?.[field.key]
   ).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 }
+function getInitialConfigValues(fields, storedConfig) {
+  const values = {};
+  for (const field of fields) {
+    const stored = storedConfig[field.key];
+    if (typeof stored === "string" || typeof stored === "number" || typeof stored === "boolean") {
+      values[field.key] = String(stored);
+    }
+  }
+  return values;
+}
+function useConfigFieldsForm(fields, initialValues = {}) {
+  const [values, setValues] = useState(initialValues);
+  const [errors, setErrors] = useState({});
+  const translate = useTranslation();
+  const requiredMessage = translate({
+    defaultMessage: "This field is required",
+    id: "B2HvfC",
+    description: "Validation error shown when a required configuration field is left empty"
+  });
+  const patternMessage = translate({
+    defaultMessage: "Enter a valid value.",
+    id: "2XWaGz",
+    description: "Validation error shown when a configuration field value does not match the expected format"
+  });
+  const setValue = (key, value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    setErrors((prev) => prev[key] ? { ...prev, [key]: null } : prev);
+  };
+  const reset = () => {
+    setValues(initialValues);
+    setErrors({});
+  };
+  const validate = () => {
+    const nextErrors = {};
+    let valid = true;
+    for (const field of fields) {
+      const value = (values[field.key] ?? "").trim();
+      if (field.required && !value) {
+        nextErrors[field.key] = requiredMessage;
+        valid = false;
+        continue;
+      }
+      if (value && field.pattern) {
+        let matches = true;
+        try {
+          matches = new RegExp(field.pattern).test(value);
+        } catch {
+          matches = true;
+        }
+        if (!matches) {
+          nextErrors[field.key] = patternMessage;
+          valid = false;
+          continue;
+        }
+      }
+      nextErrors[field.key] = null;
+    }
+    setErrors(nextErrors);
+    return valid;
+  };
+  const buildConfig = () => {
+    const config = {};
+    for (const field of fields) {
+      const value = (values[field.key] ?? "").trim();
+      if (value) {
+        config[field.key] = value;
+      }
+    }
+    return config;
+  };
+  const buildConfigPayload = (storedConfig) => {
+    const payload = { ...storedConfig };
+    for (const field of fields) {
+      const value = (values[field.key] ?? "").trim();
+      if (value) {
+        payload[field.key] = value;
+      } else {
+        delete payload[field.key];
+      }
+    }
+    return payload;
+  };
+  const hasMissingRequired = fields.some(
+    (field) => field.required && !(values[field.key] ?? "").trim()
+  );
+  const isDirty = fields.some(
+    (field) => (values[field.key] ?? "") !== (initialValues[field.key] ?? "")
+  );
+  return {
+    values,
+    errors,
+    setValue,
+    reset,
+    validate,
+    buildConfig,
+    buildConfigPayload,
+    hasMissingRequired,
+    isDirty
+  };
+}
+function ConfigFieldInputs({
+  idPrefix,
+  fields,
+  values,
+  errors,
+  onChange
+}) {
+  return fields.map((field) => {
+    const fieldId = `${idPrefix}-${field.key}`;
+    const errorId = `${fieldId}-error`;
+    const descriptionId = `${fieldId}-description`;
+    const error = errors[field.key];
+    const Control = field.secret ? PasswordField : TextField;
+    const describedBy = [field.description ? descriptionId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: field.label }),
+      field.description ? /* @__PURE__ */ jsx(Text, { color: "gray", size: "2", id: descriptionId, mb: "1", children: field.description }) : null,
+      /* @__PURE__ */ jsx(
+        Control,
+        {
+          id: fieldId,
+          value: values[field.key] ?? "",
+          placeholder: field.example,
+          autoComplete: "off",
+          required: field.required || void 0,
+          "aria-invalid": !!error || void 0,
+          "aria-describedby": describedBy,
+          onChange: (event) => onChange(field.key, event.target.value)
+        }
+      ),
+      error ? /* @__PURE__ */ jsx(Text, { color: "red", size: "2", id: errorId, children: error }) : null
+    ] }, field.key);
+  });
+}
 function LogoSeparator() {
   return /* @__PURE__ */ jsx(
     DotsHorizontalIcon,
@@ -239,22 +380,11 @@ function ConnectDialog({
 }) {
   const initialStep = fields.length > 0 ? "fields" : "review";
   const [step, setStep] = useState(initialStep);
-  const [values, setValues] = useState({});
-  const [errors, setErrors] = useState({});
   const [submitError, setSubmitError] = useState(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const configForm = useConfigFieldsForm(fields);
   const eventHandler = useOpenDataIntegrationAuthorizeUrl(integration);
   const translate = useTranslation();
-  const requiredMessage = translate({
-    defaultMessage: "This field is required",
-    id: "B2HvfC",
-    description: "Validation error shown when a required configuration field is left empty"
-  });
-  const patternMessage = translate({
-    defaultMessage: "Enter a valid value.",
-    id: "2XWaGz",
-    description: "Validation error shown when a configuration field value does not match the expected format"
-  });
   const genericConnectError = translate({
     defaultMessage: "We couldn't start the connection. Please try again.",
     id: "zGw1ma",
@@ -262,57 +392,15 @@ function ConnectDialog({
   });
   const reset = () => {
     setStep(initialStep);
-    setValues({});
-    setErrors({});
+    configForm.reset();
     setSubmitError(null);
     setIsSubmitting(false);
   };
-  const validateFields = () => {
-    const nextErrors = {};
-    let valid = true;
-    for (const field of fields) {
-      const value = (values[field.key] ?? "").trim();
-      if (field.required && !value) {
-        nextErrors[field.key] = requiredMessage;
-        valid = false;
-        continue;
-      }
-      if (value && field.pattern) {
-        let matches = true;
-        try {
-          matches = new RegExp(field.pattern).test(value);
-        } catch {
-          matches = true;
-        }
-        if (!matches) {
-          nextErrors[field.key] = patternMessage;
-          valid = false;
-          continue;
-        }
-      }
-      nextErrors[field.key] = null;
-    }
-    setErrors(nextErrors);
-    return valid;
-  };
-  const buildConfig = () => {
-    const config = {};
-    for (const field of fields) {
-      const value = (values[field.key] ?? "").trim();
-      if (value) {
-        config[field.key] = value;
-      }
-    }
-    return config;
-  };
-  const hasMissingRequired = fields.some(
-    (field) => field.required && !(values[field.key] ?? "").trim()
-  );
   const handleConnect = async () => {
     setSubmitError(null);
     setIsSubmitting(true);
     try {
-      await eventHandler(buildConfig());
+      await eventHandler(configForm.buildConfig());
       onOpenChange(false);
     } catch (error) {
       setSubmitError(
@@ -335,46 +423,16 @@ function ConnectDialog({
       children: /* @__PURE__ */ jsxs(Dialog.Content, { maxWidth: "430px", children: [
         /* @__PURE__ */ jsx(ConnectDialogHeader, { integration }),
         step === "fields" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "4", children: fields.map((field) => {
-            const fieldId = `pipes-config-${field.key}`;
-            const errorId = `${fieldId}-error`;
-            const descriptionId = `${fieldId}-description`;
-            const error = errors[field.key];
-            const Control = field.secret ? PasswordField : TextField;
-            const describedBy = [
-              field.description ? descriptionId : null,
-              error ? errorId : null
-            ].filter(Boolean).join(" ") || void 0;
-            return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
-              /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: field.label }),
-              field.description ? /* @__PURE__ */ jsx(Text, { color: "gray", size: "2", id: descriptionId, mb: "1", children: field.description }) : null,
-              /* @__PURE__ */ jsx(
-                Control,
-                {
-                  id: fieldId,
-                  value: values[field.key] ?? "",
-                  placeholder: field.example,
-                  autoComplete: "off",
-                  required: field.required || void 0,
-                  "aria-invalid": !!error || void 0,
-                  "aria-describedby": describedBy,
-                  onChange: (event) => {
-                    setValues((prev) => ({
-                      ...prev,
-                      [field.key]: event.target.value
-                    }));
-                    if (error) {
-                      setErrors((prev) => ({
-                        ...prev,
-                        [field.key]: null
-                      }));
-                    }
-                  }
-                }
-              ),
-              error ? /* @__PURE__ */ jsx(Text, { color: "red", size: "2", id: errorId, children: error }) : null
-            ] }, field.key);
-          }) }) }),
+          /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "4", children: /* @__PURE__ */ jsx(
+            ConfigFieldInputs,
+            {
+              idPrefix: "pipes-config",
+              fields,
+              values: configForm.values,
+              errors: configForm.errors,
+              onChange: configForm.setValue
+            }
+          ) }) }),
           /* @__PURE__ */ jsxs(Flex, { justify: "end", gap: "3", mt: "5", children: [
             /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: /* @__PURE__ */ jsx(
               Translation,
@@ -388,9 +446,9 @@ function ConnectDialog({
               Button,
               {
                 type: "button",
-                disabled: hasMissingRequired,
+                disabled: configForm.hasMissingRequired,
                 onClick: () => {
-                  if (validateFields()) {
+                  if (configForm.validate()) {
                     setStep("review");
                   }
                 },
@@ -654,11 +712,247 @@ function ApiKeyConnectButton({
     ) })
   ] });
 }
-function DualMethodConnectButton({
+function ClientCredentialsDialog({
+  integration,
+  fields,
+  open,
+  onOpenChange
+}) {
+  const queryClient = useQueryClient();
+  const installation = integration.installation;
+  const isUpdate = installation?.auth_method === "client_credentials";
+  const storedConfig = useMemo(
+    () => isUpdate ? installation?.config ?? {} : {},
+    [isUpdate, installation?.config]
+  );
+  const initialConfigValues = useMemo(
+    () => getInitialConfigValues(fields, storedConfig),
+    [fields, storedConfig]
+  );
+  const redactedSecret = buildRedactedSecret(
+    isUpdate ? installation?.client_secret_last_4 : null
+  );
+  const [clientId, setClientId] = useState(
+    (isUpdate ? installation?.client_id : null) ?? ""
+  );
+  const [clientSecret, setClientSecret] = useState(redactedSecret);
+  const configForm = useConfigFieldsForm(fields, initialConfigValues);
+  const translate = useTranslation();
+  const clientIdPlaceholder = translate({
+    defaultMessage: "Enter your client ID",
+    id: "5YTAFo",
+    description: "Placeholder for the client credentials client ID input"
+  });
+  const clientSecretPlaceholder = translate({
+    defaultMessage: "Enter your client secret",
+    id: "53f0B7",
+    description: "Placeholder for the client credentials client secret input"
+  });
+  const secretMissing = !clientSecret.trim() || isRedactedSecret(clientSecret);
+  const {
+    mutate: upsertClientCredentials,
+    error,
+    isPending
+  } = useUpsertDataIntegrationClientCredentials({
+    mutation: {
+      onSuccess: () => {
+        onOpenChange(false);
+        queryClient.invalidateQueries({
+          queryKey: getMyDataIntegrationsQueryKey()
+        });
+      }
+    }
+  });
+  const errorMessage = error instanceof ApiError && error.message ? error.message : null;
+  const handleSubmit = () => {
+    if (!configForm.validate()) {
+      return;
+    }
+    const config = configForm.isDirty ? configForm.buildConfigPayload(storedConfig) : void 0;
+    upsertClientCredentials({
+      slug: integration.slug,
+      data: {
+        client_id: clientId.trim(),
+        client_secret: clientSecret.trim(),
+        ...config ? { config } : {}
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Content, { maxWidth: "430px", children: [
+    /* @__PURE__ */ jsx(Dialog.Title, { size: "3", weight: "bold", children: isUpdate ? /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Update client credentials for {integrationName}",
+        id: "/D85zF",
+        description: "Dialog title for updating stored client credentials",
+        values: { integrationName: integration.name }
+      }
+    ) : /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Connect {integrationName} with client credentials",
+        id: "x+7tw3",
+        description: "Dialog title for connecting with client credentials",
+        values: { integrationName: integration.name }
+      }
+    ) }),
+    error && /* @__PURE__ */ jsx(Callout.Root, { my: "3", color: "red", role: "alert", children: /* @__PURE__ */ jsx(Callout.Text, { children: errorMessage ?? /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "An error occurred. Please check the value and try again.",
+        id: "bYLbLL",
+        description: "Generic error message for API key submission failure"
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "4", mt: "2", children: [
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "pipes-client-credentials-client-id", children: /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Client ID",
+            id: "/Cv5P1",
+            description: "Label for the client credentials client ID input"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            id: "pipes-client-credentials-client-id",
+            value: clientId,
+            autoComplete: "off",
+            placeholder: clientIdPlaceholder,
+            onChange: (event) => setClientId(event.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "pipes-client-credentials-client-secret", children: /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Client secret",
+            id: "uScBDj",
+            description: "Label for the client credentials client secret input"
+          }
+        ) }),
+        isUpdate && /* @__PURE__ */ jsx(
+          Text,
+          {
+            color: "gray",
+            size: "2",
+            id: "pipes-client-credentials-client-secret-description",
+            mb: "1",
+            children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Enter the client secret again to save any changes.",
+                id: "ZrNPCF",
+                description: "Help text explaining the client secret must be re-entered to save an update"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PasswordField,
+          {
+            id: "pipes-client-credentials-client-secret",
+            value: clientSecret,
+            autoComplete: "off",
+            type: isRedactedSecret(clientSecret) ? "text" : void 0,
+            placeholder: clientSecretPlaceholder,
+            "aria-describedby": isUpdate ? "pipes-client-credentials-client-secret-description" : void 0,
+            onChange: (event) => setClientSecret(event.target.value),
+            onFocus: () => {
+              if (isRedactedSecret(clientSecret)) {
+                setClientSecret("");
+              }
+            },
+            onBlur: () => {
+              if (clientSecret === "") {
+                setClientSecret(redactedSecret);
+              }
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        ConfigFieldInputs,
+        {
+          idPrefix: "pipes-client-credentials-config",
+          fields,
+          values: configForm.values,
+          errors: configForm.errors,
+          onChange: configForm.setValue
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { justify: "end", gap: "3", mt: "5", children: [
+      /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Cancel",
+          id: "hHNj31",
+          description: "Cancel button text"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          disabled: isPending || !clientId.trim() || secretMissing || configForm.hasMissingRequired,
+          loading: isPending,
+          onClick: handleSubmit,
+          children: isUpdate ? /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Save",
+              id: "RT8KNi",
+              description: "Save button text"
+            }
+          ) : /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Connect",
+              id: "quvdFp",
+              description: "Button to connect an integration"
+            }
+          )
+        }
+      )
+    ] })
+  ] }) });
+}
+function ClientCredentialsConnectButton({
   integration
+}) {
+  const [open, setOpen] = useState(false);
+  const fields = getUnpinnedInstallationFields(integration);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    open && /* @__PURE__ */ jsx(
+      ClientCredentialsDialog,
+      {
+        integration,
+        fields,
+        open,
+        onOpenChange: setOpen
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setOpen(true), children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Connect",
+        id: "quvdFp",
+        description: "Button to connect an integration"
+      }
+    ) })
+  ] });
+}
+function MultiMethodConnectButton({
+  integration,
+  methods
 }) {
   const [apiKeyOpen, setApiKeyOpen] = useState(false);
   const [oauthOpen, setOauthOpen] = useState(false);
+  const [clientCredentialsOpen, setClientCredentialsOpen] = useState(false);
   const fields = getUnpinnedInstallationFields(integration);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     apiKeyOpen && /* @__PURE__ */ jsx(
@@ -669,7 +963,16 @@ function DualMethodConnectButton({
         onOpenChange: setApiKeyOpen
       }
     ),
-    /* @__PURE__ */ jsx(
+    clientCredentialsOpen && /* @__PURE__ */ jsx(
+      ClientCredentialsDialog,
+      {
+        integration,
+        fields,
+        open: clientCredentialsOpen,
+        onOpenChange: setClientCredentialsOpen
+      }
+    ),
+    methods.includes("oauth") && /* @__PURE__ */ jsx(
       ConnectDialog,
       {
         integration,
@@ -688,7 +991,7 @@ function DualMethodConnectButton({
         }
       ) }) }),
       /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", children: [
-        /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick: () => setOauthOpen(true), children: /* @__PURE__ */ jsxs(Flex, { gap: "4", width: "100%", justify: "between", align: "center", children: [
+        methods.includes("oauth") && /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick: () => setOauthOpen(true), children: /* @__PURE__ */ jsxs(Flex, { gap: "4", width: "100%", justify: "between", align: "center", children: [
           /* @__PURE__ */ jsx(
             Translation,
             {
@@ -700,7 +1003,15 @@ function DualMethodConnectButton({
           ),
           /* @__PURE__ */ jsx(ExternalLinkIcon, { "aria-hidden": true })
         ] }) }),
-        /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick: () => setApiKeyOpen(true), children: /* @__PURE__ */ jsx(
+        methods.includes("client_credentials") && /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick: () => setClientCredentialsOpen(true), children: /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Enter client credentials",
+            id: "Y/87Vt",
+            description: "Menu option to connect via client credentials"
+          }
+        ) }),
+        methods.includes("api_key") && /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick: () => setApiKeyOpen(true), children: /* @__PURE__ */ jsx(
           Translation,
           {
             defaultMessage: "Enter API key",
@@ -715,6 +1026,7 @@ function DualMethodConnectButton({
 function ProviderStatus({ 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();
@@ -727,6 +1039,7 @@ function ProviderStatus({ integration }) {
   if (integration.installation) {
     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,
@@ -745,7 +1058,16 @@ function ProviderStatus({ integration }) {
           onOpenChange: setApiKeyOpen
         }
       ),
-      unpinnedFields.length > 0 && /* @__PURE__ */ jsx(
+      clientCredentialsOpen && /* @__PURE__ */ jsx(
+        ClientCredentialsDialog,
+        {
+          integration,
+          fields: unpinnedFields,
+          open: clientCredentialsOpen,
+          onOpenChange: setClientCredentialsOpen
+        }
+      ),
+      unpinnedFields.length > 0 && !isClientCredentialsInstallation && /* @__PURE__ */ jsx(
         ConnectDialog,
         {
           integration,
@@ -770,7 +1092,40 @@ function ProviderStatus({ integration }) {
             description: "Status text for integration needing reauthorization"
           }
         ) }),
-        connected && isApiKeyInstallation ? /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+        isClientCredentialsInstallation ? /* @__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: [
+            /* @__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"
+                  }
+                )
+              }
+            )
+          ] })
+        ] }) : connected && isApiKeyInstallation ? /* @__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: [
             /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick: () => setApiKeyOpen(true), children: /* @__PURE__ */ jsx(
@@ -882,34 +1237,9 @@ function ProviderStatus({ integration }) {
     ] });
   }
   const authMethods = integration.authMethods ?? [];
-  const supportsOAuth = authMethods.includes("oauth");
-  const supportsApiKey = authMethods.includes("api_key");
-  if (supportsOAuth && supportsApiKey) {
-    return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", children: [
-      /* @__PURE__ */ jsx(Status, { state: "neutral", children: /* @__PURE__ */ jsx(
-        Translation,
-        {
-          defaultMessage: "Not connected",
-          id: "J7bTZa",
-          description: "Status text for an integration that is not connected"
-        }
-      ) }),
-      /* @__PURE__ */ jsx(DualMethodConnectButton, { integration })
-    ] });
-  }
-  if (supportsApiKey) {
-    return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", children: [
-      /* @__PURE__ */ jsx(Status, { state: "neutral", children: /* @__PURE__ */ jsx(
-        Translation,
-        {
-          defaultMessage: "Not connected",
-          id: "J7bTZa",
-          description: "Status text for an integration that is not connected"
-        }
-      ) }),
-      /* @__PURE__ */ jsx(ApiKeyConnectButton, { integration })
-    ] });
-  }
+  const methods = CONNECT_AUTH_METHODS.filter(
+    (method) => authMethods.includes(method)
+  );
   return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", children: [
     /* @__PURE__ */ jsx(Status, { state: "neutral", children: /* @__PURE__ */ jsx(
       Translation,
@@ -919,7 +1249,7 @@ function ProviderStatus({ integration }) {
         description: "Status text for an integration that is not connected"
       }
     ) }),
-    /* @__PURE__ */ jsx(ConnectIntegrationButton, { integration })
+    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 })
   ] });
 }
 function DisconnectAccountDialog({