@webiny/app-headless-cms 6.0.0-rc.1 → 6.0.0-rc.3

package/admin/components/FieldEditor/EditFieldDialog/PermissionsTab/PermissionsTab.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { useQuery } from "@apollo/react-hooks";
+import { Grid } from "@webiny/admin-ui";
+import { useBind } from "@webiny/form";
+import { useWcp } from "@webiny/app-admin";
+import { LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS, UsersTeamsMultiAutocomplete } from "@webiny/app-aco";
+import { FieldPermissionsSelection } from "./FieldPermissionsSelection.js";
+import { CannotUsePermissions } from "./CannotUsePermissions.js";
+export const PermissionsTab = ({
+  gridClassName
+}) => {
+  const wcp = useWcp();
+  const bind = useBind({
+    name: "rules"
+  });
+  const allRules = bind.value || [];
+  const accessRules = allRules.filter(r => r.type === "accessControl");
+  const otherRules = allRules.filter(r => r.type !== "accessControl");
+  const listTargetsQuery = useQuery(LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS);
+  const targetsList = listTargetsQuery.data?.aco.listFolderLevelPermissionsTargets.data || [];
+  const addPermission = value => {
+    const selectedUserOrTeam = value[value.length - 1];
+    const newRule = {
+      type: "accessControl",
+      target: "identity",
+      operator: "matches",
+      value: selectedUserOrTeam,
+      action: "disable"
+    };
+    bind.onChange([...otherRules, ...accessRules, newRule]);
+  };
+  const updatePermission = ({
+    rule: updatedRule
+  }) => {
+    const updatedAccessRules = accessRules.map(rule => {
+      if (rule.value === updatedRule.value) {
+        return updatedRule;
+      }
+      return rule;
+    });
+    bind.onChange([...otherRules, ...updatedAccessRules]);
+  };
+  const removeUserTeam = ({
+    rule: removedRule
+  }) => {
+    const updatedAccessRules = accessRules.filter(rule => rule.value !== removedRule.value);
+    bind.onChange([...otherRules, ...updatedAccessRules]);
+  };
+  if (!wcp.canUseHcmsFieldPermissions()) {
+    return /*#__PURE__*/React.createElement(Grid, {
+      className: gridClassName
+    }, /*#__PURE__*/React.createElement(Grid.Column, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(CannotUsePermissions, null)));
+  }
+  return /*#__PURE__*/React.createElement(Grid, {
+    className: gridClassName
+  }, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(UsersTeamsMultiAutocomplete, {
+    options: targetsList,
+    value: accessRules.map(rule => String(rule.value)),
+    onChange: addPermission
+  })), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(FieldPermissionsSelection, {
+    rules: accessRules,
+    targetsList: targetsList,
+    onRemoveAccess: removeUserTeam,
+    onUpdatePermission: updatePermission
+  })));
+};
+
+//# sourceMappingURL=PermissionsTab.js.map

package/admin/components/FieldEditor/EditFieldDialog/PermissionsTab/PermissionsTab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useQuery","Grid","useBind","useWcp","LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS","UsersTeamsMultiAutocomplete","FieldPermissionsSelection","CannotUsePermissions","PermissionsTab","gridClassName","wcp","bind","name","allRules","value","accessRules","filter","r","type","otherRules","listTargetsQuery","targetsList","data","aco","listFolderLevelPermissionsTargets","addPermission","selectedUserOrTeam","length","newRule","target","operator","action","onChange","updatePermission","rule","updatedRule","updatedAccessRules","map","removeUserTeam","removedRule","canUseHcmsFieldPermissions","createElement","className","Column","span","options","String","rules","onRemoveAccess","onUpdatePermission"],"sources":["PermissionsTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { useQuery } from \"@apollo/react-hooks\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { useBind } from \"@webiny/form\";\nimport { useWcp } from \"@webiny/app-admin\";\nimport {\n    LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS,\n    UsersTeamsMultiAutocomplete\n} from \"@webiny/app-aco\";\nimport type { FolderLevelPermissionsTarget } from \"@webiny/app-aco\";\nimport type { FieldRule } from \"~/types.js\";\nimport { FieldPermissionsSelection } from \"./FieldPermissionsSelection.js\";\nimport { CannotUsePermissions } from \"./CannotUsePermissions.js\";\n\nexport const PermissionsTab = ({ gridClassName }: { gridClassName?: string }) => {\n    const wcp = useWcp();\n    const bind = useBind({ name: \"rules\" });\n    const allRules: FieldRule[] = bind.value || [];\n    const accessRules = allRules.filter(r => r.type === \"accessControl\");\n    const otherRules = allRules.filter(r => r.type !== \"accessControl\");\n\n    const listTargetsQuery = useQuery(LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS);\n    const targetsList: FolderLevelPermissionsTarget[] =\n        listTargetsQuery.data?.aco.listFolderLevelPermissionsTargets.data || [];\n\n    const addPermission = (value: string[]) => {\n        const selectedUserOrTeam = value[value.length - 1];\n        const newRule: FieldRule = {\n            type: \"accessControl\",\n            target: \"identity\",\n            operator: \"matches\",\n            value: selectedUserOrTeam,\n            action: \"disable\"\n        };\n\n        bind.onChange([...otherRules, ...accessRules, newRule]);\n    };\n\n    const updatePermission = ({ rule: updatedRule }: { rule: FieldRule }) => {\n        const updatedAccessRules = accessRules.map(rule => {\n            if (rule.value === updatedRule.value) {\n                return updatedRule;\n            }\n            return rule;\n        });\n        bind.onChange([...otherRules, ...updatedAccessRules]);\n    };\n\n    const removeUserTeam = ({ rule: removedRule }: { rule: FieldRule }) => {\n        const updatedAccessRules = accessRules.filter(rule => rule.value !== removedRule.value);\n        bind.onChange([...otherRules, ...updatedAccessRules]);\n    };\n\n    if (!wcp.canUseHcmsFieldPermissions()) {\n        return (\n            <Grid className={gridClassName}>\n                <Grid.Column span={12}>\n                    <CannotUsePermissions />\n                </Grid.Column>\n            </Grid>\n        );\n    }\n\n    return (\n        <Grid className={gridClassName}>\n            <Grid.Column span={12}>\n                <UsersTeamsMultiAutocomplete\n                    options={targetsList}\n                    value={accessRules.map(\n                        rule => String(rule.value) as `admin:${string}` | `team:${string}`\n                    )}\n                    onChange={addPermission}\n                />\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <FieldPermissionsSelection\n                    rules={accessRules}\n                    targetsList={targetsList}\n                    onRemoveAccess={removeUserTeam}\n                    onUpdatePermission={updatePermission}\n                />\n            </Grid.Column>\n        </Grid>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,OAAO,QAAQ,cAAc;AACtC,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SACIC,qCAAqC,EACrCC,2BAA2B,QACxB,iBAAiB;AAGxB,SAASC,yBAAyB;AAClC,SAASC,oBAAoB;AAE7B,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAAEC;AAA0C,CAAC,KAAK;EAC7E,MAAMC,GAAG,GAAGP,MAAM,CAAC,CAAC;EACpB,MAAMQ,IAAI,GAAGT,OAAO,CAAC;IAAEU,IAAI,EAAE;EAAQ,CAAC,CAAC;EACvC,MAAMC,QAAqB,GAAGF,IAAI,CAACG,KAAK,IAAI,EAAE;EAC9C,MAAMC,WAAW,GAAGF,QAAQ,CAACG,MAAM,CAACC,CAAC,IAAIA,CAAC,CAACC,IAAI,KAAK,eAAe,CAAC;EACpE,MAAMC,UAAU,GAAGN,QAAQ,CAACG,MAAM,CAACC,CAAC,IAAIA,CAAC,CAACC,IAAI,KAAK,eAAe,CAAC;EAEnE,MAAME,gBAAgB,GAAGpB,QAAQ,CAACI,qCAAqC,CAAC;EACxE,MAAMiB,WAA2C,GAC7CD,gBAAgB,CAACE,IAAI,EAAEC,GAAG,CAACC,iCAAiC,CAACF,IAAI,IAAI,EAAE;EAE3E,MAAMG,aAAa,GAAIX,KAAe,IAAK;IACvC,MAAMY,kBAAkB,GAAGZ,KAAK,CAACA,KAAK,CAACa,MAAM,GAAG,CAAC,CAAC;IAClD,MAAMC,OAAkB,GAAG;MACvBV,IAAI,EAAE,eAAe;MACrBW,MAAM,EAAE,UAAU;MAClBC,QAAQ,EAAE,SAAS;MACnBhB,KAAK,EAAEY,kBAAkB;MACzBK,MAAM,EAAE;IACZ,CAAC;IAEDpB,IAAI,CAACqB,QAAQ,CAAC,CAAC,GAAGb,UAAU,EAAE,GAAGJ,WAAW,EAAEa,OAAO,CAAC,CAAC;EAC3D,CAAC;EAED,MAAMK,gBAAgB,GAAGA,CAAC;IAAEC,IAAI,EAAEC;EAAiC,CAAC,KAAK;IACrE,MAAMC,kBAAkB,GAAGrB,WAAW,CAACsB,GAAG,CAACH,IAAI,IAAI;MAC/C,IAAIA,IAAI,CAACpB,KAAK,KAAKqB,WAAW,CAACrB,KAAK,EAAE;QAClC,OAAOqB,WAAW;MACtB;MACA,OAAOD,IAAI;IACf,CAAC,CAAC;IACFvB,IAAI,CAACqB,QAAQ,CAAC,CAAC,GAAGb,UAAU,EAAE,GAAGiB,kBAAkB,CAAC,CAAC;EACzD,CAAC;EAED,MAAME,cAAc,GAAGA,CAAC;IAAEJ,IAAI,EAAEK;EAAiC,CAAC,KAAK;IACnE,MAAMH,kBAAkB,GAAGrB,WAAW,CAACC,MAAM,CAACkB,IAAI,IAAIA,IAAI,CAACpB,KAAK,KAAKyB,WAAW,CAACzB,KAAK,CAAC;IACvFH,IAAI,CAACqB,QAAQ,CAAC,CAAC,GAAGb,UAAU,EAAE,GAAGiB,kBAAkB,CAAC,CAAC;EACzD,CAAC;EAED,IAAI,CAAC1B,GAAG,CAAC8B,0BAA0B,CAAC,CAAC,EAAE;IACnC,oBACIzC,KAAA,CAAA0C,aAAA,CAACxC,IAAI;MAACyC,SAAS,EAAEjC;IAAc,gBAC3BV,KAAA,CAAA0C,aAAA,CAACxC,IAAI,CAAC0C,MAAM;MAACC,IAAI,EAAE;IAAG,gBAClB7C,KAAA,CAAA0C,aAAA,CAAClC,oBAAoB,MAAE,CACd,CACX,CAAC;EAEf;EAEA,oBACIR,KAAA,CAAA0C,aAAA,CAACxC,IAAI;IAACyC,SAAS,EAAEjC;EAAc,gBAC3BV,KAAA,CAAA0C,aAAA,CAACxC,IAAI,CAAC0C,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClB7C,KAAA,CAAA0C,aAAA,CAACpC,2BAA2B;IACxBwC,OAAO,EAAExB,WAAY;IACrBP,KAAK,EAAEC,WAAW,CAACsB,GAAG,CAClBH,IAAI,IAAIY,MAAM,CAACZ,IAAI,CAACpB,KAAK,CAC7B,CAAE;IACFkB,QAAQ,EAAEP;EAAc,CAC3B,CACQ,CAAC,eACd1B,KAAA,CAAA0C,aAAA,CAACxC,IAAI,CAAC0C,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClB7C,KAAA,CAAA0C,aAAA,CAACnC,yBAAyB;IACtByC,KAAK,EAAEhC,WAAY;IACnBM,WAAW,EAAEA,WAAY;IACzB2B,cAAc,EAAEV,cAAe;IAC/BW,kBAAkB,EAAEhB;EAAiB,CACxC,CACQ,CACX,CAAC;AAEf,CAAC","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog/RulesTab/RulesTab.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { FieldOption } from "@webiny/app-headless-cms-common/Fields/fieldOptions.js";
+interface ActionOption {
+    value: string;
+    label: string;
+}
+interface RulesTabProps {
+    gridClassName?: string;
+    fieldOptions: FieldOption[];
+    actionOptions?: ActionOption[];
+}
+export declare const RulesTab: ({ gridClassName, fieldOptions, actionOptions }: RulesTabProps) => React.JSX.Element;
+export {};

