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

package/dist/cjs/lib/pipes.cjs

@@ -51,8 +51,14 @@ var import_utils = require("./utils.js");
 var import_translation = require("./i18n/translation.js");
 var import_use_translation = require("./i18n/use-translation.js");
 var import_errors = require("../api/errors.js");
+var import_redacted_secret = require("./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 = (0, import_endpoint.useAuthorizeDataIntegrationHook)();
   const settings = (0, import_endpoint.useSettings)();
@@ -141,6 +147,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] = (0, import_react.useState)(initialValues);
+  const [errors, setErrors] = (0, import_react.useState)({});
+  const translate = (0, import_use_translation.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 ? import_elements.PasswordField : import_elements.TextField;
+    const describedBy = [field.description ? descriptionId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Label, { htmlFor: fieldId, children: field.label }),
+      field.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { color: "gray", size: "2", id: descriptionId, mb: "1", children: field.description }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { color: "red", size: "2", id: errorId, children: error }) : null
+    ] }, field.key);
+  });
+}
 function LogoSeparator() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_icons.DotsHorizontalIcon,
@@ -253,22 +393,11 @@ function ConnectDialog({
 }) {
   const initialStep = fields.length > 0 ? "fields" : "review";
   const [step, setStep] = (0, import_react.useState)(initialStep);
-  const [values, setValues] = (0, import_react.useState)({});
-  const [errors, setErrors] = (0, import_react.useState)({});
   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 translate = (0, import_use_translation.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",
@@ -276,57 +405,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(
@@ -349,46 +436,16 @@ function ConnectDialog({
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Dialog.Content, { maxWidth: "430px", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectDialogHeader, { integration }),
         step === "fields" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.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 ? import_elements.PasswordField : import_elements.TextField;
-            const describedBy = [
-              field.description ? descriptionId : null,
-              error ? errorId : null
-            ].filter(Boolean).join(" ") || void 0;
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Label, { htmlFor: fieldId, children: field.label }),
-              field.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { color: "gray", size: "2", id: descriptionId, mb: "1", children: field.description }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { color: "red", size: "2", id: errorId, children: error }) : null
-            ] }, field.key);
-          }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { direction: "column", gap: "4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ConfigFieldInputs,
+            {
+              idPrefix: "pipes-config",
+              fields,
+              values: configForm.values,
+              errors: configForm.errors,
+              onChange: configForm.setValue
+            }
+          ) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { justify: "end", gap: "3", mt: "5", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_translation.Translation,
@@ -402,9 +459,9 @@ function ConnectDialog({
               import_elements.Button,
               {
                 type: "button",
-                disabled: hasMissingRequired,
+                disabled: configForm.hasMissingRequired,
                 onClick: () => {
-                  if (validateFields()) {
+                  if (configForm.validate()) {
                     setStep("review");
                   }
                 },
@@ -668,11 +725,247 @@ function ApiKeyConnectButton({
     ) })
   ] });
 }
