@webiny/app-headless-cms 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/FieldPermissionsSelection.js

@@ -0,0 +1,113 @@
+import react, { useMemo } from "react";
+import { ReactComponent } from "@webiny/icons/arrow_drop_down.svg";
+import { Avatar, Button, DropdownMenu, List, Text } from "@webiny/admin-ui";
+const FIELD_ACCESS_LEVELS = [
+    {
+        id: "hide",
+        label: "No Access",
+        description: "Hide this field from the user."
+    },
+    {
+        id: "disable",
+        label: "Viewer (Read-only)",
+        description: "Allow the user to read, but not edit, this field."
+    }
+];
+const ListItemGraphic = ({ target })=>{
+    if ("admin" === target.type) return /*#__PURE__*/ react.createElement(Avatar, {
+        size: "md",
+        image: /*#__PURE__*/ react.createElement(Avatar.Image, {
+            src: target.meta.image,
+            alt: "User's avatar."
+        }),
+        fallback: /*#__PURE__*/ react.createElement(Avatar.Fallback, {
+            delayMs: 0
+        }, target.name.charAt(0))
+    });
+    return /*#__PURE__*/ react.createElement(Avatar, {
+        size: "md",
+        fallback: /*#__PURE__*/ react.createElement(Avatar.Fallback, {
+            delayMs: 0
+        }, target.name.charAt(0))
+    });
+};
+const ListItemText = ({ target })=>{
+    if ("admin" === target.type) return /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Text, {
+        as: "div"
+    }, target.name), /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "sm",
+        className: "text-neutral-strong font-normal"
+    }, target.meta.email || "E-mail not available."));
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, target.name);
+};
+const ListItemMeta = ({ rule, onRemoveAccess, onUpdatePermission })=>{
+    const currentLevel = useMemo(()=>FIELD_ACCESS_LEVELS.find((level)=>level.id === rule.action), [
+        rule.action
+    ]);
+    const handle = /*#__PURE__*/ react.createElement(Button, {
+        variant: "ghost",
+        text: currentLevel.label,
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        iconPosition: "end"
+    });
+    return /*#__PURE__*/ react.createElement(DropdownMenu, {
+        trigger: handle
+    }, FIELD_ACCESS_LEVELS.map((level)=>/*#__PURE__*/ react.createElement(DropdownMenu.CheckboxItem, {
+            key: level.id,
+            checked: currentLevel.id === level.id,
+            text: /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Text, {
+                as: "div"
+            }, level.label), /*#__PURE__*/ react.createElement(Text, {
+                as: "div",
+                size: "sm",
+                className: "text-neutral-strong"
+            }, level.description)),
+            onClick: ()=>{
+                setTimeout(()=>{
+                    onUpdatePermission({
+                        rule: {
+                            ...rule,
+                            action: level.id
+                        }
+                    });
+                }, 75);
+            }
+        })), /*#__PURE__*/ react.createElement(DropdownMenu.Separator, null), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        onClick: ()=>onRemoveAccess({
+                rule
+            }),
+        text: "Remove permission"
+    }));
+};
+const FieldPermissionsSelection = ({ rules = [], targetsList, onRemoveAccess, onUpdatePermission })=>{
+    const selection = rules.map((rule)=>{
+        const target = targetsList.find((u)=>u.target === String(rule.value));
+        if (target) return {
+            rule,
+            target
+        };
+        return null;
+    }).filter(Boolean);
+    const hasRules = selection.length > 0;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, hasRules ? /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        className: "mb-md"
+    }, "People and teams with access") : null, /*#__PURE__*/ react.createElement(List, null, selection?.map((item)=>/*#__PURE__*/ react.createElement(List.Item, {
+            key: String(item.rule.value),
+            title: /*#__PURE__*/ react.createElement(ListItemText, {
+                target: item.target
+            }),
+            icon: /*#__PURE__*/ react.createElement(ListItemGraphic, {
+                target: item.target
+            }),
+            actions: /*#__PURE__*/ react.createElement(ListItemMeta, {
+                rule: item.rule,
+                onRemoveAccess: onRemoveAccess,
+                onUpdatePermission: onUpdatePermission
+            })
+        }))));
+};
+export { FieldPermissionsSelection };
+
+//# sourceMappingURL=FieldPermissionsSelection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/FieldPermissionsSelection.js","sources":["../../../../../../src/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/FieldPermissionsSelection.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { ReactComponent as More } from \"@webiny/icons/arrow_drop_down.svg\";\nimport { Button, DropdownMenu, List, Text, Avatar } from \"@webiny/admin-ui\";\nimport type { FolderLevelPermissionsTarget } from \"@webiny/app-aco\";\nimport type { FieldRule } from \"~/types.js\";\n\nconst FIELD_ACCESS_LEVELS = [\n    {\n        id: \"hide\",\n        label: \"No Access\",\n        description: \"Hide this field from the user.\"\n    },\n    {\n        id: \"disable\",\n        label: \"Viewer (Read-only)\",\n        description: \"Allow the user to read, but not edit, this field.\"\n    }\n];\n\ninterface FieldPermissionsSelectionProps {\n    targetsList: FolderLevelPermissionsTarget[];\n    rules: FieldRule[];\n    onRemoveAccess: (params: { rule: FieldRule }) => void;\n    onUpdatePermission: (params: { rule: FieldRule }) => void;\n}\n\ntype Selection = Array<{ rule: FieldRule; target: FolderLevelPermissionsTarget }>;\n\ninterface ListItemGraphicProps {\n    target: FolderLevelPermissionsTarget;\n}\n\nconst ListItemGraphic = ({ target }: ListItemGraphicProps) => {\n    if (target.type === \"admin\") {\n        return (\n            <Avatar\n                size={\"md\"}\n                image={<Avatar.Image src={target.meta.image} alt={\"User's avatar.\"} />}\n                fallback={<Avatar.Fallback delayMs={0}>{target.name.charAt(0)}</Avatar.Fallback>}\n            />\n        );\n    }\n\n    return (\n        <Avatar\n            size={\"md\"}\n            fallback={<Avatar.Fallback delayMs={0}>{target.name.charAt(0)}</Avatar.Fallback>}\n        />\n    );\n};\n\ninterface ListItemTextProps {\n    target: FolderLevelPermissionsTarget;\n}\n\nconst ListItemText = ({ target }: ListItemTextProps) => {\n    if (target.type === \"admin\") {\n        return (\n            <div>\n                <Text as=\"div\">{target.name}</Text>\n                <Text as={\"div\"} size={\"sm\"} className={\"text-neutral-strong font-normal\"}>\n                    {target.meta.email || \"E-mail not available.\"}\n                </Text>\n            </div>\n        );\n    }\n\n    return <>{target.name}</>;\n};\n\ninterface ListItemMetaProps {\n    rule: FieldRule;\n    onRemoveAccess: (params: { rule: FieldRule }) => void;\n    onUpdatePermission: (params: { rule: FieldRule }) => void;\n}\n\nconst ListItemMeta = ({ rule, onRemoveAccess, onUpdatePermission }: ListItemMetaProps) => {\n    const currentLevel = useMemo(() => {\n        return FIELD_ACCESS_LEVELS.find(level => level.id === rule.action)!;\n    }, [rule.action]);\n\n    const handle = (\n        <Button variant={\"ghost\"} text={currentLevel.label} icon={<More />} iconPosition={\"end\"} />\n    );\n\n    return (\n        <DropdownMenu trigger={handle}>\n            {FIELD_ACCESS_LEVELS.map(level => (\n                <DropdownMenu.CheckboxItem\n                    key={level.id}\n                    checked={currentLevel.id === level.id}\n                    text={\n                        <div>\n                            <Text as={\"div\"}>{level.label}</Text>\n                            <Text as={\"div\"} size={\"sm\"} className={\"text-neutral-strong\"}>\n                                {level.description}\n                            </Text>\n                        </div>\n                    }\n                    onClick={() => {\n                        setTimeout(() => {\n                            onUpdatePermission({\n                                rule: {\n                                    ...rule,\n                                    action: level.id\n                                }\n                            });\n                        }, 75);\n                    }}\n                />\n            ))}\n            <DropdownMenu.Separator />\n            <DropdownMenu.Item\n                onClick={() => onRemoveAccess({ rule })}\n                text={\"Remove permission\"}\n            />\n        </DropdownMenu>\n    );\n};\n\nexport const FieldPermissionsSelection = ({\n    rules = [],\n    targetsList,\n    onRemoveAccess,\n    onUpdatePermission\n}: FieldPermissionsSelectionProps) => {\n    const selection = rules\n        .map(rule => {\n            const target = targetsList.find(u => u.target === String(rule.value));\n            if (target) {\n                return { rule, target };\n            }\n\n            return null;\n        })\n        .filter(Boolean) as Selection;\n\n    const hasRules = selection.length > 0;\n\n    return (\n        <>\n            {hasRules ? (\n                <Text as={\"div\"} className={\"mb-md\"}>\n                    People and teams with access\n                </Text>\n            ) : null}\n            <List>\n                {selection?.map(item => (\n                    <List.Item\n                        key={String(item.rule.value)}\n                        title={<ListItemText target={item.target} />}\n                        icon={<ListItemGraphic target={item.target} />}\n                        actions={\n                            <ListItemMeta\n                                rule={item.rule}\n                                onRemoveAccess={onRemoveAccess}\n                                onUpdatePermission={onUpdatePermission}\n                            />\n                        }\n                    />\n                ))}\n            </List>\n        </>\n    );\n};\n"],"names":["FIELD_ACCESS_LEVELS","ListItemGraphic","target","Avatar","ListItemText","Text","ListItemMeta","rule","onRemoveAccess","onUpdatePermission","currentLevel","useMemo","level","handle","Button","More","DropdownMenu","setTimeout","FieldPermissionsSelection","rules","targetsList","selection","u","String","Boolean","hasRules","List","item"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const PermissionsEditor: () => React.JSX.Element;

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