package/admin/components/FieldEditor/EditFieldDialog/RulesTab/RulesTab.js

@@ -0,0 +1,203 @@
+import React, { useCallback, useMemo } from "react";
+import { Grid, Select, Input, Button, Separator } from "@webiny/admin-ui";
+import { useBind } from "@webiny/form";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { getOperatorOptions, VALUE_HIDDEN_OPERATORS } from "@webiny/app-headless-cms-common/Fields/operatorOptions.js";
+const DEFAULT_ACTION_OPTIONS = [{
+  value: "hide",
+  label: "Hide"
+}, {
+  value: "disable",
+  label: "Disable"
+}];
+const RuleRow = ({
+  rule,
+  index,
+  fieldOptions,
+  actionOptions,
+  onChange,
+  onRemove
+}) => {
+  const selectedFieldOption = useMemo(() => fieldOptions.find(o => o.value === rule.target), [fieldOptions, rule.target]);
+  const operatorOptions = useMemo(() => selectedFieldOption ? getOperatorOptions(selectedFieldOption.fieldType) : [], [selectedFieldOption]);
+  const operatorSelectOptions = useMemo(() => operatorOptions.map(o => ({
+    value: o.value,
+    label: o.label
+  })), [operatorOptions]);
+  const fieldSelectOptions = useMemo(() => fieldOptions.map(o => ({
+    value: o.value,
+    label: o.label
+  })), [fieldOptions]);
+  const showValue = rule.operator && !VALUE_HIDDEN_OPERATORS.has(rule.operator);
+  const handleFieldChange = useCallback(value => {
+    const newTarget = value ?? "";
+    const newFieldOption = fieldOptions.find(o => o.value === newTarget);
+    // Reset operator and value when field changes
+    const newOps = newFieldOption ? getOperatorOptions(newFieldOption.fieldType) : [];
+    const currentOpValid = newOps.some(o => o.value === rule.operator);
+    onChange(index, {
+      ...rule,
+      target: newTarget,
+      operator: currentOpValid ? rule.operator : "",
+      value: currentOpValid ? rule.value : null
+    });
+  }, [fieldOptions, rule, index, onChange]);
+  const handleOperatorChange = useCallback(value => {
+    const op = value ?? "";
+    onChange(index, {
+      ...rule,
+      operator: op,
+      value: VALUE_HIDDEN_OPERATORS.has(op) ? null : rule.value
+    });
+  }, [rule, index, onChange]);
+  const handleValueChange = useCallback(value => {
+    let parsed = value ?? "";
+
+    // Auto-parse numbers for numeric field types
+    if (selectedFieldOption?.fieldType === "number" && parsed !== "") {
+      const num = Number(parsed);
+      if (!isNaN(num)) {
+        parsed = num;
+      }
+    }
+
+    // Auto-parse booleans
+    if (selectedFieldOption?.fieldType === "boolean") {
+      if (parsed === "true") {
+        parsed = true;
+      } else if (parsed === "false") {
+        parsed = false;
+      }
+    }
+    onChange(index, {
+      ...rule,
+      value: parsed
+    });
+  }, [rule, index, onChange, selectedFieldOption]);
+  const handleActionChange = useCallback(value => {
+    onChange(index, {
+      ...rule,
+      action: value ?? actionOptions[0]?.value ?? "hide"
+    });
+  }, [rule, index, onChange, actionOptions]);
+
+  // For boolean fields, show a dropdown for value
+  const isBooleanField = selectedFieldOption?.fieldType === "boolean";
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Separator, {
+    className: index === 0 ? "mb-lg" : "my-lg",
+    variant: "accent",
+    labelPosition: "start"
+  }, "Rule #", index + 1), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Select, {
+    displayResetAction: false,
+    label: "Field",
+    value: rule.target,
+    options: fieldSelectOptions,
+    onChange: handleFieldChange
+  })), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Select, {
+    displayResetAction: false,
+    label: "Operator",
+    value: rule.operator,
+    options: operatorSelectOptions,
+    onChange: handleOperatorChange,
+    disabled: !rule.target
+  })), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 6
+  }, isBooleanField ? /*#__PURE__*/React.createElement(Select, {
+    disabled: !showValue,
+    displayResetAction: false,
+    label: "Value",
+    value: String(rule.value ?? ""),
+    options: [{
+      value: "true",
+      label: "True"
+    }, {
+      value: "false",
+      label: "False"
+    }],
+    onChange: handleValueChange
+  }) : /*#__PURE__*/React.createElement(Input, {
+    disabled: !showValue,
+    label: "Value",
+    value: rule.value != null ? String(rule.value) : "",
+    type: selectedFieldOption?.fieldType === "number" ? "number" : "text",
+    onChange: handleValueChange
+  })), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Select, {
+    label: "Action",
+    displayResetAction: false,
+    value: rule.action,
+    options: actionOptions,
+    onChange: handleActionChange
+  })), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12,
+    className: "flex justify-between"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "[&_svg]:fill-destructive text-destructive-primary",
+    containerClassName: "flex ml-auto",
+    text: "Remove rule",
+    icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+    onClick: () => onRemove(index),
+    variant: "ghost"
+  }))));
+};
+export const RulesTab = ({
+  gridClassName,
+  fieldOptions,
+  actionOptions = DEFAULT_ACTION_OPTIONS
+}) => {
+  const bind = useBind({
+    name: "rules"
+  });
+  const allRules = bind.value || [];
+  const entryRules = allRules.filter(r => r.type === "condition");
+  const otherRules = allRules.filter(r => r.type !== "condition");
+  const addRule = () => {
+    const newRule = {
+      type: "condition",
+      target: "",
+      operator: "",
+      value: null,
+      action: actionOptions[0]?.value ?? "hide"
+    };
+    bind.onChange([...otherRules, ...entryRules, newRule]);
+  };
+  const updateRule = (index, updated) => {
+    const next = [...entryRules];
+    next[index] = updated;
+    bind.onChange([...otherRules, ...next]);
+  };
+  const removeRule = index => {
+    bind.onChange([...otherRules, ...entryRules.filter((_, i) => i !== index)]);
+  };
+  return /*#__PURE__*/React.createElement(Grid, {
+    className: gridClassName
+  }, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12
+  }, entryRules.map((rule, index) => /*#__PURE__*/React.createElement(RuleRow, {
+    key: index,
+    rule: rule,
+    index: index,
+    fieldOptions: fieldOptions,
+    actionOptions: actionOptions,
+    onChange: updateRule,
+    onRemove: removeRule
+  })), entryRules.length > 0 ? /*#__PURE__*/React.createElement(Separator, {
+    variant: "accent",
+    className: "mt-lg"
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-center mt-md"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: addRule,
+    text: "Add Rule",
+    icon: /*#__PURE__*/React.createElement(AddIcon, null),
+    size: "sm"
+  }))));
+};
+
+//# sourceMappingURL=RulesTab.js.map

