@drawbridge/components 0.0.78 → 0.1.0

package/dist/dashboard/form-organization-connection.mjs

@@ -0,0 +1,512 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useQueries } from "@tanstack/react-query";
+import { useForm, Controller } from "../shared/lib/form";
+import yup, { resolver } from "../shared/lib/yup";
+import { request } from "@drawbridge/drawbridge-utils/fetch";
+import Form from "../shared/form";
+import Fieldset from "../shared/fieldset";
+import InputGroup from "../input-group";
+import InputText from "../input-text";
+import InputNumber from "../input-number";
+import InputTextarea from "../input-textarea";
+import InputResource from "./input-resource";
+import InputSelect from "../input-select";
+import InputCheckbox from "../input-checkbox";
+import InputSwitch from "../shared/input-switch";
+import Button from "../shared/button";
+import CopyToClipboard from "../shared/copy-to-clipboard";
+const Submit = ({
+  disabled,
+  isSubmitting,
+  text
+}) => /* @__PURE__ */ jsx(
+  Fieldset,
+  {
+    ...{
+      disabled: disabled || isSubmitting
+    },
+    children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...{
+          loading: isSubmitting,
+          type: "submit"
+        },
+        children: text
+      }
+    )
+  }
+);
+const ReadOnly = ({
+  field,
+  value
+}) => /* @__PURE__ */ jsx(
+  InputGroup,
+  {
+    ...{
+      input: field.copy ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...{
+            className: "w-full flex items-center justify-between space-x-3"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              InputText,
+              {
+                ...{
+                  className: "w-full",
+                  readOnly: true,
+                  value
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+              CopyToClipboard,
+              {
+                ...{
+                  iconClassName: "w-5 h-5",
+                  value
+                }
+              }
+            ) })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...{
+            className: "input bg-gray-light text-gray-dark"
+          },
+          children: value
+        }
+      ),
+      label: field.label
+    }
+  }
+);
+const Editable = ({
+  endpoint,
+  field,
+  onChange,
+  titleFor,
+  value
+}) => {
+  const shared = {
+    onChange,
+    placeholder: field.placeholder
+  };
+  if (field.hook) {
+    return /* @__PURE__ */ jsx(
+      InputResource,
+      {
+        ...{
+          endpoint,
+          model: field.label.toLowerCase(),
+          onChange: (item) => onChange((item == null ? void 0 : item.id) ?? null),
+          params: { limit: 100 },
+          value: value ? { id: value, title: titleFor(value) } : null
+        }
+      }
+    );
+  }
+  if (field.input === "select") {
+    return /* @__PURE__ */ jsx(
+      InputSelect,
+      {
+        ...{
+          ...shared,
+          options: field.options || [],
+          value: value ?? ""
+        }
+      }
+    );
+  }
+  if (field.input === "checkbox") {
+    return /* @__PURE__ */ jsx(
+      InputCheckbox,
+      {
+        ...{
+          ...shared,
+          label: field.label,
+          value: Boolean(value)
+        }
+      }
+    );
+  }
+  if (field.input === "switch") {
+    return /* @__PURE__ */ jsx(
+      InputSwitch,
+      {
+        ...{
+          ...shared,
+          value: Boolean(value)
+        }
+      }
+    );
+  }
+  if (field.input === "number") {
+    return /* @__PURE__ */ jsx(
+      InputNumber,
+      {
+        ...{
+          ...shared,
+          value: value ?? ""
+        }
+      }
+    );
+  }
+  if (field.input === "textarea") {
+    return /* @__PURE__ */ jsx(
+      InputTextarea,
+      {
+        ...{
+          ...shared,
+          value: value || ""
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    InputText,
+    {
+      ...{
+        ...shared,
+        type: field.input,
+        value: value || ""
+      }
+    }
+  );
+};
+const schemaFor = (field, optional) => {
+  const required = (rule) => field.required && !optional ? rule.required() : rule;
+  if (field.input === "checkbox" || field.input === "switch") return yup.boolean().label(field.label);
+  if (field.input === "number") return required(yup.number().label(field.label));
+  if (field.input === "email") return required(yup.string().label(field.label).email());
+  if (field.input === "url") return required(yup.string().label(field.label).url());
+  return required(yup.string().label(field.label));
+};
+const FormOrganizationConnection = ({
+  disabled,
+  onError,
+  onSuccess,
+  values
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const fields = (values == null ? void 0 : values.fields) || [];
+  const kind = (_a = values == null ? void 0 : values.connect) == null ? void 0 : _a.type;
+  const redirect = kind === "install" ? (_b = values == null ? void 0 : values.connect) == null ? void 0 : _b.redirect : null;
+  const readable = fields.filter((field) => !field.input).map((field) => {
+    var _a2;
+    return {
+      field,
+      // `from` is a path on the connection ('source.domain'), not only a key.
+      value: (field.from ? field.from.split(".").reduce((node, part) => node == null ? void 0 : node[part], values) : void 0) || ((_a2 = values == null ? void 0 : values.settings) == null ? void 0 : _a2[field.key]) || ""
+    };
+  }).filter((entry) => entry.value);
+  const [consenting, setConsenting] = useState(false);
+  const consent = async () => {
+    setConsenting(true);
+    try {
+      const { result } = await request({
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/connection/" + (values == null ? void 0 : values.slug) + "/authorize",
+        method: "POST"
+      });
+      window.location.href = result.url;
+    } catch (error) {
+      setConsenting(false);
+      onError(error);
+    }
+  };
+  const connected = Boolean(values == null ? void 0 : values.id) && (values == null ? void 0 : values.status) !== "error";
+  const inputs = useMemo(
+    () => fields.filter((field) => field.input && !(connected && field.secret)),
+    [connected, fields]
+  );
+  const sourced = useQueries({
+    queries: inputs.filter((field) => field.hook).map((field) => ({
+      // Not on a dead grant: the picker is not rendered then, and the request
+      // would only re-error the connection it is already erroring.
+      enabled: connected,
+      queryFn: async () => {
+        const { result } = await request({
+          endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/connection/" + (values == null ? void 0 : values.id) + "/hook/" + field.hook,
+          params: { limit: 100 }
+        });
+        return ((result == null ? void 0 : result.items) || []).map((item) => ({ label: item.title, value: item.id }));
+      },
+      queryKey: ["organization-connection-hook", values == null ? void 0 : values.organization, values == null ? void 0 : values.id, field.hook]
+    }))
+  });
+  const optionsFor = Object.fromEntries(
+    inputs.filter((field) => field.hook).map((field, index) => [field.key, sourced[index]])
+  );
+  const formValues = Object.fromEntries(inputs.map((field) => {
+    var _a2, _b2;
+    return [
+      field.key,
+      field.input === "checkbox" ? Boolean((_a2 = values == null ? void 0 : values.settings) == null ? void 0 : _a2[field.key]) : ((_b2 = values == null ? void 0 : values.settings) == null ? void 0 : _b2[field.key]) ?? ""
+    ];
+  }));
+  const { control, formState, handleSubmit } = useForm({
+    resolver: resolver(
+      yup.object(
+        Object.fromEntries(
+          inputs.map((field) => [
+            field.key,
+            // Never relaxed, because a redacted field is no longer in `inputs`
+            // once connected. What remains is ordinary settings, and those
+            // mean what they say.
+            schemaFor(field, false)
+          ])
+        )
+      )
+    ),
+    values: formValues
+  });
+  const onSubmit = async (settings) => {
+    try {
+      const args = {
+        body: {
+          settings,
+          slug: values == null ? void 0 : values.slug
+        },
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/connection",
+        method: "POST"
+      };
+      if (connected) {
+        args.endpoint = args.endpoint + "/" + values.id;
+        args.method = "PUT";
+      }
+      onSuccess(await request(args));
+    } catch (error) {
+      onError(error);
+    }
+  };
+  if (values == null ? void 0 : values.paused) {
+    return readable.length > 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{
+          className: "relative w-full space-y-8"
+        },
+        children: readable.map((entry) => /* @__PURE__ */ jsx(
+          ReadOnly,
+          {
+            ...entry
+          },
+          entry.field.key
+        ))
+      }
+    ) : null;
+  }
+  if (kind === "oauth") {
+    return /* @__PURE__ */ jsx(
+      Form,
+      {
+        ...{
+          className: "relative w-full space-y-8",
+          onSubmit: handleSubmit(onSubmit)
+        },
+        children: /* @__PURE__ */ jsxs(
+          Fieldset,
+          {
+            ...{
+              disabled: disabled || consenting
+            },
+            children: [
+              readable.map((entry) => /* @__PURE__ */ jsx(
+                ReadOnly,
+                {
+                  ...entry
+                },
+                entry.field.key
+              )),
+              connected && inputs.map((field) => /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: field.key,
+                    render: ({ field: { value, onChange } }) => {
+                      var _a2, _b2;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2[field.key]) == null ? void 0 : _b2.message,
+                            input: /* @__PURE__ */ jsx(
+                              Editable,
+                              {
+                                ...{
+                                  endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/connection/" + (values == null ? void 0 : values.id) + "/hook/" + field.hook,
+                                  field,
+                                  onChange,
+                                  titleFor: (id) => {
+                                    var _a3, _b3, _c2;
+                                    return ((_c2 = (_b3 = (_a3 = optionsFor[field.key]) == null ? void 0 : _a3.data) == null ? void 0 : _b3.find((option) => option.value === id)) == null ? void 0 : _c2.label) || id;
+                                  },
+                                  value
+                                }
+                              }
+                            ),
+                            label: field.label,
+                            message: field.message
+                          }
+                        }
+                      );
+                    }
+                  }
+                },
+                field.key
+              )),
+              connected && inputs.length > 0 && /* @__PURE__ */ jsx(
+                Submit,
+                {
+                  ...{
+                    // Held while the vendor's options are still arriving —
+                    // submitting an empty select would store a blank list id and
+                    // the connection would read Active over nothing.
+                    disabled: disabled || Object.values(optionsFor).some((entry) => entry == null ? void 0 : entry.isLoading),
+                    isSubmitting: formState == null ? void 0 : formState.isSubmitting,
+                    text: ((_c = values == null ? void 0 : values.actions) == null ? void 0 : _c.update) || "Save"
+                  }
+                }
+              ),
+              !connected && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ...{
+                    loading: consenting,
+                    onClick: consent
+                  },
+                  children: ((_d = values == null ? void 0 : values.actions) == null ? void 0 : _d.create) || "Connect"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (redirect) {
+    const blocked = !redirect.href || disabled;
+    return /* @__PURE__ */ jsx(
+      Form,
+      {
+        ...{
+          className: "relative w-full space-y-8"
+        },
+        children: /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled
+            },
+            children: connected ? readable.map((entry) => /* @__PURE__ */ jsx(
+              ReadOnly,
+              {
+                ...entry
+              },
+              entry.field.key
+            )) : /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  disabled: blocked,
+                  element: "a",
+                  href: blocked ? void 0 : redirect.href,
+                  // The install completes on the vendor's side and never
+                  // redirects back — a new tab keeps the dashboard open, and
+                  // its connections list updates live over the socket once
+                  // the install lands.
+                  target: "_blank"
+                },
+                children: redirect.title
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Form,
+    {
+      ...{
+        className: "relative w-full space-y-8",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: /* @__PURE__ */ jsxs(
+        Fieldset,
+        {
+          ...{
+            disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+          },
+          children: [
+            readable.map((entry) => /* @__PURE__ */ jsx(
+              ReadOnly,
+              {
+                ...entry
+              },
+              entry.field.key
+            )),
+            inputs.map((field) => /* @__PURE__ */ jsx(
+              Controller,
+              {
+                ...{
+                  control,
+                  name: field.key,
+                  render: ({ field: { value, onChange } }) => {
+                    var _a2, _b2;
+                    return /* @__PURE__ */ jsx(
+                      InputGroup,
+                      {
+                        ...{
+                          error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2[field.key]) == null ? void 0 : _b2.message,
+                          input: /* @__PURE__ */ jsx(
+                            Editable,
+                            {
+                              ...{
+                                endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/connection/" + (values == null ? void 0 : values.id) + "/hook/" + field.hook,
+                                field,
+                                onChange,
+                                titleFor: (id) => {
+                                  var _a3, _b3, _c2;
+                                  return ((_c2 = (_b3 = (_a3 = optionsFor[field.key]) == null ? void 0 : _a3.data) == null ? void 0 : _b3.find((option) => option.value === id)) == null ? void 0 : _c2.label) || id;
+                                },
+                                value
+                              }
+                            }
+                          ),
+                          label: field.label,
+                          message: field.message
+                        }
+                      }
+                    );
+                  }
+                }
+              },
+              field.key
+            )),
+            /* @__PURE__ */ jsx(
+              Submit,
+              {
+                ...{
+                  disabled,
+                  isSubmitting: formState == null ? void 0 : formState.isSubmitting,
+                  text: connected ? ((_e = values == null ? void 0 : values.actions) == null ? void 0 : _e.update) || "Submit" : ((_f = values == null ? void 0 : values.actions) == null ? void 0 : _f.create) || "Submit"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  FormOrganizationConnection
+};