@workos-inc/widgets 1.18.0 → 1.19.0-next.1790102694835

package/dist/esm/lib/pipes-admin.js

@@ -26,16 +26,15 @@ import { IconPanel } from "./icon-panel.js";
 import { SearchableSelectList } from "./searchable-select-list.js";
 import { Status } from "./status.js";
 import {
-  getListDataIntegrationConfigurationsQueryKey,
-  getMyDataIntegrationsQueryKey,
-  getOrganizationDataIntegrationsQueryKey,
-  getSharedDataConnectionsQueryKey,
-  useDeleteOrganizationDataInstallation,
-  useListDataIntegrationConfigurations,
-  useOrganizationDataIntegrations,
-  useUpsertDataIntegrationConfiguration,
-  useUpsertOrganizationDataIntegrationConfiguration
-} from "../api/endpoint.js";
+  dataIntegrationConfigurationsQueryKey,
+  myDataIntegrationsQueryKeys,
+  organizationDataIntegrationsQueryKey,
+  sharedDataConnectionsQueryKey,
+  useDataIntegrationConfigurations,
+  useOrganizationDataIntegrations
+} from "./api/pipes.js";
+import { useClientGraphqlMutation } from "../api/client-graphql/hooks.js";
+import { ApiError } from "../api/errors.js";
 import { useQueryClient } from "@tanstack/react-query";
 import { GenericError } from "./generic-error.js";
 import {
@@ -70,35 +69,75 @@ function RedirectUriField({ value }) {
     /* @__PURE__ */ jsx(CopyText, { value, label: copyLabel })
   ] });
 }