package/admin/components/FieldEditor/EditFieldDialog/RulesTab/RulesTab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","Grid","Select","Input","Button","Separator","useBind","ReactComponent","DeleteIcon","AddIcon","getOperatorOptions","VALUE_HIDDEN_OPERATORS","DEFAULT_ACTION_OPTIONS","value","label","RuleRow","rule","index","fieldOptions","actionOptions","onChange","onRemove","selectedFieldOption","find","o","target","operatorOptions","fieldType","operatorSelectOptions","map","fieldSelectOptions","showValue","operator","has","handleFieldChange","newTarget","newFieldOption","newOps","currentOpValid","some","handleOperatorChange","op","handleValueChange","parsed","num","Number","isNaN","handleActionChange","action","isBooleanField","createElement","Fragment","className","variant","labelPosition","Column","span","displayResetAction","options","disabled","String","type","containerClassName","text","icon","onClick","RulesTab","gridClassName","bind","name","allRules","entryRules","filter","r","otherRules","addRule","newRule","updateRule","updated","next","removeRule","_","i","key","length","size"],"sources":["RulesTab.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { Grid, Select, Input, Button, Separator } from \"@webiny/admin-ui\";\nimport { useBind } from \"@webiny/form\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport type { FieldRule, FieldRuleAction } from \"~/types.js\";\nimport type { FieldOption } from \"@webiny/app-headless-cms-common/Fields/fieldOptions.js\";\nimport {\n    getOperatorOptions,\n    VALUE_HIDDEN_OPERATORS\n} from \"@webiny/app-headless-cms-common/Fields/operatorOptions.js\";\nimport type { Operator } from \"@webiny/app-headless-cms-common/Fields/evaluateExpression.js\";\n\nconst DEFAULT_ACTION_OPTIONS = [\n    { value: \"hide\", label: \"Hide\" },\n    { value: \"disable\", label: \"Disable\" }\n];\n\ninterface ActionOption {\n    value: string;\n    label: string;\n}\n\ninterface RuleRowProps {\n    rule: FieldRule;\n    index: number;\n    fieldOptions: FieldOption[];\n    actionOptions: ActionOption[];\n    onChange: (index: number, updated: FieldRule) => void;\n    onRemove: (index: number) => void;\n}\n\nconst RuleRow = ({\n    rule,\n    index,\n    fieldOptions,\n    actionOptions,\n    onChange,\n    onRemove\n}: RuleRowProps) => {\n    const selectedFieldOption = useMemo(\n        () => fieldOptions.find(o => o.value === rule.target),\n        [fieldOptions, rule.target]\n    );\n\n    const operatorOptions = useMemo(\n        () => (selectedFieldOption ? getOperatorOptions(selectedFieldOption.fieldType) : []),\n        [selectedFieldOption]\n    );\n\n    const operatorSelectOptions = useMemo(\n        () => operatorOptions.map(o => ({ value: o.value, label: o.label })),\n        [operatorOptions]\n    );\n\n    const fieldSelectOptions = useMemo(\n        () => fieldOptions.map(o => ({ value: o.value, label: o.label })),\n        [fieldOptions]\n    );\n\n    const showValue = rule.operator && !VALUE_HIDDEN_OPERATORS.has(rule.operator as Operator);\n\n    const handleFieldChange = useCallback(\n        (value: string | null) => {\n            const newTarget = value ?? \"\";\n            const newFieldOption = fieldOptions.find(o => o.value === newTarget);\n            // Reset operator and value when field changes\n            const newOps = newFieldOption ? getOperatorOptions(newFieldOption.fieldType) : [];\n            const currentOpValid = newOps.some(o => o.value === rule.operator);\n            onChange(index, {\n                ...rule,\n                target: newTarget,\n                operator: currentOpValid ? rule.operator : \"\",\n                value: currentOpValid ? rule.value : null\n            });\n        },\n        [fieldOptions, rule, index, onChange]\n    );\n\n    const handleOperatorChange = useCallback(\n        (value: string | null) => {\n            const op = value ?? \"\";\n            onChange(index, {\n                ...rule,\n                operator: op,\n                value: VALUE_HIDDEN_OPERATORS.has(op as Operator) ? null : rule.value\n            });\n        },\n        [rule, index, onChange]\n    );\n\n    const handleValueChange = useCallback(\n        (value: string | null) => {\n            let parsed: string | number | boolean | null = value ?? \"\";\n\n            // Auto-parse numbers for numeric field types\n            if (selectedFieldOption?.fieldType === \"number\" && parsed !== \"\") {\n                const num = Number(parsed);\n                if (!isNaN(num)) {\n                    parsed = num;\n                }\n            }\n\n            // Auto-parse booleans\n            if (selectedFieldOption?.fieldType === \"boolean\") {\n                if (parsed === \"true\") {\n                    parsed = true;\n                } else if (parsed === \"false\") {\n                    parsed = false;\n                }\n            }\n\n            onChange(index, { ...rule, value: parsed });\n        },\n        [rule, index, onChange, selectedFieldOption]\n    );\n\n    const handleActionChange = useCallback(\n        (value: string | null) => {\n            onChange(index, {\n                ...rule,\n                action: (value ?? actionOptions[0]?.value ?? \"hide\") as FieldRuleAction\n            });\n        },\n        [rule, index, onChange, actionOptions]\n    );\n\n    // For boolean fields, show a dropdown for value\n    const isBooleanField = selectedFieldOption?.fieldType === \"boolean\";\n\n    return (\n        <>\n            <Separator\n                className={index === 0 ? \"mb-lg\" : \"my-lg\"}\n                variant={\"accent\"}\n                labelPosition={\"start\"}\n            >\n                Rule #{index + 1}\n            </Separator>\n            <Grid>\n                <Grid.Column span={12}>\n                    <Select\n                        displayResetAction={false}\n                        label={\"Field\"}\n                        value={rule.target}\n                        options={fieldSelectOptions}\n                        onChange={handleFieldChange}\n                    />\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    <Select\n                        displayResetAction={false}\n                        label={\"Operator\"}\n                        value={rule.operator}\n                        options={operatorSelectOptions}\n                        onChange={handleOperatorChange}\n                        disabled={!rule.target}\n                    />\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    {isBooleanField ? (\n                        <Select\n                            disabled={!showValue}\n                            displayResetAction={false}\n                            label={\"Value\"}\n                            value={String(rule.value ?? \"\")}\n                            options={[\n                                { value: \"true\", label: \"True\" },\n                                { value: \"false\", label: \"False\" }\n                            ]}\n                            onChange={handleValueChange}\n                        />\n                    ) : (\n                        <Input\n                            disabled={!showValue}\n                            label={\"Value\"}\n                            value={rule.value != null ? String(rule.value) : \"\"}\n                            type={selectedFieldOption?.fieldType === \"number\" ? \"number\" : \"text\"}\n                            onChange={handleValueChange}\n                        />\n                    )}\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Select\n                        label={\"Action\"}\n                        displayResetAction={false}\n                        value={rule.action}\n                        options={actionOptions}\n                        onChange={handleActionChange}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12} className={\"flex justify-between\"}>\n                    <Button\n                        className={\"[&_svg]:fill-destructive text-destructive-primary\"}\n                        containerClassName={\"flex ml-auto\"}\n                        text={\"Remove rule\"}\n                        icon={<DeleteIcon />}\n                        onClick={() => onRemove(index)}\n                        variant={\"ghost\"}\n                    />\n                </Grid.Column>\n            </Grid>\n        </>\n    );\n};\n\ninterface RulesTabProps {\n    gridClassName?: string;\n    fieldOptions: FieldOption[];\n    actionOptions?: ActionOption[];\n}\n\nexport const RulesTab = ({\n    gridClassName,\n    fieldOptions,\n    actionOptions = DEFAULT_ACTION_OPTIONS\n}: RulesTabProps) => {\n    const bind = useBind({ name: \"rules\" });\n    const allRules: FieldRule[] = bind.value || [];\n    const entryRules = allRules.filter(r => r.type === \"condition\");\n    const otherRules = allRules.filter(r => r.type !== \"condition\");\n\n    const addRule = () => {\n        const newRule: FieldRule = {\n            type: \"condition\",\n            target: \"\",\n            operator: \"\",\n            value: null,\n            action: (actionOptions[0]?.value ?? \"hide\") as FieldRuleAction\n        };\n        bind.onChange([...otherRules, ...entryRules, newRule]);\n    };\n\n    const updateRule = (index: number, updated: FieldRule) => {\n        const next = [...entryRules];\n        next[index] = updated;\n        bind.onChange([...otherRules, ...next]);\n    };\n\n    const removeRule = (index: number) => {\n        bind.onChange([...otherRules, ...entryRules.filter((_, i) => i !== index)]);\n    };\n\n    return (\n        <Grid className={gridClassName}>\n            <Grid.Column span={12}>\n                {entryRules.map((rule, index) => (\n                    <RuleRow\n                        key={index}\n                        rule={rule}\n                        index={index}\n                        fieldOptions={fieldOptions}\n                        actionOptions={actionOptions}\n                        onChange={updateRule}\n                        onRemove={removeRule}\n                    />\n                ))}\n                {entryRules.length > 0 ? (\n                    <Separator variant={\"accent\"} className={\"mt-lg\"} />\n                ) : null}\n                <div className={\"flex justify-center mt-md\"}>\n                    <Button onClick={addRule} text={\"Add Rule\"} icon={<AddIcon />} size={\"sm\"} />\n                </div>\n            </Grid.Column>\n        </Grid>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,IAAI,EAAEC,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,SAAS,QAAQ,kBAAkB;AACzE,SAASC,OAAO,QAAQ,cAAc;AACtC,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASD,cAAc,IAAIE,OAAO,QAAQ,uBAAuB;AAGjE,SACIC,kBAAkB,EAClBC,sBAAsB,QACnB,2DAA2D;AAGlE,MAAMC,sBAAsB,GAAG,CAC3B;EAAEC,KAAK,EAAE,MAAM;EAAEC,KAAK,EAAE;AAAO,CAAC,EAChC;EAAED,KAAK,EAAE,SAAS;EAAEC,KAAK,EAAE;AAAU,CAAC,CACzC;AAgBD,MAAMC,OAAO,GAAGA,CAAC;EACbC,IAAI;EACJC,KAAK;EACLC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACRC;AACU,CAAC,KAAK;EAChB,MAAMC,mBAAmB,GAAGtB,OAAO,CAC/B,MAAMkB,YAAY,CAACK,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACX,KAAK,KAAKG,IAAI,CAACS,MAAM,CAAC,EACrD,CAACP,YAAY,EAAEF,IAAI,CAACS,MAAM,CAC9B,CAAC;EAED,MAAMC,eAAe,GAAG1B,OAAO,CAC3B,MAAOsB,mBAAmB,GAAGZ,kBAAkB,CAACY,mBAAmB,CAACK,SAAS,CAAC,GAAG,EAAG,EACpF,CAACL,mBAAmB,CACxB,CAAC;EAED,MAAMM,qBAAqB,GAAG5B,OAAO,CACjC,MAAM0B,eAAe,CAACG,GAAG,CAACL,CAAC,KAAK;IAAEX,KAAK,EAAEW,CAAC,CAACX,KAAK;IAAEC,KAAK,EAAEU,CAAC,CAACV;EAAM,CAAC,CAAC,CAAC,EACpE,CAACY,eAAe,CACpB,CAAC;EAED,MAAMI,kBAAkB,GAAG9B,OAAO,CAC9B,MAAMkB,YAAY,CAACW,GAAG,CAACL,CAAC,KAAK;IAAEX,KAAK,EAAEW,CAAC,CAACX,KAAK;IAAEC,KAAK,EAAEU,CAAC,CAACV;EAAM,CAAC,CAAC,CAAC,EACjE,CAACI,YAAY,CACjB,CAAC;EAED,MAAMa,SAAS,GAAGf,IAAI,CAACgB,QAAQ,IAAI,CAACrB,sBAAsB,CAACsB,GAAG,CAACjB,IAAI,CAACgB,QAAoB,CAAC;EAEzF,MAAME,iBAAiB,GAAGnC,WAAW,CAChCc,KAAoB,IAAK;IACtB,MAAMsB,SAAS,GAAGtB,KAAK,IAAI,EAAE;IAC7B,MAAMuB,cAAc,GAAGlB,YAAY,CAACK,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACX,KAAK,KAAKsB,SAAS,CAAC;IACpE;IACA,MAAME,MAAM,GAAGD,cAAc,GAAG1B,kBAAkB,CAAC0B,cAAc,CAACT,SAAS,CAAC,GAAG,EAAE;IACjF,MAAMW,cAAc,GAAGD,MAAM,CAACE,IAAI,CAACf,CAAC,IAAIA,CAAC,CAACX,KAAK,KAAKG,IAAI,CAACgB,QAAQ,CAAC;IAClEZ,QAAQ,CAACH,KAAK,EAAE;MACZ,GAAGD,IAAI;MACPS,MAAM,EAAEU,SAAS;MACjBH,QAAQ,EAAEM,cAAc,GAAGtB,IAAI,CAACgB,QAAQ,GAAG,EAAE;MAC7CnB,KAAK,EAAEyB,cAAc,GAAGtB,IAAI,CAACH,KAAK,GAAG;IACzC,CAAC,CAAC;EACN,CAAC,EACD,CAACK,YAAY,EAAEF,IAAI,EAAEC,KAAK,EAAEG,QAAQ,CACxC,CAAC;EAED,MAAMoB,oBAAoB,GAAGzC,WAAW,CACnCc,KAAoB,IAAK;IACtB,MAAM4B,EAAE,GAAG5B,KAAK,IAAI,EAAE;IACtBO,QAAQ,CAACH,KAAK,EAAE;MACZ,GAAGD,IAAI;MACPgB,QAAQ,EAAES,EAAE;MACZ5B,KAAK,EAAEF,sBAAsB,CAACsB,GAAG,CAACQ,EAAc,CAAC,GAAG,IAAI,GAAGzB,IAAI,CAACH;IACpE,CAAC,CAAC;EACN,CAAC,EACD,CAACG,IAAI,EAAEC,KAAK,EAAEG,QAAQ,CAC1B,CAAC;EAED,MAAMsB,iBAAiB,GAAG3C,WAAW,CAChCc,KAAoB,IAAK;IACtB,IAAI8B,MAAwC,GAAG9B,KAAK,IAAI,EAAE;;IAE1D;IACA,IAAIS,mBAAmB,EAAEK,SAAS,KAAK,QAAQ,IAAIgB,MAAM,KAAK,EAAE,EAAE;MAC9D,MAAMC,GAAG,GAAGC,MAAM,CAACF,MAAM,CAAC;MAC1B,IAAI,CAACG,KAAK,CAACF,GAAG,CAAC,EAAE;QACbD,MAAM,GAAGC,GAAG;MAChB;IACJ;;IAEA;IACA,IAAItB,mBAAmB,EAAEK,SAAS,KAAK,SAAS,EAAE;MAC9C,IAAIgB,MAAM,KAAK,MAAM,EAAE;QACnBA,MAAM,GAAG,IAAI;MACjB,CAAC,MAAM,IAAIA,MAAM,KAAK,OAAO,EAAE;QAC3BA,MAAM,GAAG,KAAK;MAClB;IACJ;IAEAvB,QAAQ,CAACH,KAAK,EAAE;MAAE,GAAGD,IAAI;MAAEH,KAAK,EAAE8B;IAAO,CAAC,CAAC;EAC/C,CAAC,EACD,CAAC3B,IAAI,EAAEC,KAAK,EAAEG,QAAQ,EAAEE,mBAAmB,CAC/C,CAAC;EAED,MAAMyB,kBAAkB,GAAGhD,WAAW,CACjCc,KAAoB,IAAK;IACtBO,QAAQ,CAACH,KAAK,EAAE;MACZ,GAAGD,IAAI;MACPgC,MAAM,EAAGnC,KAAK,IAAIM,aAAa,CAAC,CAAC,CAAC,EAAEN,KAAK,IAAI;IACjD,CAAC,CAAC;EACN,CAAC,EACD,CAACG,IAAI,EAAEC,KAAK,EAAEG,QAAQ,EAAED,aAAa,CACzC,CAAC;;EAED;EACA,MAAM8B,cAAc,GAAG3B,mBAAmB,EAAEK,SAAS,KAAK,SAAS;EAEnE,oBACI7B,KAAA,CAAAoD,aAAA,CAAApD,KAAA,CAAAqD,QAAA,qBACIrD,KAAA,CAAAoD,aAAA,CAAC7C,SAAS;IACN+C,SAAS,EAAEnC,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,OAAQ;IAC3CoC,OAAO,EAAE,QAAS;IAClBC,aAAa,EAAE;EAAQ,GAC1B,QACS,EAACrC,KAAK,GAAG,CACR,CAAC,eACZnB,KAAA,CAAAoD,aAAA,CAACjD,IAAI,qBACDH,KAAA,CAAAoD,aAAA,CAACjD,IAAI,CAACsD,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClB1D,KAAA,CAAAoD,aAAA,CAAChD,MAAM;IACHuD,kBAAkB,EAAE,KAAM;IAC1B3C,KAAK,EAAE,OAAQ;IACfD,KAAK,EAAEG,IAAI,CAACS,MAAO;IACnBiC,OAAO,EAAE5B,kBAAmB;IAC5BV,QAAQ,EAAEc;EAAkB,CAC/B,CACQ,CAAC,eACdpC,KAAA,CAAAoD,aAAA,CAACjD,IAAI,CAACsD,MAAM;IAACC,IAAI,EAAE;EAAE,gBACjB1D,KAAA,CAAAoD,aAAA,CAAChD,MAAM;IACHuD,kBAAkB,EAAE,KAAM;IAC1B3C,KAAK,EAAE,UAAW;IAClBD,KAAK,EAAEG,IAAI,CAACgB,QAAS;IACrB0B,OAAO,EAAE9B,qBAAsB;IAC/BR,QAAQ,EAAEoB,oBAAqB;IAC/BmB,QAAQ,EAAE,CAAC3C,IAAI,CAACS;EAAO,CAC1B,CACQ,CAAC,eACd3B,KAAA,CAAAoD,aAAA,CAACjD,IAAI,CAACsD,MAAM;IAACC,IAAI,EAAE;EAAE,GAChBP,cAAc,gBACXnD,KAAA,CAAAoD,aAAA,CAAChD,MAAM;IACHyD,QAAQ,EAAE,CAAC5B,SAAU;IACrB0B,kBAAkB,EAAE,KAAM;IAC1B3C,KAAK,EAAE,OAAQ;IACfD,KAAK,EAAE+C,MAAM,CAAC5C,IAAI,CAACH,KAAK,IAAI,EAAE,CAAE;IAChC6C,OAAO,EAAE,CACL;MAAE7C,KAAK,EAAE,MAAM;MAAEC,KAAK,EAAE;IAAO,CAAC,EAChC;MAAED,KAAK,EAAE,OAAO;MAAEC,KAAK,EAAE;IAAQ,CAAC,CACpC;IACFM,QAAQ,EAAEsB;EAAkB,CAC/B,CAAC,gBAEF5C,KAAA,CAAAoD,aAAA,CAAC/C,KAAK;IACFwD,QAAQ,EAAE,CAAC5B,SAAU;IACrBjB,KAAK,EAAE,OAAQ;IACfD,KAAK,EAAEG,IAAI,CAACH,KAAK,IAAI,IAAI,GAAG+C,MAAM,CAAC5C,IAAI,CAACH,KAAK,CAAC,GAAG,EAAG;IACpDgD,IAAI,EAAEvC,mBAAmB,EAAEK,SAAS,KAAK,QAAQ,GAAG,QAAQ,GAAG,MAAO;IACtEP,QAAQ,EAAEsB;EAAkB,CAC/B,CAEI,CAAC,eACd5C,KAAA,CAAAoD,aAAA,CAACjD,IAAI,CAACsD,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClB1D,KAAA,CAAAoD,aAAA,CAAChD,MAAM;IACHY,KAAK,EAAE,QAAS;IAChB2C,kBAAkB,EAAE,KAAM;IAC1B5C,KAAK,EAAEG,IAAI,CAACgC,MAAO;IACnBU,OAAO,EAAEvC,aAAc;IACvBC,QAAQ,EAAE2B;EAAmB,CAChC,CACQ,CAAC,eACdjD,KAAA,CAAAoD,aAAA,CAACjD,IAAI,CAACsD,MAAM;IAACC,IAAI,EAAE,EAAG;IAACJ,SAAS,EAAE;EAAuB,gBACrDtD,KAAA,CAAAoD,aAAA,CAAC9C,MAAM;IACHgD,SAAS,EAAE,mDAAoD;IAC/DU,kBAAkB,EAAE,cAAe;IACnCC,IAAI,EAAE,aAAc;IACpBC,IAAI,eAAElE,KAAA,CAAAoD,aAAA,CAAC1C,UAAU,MAAE,CAAE;IACrByD,OAAO,EAAEA,CAAA,KAAM5C,QAAQ,CAACJ,KAAK,CAAE;IAC/BoC,OAAO,EAAE;EAAQ,CACpB,CACQ,CACX,CACR,CAAC;AAEX,CAAC;AAQD,OAAO,MAAMa,QAAQ,GAAGA,CAAC;EACrBC,aAAa;EACbjD,YAAY;EACZC,aAAa,GAAGP;AACL,CAAC,KAAK;EACjB,MAAMwD,IAAI,GAAG9D,OAAO,CAAC;IAAE+D,IAAI,EAAE;EAAQ,CAAC,CAAC;EACvC,MAAMC,QAAqB,GAAGF,IAAI,CAACvD,KAAK,IAAI,EAAE;EAC9C,MAAM0D,UAAU,GAAGD,QAAQ,CAACE,MAAM,CAACC,CAAC,IAAIA,CAAC,CAACZ,IAAI,KAAK,WAAW,CAAC;EAC/D,MAAMa,UAAU,GAAGJ,QAAQ,CAACE,MAAM,CAACC,CAAC,IAAIA,CAAC,CAACZ,IAAI,KAAK,WAAW,CAAC;EAE/D,MAAMc,OAAO,GAAGA,CAAA,KAAM;IAClB,MAAMC,OAAkB,GAAG;MACvBf,IAAI,EAAE,WAAW;MACjBpC,MAAM,EAAE,EAAE;MACVO,QAAQ,EAAE,EAAE;MACZnB,KAAK,EAAE,IAAI;MACXmC,MAAM,EAAG7B,aAAa,CAAC,CAAC,CAAC,EAAEN,KAAK,IAAI;IACxC,CAAC;IACDuD,IAAI,CAAChD,QAAQ,CAAC,CAAC,GAAGsD,UAAU,EAAE,GAAGH,UAAU,EAAEK,OAAO,CAAC,CAAC;EAC1D,CAAC;EAED,MAAMC,UAAU,GAAGA,CAAC5D,KAAa,EAAE6D,OAAkB,KAAK;IACtD,MAAMC,IAAI,GAAG,CAAC,GAAGR,UAAU,CAAC;IAC5BQ,IAAI,CAAC9D,KAAK,CAAC,GAAG6D,OAAO;IACrBV,IAAI,CAAChD,QAAQ,CAAC,CAAC,GAAGsD,UAAU,EAAE,GAAGK,IAAI,CAAC,CAAC;EAC3C,CAAC;EAED,MAAMC,UAAU,GAAI/D,KAAa,IAAK;IAClCmD,IAAI,CAAChD,QAAQ,CAAC,CAAC,GAAGsD,UAAU,EAAE,GAAGH,UAAU,CAACC,MAAM,CAAC,CAACS,CAAC,EAAEC,CAAC,KAAKA,CAAC,KAAKjE,KAAK,CAAC,CAAC,CAAC;EAC/E,CAAC;EAED,oBACInB,KAAA,CAAAoD,aAAA,CAACjD,IAAI;IAACmD,SAAS,EAAEe;EAAc,gBAC3BrE,KAAA,CAAAoD,aAAA,CAACjD,IAAI,CAACsD,MAAM;IAACC,IAAI,EAAE;EAAG,GACjBe,UAAU,CAAC1C,GAAG,CAAC,CAACb,IAAI,EAAEC,KAAK,kBACxBnB,KAAA,CAAAoD,aAAA,CAACnC,OAAO;IACJoE,GAAG,EAAElE,KAAM;IACXD,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA,YAAa;IAC3BC,aAAa,EAAEA,aAAc;IAC7BC,QAAQ,EAAEyD,UAAW;IACrBxD,QAAQ,EAAE2D;EAAW,CACxB,CACJ,CAAC,EACDT,UAAU,CAACa,MAAM,GAAG,CAAC,gBAClBtF,KAAA,CAAAoD,aAAA,CAAC7C,SAAS;IAACgD,OAAO,EAAE,QAAS;IAACD,SAAS,EAAE;EAAQ,CAAE,CAAC,GACpD,IAAI,eACRtD,KAAA,CAAAoD,aAAA;IAAKE,SAAS,EAAE;EAA4B,gBACxCtD,KAAA,CAAAoD,aAAA,CAAC9C,MAAM;IAAC6D,OAAO,EAAEU,OAAQ;IAACZ,IAAI,EAAE,UAAW;IAACC,IAAI,eAAElE,KAAA,CAAAoD,aAAA,CAACzC,OAAO,MAAE,CAAE;IAAC4E,IAAI,EAAE;EAAK,CAAE,CAC3E,CACI,CACX,CAAC;AAEf,CAAC","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog/RulesTab/index.d.ts