@@ -0,0 +1,71 @@
+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";
+const PermissionsEditor = ()=>{
+    const wcp = useWcp();
+    const bind = useBind({
+        name: "rules"
+    });
+    const allRules = bind.value || [];
+    const accessRules = allRules.filter((r)=>"accessControl" === r.type);
+    const otherRules = allRules.filter((r)=>"accessControl" !== r.type);
+    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, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(CannotUsePermissions, null)));
+    return /*#__PURE__*/ react.createElement(Grid, null, /*#__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
+    })));
+};
+export { PermissionsEditor };
+
+//# sourceMappingURL=PermissionsEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js","sources":["../../../../../../src/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.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 PermissionsEditor = () => {\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>\n                <Grid.Column span={12}>\n                    <CannotUsePermissions />\n                </Grid.Column>\n            </Grid>\n        );\n    }\n\n    return (\n        <Grid>\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"],"names":["PermissionsEditor","wcp","useWcp","bind","useBind","allRules","accessRules","r","otherRules","listTargetsQuery","useQuery","LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS","targetsList","addPermission","value","selectedUserOrTeam","newRule","updatePermission","updatedRule","updatedAccessRules","rule","removeUserTeam","removedRule","Grid","CannotUsePermissions","UsersTeamsMultiAutocomplete","String","FieldPermissionsSelection"],"mappings":";;;;;;;;AAcO,MAAMA,oBAAoB;IAC7B,MAAMC,MAAMC;IACZ,MAAMC,OAAOC,QAAQ;QAAE,MAAM;IAAQ;IACrC,MAAMC,WAAwBF,KAAK,KAAK,IAAI,EAAE;IAC9C,MAAMG,cAAcD,SAAS,MAAM,CAACE,CAAAA,IAAKA,AAAW,oBAAXA,EAAE,IAAI;IAC/C,MAAMC,aAAaH,SAAS,MAAM,CAACE,CAAAA,IAAKA,AAAW,oBAAXA,EAAE,IAAI;IAE9C,MAAME,mBAAmBC,SAASC;IAClC,MAAMC,cACFH,iBAAiB,IAAI,EAAE,IAAI,kCAAkC,QAAQ,EAAE;IAE3E,MAAMI,gBAAgB,CAACC;QACnB,MAAMC,qBAAqBD,KAAK,CAACA,MAAM,MAAM,GAAG,EAAE;QAClD,MAAME,UAAqB;YACvB,MAAM;YACN,QAAQ;YACR,UAAU;YACV,OAAOD;YACP,QAAQ;QACZ;QAEAZ,KAAK,QAAQ,CAAC;eAAIK;eAAeF;YAAaU;SAAQ;IAC1D;IAEA,MAAMC,mBAAmB,CAAC,EAAE,MAAMC,WAAW,EAAuB;QAChE,MAAMC,qBAAqBb,YAAY,GAAG,CAACc,CAAAA;YACvC,IAAIA,KAAK,KAAK,KAAKF,YAAY,KAAK,EAChC,OAAOA;YAEX,OAAOE;QACX;QACAjB,KAAK,QAAQ,CAAC;eAAIK;eAAeW;SAAmB;IACxD;IAEA,MAAME,iBAAiB,CAAC,EAAE,MAAMC,WAAW,EAAuB;QAC9D,MAAMH,qBAAqBb,YAAY,MAAM,CAACc,CAAAA,OAAQA,KAAK,KAAK,KAAKE,YAAY,KAAK;QACtFnB,KAAK,QAAQ,CAAC;eAAIK;eAAeW;SAAmB;IACxD;IAEA,IAAI,CAAClB,IAAI,0BAA0B,IAC/B,OAAO,WAAP,GACI,oBAACsB,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,sBAAoBA;IAMrC,OAAO,WAAP,GACI,oBAACD,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,6BAA2BA;QACxB,SAASb;QACT,OAAON,YAAY,GAAG,CAClBc,CAAAA,OAAQM,OAAON,KAAK,KAAK;QAE7B,UAAUP;uBAGlB,oBAACU,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACI,2BAAyBA;QACtB,OAAOrB;QACP,aAAaM;QACb,gBAAgBS;QAChB,oBAAoBJ;;AAKxC"}

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

@@ -1,10 +1,3 @@
 import React from "react";
-import { CmsEditorField, CmsEditorFieldTypePlugin } from "../../../../types";
-import { FormRenderPropParams } from "@webiny/form";
-export interface PredefinedValuesProps {
-    field: CmsEditorField;
-    fieldPlugin: CmsEditorFieldTypePlugin;
-    form: FormRenderPropParams;
-}
-declare const PredefinedValues: React.FC<PredefinedValuesProps>;
+declare const PredefinedValues: () => React.JSX.Element;
 export default PredefinedValues;

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

@@ -1,104 +1,45 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _getValue = _interopRequireDefault(require("./functions/getValue"));
-
-var _setValue = _interopRequireDefault(require("./functions/setValue"));
-
-var PredefinedValues = function PredefinedValues(_ref) {
-  var field = _ref.field,
-      fieldPlugin = _ref.fieldPlugin,
-      form = _ref.form;
-  var memoizedBindComponents = (0, _react.useRef)({});
-  var BaseFormBind = form.Bind;
-  var getBind = (0, _react.useCallback)(function () {
-    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-    var memoKey = index;
-
-    if (memoizedBindComponents.current[memoKey]) {
-      return memoizedBindComponents.current[memoKey];
-    }
-
-    var Bind = function Bind(_ref2) {
-      var children = _ref2.children,
-          name = _ref2.name;
-      return /*#__PURE__*/_react.default.createElement(BaseFormBind, {
-        name: "predefinedValues.values"
-      }, function (bind) {
-        var props = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, bind), {}, {
-          value: (0, _getValue.default)({
-            bind: bind,
-            index: index,
-            name: name
-          }),
-          onChange: function () {
-            var _onChange = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(value) {
-              return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-                while (1) {
-                  switch (_context.prev = _context.next) {
-                    case 0:
-                      _context.next = 2;
-                      return (0, _setValue.default)({
-                        value: value,
-                        bind: bind,
-                        index: index,
-                        name: name
-                      });
-
-                    case 2:
-                    case "end":
-                      return _context.stop();
-                  }
-                }
-              }, _callee);
-            }));
-
-            function onChange(_x) {
-              return _onChange.apply(this, arguments);
-            }
-
-            return onChange;
-          }()
-        });
-
-        if (typeof children === "function") {
-          return children(props);
-        }
-
-        return /*#__PURE__*/(0, _react.cloneElement)(children, props);
-      });
-    };
-
-    memoizedBindComponents.current[memoKey] = Bind;
-    return memoizedBindComponents.current[memoKey];
-  }, []);
-
-  if (!fieldPlugin.field.renderPredefinedValues) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Missing \"field.renderPredefinedValues\" method in field type plugin: \"".concat(field.type, "\"."));
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fieldPlugin.field.renderPredefinedValues({
-    field: field,
-    getBind: getBind,
-    form: form
-  }));
+import react, { cloneElement, useCallback, useRef } from "react";
+import { getValue } from "./functions/getValue.js";
+import { setValue } from "./functions/setValue.js";
+import { Bind as form_Bind } from "@webiny/form";
+import { useModelField } from "../../../hooks/index.js";
+const PredefinedValues = ()=>{
+    const { field, fieldPlugin } = useModelField();
+    const memoizedBindComponents = useRef({});
+    const getBind = useCallback((index = -1)=>{
+        const memoKey = index;
+        if (memoizedBindComponents.current[memoKey]) return memoizedBindComponents.current[memoKey];
+        const Bind = ({ children, name })=>/*#__PURE__*/ react.createElement(form_Bind, {
+                name: "predefinedValues.values"
+            }, (bind)=>{
+                const props = {
+                    ...bind,
+                    value: getValue({
+                        bind,
+                        index,
+                        name
+                    }),
+                    onChange: (value)=>{
+                        setValue({
+                            value,
+                            bind,
+                            index,
+                            name
+                        });
+                    }
+                };
+                if ("function" == typeof children) return children(props);
+                return /*#__PURE__*/ cloneElement(children, props);
+            });
+        memoizedBindComponents.current[memoKey] = Bind;
+        return memoizedBindComponents.current[memoKey];
+    }, []);
+    if (!fieldPlugin.field.renderPredefinedValues) return /*#__PURE__*/ react.createElement(react.Fragment, null, `Missing "field.renderPredefinedValues" method in field type plugin: "${field.type}".`);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, fieldPlugin.field.renderPredefinedValues({
+        getBind
+    }));
 };