-function useUpsertConfiguration(owner, onSuccess) {
+function toConfigEntries(config) {
+  return config ? Object.entries(config).map(([name, value]) => ({ name, value })) : void 0;
+}
+function unwrapConfiguration(result) {
+  switch (result.__typename) {
+    case "DataProviderConfiguration":
+      return result;
+    case "DataProviderConfigInvalid":
+      throw new ApiError({
+        message: result.message,
+        status: 400,
+        queryType: "mutation"
+      });
+  }
+}
+function useUpsertConfiguration(owner, integration, onSuccess) {
   const queryClient = useQueryClient();
-  const user = useUpsertDataIntegrationConfiguration({
-    mutation: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({
-          queryKey: getListDataIntegrationConfigurationsQueryKey()
-        });
-        queryClient.invalidateQueries({
-          queryKey: getMyDataIntegrationsQueryKey()
-        });
-        onSuccess();
+  const toInput = (payload) => ({
+    dataProviderId: integration.id,
+    enabled: payload.enabled,
+    scopes: payload.scopes,
+    clientId: payload.clientId,
+    clientSecret: payload.clientSecret,
+    config: toConfigEntries(payload.config)
+  });
+  const user = useClientGraphqlMutation({
+    mutationFn: async (sdk, payload) => {
+      const { setDataProviderConfiguration } = await sdk.SetDataProviderConfiguration({ input: toInput(payload) });
+      return unwrapConfiguration(setDataProviderConfiguration);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: dataIntegrationConfigurationsQueryKey
+      });
+      for (const queryKey of myDataIntegrationsQueryKeys) {
+        queryClient.invalidateQueries({ queryKey });
       }
+      onSuccess();
     }
   });
-  const organization = useUpsertOrganizationDataIntegrationConfiguration({
-    mutation: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({
-          queryKey: getOrganizationDataIntegrationsQueryKey()
-        });
-        queryClient.invalidateQueries({
-          queryKey: getSharedDataConnectionsQueryKey()
-        });
-        onSuccess();
-      }
+  const organization = useClientGraphqlMutation({
+    mutationFn: async (sdk, payload) => {
+      const { setOrganizationDataProviderConfiguration } = await sdk.SetOrganizationDataProviderConfiguration({
+        input: toInput(payload)
+      });
+      return unwrapConfiguration(setOrganizationDataProviderConfiguration);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: organizationDataIntegrationsQueryKey
+      });
+      queryClient.invalidateQueries({
+        queryKey: sharedDataConnectionsQueryKey
+      });
+      onSuccess();
     }
   });
-  return owner === "organization" ? organization : user;
+  if (owner === "organization") {
+    return {
+      mutate: organization.mutate,
+      isError: organization.isError,
+      isPending: organization.isPending
+    };
+  }
+  return {
+    mutate: user.mutate,
+    isError: user.isError,
+    isPending: user.isPending
+  };
 }
 function OrgCredentialsDialog({
   integration,
@@ -137,9 +176,9 @@ function OrgCredentialsDialog({
   const [configErrors, setConfigErrors] = useState({});
   const {
     mutate: upsertOverride,
-    error,
+    isError,
     isPending
-  } = useUpsertConfiguration(owner, () => onOpenChange(false));
+  } = useUpsertConfiguration(owner, integration, () => onOpenChange(false));
   const translate = useTranslation();
   const defaultScopes = integration.defaultScopes;
   const effectiveScopes = integration.scopes ?? [];
@@ -278,36 +317,24 @@ function OrgCredentialsDialog({
     }
     const configPayload = configFields.length > 0 ? { config: buildConfigPayload() } : void 0;
     if (isApiKeyOnly) {
-      upsertOverride({
-        slug: integration.slug,
-        data: { enabled, ...configPayload }
-      });
+      upsertOverride({ enabled, ...configPayload });
       return;
     }
     if (!isOrgCredentials) {
-      upsertOverride({
-        slug: integration.slug,
-        data: { enabled, scopes, ...configPayload }
-      });
+      upsertOverride({ enabled, scopes, ...configPayload });
       return;
     }
     const secretUnchanged = hasCredentials && isRedactedSecret(clientSecret);
     if (secretUnchanged) {
-      upsertOverride({
-        slug: integration.slug,
-        data: { enabled, scopes, ...configPayload }
-      });
+      upsertOverride({ enabled, scopes, ...configPayload });
       return;
     }
     upsertOverride({
-      slug: integration.slug,
-      data: {
-        enabled,
-        client_id: clientId.trim(),
-        client_secret: clientSecret.trim(),
-        scopes,
-        ...configPayload
-      }
+      enabled,
+      clientId: clientId.trim(),
+      clientSecret: clientSecret.trim(),
+      scopes,
+      ...configPayload
     });
   };
   const showCredentialsStep = !isApiKeyOnly && isOrgCredentials && step === "credentials";
@@ -350,9 +377,9 @@ function OrgCredentialsDialog({
     const fieldId = `pipes-admin-config-${field.key}`;
     const errorId = `${fieldId}-error`;
     const descriptionId = `${fieldId}-description`;
-    const error2 = configErrors[field.key];
+    const error = configErrors[field.key];
     const Control = field.secret ? PasswordField : TextField;
-    const describedBy = [field.description ? descriptionId : null, error2 ? errorId : null].filter(Boolean).join(" ") || void 0;
+    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,
@@ -364,14 +391,14 @@ function OrgCredentialsDialog({
           placeholder: field.example,
           autoComplete: "off",
           required: field.required || void 0,
-          "aria-invalid": !!error2 || void 0,
+          "aria-invalid": !!error || void 0,
           "aria-describedby": describedBy,
           onChange: (event) => {
             setConfigValues((prev) => ({
               ...prev,
               [field.key]: event.target.value
             }));
-            if (error2) {
+            if (error) {
               setConfigErrors((prev) => ({
                 ...prev,
                 [field.key]: null
@@ -380,7 +407,7 @@ function OrgCredentialsDialog({
           }
         }
       ),
-      error2 ? /* @__PURE__ */ jsx(Text, { color: "red", size: "2", id: errorId, children: error2 }) : null
+      error ? /* @__PURE__ */ jsx(Text, { color: "red", size: "2", id: errorId, children: error }) : null
     ] }, field.key);
   }) : null;
   return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
@@ -394,7 +421,7 @@ function OrgCredentialsDialog({
       }
     ) }),
     integration.description && /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", mb: "4", as: "p", children: integration.description }),
-    error && /* @__PURE__ */ jsx(Callout.Root, { my: "3", color: "red", role: "alert", children: /* @__PURE__ */ jsx(Callout.Text, { children: /* @__PURE__ */ jsx(
+    isError && /* @__PURE__ */ jsx(Callout.Root, { my: "3", color: "red", role: "alert", children: /* @__PURE__ */ jsx(Callout.Text, { children: /* @__PURE__ */ jsx(
       Translation,
       {
         defaultMessage: "We couldn't save these settings. Please check the values and try again.",
@@ -625,8 +652,8 @@ function OrgCredentialsButton({
 }
 function useManageableIntegrations() {
   const permission = usePermissions("widgets:pipes:manage");
-  const configurations = useListDataIntegrationConfigurations({
-    query: { enabled: permission.isSuccess }
+  const configurations = useDataIntegrationConfigurations({
+    enabled: permission.isSuccess
   });
   if (permission.isError) {
     return {
@@ -653,7 +680,7 @@ function useManageableIntegrations() {
     };
   }
   return {
-    data: configurations.data.data,
+    data: configurations.data,
     isLoading: false,
     isError: false,
     error: null
@@ -662,10 +689,10 @@ function useManageableIntegrations() {
 function useOrganizationOwnedIntegrations() {
   const permission = usePermissions("widgets:pipes:manage");
   const organization = useOrganizationDataIntegrations({
-    query: { enabled: permission.isSuccess }
+    enabled: permission.isSuccess
   });
   if (organization.isSuccess) {
-    return { data: organization.data.data, isLoading: false };
+    return { data: organization.data, isLoading: false };
   }
   return {
     data: [],
@@ -675,6 +702,7 @@ function useOrganizationOwnedIntegrations() {
 function toConfigurableIntegration(integration) {
   const { configuration } = integration;
   return {
+    id: integration.id,
     name: integration.name,
     description: integration.description,
     slug: integration.slug,
@@ -700,17 +728,16 @@ function DisconnectSharedConnectionDialog({
     error,
     reset,
     isPending
-  } = useDeleteOrganizationDataInstallation({
-    mutation: {
-      onSuccess: () => {
-        onOpenChange(false);
-        queryClient.invalidateQueries({
-          queryKey: getOrganizationDataIntegrationsQueryKey()
-        });
-        queryClient.invalidateQueries({
-          queryKey: getSharedDataConnectionsQueryKey()
-        });
-      }
+  } = useClientGraphqlMutation({
+    mutationFn: (sdk, id) => sdk.DeleteOrganizationDataProviderConnection({ id }),
+    onSuccess: () => {
+      onOpenChange(false);
+      queryClient.invalidateQueries({
+        queryKey: organizationDataIntegrationsQueryKey
+      });
+      queryClient.invalidateQueries({
+        queryKey: sharedDataConnectionsQueryKey
+      });
     }
   });
   useEffect(() => {
@@ -761,7 +788,7 @@ function DisconnectSharedConnectionDialog({
           variant: "destructive",
           disabled: isPending,
           loading: isPending,
-          onClick: () => deleteInstallation({ installationId }),
+          onClick: () => deleteInstallation(installationId),
           children: /* @__PURE__ */ jsx(
             Translation,
             {