@@ -0,0 +1 @@
+export { RulesTab } from "./RulesTab.js";

package/admin/components/FieldEditor/EditFieldDialog/RulesTab/index.js

@@ -0,0 +1,3 @@
+export { RulesTab } from "./RulesTab.js";
+
+//# sourceMappingURL=index.js.map

package/admin/components/FieldEditor/EditFieldDialog/RulesTab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RulesTab"],"sources":["index.ts"],"sourcesContent":["export { RulesTab } from \"./RulesTab.js\";\n"],"mappings":"AAAA,SAASA,QAAQ","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialog.js

@@ -1,16 +1,14 @@
 import React, { useMemo, useState } from "react";
 import cloneDeep from "lodash/cloneDeep.js";
-import { Dialog, Tabs } from "@webiny/admin-ui";
 import { Form } from "@webiny/form";
 import { i18n } from "@webiny/app/i18n/index.js";
-import GeneralTab from "./EditFieldDialog/GeneralTab.js";
-import AppearanceTab from "./EditFieldDialog/AppearanceTab.js";
-import PredefinedValues from "./EditFieldDialog/PredefinedValues.js";
-import { ValidationTab } from "./EditFieldDialog/ValidationTab/index.js";
 import { useModelEditor, useModelField } from "../../hooks/index.js";