+const EditFieldDialog_PredefinedValues = PredefinedValues;
+export default EditFieldDialog_PredefinedValues;
 
-var _default = PredefinedValues;
-exports.default = _default;
+//# sourceMappingURL=PredefinedValues.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["PredefinedValues","field","fieldPlugin","form","memoizedBindComponents","useRef","BaseFormBind","Bind","getBind","useCallback","index","memoKey","current","children","name","bind","props","value","getValue","onChange","setValue","cloneElement","renderPredefinedValues","type"],"sources":["PredefinedValues.tsx"],"sourcesContent":["import React, { useCallback, useRef, cloneElement } from \"react\";\nimport getValue from \"./functions/getValue\";\nimport setValue from \"./functions/setValue\";\nimport { CmsEditorField, CmsEditorFieldTypePlugin } from \"~/types\";\nimport { BindComponent, FormRenderPropParams } from \"@webiny/form\";\n\nexport interface PredefinedValuesProps {\n    field: CmsEditorField;\n    fieldPlugin: CmsEditorFieldTypePlugin;\n    form: FormRenderPropParams;\n}\ninterface MemoizedBindComponents {\n    [key: string]: BindComponent;\n}\n\nconst PredefinedValues: React.FC<PredefinedValuesProps> = ({ field, fieldPlugin, form }) => {\n    const memoizedBindComponents = useRef<MemoizedBindComponents>({});\n    const { Bind: BaseFormBind } = form;\n\n    const getBind = useCallback((index = -1) => {\n        const memoKey = index;\n        if (memoizedBindComponents.current[memoKey]) {\n            return memoizedBindComponents.current[memoKey];\n        }\n\n        const Bind: BindComponent = ({ children, name }) => {\n            return (\n                <BaseFormBind name={\"predefinedValues.values\"}>\n                    {bind => {\n                        const props = {\n                            ...bind,\n                            value: getValue({ bind, index, name }),\n                            onChange: async (value: string[]) => {\n                                await setValue({ value, bind, index, name });\n                            }\n                        };\n\n                        if (typeof children === \"function\") {\n                            return children(props);\n                        }\n\n                        return cloneElement(children as unknown as React.ReactElement, props);\n                    }}\n                </BaseFormBind>\n            );\n        };\n\n        memoizedBindComponents.current[memoKey] = Bind;\n\n        return memoizedBindComponents.current[memoKey];\n    }, []);\n    if (!fieldPlugin.field.renderPredefinedValues) {\n        return (\n            <>{`Missing \"field.renderPredefinedValues\" method in field type plugin: \"${field.type}\".`}</>\n        );\n    }\n\n    return <>{fieldPlugin.field.renderPredefinedValues({ field, getBind, form })}</>;\n};\n\nexport default PredefinedValues;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAaA,IAAMA,gBAAiD,GAAG,SAApDA,gBAAoD,OAAkC;EAAA,IAA/BC,KAA+B,QAA/BA,KAA+B;EAAA,IAAxBC,WAAwB,QAAxBA,WAAwB;EAAA,IAAXC,IAAW,QAAXA,IAAW;EACxF,IAAMC,sBAAsB,GAAG,IAAAC,aAAA,EAA+B,EAA/B,CAA/B;EACA,IAAcC,YAAd,GAA+BH,IAA/B,CAAQI,IAAR;EAEA,IAAMC,OAAO,GAAG,IAAAC,kBAAA,EAAY,YAAgB;IAAA,IAAfC,KAAe,uEAAP,CAAC,CAAM;IACxC,IAAMC,OAAO,GAAGD,KAAhB;;IACA,IAAIN,sBAAsB,CAACQ,OAAvB,CAA+BD,OAA/B,CAAJ,EAA6C;MACzC,OAAOP,sBAAsB,CAACQ,OAAvB,CAA+BD,OAA/B,CAAP;IACH;;IAED,IAAMJ,IAAmB,GAAG,SAAtBA,IAAsB,QAAwB;MAAA,IAArBM,QAAqB,SAArBA,QAAqB;MAAA,IAAXC,IAAW,SAAXA,IAAW;MAChD,oBACI,6BAAC,YAAD;QAAc,IAAI,EAAE;MAApB,GACK,UAAAC,IAAI,EAAI;QACL,IAAMC,KAAK,+DACJD,IADI;UAEPE,KAAK,EAAE,IAAAC,iBAAA,EAAS;YAAEH,IAAI,EAAJA,IAAF;YAAQL,KAAK,EAALA,KAAR;YAAeI,IAAI,EAAJA;UAAf,CAAT,CAFA;UAGPK,QAAQ;YAAA,uGAAE,iBAAOF,KAAP;cAAA;gBAAA;kBAAA;oBAAA;sBAAA;sBAAA,OACA,IAAAG,iBAAA,EAAS;wBAAEH,KAAK,EAALA,KAAF;wBAASF,IAAI,EAAJA,IAAT;wBAAeL,KAAK,EAALA,KAAf;wBAAsBI,IAAI,EAAJA;sBAAtB,CAAT,CADA;;oBAAA;oBAAA;sBAAA;kBAAA;gBAAA;cAAA;YAAA,CAAF;;YAAA;cAAA;YAAA;;YAAA;UAAA;QAHD,EAAX;;QAQA,IAAI,OAAOD,QAAP,KAAoB,UAAxB,EAAoC;UAChC,OAAOA,QAAQ,CAACG,KAAD,CAAf;QACH;;QAED,oBAAO,IAAAK,mBAAA,EAAaR,QAAb,EAAwDG,KAAxD,CAAP;MACH,CAfL,CADJ;IAmBH,CApBD;;IAsBAZ,sBAAsB,CAACQ,OAAvB,CAA+BD,OAA/B,IAA0CJ,IAA1C;IAEA,OAAOH,sBAAsB,CAACQ,OAAvB,CAA+BD,OAA/B,CAAP;EACH,CA/Be,EA+Bb,EA/Ba,CAAhB;;EAgCA,IAAI,CAACT,WAAW,CAACD,KAAZ,CAAkBqB,sBAAvB,EAA+C;IAC3C,oBACI,8IAA2ErB,KAAK,CAACsB,IAAjF,SADJ;EAGH;;EAED,oBAAO,4DAAGrB,WAAW,CAACD,KAAZ,CAAkBqB,sBAAlB,CAAyC;IAAErB,KAAK,EAALA,KAAF;IAASO,OAAO,EAAPA,OAAT;IAAkBL,IAAI,EAAJA;EAAlB,CAAzC,CAAH,CAAP;AACH,CA3CD;;eA6CeH,gB"}
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/PredefinedValues.js","sources":["../../../../../src/admin/components/FieldEditor/EditFieldDialog/PredefinedValues.tsx"],"sourcesContent":["import React, { useCallback, useRef, cloneElement } from \"react\";\nimport { getValue } from \"./functions/getValue.js\";\nimport { setValue } from \"./functions/setValue.js\";\nimport type { BindComponent } from \"@webiny/form\";\nimport { Bind as BaseFormBind } from \"@webiny/form\";\nimport { useModelField } from \"~/admin/hooks/index.js\";\n\ninterface MemoizedBindComponents {\n    [key: string]: BindComponent;\n}\n\nconst PredefinedValues = () => {\n    const { field, fieldPlugin } = useModelField();\n    const memoizedBindComponents = useRef<MemoizedBindComponents>({});\n\n    const getBind = useCallback((index = -1) => {\n        const memoKey = index;\n        if (memoizedBindComponents.current[memoKey]) {\n            return memoizedBindComponents.current[memoKey];\n        }\n\n        const Bind: BindComponent = ({ children, name }) => {\n            return (\n                <BaseFormBind name={\"predefinedValues.values\"}>\n                    {bind => {\n                        const props = {\n                            ...bind,\n                            value: getValue({ bind, index, name }),\n                            onChange: (value: string[]) => {\n                                setValue({ value, bind, index, name });\n                            }\n                        };\n\n                        if (typeof children === \"function\") {\n                            return children(props);\n                        }\n\n                        return cloneElement(children as unknown as React.ReactElement, props);\n                    }}\n                </BaseFormBind>\n            );\n        };\n\n        memoizedBindComponents.current[memoKey] = Bind;\n\n        return memoizedBindComponents.current[memoKey];\n    }, []);\n    if (!fieldPlugin.field.renderPredefinedValues) {\n        return (\n            <>{`Missing \"field.renderPredefinedValues\" method in field type plugin: \"${field.type}\".`}</>\n        );\n    }\n\n    return <>{fieldPlugin.field.renderPredefinedValues({ getBind })}</>;\n};\n\nexport default PredefinedValues;\n"],"names":["PredefinedValues","field","fieldPlugin","useModelField","memoizedBindComponents","useRef","getBind","useCallback","index","memoKey","Bind","children","name","BaseFormBind","bind","props","getValue","value","setValue","cloneElement"],"mappings":";;;;;AAWA,MAAMA,mBAAmB;IACrB,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAE,GAAGC;IAC/B,MAAMC,yBAAyBC,OAA+B,CAAC;IAE/D,MAAMC,UAAUC,YAAY,CAACC,QAAQ,EAAE;QACnC,MAAMC,UAAUD;QAChB,IAAIJ,uBAAuB,OAAO,CAACK,QAAQ,EACvC,OAAOL,uBAAuB,OAAO,CAACK,QAAQ;QAGlD,MAAMC,OAAsB,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GACpC,WAAP,GACI,oBAACC,WAAYA;gBAAC,MAAM;eACfC,CAAAA;gBACG,MAAMC,QAAQ;oBACV,GAAGD,IAAI;oBACP,OAAOE,SAAS;wBAAEF;wBAAMN;wBAAOI;oBAAK;oBACpC,UAAU,CAACK;wBACPC,SAAS;4BAAED;4BAAOH;4BAAMN;4BAAOI;wBAAK;oBACxC;gBACJ;gBAEA,IAAI,AAAoB,cAApB,OAAOD,UACP,OAAOA,SAASI;gBAGpB,OAAO,WAAP,GAAOI,aAAaR,UAA2CI;YACnE;QAKZX,uBAAuB,OAAO,CAACK,QAAQ,GAAGC;QAE1C,OAAON,uBAAuB,OAAO,CAACK,QAAQ;IAClD,GAAG,EAAE;IACL,IAAI,CAACP,YAAY,KAAK,CAAC,sBAAsB,EACzC,OAAO,WAAP,GACI,0CAAG,CAAC,qEAAqE,EAAED,MAAM,IAAI,CAAC,EAAE,CAAC;IAIjG,OAAO,WAAP,GAAO,0CAAGC,YAAY,KAAK,CAAC,sBAAsB,CAAC;QAAEI;IAAQ;AACjE;AAEA,yCAAeN"}

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

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

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

