@cloudquery/plugin-ui-sdk
Version:
SDK for CloudQuery Plugin UI configuration
1,812 lines • 73.9 kB
JavaScript
import { jsx as n, jsxs as m, Fragment as ne } from "react/jsx-runtime";
import V, { useState as k, useCallback as y, useRef as q, useContext as We, createContext as Be, useMemo as I, forwardRef as oe, useEffect as ce, useId as Z } from "react";
import { Virtuoso as me } from "react-virtuoso";
import { VirtuosoMockContext as io } from "react-virtuoso";
import S from "@mui/material/Box";
import { Prism as ze } from "react-syntax-highlighter";
import { oneDark as De } from "react-syntax-highlighter/dist/esm/styles/prism";
import je from "@mui/icons-material/ContentCopy";
import Ve from "@mui/icons-material/ContentCopyRounded";
import { Tooltip as fe, FormControl as He, FormLabel as Je, FormHelperText as Ue, Box as he, CircularProgress as qe, InputAdornment as Ke, IconButton as ie, Stack as ge, SvgIcon as Ge, Collapse as Ye, FormControlLabel as Xe, Alert as Qe, AlertTitle as Ze, Button as et } from "@mui/material";
import be from "@mui/material/IconButton";
import tt from "@mui/icons-material/Close";
import { backdropClasses as rt } from "@mui/material/Backdrop";
import ye from "@mui/material/CircularProgress";
import nt from "@mui/material/Modal";
import v from "@mui/material/Stack";
import xe from "@mui/material/List";
import ot from "@mui/material/ListItem";
import { useTheme as Y, alpha as it, styled as lt } from "@mui/material/styles";
import le, { cardClasses as at } from "@mui/material/Card";
import ae, { cardContentClasses as st } from "@mui/material/CardContent";
import ct, { cardHeaderClasses as dt } from "@mui/material/CardHeader";
import ut from "@mui/material/Link";
import X from "@mui/material/Checkbox";
import ee from "@mui/material/FormControl";
import W from "@mui/material/FormControlLabel";
import te from "@mui/material/FormHelperText";
import pt from "@mui/material/Switch";
import { Controller as _, useFormContext as Q, useWatch as mt } from "react-hook-form";
import { loader as ft, Editor as ht } from "@monaco-editor/react";
import * as gt from "monaco-editor";
import { configureMonacoYaml as bt } from "monaco-yaml";
import { LocalizationProvider as yt, DateField as xt } from "@mui/x-date-pickers";
import { AdapterDayjs as Ce } from "@mui/x-date-pickers/AdapterDayjs";
import se from "dayjs";
import Ct from "dayjs/plugin/relativeTime";
import wt from "dayjs/plugin/utc";
import { DateTimeField as St } from "@mui/x-date-pickers/DateTimeField";
import { LocalizationProvider as vt } from "@mui/x-date-pickers/LocalizationProvider";
import j from "@mui/material/Radio";
import we from "@mui/material/ToggleButton";
import Tt from "@mui/material/ToggleButtonGroup";
import M from "@mui/material/Typography";
import kt from "@mui/material/Autocomplete";
import { inputBaseClasses as Ft } from "@mui/material/InputBase";
import K from "@mui/material/TextField";
import { VisibilityOff as It, Visibility as Pt, AttachMoney as Et, ArrowDropDown as Rt, ArrowDropUp as Lt, Close as _t } from "@mui/icons-material";
import G from "@mui/material/Button";
import de from "@mui/material/MenuItem";
import Se from "@mui/icons-material/FilterAlt";
import ve from "@mui/material/Menu";
import Te from "@mui/material/RadioGroup";
import $t from "@mui/icons-material/Search";
import At from "@mui/material/Tooltip";
import Mt from "@mui/icons-material/ExpandMore";
import Nt from "@mui/material/Accordion";
import Ot from "@mui/material/AccordionDetails";
import Wt from "@mui/material/AccordionSummary";
import Bt from "@mui/icons-material/Check";
function zt({ sx: e, text: t }) {
const [o, r] = k(!1);
return /* @__PURE__ */ n(fe, { title: o ? "Copied" : "Copy", children: /* @__PURE__ */ n(S, { sx: e, onMouseLeave: () => window.setTimeout(() => r(!1), 100), children: /* @__PURE__ */ n(
be,
{
"aria-label": "copy",
onClick: () => {
const l = document.createElement("button");
l.style.position = "fixed", l.style.opacity = "0", l.style.pointerEvents = "none", document.body.append(l), l.focus(), l.click(), navigator.clipboard.writeText(t), l.remove(), r(!0);
},
sx: {
cursor: "pointer"
},
children: o ? /* @__PURE__ */ n(Ve, {}) : /* @__PURE__ */ n(je, {})
}
) }) });
}
function $n({ text: e, language: t = "bash" }) {
return /* @__PURE__ */ m(
S,
{
sx: {
display: "flex",
alignItems: "center",
paddingLeft: 1.5,
bgcolor: "secondary.darkMedium",
borderRadius: 1,
borderColor: "neutral.300",
border: "1px solid",
justifyContent: "space-between"
},
children: [
/* @__PURE__ */ n(
ze,
{
codeTagProps: {
style: {
backgroundColor: "transparent",
fontSize: "13px",
fontVariantLigatures: "none",
lineHeight: "150%",
maxWidth: "100%",
overflow: "auto",
verticalAlign: "middle"
}
},
customStyle: {
background: "transparent",
borderBottomLeftRadius: 8,
borderBottomRightRadius: 8,
fontFamily: "'Azeret Mono Variable', sans-serif",
marginBottom: 0,
marginTop: 0,
padding: 0
},
language: t,
style: De,
useInlineStyles: !0,
children: e
}
),
/* @__PURE__ */ n(zt, { text: e, sx: { alignSelf: "flex-start" } })
]
}
);
}
function An({ sizes: e, ...t }) {
const [o, r] = k(!1), [i, l] = k(!1), c = y((d) => {
(d.code === "Enter" || d.code === "Space") && (d.preventDefault(), l(!0));
}, []), a = y((d) => {
d.preventDefault(), d.stopPropagation(), l(!0);
}, []), s = y(() => {
l(!1), r(!1);
}, []), u = y(
(d) => {
d.target.closest("img") || s();
},
[s]
);
return /* @__PURE__ */ m(ne, { children: [
/* @__PURE__ */ n(
"button",
{
onClick: a,
onKeyDown: c,
style: {
background: "none",
border: "none",
cursor: "pointer",
padding: 0,
position: "relative",
width: "100%"
},
children: /* @__PURE__ */ n(
"img",
{
...t,
sizes: e,
style: {
display: "block",
height: "auto",
maxWidth: "100%",
borderRadius: "8px",
...t.style
}
}
)
}
),
/* @__PURE__ */ n(
nt,
{
"aria-label": t.alt,
onClose: s,
open: i,
slotProps: {
backdrop: {
sx: {
[`&:not(.${rt.invisible})`]: { backgroundColor: "rgba(0, 0, 0, 0.85)" }
}
}
},
children: /* @__PURE__ */ m(
S,
{
height: "100%",
onClick: u,
paddingX: 2,
paddingY: 7,
sx: { position: "relative" },
width: "100%",
children: [
/* @__PURE__ */ n(
be,
{
autoFocus: !0,
onClick: s,
sx: { position: "absolute", right: 8, top: 8 },
title: "Close",
children: /* @__PURE__ */ n(tt, {})
}
),
/* @__PURE__ */ m(
v,
{
alignItems: "center",
height: "100%",
justifyContent: "center",
overflow: "auto",
position: "relative",
width: "100%",
children: [
!o && /* @__PURE__ */ n(ye, {}),
/* @__PURE__ */ n(
"img",
{
...t,
height: typeof window > "u" ? 0 : window.top?.innerHeight,
onLoad: () => r(!0),
sizes: "100vw",
style: {
height: "auto",
maxHeight: o ? "100%" : 0,
maxWidth: "100%",
width: "auto"
},
width: typeof window > "u" ? 0 : window.top?.innerWidth
}
)
]
}
)
]
}
)
}
)
] });
}
function Mn({ children: e, ...t }) {
const o = q(null), r = y((i) => {
if (i.target === o.current) {
const l = o.current.querySelector(
'[aria-selected="true"]'
);
l ? l.focus() : o.current.querySelector(
'[role="treeitem"]'
)?.focus();
}
}, []);
return /* @__PURE__ */ n(xe, { ref: o, onFocus: r, role: "tree", tabIndex: 0, ...t, children: e });
}
const Dt = ({ children: e, ...t }) => /* @__PURE__ */ n(xe, { role: "group", ...t, children: e }), Nn = V.memo(Dt);
function jt(e) {
const t = q(null), o = y((s) => {
if (!s) return;
const u = s.querySelector('[role="group"]');
if (u && u.firstElementChild)
u.firstElementChild.focus();
else {
let d = s.nextElementSibling;
for (; d && d.getAttribute("role") !== "treeitem"; )
d = d.nextElementSibling;
if (d)
d.focus();
else {
let h = s.parentElement?.closest(
'[role="treeitem"]'
);
for (; h; ) {
for (d = h.nextElementSibling; d && d.getAttribute("role") !== "treeitem"; )
d = d.nextElementSibling;
if (d) {
d.focus();
break;
}
h = h.parentElement?.closest('[role="treeitem"]');
}
}
}
}, []), r = y((s) => {
if (!s) return;
let u = s.previousElementSibling;
for (; u && u.getAttribute("role") !== "treeitem"; )
u = u.previousElementSibling;
if (u) {
const d = u.querySelector('[role="group"]');
d && d.lastElementChild ? d.lastElementChild.focus() : u.focus();
} else
s.parentElement?.closest(
'[role="treeitem"]'
)?.focus();
}, []), i = y(() => {
document.querySelector('[role="treeitem"]')?.focus();
}, []), l = y(() => {
Array.from(document.querySelectorAll('[role="treeitem"]')).at(-1)?.focus();
}, []), c = y(() => {
t.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
}, []), a = y(
(s) => {
if (s.shiftKey && s.key === "Tab") {
const u = t.current?.closest('[role="tree"]'), d = u ? Vt(u) : null;
d && (d.focus(), s.preventDefault());
return;
}
switch (s.key) {
case "ArrowDown": {
o(t.current), s.preventDefault(), s.stopPropagation();
break;
}
case "ArrowUp": {
r(t.current), s.preventDefault(), s.stopPropagation();
break;
}
case "Home": {
i(), s.preventDefault(), s.stopPropagation();
break;
}
case "End": {
l(), s.preventDefault(), s.stopPropagation();
break;
}
case "Enter":
case " ": {
e(), s.preventDefault(), s.stopPropagation();
break;
}
}
},
[
i,
l,
o,
r,
e
]
);
return { handleFocus: c, handleKeyDown: a, listItemRef: t };
}
const Vt = (e) => {
const o = Array.from(
document.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])')
), r = o.indexOf(e);
let i = null;
for (let l = r - 1; l >= 0; l--)
if (o[l].offsetParent !== null) {
i = o[l];
break;
}
return i;
}, Ht = ({
children: e,
isExpanded: t,
isSelected: o,
onSelect: r,
sx: i,
...l
}) => {
const { palette: c } = Y(), { handleFocus: a, handleKeyDown: s, listItemRef: u } = jt(r);
return /* @__PURE__ */ n(
ot,
{
ref: u,
"aria-expanded": t,
"aria-selected": o,
onFocus: a,
onKeyDown: s,
role: "treeitem",
sx: {
"&:focus>*:first-of-type:not(ul)": {
bgcolor: it(c.primary.main, 0.12)
},
"&>*:first-of-type:not(ul):hover": {
bgcolor: c.action.hover,
cursor: "pointer"
},
display: "block",
outline: "none",
padding: 0,
...i
},
tabIndex: -1,
...l,
children: e
}
);
}, On = V.memo(Ht);
function Wn({ children: e, subheader: t, title: o }) {
return /* @__PURE__ */ m(le, { children: [
/* @__PURE__ */ n(ct, { subheader: t, title: o }),
/* @__PURE__ */ n(
ae,
{
sx: {
paddingBottom: 4,
paddingRight: 3,
paddingTop: 0.5,
[`.${at.root}`]: {
overflow: "visible"
},
[`.${dt.root}`]: {
paddingBottom: 1,
paddingLeft: 4,
paddingTop: 0
},
[`.${st.root}`]: {
paddingBottom: 0,
paddingLeft: 4,
paddingRight: 0
}
},
children: /* @__PURE__ */ n(v, { spacing: 2, children: e })
}
)
] });
}
const Jt = V.forwardRef(
({ children: e, ...t }, o) => /* @__PURE__ */ n(
ut,
{
ref: o,
...t,
sx: { cursor: "pointer", ...t.sx },
target: "_blank",
rel: "noopener noreferrer",
children: e
}
)
);
Jt.displayName = "Link";
const E = {
config_bad_error_codes: "Error codes are optional. But they can only be an object of string-keyed strings.",
config_bad_state_schema: "stateSchema is optional. But they can only be an object of string-keyed yup.AnySchema.",
config_no_config: "Please provide a PluginConfig to the PluginContextProvider",
config_no_docs: "Please provide a PluginConfig `docsLink` to the PluginContextProvider. Example: `https://hub.cloudquery.io/plugins/destination/cloudquery/mysql/latest/docs`",
config_no_steps: "Please provide a PluginConfig `steps` to the PluginContextProvider as an array of `Sections`. Steps are responsible for the React layout of your form, as well as form validation.",
duplicate_names: "These form field names have been defined more than once. Form field names can only be used a single time.",
no_children: "PluginConfig step sections must have a `children` property",
no_component: "PluginConfig step sections must have a `component` property",
no_label: "PluginConfig step sections components must have a `label` property. It is used as a display label for the form field.",
no_name: "PluginConfig step sections components must have a `name` property. It is used as a unique identifier for the yup form validation.",
no_schema: "PluginConfig step sections components must have a `schema` property. It is used as a definition of the yup schema validation for the form field.",
no_title: "PluginConfig step sections must have a `title` property",
reserved_name: "This is a reserved name. Please use a different identifier for your form field"
}, Ut = ["displayName", "name", "tables", "connectorId", "onboardingId"], qt = (e) => ["collapsible-section", "section"].includes(e), Kt = (e) => ["control-table-selector", "control-oauth", "control-service-selector"].includes(e), Gt = (e) => !["control-exclusive-toggle", "control-service-selector", "control-code-field"].includes(
e
);
function Yt(e) {
return e.filter((t, o, r) => r.indexOf(t) !== o);
}
function ke(e) {
const t = [];
if (typeof e == "function")
return [];
if (!e.component)
throw new Error(E.no_component);
if (typeof e.component == "function")
return [];
if (e.component.includes("section")) {
const o = e;
if (qt(e.component) && !o.title)
throw new Error(`${E.no_title}: ${JSON.stringify(o)}`);
if (!o.children)
throw new Error(`${E.no_children}: ${JSON.stringify(o)}`);
t.push(
...o.children.flatMap((r) => ke(r))
);
}
if (e.component.includes("control") && !Kt(e.component)) {
const o = e;
if (!o.name)
throw new Error(`${E.no_name}: ${JSON.stringify(o)}`);
if (Ut.includes(o.name))
throw new Error(`${E.reserved_name}: ${o.name}`);
if (t.push(o.name), Gt(o.component) && !o.label)
throw new Error(`${E.no_label}: ${JSON.stringify(o)}`);
if (!o.schema)
throw new Error(`${E.no_schema}: ${JSON.stringify(o)}`);
}
return t.flat();
}
function Xt(e) {
if (!Array.isArray(e))
throw new TypeError(E.config_no_steps);
return e.flatMap((t, o) => {
if (!t.children || !Array.isArray(t.children))
throw new Error(`${E.no_children}: Step ${o}`);
return t.children.flatMap((r) => ke(r));
});
}
function Qt(e, t, o) {
if (!e)
throw new Error(E.config_no_config);
if (!e.docsLink)
throw new Error(E.config_no_docs);
if (!e.steps)
throw new Error(E.config_no_steps);
if (e.stateSchema && typeof e.stateSchema != "object")
throw new Error(E.config_bad_state_schema);
if (e.errorCodes && typeof e.errorCodes != "object")
throw new Error(E.config_bad_error_codes);
const r = Xt(e.steps), i = Yt(r);
if (i.length > 0)
throw new Error(`${E.duplicate_names}: ${i}`);
return e;
}
const Fe = Be({
config: {
auth: [],
docsLink: "",
errorCodes: {},
guide: () => /* @__PURE__ */ n(ne, {}),
stateSchema: void 0,
steps: [],
scriptUrl: ""
},
isDisabled: !1,
plugin: {
kind: "",
name: "",
team: "",
version: ""
},
pluginVersion: {
created_at: "",
name: "",
message: "",
draft: !1,
retracted: !1,
supported_targets: [],
checksums: [],
package_type: "native",
example_config: ""
},
teamName: ""
}), Ie = () => We(Fe), Bn = ({
children: e,
config: t,
isDisabled: o,
plugin: r,
initialValues: i,
teamName: l,
pluginVersion: c
}) => {
const a = I(() => Qt(t), [t]);
return /* @__PURE__ */ n(
Fe.Provider,
{
value: {
config: a,
pluginVersion: c,
isDisabled: o || !1,
plugin: r,
teamName: l,
initialValues: i
},
children: e
}
);
}, ue = "************";
function zn(e) {
return [...new Set(e.flatMap((t) => t.tables))].map((t) => ({
description: "",
is_incremental: !1,
name: t,
relations: [],
title: t
}));
}
const Zt = (e) => {
const t = [], o = (r) => {
if (t.push({
...r,
is_incremental: !!r.is_incremental,
relations: r.relations?.map((i) => i.name) || []
}), r.relations)
for (const i of r.relations)
o(i);
};
for (const r of e)
o(r);
return t;
};
function er({
tables: e,
serviceLabelMap: t,
serviceNameResolutions: o
}) {
const r = {}, i = Zt(e);
for (const l of i) {
const c = l.name;
let a = c.split("_")[1];
if (o[a] && (a = o[a]), r[a])
r[a].tables.push(c);
else {
const s = t[a], d = s ? /\[(.*?)]/.exec(s)?.[1] : void 0;
r[a] = {
name: a,
shortLabel: d,
label: t[a] ?? a,
logo: `images/${a}.webp`,
tables: [c]
};
}
}
return Object.values(r);
}
function tr(e) {
return e.replaceAll("\\", "\\\\").replaceAll("'", String.raw`\'`);
}
const Pe = new RegExp(/\${[^}]+}/, "g"), Ee = (e) => e.match(Pe), re = (e) => !!Ee(e), rr = (e) => {
const t = Ee(e);
return t ? t[0].length === e.length ? ue : e.replace(Pe, ue.slice(0, 6)) : e;
};
function nr(e, t) {
const o = [], r = {};
for (const i of t._secretKeys ?? []) {
const c = or(e, i).every((s) => s(t)), a = t[i];
c && a !== void 0 ? (o.push({
name: i,
value: re(a) ? "" : a
}), r[i] = `\${${tr(i)}}`) : r[i] = void 0;
}
return {
envs: o,
spec: r
};
}
function or(e, t) {
const o = [];
function r(i) {
if ("shouldRender" in i && typeof i.shouldRender == "function" && o.push(i.shouldRender), "name" in i && i.name === t)
return !0;
if ("children" in i && Array.isArray(i.children)) {
for (const l of i.children)
if (typeof l != "function" && r(l))
return !0;
}
return "shouldRender" in i && typeof i.shouldRender == "function" && o.pop(), !1;
}
for (const i of e)
for (const l of i.children)
if (typeof l != "function" && r(l))
break;
return o;
}
function Dn({
config: e,
tables: t,
values: o
}) {
const r = {
displayName: o.displayName,
name: o.name,
spec: {},
tables: t ? ir(o.tables, t) : void 0
}, i = nr(e.steps, o);
return {
...r,
envs: i.envs,
spec: {
...r.spec,
...i.spec
}
};
}
const ir = (e, t) => {
const o = Object.entries(e).filter(([, r]) => !!r).map(([r]) => r);
return o.length === t.length ? ["*"] : o;
};
function lr(e) {
const t = /* @__PURE__ */ new Map();
if (!e)
return [];
for (const r of e) {
const i = t.get(r.name);
if (t.set(r.name, {
...r,
...i,
parentTable: void 0,
parent: "",
relationTables: [],
...t.get(r.name)
}), r.relations.length > 0)
for (const l of r.relations) {
const c = t.get(l);
t.set(l, {
...c,
parent: r.name
});
}
}
const o = Array.from(t.values());
for (const r of o)
if (r.parent && (r.parentTable = t.get(r.parent)), (r.relations?.length ?? 0) > 0)
for (const i of r.relations) {
const l = t.get(i);
l && r.relationTables.push(l);
}
return o;
}
function B(e, t) {
if (!e)
return t;
const o = e.endsWith(".") ? `${e} ` : `${e}. `;
return typeof t == "string" ? /* @__PURE__ */ m(
S,
{
component: "span",
sx: {
whiteSpace: "pre-line"
},
children: [
o,
t
]
}
) : /* @__PURE__ */ m(
S,
{
component: "span",
sx: {
whiteSpace: "pre-line"
},
children: [
o,
t
]
}
);
}
function Re(e, t) {
if (e.startsWith("http"))
return e;
const o = new URL(t);
if (e.startsWith("/"))
return `${o.origin}${e}`;
const r = o.pathname.endsWith(".js") ? o.pathname.split("/").slice(0, -1).join("/") : o.pathname;
return e.startsWith("./") ? `${o.origin}${r}${e.slice(1)}` : `${o.origin}${r}/${e}`;
}
const U = 4;
function ar({ width: e = 24, height: t = 24, src: o, alt: r, fallbackSrc: i }) {
const { palette: l } = Y(), { config: c } = Ie(), [a, s] = k(() => o), [u, d] = k(!1), h = () => {
i && s(i);
};
return /* @__PURE__ */ m(
S,
{
sx: {
borderRadius: `${U}px`,
padding: `${U}px`,
backgroundColor: l.secondary.light,
height: t,
width: e,
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative"
},
children: [
!u && /* @__PURE__ */ n(
ye,
{
sx: { position: "absolute", top: U / 2 },
size: `${e - U}px`
}
),
/* @__PURE__ */ n(
"img",
{
src: Re(a, c.scriptUrl),
alt: r ?? o,
height: t - U,
width: e - U,
onLoad: () => d(!0),
onError: h
}
)
]
}
);
}
function jn({
name: e,
label: t,
type: o = "toggle",
helperText: r = "",
disabled: i
}) {
const l = o === "toggle" ? pt : X;
return /* @__PURE__ */ n(
_,
{
name: e,
render: ({ field: c, fieldState: a }) => /* @__PURE__ */ m(ee, { children: [
/* @__PURE__ */ n(
W,
{
control: /* @__PURE__ */ n(l, { checked: c.value, ...c, disabled: i }),
label: t
}
),
/* @__PURE__ */ n(te, { error: !!a.error?.message, sx: { marginLeft: 0 }, children: B(a.error?.message, r) })
] })
}
);
}
const sr = oe(
({ onMount: e, options: t = {}, yamlSchema: o, container: r, name: i, label: l, helperText: c, disabled: a, ...s }, u) => {
const [d, h] = k(!0), [f, x] = k(!1), R = q(void 0);
ce(() => {
ft.config({ monaco: gt }), x(!0);
}, []);
const L = y(
async (b, g) => {
if (u && (typeof u == "function" ? u(b) : u.current = b), g.editor.defineTheme("custom-theme", {
base: "vs-dark",
colors: {
"editor.background": "#15202E",
"editor.foreground": "#FFFFFF"
},
inherit: !0,
rules: []
}), g.editor.setTheme("custom-theme"), s.language === "yaml" && o) {
const { dispose: P } = bt(g, {
schemas: [
{
fileMatch: ["*"],
schema: o,
uri: "inmemory://my-schema.json"
}
],
validate: !1
});
R.current = P;
}
e && await e(b, g), h(!1);
},
[e, s.language, o, u]
);
ce(() => () => {
R.current?.();
}, []);
const F = () => /* @__PURE__ */ n(v, { width: "100%", alignItems: "center", justifyContent: "center", padding: 2, children: /* @__PURE__ */ n(qe, {}) });
return f ? /* @__PURE__ */ m(
He,
{
sx: {
height: "300px",
minHeight: 0,
border: "1px solid",
borderColor: "neutral.300",
borderRadius: 1,
paddingY: 1,
paddingX: 1.5,
bgcolor: "#15202E",
...!l && {
"& .monaco-editor": {
outline: "none"
}
}
},
children: [
!!l && /* @__PURE__ */ n(Je, { sx: { mb: 1 }, children: l }),
/* @__PURE__ */ n(
_,
{
name: i,
render: ({ field: b, fieldState: g }) => /* @__PURE__ */ m(ne, { children: [
!!c && /* @__PURE__ */ m(Ue, { sx: { mb: 1.5 }, children: [
!!g.error?.message && /* @__PURE__ */ n(he, { color: "error.main", children: g.error?.message }),
c
] }),
/* @__PURE__ */ m(
v,
{
height: "100%",
minHeight: 0,
sx: {
position: "relative",
visibility: d ? "hidden" : "visible"
},
children: [
d && /* @__PURE__ */ n(F, {}),
/* @__PURE__ */ n(
ht,
{
...s,
loading: /* @__PURE__ */ n(F, {}),
onChange: (P) => b.onChange(P ?? ""),
onMount: L,
options: {
automaticLayout: !0,
minimap: {
enabled: !1
},
quickSuggestions: !0,
suggestOnTriggerCharacters: !0,
lineNumbers: "off",
folding: !1,
lineDecorationsWidth: 0,
lineNumbersMinChars: 0,
glyphMargin: !1,
scrollbar: {
alwaysConsumeMouseWheel: !1
},
overflowWidgetsDomNode: r,
readOnly: a,
...t
},
value: b.value
}
)
]
}
)
] })
}
)
]
}
) : /* @__PURE__ */ n(F, {});
}
);
sr.displayName = "ControlCodeField";
se.extend(wt);
se.extend(Ct);
function Le(e) {
return e ? se(e) : null;
}
function Vn({
name: e,
label: t,
helperText: o = "",
disabled: r,
clearable: i = !0,
InputProps: l
}) {
return /* @__PURE__ */ n(
_,
{
name: e,
render: ({ field: c, fieldState: a }) => /* @__PURE__ */ n(yt, { dateAdapter: Ce, children: /* @__PURE__ */ n(
xt,
{
disableFuture: !0,
size: "small",
disabled: r,
clearable: i,
label: t,
slotProps: {
textField: {
error: !!a.error,
name: c.name,
helperText: B(a.error?.message, o),
InputProps: l
}
},
...c,
value: Le(c.value)
}
) })
}
);
}
function Hn({
name: e,
label: t,
helperText: o = "",
disabled: r,
clearable: i = !0,
InputProps: l
}) {
return /* @__PURE__ */ n(
_,
{
name: e,
render: ({ field: c, fieldState: a }) => /* @__PURE__ */ n(vt, { dateAdapter: Ce, children: /* @__PURE__ */ n(
St,
{
disableFuture: !0,
disabled: r,
clearable: i,
size: "small",
label: t,
slotProps: {
textField: {
error: !!a.error,
name: c.name,
helperText: B(a.error?.message, o),
InputProps: l
}
},
...c,
value: Le(c.value)
}
) })
}
);
}
const _e = oe(
({ options: e, onChange: t, value: o, title: r, disabled: i }, l) => {
const { palette: c } = Y();
return /* @__PURE__ */ n(
Tt,
{
"aria-label": r,
color: "primary",
exclusive: !0,
disabled: i,
onChange: (a, s) => {
a.type === "click" && s !== null && t(s);
},
value: o,
ref: l,
children: /* @__PURE__ */ n(
v,
{
direction: "row",
spacing: 2,
sx: {
width: "100%"
},
children: e.map((a) => {
const s = o === a.value;
return /* @__PURE__ */ m(
we,
{
disabled: a.disabled,
fullWidth: !0,
value: a.value,
sx: {
padding: a.description ? void 0 : "2px"
},
children: [
/* @__PURE__ */ n(j, { checked: s }),
/* @__PURE__ */ m(
v,
{
spacing: 0.5,
sx: {
marginLeft: 0.5,
paddingY: 1.25
},
children: [
/* @__PURE__ */ n(
M,
{
sx: {
color: s ? c.text.primary : c.text.secondary,
opacity: s ? 1 : 0.8
},
variant: "body1Bold",
children: a.label
}
),
!!a.description && /* @__PURE__ */ n(
M,
{
sx: {
color: s ? c.text.primary : c.text.secondary,
opacity: s ? 1 : 0.8
},
variant: "body2",
children: a.description
}
)
]
}
)
]
},
String(a.value)
);
})
}
)
}
);
}
);
_e.displayName = "ExclusiveToggle";
function Jn({
name: e,
options: t,
children: o,
disabled: r
}) {
return /* @__PURE__ */ m(
v,
{
sx: {
gap: 1
},
children: [
o,
/* @__PURE__ */ n(
_,
{
name: e,
render: ({ field: i }) => /* @__PURE__ */ n(_e, { options: t, ...i, disabled: r })
}
)
]
}
);
}
const $e = V.forwardRef(
({
label: e,
disabled: t,
value: o,
onChange: r,
onBlur: i,
name: l,
helperText: c,
error: a,
codeSeparators: s = ["Space"],
options: u
}, d) => {
const h = { onBlur: i, name: l, ref: d, disabled: t };
return /* @__PURE__ */ n(
kt,
{
id: `autocomplete-${l}`,
multiple: !0,
freeSolo: !u,
autoSelect: !0,
clearOnBlur: !0,
disabled: t,
options: u ?? [],
getOptionLabel: (f) => f,
value: o,
onChange: (f, x) => {
r(x);
},
onKeyDown: (f) => {
const x = f.target;
s.includes(f.code) && x?.value?.trim().length > 0 && (f.preventDefault(), f.stopPropagation(), x.blur(), x.focus());
},
filterSelectedOptions: !0,
renderInput: (f) => /* @__PURE__ */ n(
K,
{
...f,
...h,
sx: {
[`& .${Ft.root}`]: {
minHeight: "52px"
}
},
size: "small",
error: !!a,
fullWidth: !0,
helperText: c,
label: e
}
)
}
);
}
);
$e.displayName = "MultiAutocomplete";
function Un({
name: e,
helperText: t = "",
label: o,
codeSeparators: r,
options: i,
disabled: l
}) {
const { trigger: c, formState: a } = Q(), s = I(() => {
if (a.errors?.[e])
return a.errors?.[e]?.message;
{
const u = Object.keys(a.errors).find((d) => d.includes(e));
if (u)
return a.errors[u]?.message ?? "";
}
return "";
}, [a, e]);
return /* @__PURE__ */ n(
_,
{
name: e,
render: ({ field: u }) => {
const { onChange: d, value: h, ...f } = u;
return /* @__PURE__ */ n(
$e,
{
value: h,
onChange: (x) => {
d(x), c(e);
},
disabled: l,
...f,
error: !!s,
helperText: B(s, t),
label: o,
codeSeparators: r,
options: i
}
);
}
}
);
}
function qn({
name: e,
label: t,
helperText: o = "",
textFieldProps: r = {},
disabled: i
}) {
return /* @__PURE__ */ n(
_,
{
name: e,
render: ({ field: l, fieldState: c }) => /* @__PURE__ */ n(
K,
{
error: !!c.error,
fullWidth: !0,
disabled: i,
size: "small",
helperText: B(c.error?.message, o),
label: t,
...l,
...r,
type: "number",
onWheel: (a) => a.target instanceof HTMLElement && a.target.blur(),
sx: {
"input::-webkit-inner-spin-button": {
WebkitAppearance: "none",
margin: 0
},
input: {
MozAppearance: "textfield"
}
}
}
)
}
);
}
function cr({
isResetted: e,
onReset: t,
onCancel: o,
inputSelectorToFocus: r,
sx: i,
disabled: l
}) {
const c = y(() => {
t(), r && setTimeout(() => {
document.querySelector(r)?.focus();
}, 0);
}, [t, r]);
return e ? /* @__PURE__ */ n(
G,
{
size: "small",
onClick: o,
sx: { width: 80, ...i },
variant: "outlined",
disabled: l,
children: "Cancel"
}
) : /* @__PURE__ */ n(
G,
{
size: "small",
onClick: c,
sx: { width: 80, ...i },
variant: "outlined",
disabled: l,
children: "Reset"
}
);
}
const pe = (e, t) => (
// eslint-disable-next-line unicorn/no-array-reduce
t.split(".").reduce((o, r) => o[r], e)
);
function dr() {
const e = document.createElement("input");
return e.style.display = "none", document.body.append(e), !!window.getComputedStyle(e).webkitTextSecurity;
}
const ur = dr(), Ae = V.forwardRef(
({
name: e,
label: t,
disabled: o,
value: r,
onChange: i,
onBlur: l,
editMode: c,
defaultValues: a,
textFieldProps: s,
setValue: u,
getValues: d,
error: h,
helperText: f,
disableVisibilityToggle: x
}, R) => {
const [L, F] = k(!1), [b, g] = k(!1), P = () => {
F(!0), g(!1), u(e, "");
}, z = () => {
F(!1), g(!1), u(e, pe(a, e));
}, H = c && re(pe(a, e)), N = H && !L && re(d(e)), J = N ? rr(r) : r, O = !b && !!r && !N, $ = ur || s?.multiline;
return /* @__PURE__ */ m(
v,
{
direction: "row",
spacing: 2,
sx: {
alignItems: "flex-start"
},
children: [
/* @__PURE__ */ n(
K,
{
error: !!h,
fullWidth: !0,
helperText: f,
label: t,
autoComplete: $ ? "off" : "one-time-code",
required: !0,
onChange: i,
onBlur: l,
disabled: o || N,
value: J,
...s,
sx: {
...s?.sx,
input: {
...s?.sx?.input,
WebkitTextSecurity: $ && O ? "disc" : void 0
},
textarea: {
...s?.sx?.textarea,
WebkitTextSecurity: $ && O ? "disc" : void 0
}
},
ref: R,
name: e,
size: "small",
slotProps: {
input: {
endAdornment: !x && !N ? /* @__PURE__ */ n(Ke, { position: "end", children: /* @__PURE__ */ n(
ie,
{
"aria-label": "toggle visibility",
edge: "end",
onClick: () => g(!b),
children: b ? /* @__PURE__ */ n(It, {}) : /* @__PURE__ */ n(Pt, {})
}
) }) : null
}
},
type: !$ && O && !s?.multiline ? "password" : "text"
}
),
H && /* @__PURE__ */ n(
cr,
{
isResetted: L || !N,
inputSelectorToFocus: `input[name="${e}"]`,
onCancel: () => z(),
onReset: () => P(),
sx: { minHeight: 48 },
disabled: o
}
)
]
}
);
}
);
Ae.displayName = "SecretInput";
function Kn({
name: e,
label: t,
helperText: o = "",
textFieldProps: r = {},
disableVisibilityToggle: i,
editMode: l,
disabled: c
}) {
const { formState: a, getValues: s, setValue: u } = Q();
return /* @__PURE__ */ n(
_,
{
name: e,
render: ({ field: d, fieldState: h }) => /* @__PURE__ */ n(
Ae,
{
editMode: l,
label: t,
defaultValues: a.defaultValues,
setValue: u,
getValues: s,
helperText: B(h.error?.message, o),
error: !!h.error,
textFieldProps: r,
disableVisibilityToggle: i,
disabled: c,
...d
}
)
}
);
}
function Gn({
name: e,
helperText: t = "",
label: o,
options: r,
disabled: i
}) {
return /* @__PURE__ */ n(
_,
{
name: e,
render: ({ field: l, fieldState: c }) => /* @__PURE__ */ n(
K,
{
error: !!c.error,
fullWidth: !0,
helperText: B(c.error?.message, t),
label: o,
select: !0,
size: "small",
disabled: i,
...l,
slotProps: {
select: {
MenuProps: {
disableScrollLock: !0,
autoFocus: !1,
disableAutoFocus: !0
}
}
},
children: r.map((a) => {
if (typeof a == "string")
return /* @__PURE__ */ n(de, { value: a, children: a }, a);
{
const s = a;
return /* @__PURE__ */ n(de, { value: s.value, children: s.label }, s.value);
}
})
}
)
}
);
}
const pr = lt(K)(({ size: e = "medium" }) => ({
"& .MuiInputBase-input": {
"&::placeholder": {
color: "neutral.200"
},
color: "neutral.200",
padding: 0
},
"& .MuiInputBase-root": {
backgroundColor: "background.paperTertiary",
border: "none",
borderRadius: 12,
height: e === "small" ? 40 : 52,
padding: "0 24px",
width: "100%"
}
}));
function Me(e) {
return /* @__PURE__ */ n(
pr,
{
...e,
slotProps: {
...e.slotProps,
input: {
...e.slotProps?.input,
startAdornment: /* @__PURE__ */ n($t, { sx: { fontSize: 20, marginRight: 1 } })
}
}
}
);
}
function mr({
onSearchChange: e,
onServiceTypeChange: t,
searchValue: o,
serviceTypeValue: r,
disabled: i
}) {
const [l, c] = k(!1), a = q(null), s = Z(), u = Z();
return /* @__PURE__ */ m(ge, { direction: "row", gap: 1, marginBottom: 2, width: "100%", children: [
/* @__PURE__ */ n(
Me,
{
fullWidth: !0,
onChange: (d) => e(d.target.value),
placeholder: "Search services or tables",
value: o,
disabled: i,
size: "small",
slotProps: {
root: {
sx: {
backgroundColor: "secondary.darkMedium",
borderRadius: 1.5,
height: 38
}
}
}
}
),
/* @__PURE__ */ m(S, { children: [
/* @__PURE__ */ n(
G,
{
ref: a,
disabled: i,
"aria-controls": l ? s : void 0,
"aria-expanded": l ? "true" : void 0,
"aria-haspopup": "true",
endIcon: /* @__PURE__ */ n(Se, {}),
id: u,
onClick: () => c(!0),
sx: {
borderColor: "neutral.300",
color: r === "all" ? "text.secondary" : "text.primary",
height: "100%"
},
variant: "outlined",
children: "Filter"
}
),
/* @__PURE__ */ n(
ve,
{
anchorEl: a.current,
anchorOrigin: {
horizontal: "right",
vertical: "top"
},
id: s,
MenuListProps: {
"aria-labelledby": u
},
onClose: () => c(!1),
open: l || !1,
transformOrigin: {
horizontal: "right",
vertical: -60
},
children: /* @__PURE__ */ n(
S,
{
sx: {
paddingLeft: 1.5,
paddingRight: 2.5
},
children: /* @__PURE__ */ m(
Te,
{
onChange: (d) => {
t(d.target.value), c(!1);
},
sx: { paddingLeft: 0.5, paddingRight: 1.5 },
value: r,
children: [
/* @__PURE__ */ n(W, { control: /* @__PURE__ */ n(j, { size: "small" }), label: "Show all", value: "all" }),
/* @__PURE__ */ n(
W,
{
control: /* @__PURE__ */ n(j, { size: "small" }),
label: "Show selected",
value: "selected"
}
),
/* @__PURE__ */ n(
W,
{
control: /* @__PURE__ */ n(j, { size: "small" }),
label: "Show unselected",
value: "unselected"
}
)
]
}
)
}
)
}
)
] })
] });
}
function fr({
onSearchChange: e,
onTableTypeChange: t,
searchValue: o,
tableTypeValue: r,
disabled: i,
onlySearchFilter: l,
embeded: c
}) {
const [a, s] = k(!1), u = q(null), d = Z(), h = Z();
return /* @__PURE__ */ m(ge, { direction: "row", gap: 1, marginBottom: 2, children: [
/* @__PURE__ */ n(
Me,
{
fullWidth: !0,
onChange: (f) => e(f.target.value),
placeholder: "Search tables",
value: o,
disabled: i,
size: "small",
slotProps: {
root: {
sx: {
backgroundColor: "secondary.darkMedium",
border: c ? "1px solid" : void 0,
borderColor: c ? "nav.evident" : void 0,
borderRadius: 1.5,
height: 38
}
}
}
}
),
!l && /* @__PURE__ */ m(S, { children: [
/* @__PURE__ */ n(
G,
{
ref: u,
disabled: i,
"aria-controls": a ? d : void 0,
"aria-expanded": a ? "true" : void 0,
"aria-haspopup": "true",
endIcon: /* @__PURE__ */ n(Se, {}),
id: h,
onClick: () => s(!0),
sx: {
borderColor: "neutral.300",
color: r === "all" ? "text.secondary" : "text.primary",
height: "100%"
},
variant: "outlined",
children: "Filter"
}
),
/* @__PURE__ */ n(
ve,
{
anchorEl: u.current,
anchorOrigin: {
horizontal: "right",
vertical: "top"
},
id: d,
MenuListProps: {
"aria-labelledby": h
},
onClose: () => s(!1),
open: a || !1,
transformOrigin: {
horizontal: "right",
vertical: -60
},
children: /* @__PURE__ */ n(
S,
{
sx: {
paddingLeft: 1.5,
paddingRight: 2.5
},
children: /* @__PURE__ */ m(
Te,
{
onChange: (f) => {
t(f.target.value), s(!1);
},
sx: { paddingLeft: 0.5, paddingRight: 1.5 },
value: r,
children: [
/* @__PURE__ */ n(W, { control: /* @__PURE__ */ n(j, { size: "small" }), label: "Show all", value: "all" }),
/* @__PURE__ */ n(
W,
{
control: /* @__PURE__ */ n(j, { size: "small" }),
label: "Show selected",
value: "selected"
}
),
/* @__PURE__ */ n(
W,
{
control: /* @__PURE__ */ n(j, { size: "small" }),
label: "Show unselected",
value: "unselected"
}
)
]
}
)
}
)
}
)
] })
] });
}
const hr = ({
value: e,
onSelect: t,
selectedAsIndeterminate: o,
tableListItem: r,
disabled: i,
depth: l,
collapsed: c,
onCollapse: a,
hidden: s,
isSlow: u,
isExpensive: d
}) => {
const h = o && e, f = y(() => t(r), [t, r]);
return /* @__PURE__ */ m(
v,
{
sx: {
borderRadius: 1,
marginBottom: 0.25,
marginLeft: (l + 1) * 2.5
},
display: s ? "none" : void 0,
direction: "row",
justifyContent: "space-between",
alignItems: "center",
children: [
/* @__PURE__ */ n(
W,
{
disabled: i,
control: /* @__PURE__ */ n(
X,
{
disabled: i,
checked: e,
indeterminate: h,
name: r.name,
onChange: f,
size: "small",
sx: {
"&:hover": {
backgroundColor: "transparent"
}
},
tabIndex: -1
}
),
label: u || d ? /* @__PURE__ */ n(
fe,
{
title: `This table will greatly increase the ${[
u && "sync time",
d && "resource use"
].filter(Boolean).join(" and ")}`,
children: /* @__PURE__ */ m(v, { component: "span", direction: "row", alignItems: "center", children: [
/* @__PURE__ */ n(Et, { sx: { color: "nav.evident" } }),
/* @__PURE__ */ n(he, { component: "span", sx: { wordBreak: "break-word" }, children: r.name })
] })
}
) : r.name,
sx: {
borderRadius: 1,
marginLeft: 0,
overflowWrap: "anywhere"
}
}
),
r.relationTables.length > 0 && /* @__PURE__ */ n(ie, { color: "inherit", onClick: () => a(r), children: c ? /* @__PURE__ */ n(Rt, {}) : /* @__PURE__ */ n(Lt, {}) })
]
}
);
}, gr = V.memo(hr);
function br(e, t) {
const o = {
...e
};
if (e[t.name]) {
o[t.name] = !1;
const r = (i) => {
if (i.relationTables.length > 0)
for (const l of i.relationTables)
o[l.name] = !1, r(l);
};
r(t);
} else {
o[t.name] = !0;
let r = t;
for (; r.parentTable; )
o[r.parentTable.name] = !0, r = r.parentTable;
}
return o;
}
function yr(e, t, o, r) {
if (!o && r === "all")
return e;
const i = (l) => {
const c = l.rela