-import { ModelFieldProvider } from "../ModelFieldProvider/index.js";
 import { useRendererPlugins } from "./EditFieldDialog/useRendererPlugins.js";
 import { getFieldValidators } from "./EditFieldDialog/getValidators.js";
+import { EditFieldDrawerContainer } from "./EditFieldDrawerContainer.js";
+// To A/B test, swap the import above with the one below:
+// import { EditFieldDialogContainer } from "./EditFieldDialogContainer.js";
+
 const t = i18n.namespace("app-headless-cms/admin/components/editor");
 function setupState(field, contentModel) {
   const clonedField = cloneDeep(field);
@@ -77,59 +75,18 @@ const EditFieldDialog = props => {
       data: shadowField,
       submit
     }) => {
-      const predefinedValuesTabEnabled = fieldPlugin.field.allowPredefinedValues && shadowField.predefinedValues && shadowField.predefinedValues.enabled;
+      const predefinedValuesTabEnabled = !!(fieldPlugin.field.allowPredefinedValues && shadowField.predefinedValues && shadowField.predefinedValues.enabled);
       const individualValidation = getFieldValidators(shadowField, fieldPlugin);
       const showValidatorsTab = shadowField.list || individualValidation.validators.length > 0;
-      return /*#__PURE__*/React.createElement(Dialog, {
-        size: "full",
-        title: headerTitle,
-        open: true,
-        modal: true,
+      return /*#__PURE__*/React.createElement(EditFieldDrawerContainer, {
+        headerTitle: headerTitle,
+        shadowField: shadowField,
+        predefinedValuesTabEnabled: predefinedValuesTabEnabled,
+        showValidatorsTab: showValidatorsTab,
+        isSubtypeField: isSubtypeField,
         onClose: props.onClose,
-        bodyPadding: false,
-        actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelAction, {
-          text: t`Cancel`,
-          onClick: props.onClose,
-          "data-testid": "cms.editor.field.settings.cancel"
-        }), /*#__PURE__*/React.createElement(Dialog.ConfirmAction, {
-          text: t`Save Field`,
-          onClick: submit,
-          "data-testid": "cms.editor.field.settings.save"
-        })),
-        "data-testid": "cms-editor-edit-fields-dialog"
-      }, /*#__PURE__*/React.createElement(ModelFieldProvider, {
-        field: shadowField
-      }, /*#__PURE__*/React.createElement(Tabs, {
-        spacing: "lg",
-        size: "md",
-        separator: true,
-        tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
-          key: "general",
-          trigger: t`General`,
-          value: "general",
-          content: /*#__PURE__*/React.createElement(GeneralTab, null)
-        }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-          key: "predefined",
-          trigger: t`Predefined values`,
-          value: "predefined",
-          disabled: !predefinedValuesTabEnabled,
-          content: /*#__PURE__*/React.createElement(PredefinedValues, null)
-        }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-          key: "validations",
-          trigger: t`Validations`,
-          value: "validations",
-          content: /*#__PURE__*/React.createElement(ValidationTab, {
-            field: shadowField
-          }),
-          visible: showValidatorsTab
-        }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-          key: "appearance",
-          trigger: t`Appearance`,
-          value: "Appearance",
-          content: /*#__PURE__*/React.createElement(AppearanceTab, null),
-          disabled: isSubtypeField
-        })]
-      })));
+        onSubmit: submit
+      });
     })
   );
 };