@@ -0,0 +1,225 @@
+import react, { useCallback, useMemo } from "react";
+import { Button, Grid, Input, Select, Separator } from "@webiny/admin-ui";
+import { useBind } from "@webiny/form";
+import { ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
+import { VALUE_HIDDEN_OPERATORS, getOperatorOptions } 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);
+        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 ?? "";
+        if (selectedFieldOption?.fieldType === "number" && "" !== parsed) {
+            const num = Number(parsed);
+            if (!isNaN(num)) parsed = num;
+        }
+        if (selectedFieldOption?.fieldType === "boolean") {
+            if ("true" === parsed) parsed = true;
+            else if ("false" === parsed) 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
+    ]);
+    const isBooleanField = selectedFieldOption?.fieldType === "boolean";
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Separator, {
+        className: 0 === index ? "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: null != rule.value ? 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(ReactComponent, null),
+        onClick: ()=>onRemove(index),
+        variant: "ghost"
+    }))));
+};
+const RulesEditor = ({ fieldOptions, actionOptions = DEFAULT_ACTION_OPTIONS })=>{
+    const bind = useBind({
+        name: "rules"
+    });
+    const allRules = bind.value || [];
+    const entryRules = allRules.filter((r)=>"condition" === r.type);
+    const otherRules = allRules.filter((r)=>"condition" !== r.type);
+    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, null, /*#__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(add_svg_ReactComponent, null),
+        size: "sm"
+    }))));
+};
+export { RulesEditor };
+
+//# sourceMappingURL=RulesEditor.js.map