-function DualMethodConnectButton({
+function ClientCredentialsDialog({
+  integration,
+  fields,
+  open,
+  onOpenChange
+}) {
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const installation = integration.installation;
+  const isUpdate = installation?.auth_method === "client_credentials";
+  const storedConfig = (0, import_react.useMemo)(
+    () => isUpdate ? installation?.config ?? {} : {},
+    [isUpdate, installation?.config]
+  );
+  const initialConfigValues = (0, import_react.useMemo)(
+    () => getInitialConfigValues(fields, storedConfig),
+    [fields, storedConfig]
+  );
+  const redactedSecret = (0, import_redacted_secret.buildRedactedSecret)(
+    isUpdate ? installation?.client_secret_last_4 : null
+  );
+  const [clientId, setClientId] = (0, import_react.useState)(
+    (isUpdate ? installation?.client_id : null) ?? ""
+  );
+  const [clientSecret, setClientSecret] = (0, import_react.useState)(redactedSecret);
+  const configForm = useConfigFieldsForm(fields, initialConfigValues);
+  const translate = (0, import_use_translation.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() || (0, import_redacted_secret.isRedactedSecret)(clientSecret);
+  const {
+    mutate: upsertClientCredentials,
+    error,
+    isPending
+  } = (0, import_endpoint.useUpsertDataIntegrationClientCredentials)({
+    mutation: {
+      onSuccess: () => {
+        onOpenChange(false);
+        queryClient.invalidateQueries({
+          queryKey: (0, import_endpoint.getMyDataIntegrationsQueryKey)()
+        });
+      }
+    }
+  });
+  const errorMessage = error instanceof import_errors.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__ */ (0, import_jsx_runtime.jsx)(import_elements.Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.Dialog.Content, { maxWidth: "430px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Dialog.Title, { size: "3", weight: "bold", children: isUpdate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
+      {
+        defaultMessage: "Update client credentials for {integrationName}",
+        id: "/D85zF",
+        description: "Dialog title for updating stored client credentials",
+        values: { integrationName: integration.name }
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
+      {
+        defaultMessage: "Connect {integrationName} with client credentials",
+        id: "x+7tw3",
+        description: "Dialog title for connecting with client credentials",
+        values: { integrationName: integration.name }
+      }
+    ) }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Root, { my: "3", color: "red", role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Callout.Text, { children: errorMessage ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
+      {
+        defaultMessage: "An error occurred. Please check the value and try again.",
+        id: "bYLbLL",
+        description: "Generic error message for API key submission failure"
+      }
+    ) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "4", mt: "2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Label, { htmlFor: "pipes-client-credentials-client-id", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_translation.Translation,
+          {
+            defaultMessage: "Client ID",
+            id: "/Cv5P1",
+            description: "Label for the client credentials client ID input"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_elements.TextField,
+          {
+            id: "pipes-client-credentials-client-id",
+            value: clientId,
+            autoComplete: "off",
+            placeholder: clientIdPlaceholder,
+            onChange: (event) => setClientId(event.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Label, { htmlFor: "pipes-client-credentials-client-secret", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_translation.Translation,
+          {
+            defaultMessage: "Client secret",
+            id: "uScBDj",
+            description: "Label for the client credentials client secret input"
+          }
+        ) }),
+        isUpdate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_themes.Text,
+          {
+            color: "gray",
+            size: "2",
+            id: "pipes-client-credentials-client-secret-description",
+            mb: "1",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_translation.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__ */ (0, import_jsx_runtime.jsx)(
+          import_elements.PasswordField,
+          {
+            id: "pipes-client-credentials-client-secret",
+            value: clientSecret,
+            autoComplete: "off",
+            type: (0, import_redacted_secret.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 ((0, import_redacted_secret.isRedactedSecret)(clientSecret)) {
+                setClientSecret("");
+              }
+            },
+            onBlur: () => {
+              if (clientSecret === "") {
+                setClientSecret(redactedSecret);
+              }
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ConfigFieldInputs,
+        {
+          idPrefix: "pipes-client-credentials-config",
+          fields,
+          values: configForm.values,
+          errors: configForm.errors,
+          onChange: configForm.setValue
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { justify: "end", gap: "3", mt: "5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_translation.Translation,
+        {
+          defaultMessage: "Cancel",
+          id: "hHNj31",
+          description: "Cancel button text"
+        }
+      ) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_elements.Button,
+        {
+          type: "button",
+          disabled: isPending || !clientId.trim() || secretMissing || configForm.hasMissingRequired,
+          loading: isPending,
+          onClick: handleSubmit,
+          children: isUpdate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Save",
+              id: "RT8KNi",
+              description: "Save button text"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_translation.Translation,
+            {
+              defaultMessage: "Connect",
+              id: "quvdFp",
+              description: "Button to connect an integration"
+            }
+          )
+        }
+      )
+    ] })
+  ] }) });
+}
+function ClientCredentialsConnectButton({
   integration
+}) {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const fields = getUnpinnedInstallationFields(integration);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ClientCredentialsDialog,
+      {
+        integration,
+        fields,
+        open,
+        onOpenChange: setOpen
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Button, { variant: "secondary", onClick: () => setOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_translation.Translation,
+      {
+        defaultMessage: "Connect",
+        id: "quvdFp",
+        description: "Button to connect an integration"
+      }
+    ) })
+  ] });
+}
+function MultiMethodConnectButton({
+  integration,
+  methods
 }) {
   const [apiKeyOpen, setApiKeyOpen] = (0, import_react.useState)(false);
   const [oauthOpen, setOauthOpen] = (0, import_react.useState)(false);
+  const [clientCredentialsOpen, setClientCredentialsOpen] = (0, import_react.useState)(false);
   const fields = getUnpinnedInstallationFields(integration);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     apiKeyOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -683,7 +976,16 @@ function DualMethodConnectButton({
         onOpenChange: setApiKeyOpen
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    clientCredentialsOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ClientCredentialsDialog,
+      {
+        integration,
+        fields,
+        open: clientCredentialsOpen,
+        onOpenChange: setClientCredentialsOpen
+      }
+    ),
+    methods.includes("oauth") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       ConnectDialog,
       {
         integration,
@@ -702,7 +1004,7 @@ function DualMethodConnectButton({
         }
       ) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.DropdownMenu.Content, { align: "end", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DropdownMenu.Item, { onClick: () => setOauthOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", width: "100%", justify: "between", align: "center", children: [
+        methods.includes("oauth") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DropdownMenu.Item, { onClick: () => setOauthOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", width: "100%", justify: "between", align: "center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_translation.Translation,
             {
@@ -714,7 +1016,15 @@ function DualMethodConnectButton({
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.ExternalLinkIcon, { "aria-hidden": true })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DropdownMenu.Item, { onClick: () => setApiKeyOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        methods.includes("client_credentials") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DropdownMenu.Item, { onClick: () => setClientCredentialsOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_translation.Translation,
+          {
+            defaultMessage: "Enter client credentials",
+            id: "Y/87Vt",
+            description: "Menu option to connect via client credentials"
+          }
+        ) }),
+        methods.includes("api_key") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DropdownMenu.Item, { onClick: () => setApiKeyOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_translation.Translation,
           {
             defaultMessage: "Enter API key",
@@ -729,6 +1039,7 @@ function DualMethodConnectButton({
 function ProviderStatus({ 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)();
@@ -741,6 +1052,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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         DisconnectAccountDialog,
@@ -759,7 +1071,16 @@ function ProviderStatus({ integration }) {
           onOpenChange: setApiKeyOpen
         }
       ),
-      unpinnedFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      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,
@@ -784,7 +1105,40 @@ function ProviderStatus({ integration }) {
             description: "Status text for integration needing reauthorization"
           }
         ) }),
-        connected && isApiKeyInstallation ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_elements.DropdownMenu.Root, { children: [
+        isClientCredentialsInstallation ? /* @__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: [
+            /* @__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"
+                  }
+                )
+              }
+            )
+          ] })
+        ] }) : connected && isApiKeyInstallation ? /* @__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: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.DropdownMenu.Item, { onClick: () => setApiKeyOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -896,34 +1250,9 @@ function ProviderStatus({ integration }) {
     ] });
   }
   const authMethods = integration.authMethods ?? [];
-  const supportsOAuth = authMethods.includes("oauth");
-  const supportsApiKey = authMethods.includes("api_key");
-  if (supportsOAuth && supportsApiKey) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { align: "center", gap: "4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_status.Status, { state: "neutral", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_translation.Translation,
-        {
-          defaultMessage: "Not connected",
-          id: "J7bTZa",
-          description: "Status text for an integration that is not connected"
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DualMethodConnectButton, { integration })
-    ] });
-  }
-  if (supportsApiKey) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { align: "center", gap: "4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_status.Status, { state: "neutral", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_translation.Translation,
-        {
-          defaultMessage: "Not connected",
-          id: "J7bTZa",
-          description: "Status text for an integration that is not connected"
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ApiKeyConnectButton, { integration })
-    ] });
-  }
+  const methods = CONNECT_AUTH_METHODS.filter(
+    (method) => authMethods.includes(method)
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { align: "center", gap: "4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_status.Status, { state: "neutral", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_translation.Translation,
@@ -933,7 +1262,7 @@ function ProviderStatus({ integration }) {
         description: "Status text for an integration that is not connected"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectIntegrationButton, { integration })
+    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 })
   ] });
 }
 function DisconnectAccountDialog({