package/admin/components/FieldEditor/EditFieldDialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useState","cloneDeep","Dialog","Tabs","Form","i18n","GeneralTab","AppearanceTab","PredefinedValues","ValidationTab","useModelEditor","useModelField","ModelFieldProvider","useRendererPlugins","getFieldValidators","t","namespace","setupState","field","contentModel","clonedField","renderer","name","renderPlugin","rendererName","shadowField","isTitleField","titleFieldId","fieldId","EditFieldDialog","props","fieldPlugin","data","setData","setContentModelData","headerTitle","fieldTypeLabel","label","onSubmit","form","prev","isSubtypeField","type","value","split","length","createElement","submit","predefinedValuesTabEnabled","allowPredefinedValues","predefinedValues","enabled","individualValidation","showValidatorsTab","list","validators","size","title","open","modal","onClose","bodyPadding","actions","Fragment","CancelAction","text","onClick","ConfirmAction","spacing","separator","tabs","Tab","key","trigger","content","disabled","visible"],"sources":["EditFieldDialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport cloneDeep from \"lodash/cloneDeep.js\";\nimport { Dialog, Tabs } from \"@webiny/admin-ui\";\nimport type { FormOnSubmit } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport type { CmsEditorContentModel, CmsModelField } from \"~/types.js\";\nimport GeneralTab from \"./EditFieldDialog/GeneralTab.js\";\nimport AppearanceTab from \"./EditFieldDialog/AppearanceTab.js\";\nimport PredefinedValues from \"./EditFieldDialog/PredefinedValues.js\";\nimport { ValidationTab } from \"./EditFieldDialog/ValidationTab/index.js\";\nimport { useModelEditor, useModelField } from \"~/admin/hooks/index.js\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { useRendererPlugins } from \"~/admin/components/FieldEditor/EditFieldDialog/useRendererPlugins.js\";\nimport { getFieldValidators } from \"~/admin/components/FieldEditor/EditFieldDialog/getValidators.js\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nfunction setupState(field: CmsModelField, contentModel: CmsEditorContentModel): EditFieldState {\n    const clonedField = cloneDeep(field);\n\n    if (!clonedField.renderer || !clonedField.renderer.name) {\n        const [renderPlugin] = useRendererPlugins();\n\n        if (renderPlugin) {\n            clonedField.renderer = { name: renderPlugin.renderer.rendererName };\n        }\n    }\n\n    return {\n        shadowField: clonedField,\n        isTitleField: contentModel.titleFieldId === field.fieldId\n    };\n}\n\ninterface EditFieldState {\n    shadowField: CmsModelField;\n    isTitleField: boolean;\n}\n\ninterface EditFieldDialogProps {\n    onClose: () => void;\n    onSubmit: FormOnSubmit<CmsModelField>;\n}\n\nconst EditFieldDialog = (props: EditFieldDialogProps) => {\n    const { field, fieldPlugin } = useModelField();\n    const { data: contentModel, setData: setContentModelData } = useModelEditor();\n    const [{ shadowField, isTitleField }] = useState(setupState(field, contentModel));\n\n    const headerTitle = t`Field Settings - {fieldTypeLabel}`({\n        fieldTypeLabel: fieldPlugin.field.label\n    });\n\n    const onSubmit: FormOnSubmit<CmsModelField> = (data, form) => {\n        /**\n         * In case title field `fieldId` changed, we need to update the title field on the model itself.\n         */\n        if (isTitleField && contentModel.titleFieldId !== data.fieldId) {\n            setContentModelData(prev => {\n                return {\n                    ...prev,\n                    titleFieldId: data.fieldId\n                };\n            });\n        }\n\n        props.onSubmit(data, form);\n    };\n\n    const isSubtypeField = useMemo(() => {\n        if (!field.type) {\n            return false;\n        }\n        const value = field.type.split(\":\");\n        return value.length > 1;\n    }, [field.type]);\n\n    return (\n        /**\n         * We're using the `shadowField` as the new context, because we want all changes by form inputs\n         * to immediately be propagated to all dialog components.\n         */\n        <Form<CmsModelField> data={shadowField} onSubmit={onSubmit}>\n            {({ data: shadowField, submit }) => {\n                const predefinedValuesTabEnabled =\n                    fieldPlugin.field.allowPredefinedValues &&\n                    shadowField.predefinedValues &&\n                    shadowField.predefinedValues.enabled;\n\n                const individualValidation = getFieldValidators(shadowField, fieldPlugin);\n                const showValidatorsTab =\n                    shadowField.list || individualValidation.validators.length > 0;\n\n                return (\n                    <Dialog\n                        size={\"full\"}\n                        title={headerTitle}\n                        open={true}\n                        modal={true}\n                        onClose={props.onClose}\n                        bodyPadding={false}\n                        actions={\n                            <>\n                                <Dialog.CancelAction\n                                    text={t`Cancel`}\n                                    onClick={props.onClose}\n                                    data-testid=\"cms.editor.field.settings.cancel\"\n                                />\n                                <Dialog.ConfirmAction\n                                    text={t`Save Field`}\n                                    onClick={submit}\n                                    data-testid=\"cms.editor.field.settings.save\"\n                                />\n                            </>\n                        }\n                        data-testid={\"cms-editor-edit-fields-dialog\"}\n                    >\n                        <ModelFieldProvider field={shadowField}>\n                            <Tabs\n                                spacing={\"lg\"}\n                                size={\"md\"}\n                                separator\n                                tabs={[\n                                    <Tabs.Tab\n                                        key={\"general\"}\n                                        trigger={t`General`}\n                                        value={\"general\"}\n                                        content={<GeneralTab />}\n                                    />,\n                                    <Tabs.Tab\n                                        key={\"predefined\"}\n                                        trigger={t`Predefined values`}\n                                        value={\"predefined\"}\n                                        disabled={!predefinedValuesTabEnabled}\n                                        content={<PredefinedValues />}\n                                    />,\n                                    <Tabs.Tab\n                                        key={\"validations\"}\n                                        trigger={t`Validations`}\n                                        value={\"validations\"}\n                                        content={<ValidationTab field={shadowField} />}\n                                        visible={showValidatorsTab}\n                                    />,\n                                    <Tabs.Tab\n                                        key={\"appearance\"}\n                                        trigger={t`Appearance`}\n                                        value={\"Appearance\"}\n                                        content={<AppearanceTab />}\n                                        disabled={isSubtypeField}\n                                    />\n                                ]}\n                            />\n                        </ModelFieldProvider>\n                    </Dialog>\n                );\n            }}\n        </Form>\n    );\n};\n\nexport default EditFieldDialog;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","useState","cloneDeep","Form","i18n","useModelEditor","useModelField","useRendererPlugins","getFieldValidators","EditFieldDrawerContainer","t","namespace","setupState","field","contentModel","clonedField","renderer","name","renderPlugin","rendererName","shadowField","isTitleField","titleFieldId","fieldId","EditFieldDialog","props","fieldPlugin","data","setData","setContentModelData","headerTitle","fieldTypeLabel","label","onSubmit","form","prev","isSubtypeField","type","value","split","length","createElement","submit","predefinedValuesTabEnabled","allowPredefinedValues","predefinedValues","enabled","individualValidation","showValidatorsTab","list","validators","onClose"],"sources":["EditFieldDialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport cloneDeep from \"lodash/cloneDeep.js\";\nimport type { FormOnSubmit } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport type { CmsEditorContentModel, CmsModelField } from \"~/types.js\";\nimport { useModelEditor, useModelField } from \"~/admin/hooks/index.js\";\nimport { useRendererPlugins } from \"~/admin/components/FieldEditor/EditFieldDialog/useRendererPlugins.js\";\nimport { getFieldValidators } from \"~/admin/components/FieldEditor/EditFieldDialog/getValidators.js\";\nimport { EditFieldDrawerContainer } from \"./EditFieldDrawerContainer.js\";\n// To A/B test, swap the import above with the one below:\n// import { EditFieldDialogContainer } from \"./EditFieldDialogContainer.js\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nfunction setupState(field: CmsModelField, contentModel: CmsEditorContentModel): EditFieldState {\n    const clonedField = cloneDeep(field);\n\n    if (!clonedField.renderer || !clonedField.renderer.name) {\n        const [renderPlugin] = useRendererPlugins();\n\n        if (renderPlugin) {\n            clonedField.renderer = { name: renderPlugin.renderer.rendererName };\n        }\n    }\n\n    return {\n        shadowField: clonedField,\n        isTitleField: contentModel.titleFieldId === field.fieldId\n    };\n}\n\ninterface EditFieldState {\n    shadowField: CmsModelField;\n    isTitleField: boolean;\n}\n\ninterface EditFieldDialogProps {\n    onClose: () => void;\n    onSubmit: FormOnSubmit<CmsModelField>;\n}\n\nconst EditFieldDialog = (props: EditFieldDialogProps) => {\n    const { field, fieldPlugin } = useModelField();\n    const { data: contentModel, setData: setContentModelData } = useModelEditor();\n    const [{ shadowField, isTitleField }] = useState(setupState(field, contentModel));\n\n    const headerTitle = t`Field Settings - {fieldTypeLabel}`({\n        fieldTypeLabel: fieldPlugin.field.label\n    });\n\n    const onSubmit: FormOnSubmit<CmsModelField> = (data, form) => {\n        /**\n         * In case title field `fieldId` changed, we need to update the title field on the model itself.\n         */\n        if (isTitleField && contentModel.titleFieldId !== data.fieldId) {\n            setContentModelData(prev => {\n                return {\n                    ...prev,\n                    titleFieldId: data.fieldId\n                };\n            });\n        }\n\n        props.onSubmit(data, form);\n    };\n\n    const isSubtypeField = useMemo(() => {\n        if (!field.type) {\n            return false;\n        }\n        const value = field.type.split(\":\");\n        return value.length > 1;\n    }, [field.type]);\n\n    return (\n        /**\n         * We're using the `shadowField` as the new context, because we want all changes by form inputs\n         * to immediately be propagated to all dialog components.\n         */\n        <Form<CmsModelField> data={shadowField} onSubmit={onSubmit}>\n            {({ data: shadowField, submit }) => {\n                const predefinedValuesTabEnabled = !!(\n                    fieldPlugin.field.allowPredefinedValues &&\n                    shadowField.predefinedValues &&\n                    shadowField.predefinedValues.enabled\n                );\n\n                const individualValidation = getFieldValidators(shadowField, fieldPlugin);\n                const showValidatorsTab =\n                    shadowField.list || individualValidation.validators.length > 0;\n\n                return (\n                    <EditFieldDrawerContainer\n                        headerTitle={headerTitle}\n                        shadowField={shadowField}\n                        predefinedValuesTabEnabled={predefinedValuesTabEnabled}\n                        showValidatorsTab={showValidatorsTab}\n                        isSubtypeField={isSubtypeField}\n                        onClose={props.onClose}\n                        onSubmit={submit}\n                    />\n                );\n            }}\n        </Form>\n    );\n};\n\nexport default EditFieldDialog;\n"],"mappings":"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","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDialogContainer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { CmsModelField } from "../../../types.js";
+export interface EditFieldDialogContainerProps {
+    headerTitle: string;
+    shadowField: CmsModelField;
+    predefinedValuesTabEnabled: boolean;
+    showValidatorsTab: boolean;
+    isSubtypeField: boolean;
+    onClose: () => void;
+    onSubmit: () => void;
+}
+export declare const EditFieldDialogContainer: ({ headerTitle, shadowField, predefinedValuesTabEnabled, showValidatorsTab, isSubtypeField, onClose, onSubmit }: EditFieldDialogContainerProps) => React.JSX.Element;

package/admin/components/FieldEditor/EditFieldDialogContainer.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Dialog } from "@webiny/admin-ui";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { FieldSettingsTabs } from "./EditFieldDialog/FieldSettingsTabs.js";
+const t = i18n.namespace("app-headless-cms/admin/components/editor");
+export const EditFieldDialogContainer = ({
+  headerTitle,
+  shadowField,
+  predefinedValuesTabEnabled,
+  showValidatorsTab,
+  isSubtypeField,
+  onClose,
+  onSubmit
+}) => {
+  return /*#__PURE__*/React.createElement(Dialog, {
+    size: "full",
+    title: headerTitle,
+    open: true,
+    modal: true,
+    onClose: onClose,
+    bodyPadding: false,
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelAction, {
+      text: t`Cancel`,
+      onClick: onClose,
+      "data-testid": "cms.editor.field.settings.cancel"
+    }), /*#__PURE__*/React.createElement(Dialog.ConfirmAction, {
+      text: t`Save Field`,
+      onClick: onSubmit,
+      "data-testid": "cms.editor.field.settings.save"
+    })),
+    "data-testid": "cms-editor-edit-fields-dialog"
+  }, /*#__PURE__*/React.createElement(FieldSettingsTabs, {
+    shadowField: shadowField,
+    predefinedValuesTabEnabled: predefinedValuesTabEnabled,
+    showValidatorsTab: showValidatorsTab,
+    isSubtypeField: isSubtypeField
+  }));
+};
+
+//# sourceMappingURL=EditFieldDialogContainer.js.map

package/admin/components/FieldEditor/EditFieldDialogContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Dialog","i18n","FieldSettingsTabs","t","namespace","EditFieldDialogContainer","headerTitle","shadowField","predefinedValuesTabEnabled","showValidatorsTab","isSubtypeField","onClose","onSubmit","createElement","size","title","open","modal","bodyPadding","actions","Fragment","CancelAction","text","onClick","ConfirmAction"],"sources":["EditFieldDialogContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { Dialog } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport type { CmsModelField } from \"~/types.js\";\nimport { FieldSettingsTabs } from \"./EditFieldDialog/FieldSettingsTabs.js\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nexport interface EditFieldDialogContainerProps {\n    headerTitle: string;\n    shadowField: CmsModelField;\n    predefinedValuesTabEnabled: boolean;\n    showValidatorsTab: boolean;\n    isSubtypeField: boolean;\n    onClose: () => void;\n    onSubmit: () => void;\n}\n\nexport const EditFieldDialogContainer = ({\n    headerTitle,\n    shadowField,\n    predefinedValuesTabEnabled,\n    showValidatorsTab,\n    isSubtypeField,\n    onClose,\n    onSubmit\n}: EditFieldDialogContainerProps) => {\n    return (\n        <Dialog\n            size={\"full\"}\n            title={headerTitle}\n            open={true}\n            modal={true}\n            onClose={onClose}\n            bodyPadding={false}\n            actions={\n                <>\n                    <Dialog.CancelAction\n                        text={t`Cancel`}\n                        onClick={onClose}\n                        data-testid=\"cms.editor.field.settings.cancel\"\n                    />\n                    <Dialog.ConfirmAction\n                        text={t`Save Field`}\n                        onClick={onSubmit}\n                        data-testid=\"cms.editor.field.settings.save\"\n                    />\n                </>\n            }\n            data-testid={\"cms-editor-edit-fields-dialog\"}\n        >\n            <FieldSettingsTabs\n                shadowField={shadowField}\n                predefinedValuesTabEnabled={predefinedValuesTabEnabled}\n                showValidatorsTab={showValidatorsTab}\n                isSubtypeField={isSubtypeField}\n            />\n        </Dialog>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,IAAI,QAAQ,2BAA2B;AAEhD,SAASC,iBAAiB;AAE1B,MAAMC,CAAC,GAAGF,IAAI,CAACG,SAAS,CAAC,0CAA0C,CAAC;AAYpE,OAAO,MAAMC,wBAAwB,GAAGA,CAAC;EACrCC,WAAW;EACXC,WAAW;EACXC,0BAA0B;EAC1BC,iBAAiB;EACjBC,cAAc;EACdC,OAAO;EACPC;AAC2B,CAAC,KAAK;EACjC,oBACIb,KAAA,CAAAc,aAAA,CAACb,MAAM;IACHc,IAAI,EAAE,MAAO;IACbC,KAAK,EAAET,WAAY;IACnBU,IAAI,EAAE,IAAK;IACXC,KAAK,EAAE,IAAK;IACZN,OAAO,EAAEA,OAAQ;IACjBO,WAAW,EAAE,KAAM;IACnBC,OAAO,eACHpB,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAqB,QAAA,qBACIrB,KAAA,CAAAc,aAAA,CAACb,MAAM,CAACqB,YAAY;MAChBC,IAAI,EAAEnB,CAAC,QAAS;MAChBoB,OAAO,EAAEZ,OAAQ;MACjB,eAAY;IAAkC,CACjD,CAAC,eACFZ,KAAA,CAAAc,aAAA,CAACb,MAAM,CAACwB,aAAa;MACjBF,IAAI,EAAEnB,CAAC,YAAa;MACpBoB,OAAO,EAAEX,QAAS;MAClB,eAAY;IAAgC,CAC/C,CACH,CACL;IACD,eAAa;EAAgC,gBAE7Cb,KAAA,CAAAc,aAAA,CAACX,iBAAiB;IACdK,WAAW,EAAEA,WAAY;IACzBC,0BAA0B,EAAEA,0BAA2B;IACvDC,iBAAiB,EAAEA,iBAAkB;IACrCC,cAAc,EAAEA;EAAe,CAClC,CACG,CAAC;AAEjB,CAAC","ignoreList":[]}

package/admin/components/FieldEditor/EditFieldDrawerContainer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { CmsModelField } from "../../../types.js";
+export interface EditFieldDrawerContainerProps {
+    headerTitle: string;
+    shadowField: CmsModelField;
+    predefinedValuesTabEnabled: boolean;
+    showValidatorsTab: boolean;
+    isSubtypeField: boolean;
+    onClose: () => void;
+    onSubmit: () => void;
+}
+export declare const EditFieldDrawerContainer: ({ headerTitle, shadowField, predefinedValuesTabEnabled, showValidatorsTab, isSubtypeField, onClose, onSubmit }: EditFieldDrawerContainerProps) => React.JSX.Element;

package/admin/components/FieldEditor/EditFieldDrawerContainer.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Drawer } from "@webiny/admin-ui";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { FieldSettingsTabs } from "./EditFieldDialog/FieldSettingsTabs.js";
+const t = i18n.namespace("app-headless-cms/admin/components/editor");
+export const EditFieldDrawerContainer = ({
+  headerTitle,
+  shadowField,
+  predefinedValuesTabEnabled,
+  showValidatorsTab,
+  isSubtypeField,
+  onClose,
+  onSubmit
+}) => {
+  return /*#__PURE__*/React.createElement(Drawer, {
+    title: headerTitle,
+    open: true,
+    modal: true,
+    onClose: onClose,
+    bodyPadding: false,
+    footerSeparator: true,
+    size: "lg",
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Drawer.CancelButton, {
+      text: t`Cancel`,
+      "data-testid": "cms.editor.field.settings.cancel"
+    }), /*#__PURE__*/React.createElement(Drawer.ConfirmButton, {
+      text: t`Save Field`,
+      onClick: onSubmit,
+      "data-testid": "cms.editor.field.settings.save"
+    })),
+    "data-testid": "cms-editor-edit-fields-dialog"
+  }, /*#__PURE__*/React.createElement(FieldSettingsTabs, {
+    shadowField: shadowField,
+    predefinedValuesTabEnabled: predefinedValuesTabEnabled,
+    showValidatorsTab: showValidatorsTab,
+    isSubtypeField: isSubtypeField
+  }));
+};
+
+//# sourceMappingURL=EditFieldDrawerContainer.js.map

package/admin/components/FieldEditor/EditFieldDrawerContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Drawer","i18n","FieldSettingsTabs","t","namespace","EditFieldDrawerContainer","headerTitle","shadowField","predefinedValuesTabEnabled","showValidatorsTab","isSubtypeField","onClose","onSubmit","createElement","title","open","modal","bodyPadding","footerSeparator","size","actions","Fragment","CancelButton","text","ConfirmButton","onClick"],"sources":["EditFieldDrawerContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { Drawer } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport type { CmsModelField } from \"~/types.js\";\nimport { FieldSettingsTabs } from \"./EditFieldDialog/FieldSettingsTabs.js\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nexport interface EditFieldDrawerContainerProps {\n    headerTitle: string;\n    shadowField: CmsModelField;\n    predefinedValuesTabEnabled: boolean;\n    showValidatorsTab: boolean;\n    isSubtypeField: boolean;\n    onClose: () => void;\n    onSubmit: () => void;\n}\n\nexport const EditFieldDrawerContainer = ({\n    headerTitle,\n    shadowField,\n    predefinedValuesTabEnabled,\n    showValidatorsTab,\n    isSubtypeField,\n    onClose,\n    onSubmit\n}: EditFieldDrawerContainerProps) => {\n    return (\n        <Drawer\n            title={headerTitle}\n            open={true}\n            modal={true}\n            onClose={onClose}\n            bodyPadding={false}\n            footerSeparator={true}\n            size={\"lg\"}\n            actions={\n                <>\n                    <Drawer.CancelButton\n                        text={t`Cancel`}\n                        data-testid=\"cms.editor.field.settings.cancel\"\n                    />\n                    <Drawer.ConfirmButton\n                        text={t`Save Field`}\n                        onClick={onSubmit}\n                        data-testid=\"cms.editor.field.settings.save\"\n                    />\n                </>\n            }\n            data-testid={\"cms-editor-edit-fields-dialog\"}\n        >\n            <FieldSettingsTabs\n                shadowField={shadowField}\n                predefinedValuesTabEnabled={predefinedValuesTabEnabled}\n                showValidatorsTab={showValidatorsTab}\n                isSubtypeField={isSubtypeField}\n            />\n        </Drawer>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,IAAI,QAAQ,2BAA2B;AAEhD,SAASC,iBAAiB;AAE1B,MAAMC,CAAC,GAAGF,IAAI,CAACG,SAAS,CAAC,0CAA0C,CAAC;AAYpE,OAAO,MAAMC,wBAAwB,GAAGA,CAAC;EACrCC,WAAW;EACXC,WAAW;EACXC,0BAA0B;EAC1BC,iBAAiB;EACjBC,cAAc;EACdC,OAAO;EACPC;AAC2B,CAAC,KAAK;EACjC,oBACIb,KAAA,CAAAc,aAAA,CAACb,MAAM;IACHc,KAAK,EAAER,WAAY;IACnBS,IAAI,EAAE,IAAK;IACXC,KAAK,EAAE,IAAK;IACZL,OAAO,EAAEA,OAAQ;IACjBM,WAAW,EAAE,KAAM;IACnBC,eAAe,EAAE,IAAK;IACtBC,IAAI,EAAE,IAAK;IACXC,OAAO,eACHrB,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAsB,QAAA,qBACItB,KAAA,CAAAc,aAAA,CAACb,MAAM,CAACsB,YAAY;MAChBC,IAAI,EAAEpB,CAAC,QAAS;MAChB,eAAY;IAAkC,CACjD,CAAC,eACFJ,KAAA,CAAAc,aAAA,CAACb,MAAM,CAACwB,aAAa;MACjBD,IAAI,EAAEpB,CAAC,YAAa;MACpBsB,OAAO,EAAEb,QAAS;MAClB,eAAY;IAAgC,CAC/C,CACH,CACL;IACD,eAAa;EAAgC,gBAE7Cb,KAAA,CAAAc,aAAA,CAACX,iBAAiB;IACdK,WAAW,EAAEA,WAAY;IACzBC,0BAA0B,EAAEA,0BAA2B;IACvDC,iBAAiB,EAAEA,iBAAkB;IACrCC,cAAc,EAAEA;EAAe,CAClC,CACG,CAAC;AAEjB,CAAC","ignoreList":[]}