@webiny/app-headless-cms 0.0.0-mt-3 → 0.0.0-unstable.2af142b57e

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

@@ -1,120 +1,139 @@
-import _camelCase from "lodash/camelCase";
-import React, { useEffect, useCallback, useRef, useMemo } from "react";
-import { Input } from "@webiny/ui/Input";
-import { Switch } from "@webiny/ui/Switch";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { validation } from "@webiny/validation";
-import { useFieldEditor } from "./..";
-import { useContentModelEditor } from "../../ContentModelEditor/useContentModelEditor";
+"use strict";
 
-var GeneralTab = function GeneralTab(_ref) {
-  var field = _ref.field,
-      form = _ref.form,
-      fieldPlugin = _ref.fieldPlugin;
-  var Bind = form.Bind,
-      setValue = form.setValue;
-  var inputRef = useRef(null);
+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 _camelCase2 = _interopRequireDefault(require("lodash/camelCase"));
+var _react = _interopRequireWildcard(require("react"));
+var _Input = require("@webiny/ui/Input");
+var _Switch = require("@webiny/ui/Switch");
+var _Grid = require("@webiny/ui/Grid");
+var _validation = require("@webiny/validation");
+var _Tags = require("@webiny/ui/Tags");
+var _form = require("@webiny/form");
+var _ = require("./..");
+var _hooks = require("../../../hooks");
+var GeneralTab = function GeneralTab() {
+  var form = (0, _form.useForm)();
+  var _useModelField = (0, _hooks.useModelField)(),
+    field = _useModelField.field,
+    fieldPlugin = _useModelField.fieldPlugin;
+  var inputRef = (0, _react.useRef)(null);
+  var _useModelEditor = (0, _hooks.useModelEditor)(),
+    contentModel = _useModelEditor.data;
+  var _useModelFieldEditor = (0, _.useModelFieldEditor)(),
+    getField = _useModelFieldEditor.getField;
 
-  var _useContentModelEdito = useContentModelEditor(),
-      data = _useContentModelEdito.data;
-
-  var _useFieldEditor = useFieldEditor(),
-      getField = _useFieldEditor.getField; // Had problems with auto-focusing the "label" field. A couple of comments on this.
+  // Had problems with auto-focusing the "label" field. A couple of comments on this.
   // 1. It's probably caused by the Tabs component which wraps this component.
   // 2. It seems that the "autoFocus" prop on the Input doesn't work. I can't see it attached in the actual DOM.
   // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design
   //    in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then
   //    it seems it's behaving correctly. ¯\_(ツ)_/¯
-
-
-  useEffect(function () {
+  (0, _react.useEffect)(function () {
     setTimeout(function () {
-      inputRef.current && inputRef.current.focus();
-    }, 200);
+      if (!inputRef.current) {
+        return;
+      }
+      inputRef.current.focus();
+    }, /* The value of 400 was determined by manual testing. */400);
   }, []);
-  var afterChangeLabel = useCallback(function (value) {
-    setValue("fieldId", _camelCase(value));
+  var afterChangeLabel = (0, _react.useCallback)(function (value) {
+    form.setValue("fieldId", (0, _camelCase2.default)(value));
   }, []);
-  var beforeChangeFieldId = useCallback(function (value, baseOnChange) {
-    var newValue = value.trim();
-    baseOnChange(newValue);
+  var beforeChangeFieldId = (0, _react.useCallback)(function (value, baseOnChange) {
+    baseOnChange(value.trim());
   }, []);
-  var fieldIdValidator = useCallback(function (fieldId) {
+  var fieldIdValidator = (0, _react.useCallback)(function (fieldId) {
     if (fieldId.trim().toLowerCase() !== "id") {
       return true;
     }
-
     throw new Error("Cannot use \"id\" as Field ID.");
-  }, undefined);
-  var uniqueFieldIdValidator = useCallback(function (fieldId) {
+  }, []);
+  var uniqueFieldIdValidator = (0, _react.useCallback)(function (fieldId) {
     var existingField = getField({
       fieldId: fieldId
     });
-
     if (!existingField) {
-      return;
+      return false;
     }
-
     if (existingField.id === field.id) {
       return true;
     }
-
     throw new Error("Please enter a unique Field ID.");
-  }, undefined);
+  }, []);
   var additionalSettings = null;
-
   if (typeof fieldPlugin.field.renderSettings === "function") {
     additionalSettings = fieldPlugin.field.renderSettings({
-      form: form,
       afterChangeLabel: afterChangeLabel,
       uniqueFieldIdValidator: uniqueFieldIdValidator,
-      contentModel: data
+      contentModel: contentModel
     });
   }
-
-  var predefinedValuesEnabled = useMemo(function () {
+  var predefinedValuesEnabled = (0, _react.useMemo)(function () {
     return fieldPlugin.field.allowPredefinedValues && typeof fieldPlugin.field.renderPredefinedValues === "function";
   }, [field.fieldId]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 6
-  }, /*#__PURE__*/React.createElement(Bind, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
     name: "label",
-    validators: validation.create("required"),
-    afterChange: !field.id && afterChangeLabel
-  }, /*#__PURE__*/React.createElement(Input, {
+    validators: _validation.validation.create("required"),
+    afterChange: function afterChange(value) {
+      if (field.id) {
+        return;
+      }
+      afterChangeLabel(value);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
     label: "Label",
-    inputRef: inputRef
-  }))), /*#__PURE__*/React.createElement(Cell, {
+    inputRef: inputRef,
+    "data-testid": "cms.editor.field.settings.general.label"
+  }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 6
-  }, /*#__PURE__*/React.createElement(Bind, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
     name: "fieldId",
-    validators: [validation.create("required"), uniqueFieldIdValidator, fieldIdValidator],
+    validators: [_validation.validation.create("required"), uniqueFieldIdValidator, fieldIdValidator],
     beforeChange: beforeChangeFieldId
-  }, /*#__PURE__*/React.createElement(Input, {
+  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
     label: "Field ID",
-    disabled: !!field.id
-  }))), /*#__PURE__*/React.createElement(Cell, {
+    "data-testid": "cms.editor.field.settings.general.label-".concat(field.id)
+  }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 6
-  }, /*#__PURE__*/React.createElement(Bind, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
     name: "multipleValues"
-  }, /*#__PURE__*/React.createElement(Switch, {
+  }, /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
     label: fieldPlugin.field.multipleValuesLabel,
-    disabled: !fieldPlugin.field.allowMultipleValues
-  }))), /*#__PURE__*/React.createElement(Cell, {
+    disabled: !fieldPlugin.field.allowMultipleValues,
+    "data-testid": "cms.editor.field.settings.general.switch-multiplevalues"
+  }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 6
-  }, /*#__PURE__*/React.createElement(Bind, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
     name: "predefinedValues.enabled"
-  }, /*#__PURE__*/React.createElement(Switch, {
+  }, /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
     label: "Use predefined values",
-    disabled: !predefinedValuesEnabled
-  }))), /*#__PURE__*/React.createElement(Cell, {
+    disabled: !predefinedValuesEnabled,
+    "data-testid": "cms.editor.field.settings.general.switch-predefinedvalues"
+  }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 12
-  }, /*#__PURE__*/React.createElement(Bind, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
     name: "helpText"
-  }, /*#__PURE__*/React.createElement(Input, {
+  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
     label: "Help text",
-    description: "Help text (optional)"
+    description: "Help text (optional)",
+    "data-testid": "cms.editor.field.settings.general.helptext"
+  }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 12
+  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
+    name: "tags"
+  }, /*#__PURE__*/_react.default.createElement(_Tags.Tags, {
+    label: "Tags",
+    protectedTags: fieldPlugin.field.tags,
+    description: "Field tags (optional)",
+    "data-testid": "cms.editor.field.settings.general.tags"
   })))), additionalSettings);
 };
-
-export default GeneralTab;
+var _default = GeneralTab;
+exports.default = _default;

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

@@ -0,0 +1 @@
+{"version":3,"names":["GeneralTab","form","useForm","useModelField","field","fieldPlugin","inputRef","useRef","useModelEditor","contentModel","data","useModelFieldEditor","getField","useEffect","setTimeout","current","focus","afterChangeLabel","useCallback","value","setValue","beforeChangeFieldId","baseOnChange","trim","fieldIdValidator","fieldId","toLowerCase","Error","uniqueFieldIdValidator","existingField","id","additionalSettings","renderSettings","predefinedValuesEnabled","useMemo","allowPredefinedValues","renderPredefinedValues","validation","create","multipleValuesLabel","allowMultipleValues","tags"],"sources":["GeneralTab.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef, useMemo } from \"react\";\nimport { camelCase } from \"lodash\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Switch } from \"@webiny/ui/Switch\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { validation } from \"@webiny/validation\";\nimport { Tags } from \"@webiny/ui/Tags\";\nimport { useForm, Bind } from \"@webiny/form\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor\";\nimport { useModelEditor } from \"~/admin/hooks\";\nimport { useModelField } from \"~/admin/hooks\";\n\nconst GeneralTab = () => {\n    const form = useForm();\n    const { field, fieldPlugin } = useModelField();\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const { data: contentModel } = useModelEditor();\n    const { getField } = useModelFieldEditor();\n\n    // Had problems with auto-focusing the \"label\" field. A couple of comments on this.\n    // 1. It's probably caused by the Tabs component which wraps this component.\n    // 2. It seems that the \"autoFocus\" prop on the Input doesn't work. I can't see it attached in the actual DOM.\n    // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design\n    //    in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then\n    //    it seems it's behaving correctly. ¯\\_(ツ)_/¯\n    useEffect(() => {\n        setTimeout(() => {\n            if (!inputRef.current) {\n                return;\n            }\n            inputRef.current.focus();\n        }, /* The value of 400 was determined by manual testing. */ 400);\n    }, []);\n\n    const afterChangeLabel = useCallback((value: string) => {\n        form.setValue(\"fieldId\", camelCase(value));\n    }, []);\n\n    const beforeChangeFieldId = useCallback(\n        (value: string, baseOnChange: (value: string) => void) => {\n            baseOnChange(value.trim());\n        },\n        []\n    );\n\n    const fieldIdValidator = useCallback(fieldId => {\n        if (fieldId.trim().toLowerCase() !== \"id\") {\n            return true;\n        }\n\n        throw new Error(`Cannot use \"id\" as Field ID.`);\n    }, []);\n\n    const uniqueFieldIdValidator = useCallback((fieldId: string) => {\n        const existingField = getField({ fieldId });\n        if (!existingField) {\n            return false;\n        }\n\n        if (existingField.id === field.id) {\n            return true;\n        }\n        throw new Error(\"Please enter a unique Field ID.\");\n    }, []);\n\n    let additionalSettings: React.ReactNode | null = null;\n    if (typeof fieldPlugin.field.renderSettings === \"function\") {\n        additionalSettings = fieldPlugin.field.renderSettings({\n            afterChangeLabel,\n            uniqueFieldIdValidator,\n            contentModel\n        });\n    }\n\n    const predefinedValuesEnabled = useMemo(\n        (): boolean =>\n            fieldPlugin.field.allowPredefinedValues &&\n            typeof fieldPlugin.field.renderPredefinedValues === \"function\",\n        [field.fieldId]\n    );\n\n    return (\n        <>\n            <Grid>\n                <Cell span={6}>\n                    <Bind\n                        name={\"label\"}\n                        validators={validation.create(\"required\")}\n                        afterChange={(value: string) => {\n                            if (field.id) {\n                                return;\n                            }\n                            afterChangeLabel(value);\n                        }}\n                    >\n                        <Input\n                            label={\"Label\"}\n                            inputRef={inputRef}\n                            data-testid=\"cms.editor.field.settings.general.label\"\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind\n                        name={\"fieldId\"}\n                        validators={[\n                            validation.create(\"required\"),\n                            uniqueFieldIdValidator,\n                            fieldIdValidator\n                        ]}\n                        beforeChange={beforeChangeFieldId}\n                    >\n                        <Input\n                            label={\"Field ID\"}\n                            data-testid={`cms.editor.field.settings.general.label-${field.id}`}\n                        />\n                    </Bind>\n                </Cell>\n\n                <Cell span={6}>\n                    <Bind name={\"multipleValues\"}>\n                        <Switch\n                            label={fieldPlugin.field.multipleValuesLabel}\n                            disabled={!fieldPlugin.field.allowMultipleValues}\n                            data-testid={`cms.editor.field.settings.general.switch-multiplevalues`}\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind name={\"predefinedValues.enabled\"}>\n                        <Switch\n                            label={\"Use predefined values\"}\n                            disabled={!predefinedValuesEnabled}\n                            data-testid={`cms.editor.field.settings.general.switch-predefinedvalues`}\n                        />\n                    </Bind>\n                </Cell>\n\n                <Cell span={12}>\n                    <Bind name={\"helpText\"}>\n                        <Input\n                            label={\"Help text\"}\n                            description={\"Help text (optional)\"}\n                            data-testid={`cms.editor.field.settings.general.helptext`}\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={12}>\n                    <Bind name={\"tags\"}>\n                        <Tags\n                            label={\"Tags\"}\n                            protectedTags={fieldPlugin.field.tags}\n                            description={\"Field tags (optional)\"}\n                            data-testid={`cms.editor.field.settings.general.tags`}\n                        />\n                    </Bind>\n                </Cell>\n            </Grid>\n            {additionalSettings}\n        </>\n    );\n};\n\nexport default GeneralTab;\n"],"mappings":"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"}

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

@@ -1,5 +1,3 @@
-export default function PredefinedValues({ field, fieldPlugin, form }: {
-    field: any;
-    fieldPlugin: any;
-    form: any;
-}): any;
+/// <reference types="react" />
+declare const PredefinedValues: () => JSX.Element;
+export default PredefinedValues;

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

@@ -1,55 +1,81 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import React, { useCallback, useRef, cloneElement } from "react";
-import getValue from "./functions/getValue";
-import setValue from "./functions/setValue";
-export default function PredefinedValues(_ref) {
-  var field = _ref.field,
-      fieldPlugin = _ref.fieldPlugin,
-      form = _ref.form;
-  var memoizedBindComponents = useRef({});
-  var BaseFormBind = form.Bind;
-  var getBind = useCallback(function () {
+"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 _form = require("@webiny/form");
+var _hooks = require("../../../hooks");
+var PredefinedValues = function PredefinedValues() {
+  var _useModelField = (0, _hooks.useModelField)(),
+    field = _useModelField.field,
+    fieldPlugin = _useModelField.fieldPlugin;
+  var memoizedBindComponents = (0, _react.useRef)({});
+  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];
     }
-
-    memoizedBindComponents.current[memoKey] = function Bind(_ref2) {
-      var children = _ref2.children,
-          name = _ref2.name;
-      return /*#__PURE__*/React.createElement(BaseFormBind, {
+    var Bind = function Bind(_ref) {
+      var children = _ref.children,
+        name = _ref.name;
+      return /*#__PURE__*/_react.default.createElement(_form.Bind, {
         name: "predefinedValues.values"
       }, function (bind) {
-        var props = _objectSpread(_objectSpread({}, bind), {}, {
-          value: getValue({
+        var props = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, bind), {}, {
+          value: (0, _getValue.default)({
             bind: bind,
             index: index,
             name: name
           }),
-          onChange: function onChange(value) {
-            setValue({
-              value: value,
-              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__*/cloneElement(children, props);
+        return /*#__PURE__*/(0, _react.cloneElement)(children, props);
       });
     };
-
+    memoizedBindComponents.current[memoKey] = Bind;
     return memoizedBindComponents.current[memoKey];
   }, []);
-  return fieldPlugin.field.renderPredefinedValues({
-    field: field,
+  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({
     getBind: getBind
-  });
-}
+  }));
+};
+var _default = PredefinedValues;
+exports.default = _default;

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

@@ -0,0 +1 @@
+{"version":3,"names":["PredefinedValues","useModelField","field","fieldPlugin","memoizedBindComponents","useRef","getBind","useCallback","index","memoKey","current","Bind","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 { BindComponent, Bind as BaseFormBind } from \"@webiny/form\";\nimport { useModelField } from \"~/admin/hooks\";\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: 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({ getBind })}</>;\n};\n\nexport default PredefinedValues;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAMA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;EAC3B,qBAA+B,IAAAC,oBAAa,GAAE;IAAtCC,KAAK,kBAALA,KAAK;IAAEC,WAAW,kBAAXA,WAAW;EAC1B,IAAMC,sBAAsB,GAAG,IAAAC,aAAM,EAAyB,CAAC,CAAC,CAAC;EAEjE,IAAMC,OAAO,GAAG,IAAAC,kBAAW,EAAC,YAAgB;IAAA,IAAfC,KAAK,uEAAG,CAAC,CAAC;IACnC,IAAMC,OAAO,GAAGD,KAAK;IACrB,IAAIJ,sBAAsB,CAACM,OAAO,CAACD,OAAO,CAAC,EAAE;MACzC,OAAOL,sBAAsB,CAACM,OAAO,CAACD,OAAO,CAAC;IAClD;IAEA,IAAME,IAAmB,GAAG,SAAtBA,IAAmB,OAA2B;MAAA,IAArBC,QAAQ,QAARA,QAAQ;QAAEC,IAAI,QAAJA,IAAI;MACzC,oBACI,6BAAC,UAAY;QAAC,IAAI,EAAE;MAA0B,GACzC,UAAAC,IAAI,EAAI;QACL,IAAMC,KAAK,+DACJD,IAAI;UACPE,KAAK,EAAE,IAAAC,iBAAQ,EAAC;YAAEH,IAAI,EAAJA,IAAI;YAAEN,KAAK,EAALA,KAAK;YAAEK,IAAI,EAAJA;UAAK,CAAC,CAAC;UACtCK,QAAQ;YAAA,uGAAE,iBAAOF,KAAe;cAAA;gBAAA;kBAAA;oBAAA;oBAAA,OACtB,IAAAG,iBAAQ,EAAC;sBAAEH,KAAK,EAALA,KAAK;sBAAEF,IAAI,EAAJA,IAAI;sBAAEN,KAAK,EAALA,KAAK;sBAAEK,IAAI,EAAJA;oBAAK,CAAC,CAAC;kBAAA;kBAAA;oBAAA;gBAAA;cAAA;YAAA,CAC/C;YAAA;cAAA;YAAA;YAAA;UAAA;QAAA,EACJ;QAED,IAAI,OAAOD,QAAQ,KAAK,UAAU,EAAE;UAChC,OAAOA,QAAQ,CAACG,KAAK,CAAC;QAC1B;QAEA,oBAAO,IAAAK,mBAAY,EAACR,QAAQ,EAAmCG,KAAK,CAAC;MACzE,CAAC,CACU;IAEvB,CAAC;IAEDX,sBAAsB,CAACM,OAAO,CAACD,OAAO,CAAC,GAAGE,IAAI;IAE9C,OAAOP,sBAAsB,CAACM,OAAO,CAACD,OAAO,CAAC;EAClD,CAAC,EAAE,EAAE,CAAC;EACN,IAAI,CAACN,WAAW,CAACD,KAAK,CAACmB,sBAAsB,EAAE;IAC3C,oBACI,8IAA2EnB,KAAK,CAACoB,IAAI,SAAQ;EAErG;EAEA,oBAAO,4DAAGnB,WAAW,CAACD,KAAK,CAACmB,sBAAsB,CAAC;IAAEf,OAAO,EAAPA;EAAQ,CAAC,CAAC,CAAI;AACvE,CAAC;AAAC,eAEaN,gBAAgB;AAAA"}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CmsModelFieldValidatorConfigAdapter } from "../../../../utils/CmsModelFieldValidatorConfigAdapter";
+interface ValidatorsSectionProps {
+    title: string;
+    fieldKey: "validators" | "listValidators";
+    description: string;
+    validators: CmsModelFieldValidatorConfigAdapter[];
+}
+export declare const ValidationsSection: ({ title, description, fieldKey, validators }: ValidatorsSectionProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidationsSection = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Grid = require("@webiny/ui/Grid");
+var _Typography = require("@webiny/ui/Typography");
+var _ValidatorsList = require("./ValidatorsList");
+var bindTo = {
+  validators: "validation",
+  listValidators: "listValidation"
+};
+var ValidationsSection = function ValidationsSection(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    fieldKey = _ref.fieldKey,
+    validators = _ref.validators;
+  return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 12
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline5"
+  }, title), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "body2"
+  }, description)), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 12
+  }, /*#__PURE__*/_react.default.createElement(_ValidatorsList.ValidatorsList, {
+    name: bindTo[fieldKey],
+    validators: validators
+  })));
+};
+exports.ValidationsSection = ValidationsSection;

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

@@ -0,0 +1 @@
+{"version":3,"names":["bindTo","validators","listValidators","ValidationsSection","title","description","fieldKey"],"sources":["ValidationsSection.tsx"],"sourcesContent":["import React from \"react\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ValidatorsList } from \"./ValidatorsList\";\nimport { CmsModelFieldValidatorConfigAdapter } from \"~/utils/CmsModelFieldValidatorConfigAdapter\";\n\ninterface ValidatorsSectionProps {\n    title: string;\n    fieldKey: \"validators\" | \"listValidators\";\n    description: string;\n    validators: CmsModelFieldValidatorConfigAdapter[];\n}\n\nconst bindTo = {\n    validators: \"validation\",\n    listValidators: \"listValidation\"\n};\n\nexport const ValidationsSection = ({\n    title,\n    description,\n    fieldKey,\n    validators\n}: ValidatorsSectionProps) => {\n    return (\n        <Grid>\n            <Cell span={12}>\n                <Typography use={\"headline5\"}>{title}</Typography>\n                <br />\n                <Typography use={\"body2\"}>{description}</Typography>\n            </Cell>\n            <Cell span={12}>\n                <ValidatorsList name={bindTo[fieldKey]} validators={validators} />\n            </Cell>\n        </Grid>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAUA,IAAMA,MAAM,GAAG;EACXC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE;AACpB,CAAC;AAEM,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,OAKD;EAAA,IAJ1BC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRL,UAAU,QAAVA,UAAU;EAEV,oBACI,6BAAC,UAAI,qBACD,6BAAC,UAAI;IAAC,IAAI,EAAE;EAAG,gBACX,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAY,GAAEG,KAAK,CAAc,eAClD,wCAAM,eACN,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAQ,GAAEC,WAAW,CAAc,CACjD,eACP,6BAAC,UAAI;IAAC,IAAI,EAAE;EAAG,gBACX,6BAAC,8BAAc;IAAC,IAAI,EAAEL,MAAM,CAACM,QAAQ,CAAE;IAAC,UAAU,EAAEL;EAAW,EAAG,CAC/D,CACJ;AAEf,CAAC;AAAC"}

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { CmsModelFieldValidatorConfigAdapter } from "../../../../utils/CmsModelFieldValidatorConfigAdapter";
+interface ValidatorsTabProps {
+    name: string;
+    validators: CmsModelFieldValidatorConfigAdapter[];
+}
+export declare const ValidatorsList: React.FC<ValidatorsTabProps>;
+export {};

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

@@ -0,0 +1,189 @@
+"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.ValidatorsList = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
+var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
+var _react = _interopRequireWildcard(require("react"));
+var _emotion = require("emotion");
+var _plugins = require("@webiny/plugins");
+var _Switch = require("@webiny/ui/Switch");
+var _form = require("@webiny/form");
+var _Grid = require("@webiny/ui/Grid");
+var _validation = require("@webiny/validation");
+var _Input = require("@webiny/ui/Input");
+var _Accordion = require("@webiny/ui/Accordion");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Tooltip = require("@webiny/ui/Tooltip");
+var Variable = /*#__PURE__*/(0, _styled.default)("span", {
+  label: "Variable",
+  target: "e19f04zm0"
+})("font-weight:bold;cursor:pointer;");
+var Comma = /*#__PURE__*/(0, _styled.default)("span", {
+  label: "Comma",
+  target: "e19f04zm1"
+})("padding-right:5px;");
+var noPadding = /*#__PURE__*/(0, _emotion.css)(".webiny-ui-accordion-item__content{padding:0 !important;}label:noPadding;");
+var gridBottomPadding = /*#__PURE__*/(0, _emotion.css)(":not(:last-child){padding-bottom:0;}label:gridBottomPadding;");
+var onEnabledChange = function onEnabledChange(params) {
+  var data = params.data,
+    validationValue = params.validationValue,
+    onChangeValidation = params.onChangeValidation,
+    validator = params.validator;
+  if (data) {
+    var index = validationValue.findIndex(function (item) {
+      return item.name === validator.getName();
+    });
+    onChangeValidation([].concat((0, _toConsumableArray2.default)(validationValue.slice(0, index)), (0, _toConsumableArray2.default)(validationValue.slice(index + 1))));
+    return;
+  }
+  onChangeValidation([].concat((0, _toConsumableArray2.default)(validationValue), [{
+    name: validator.getName(),
+    settings: validator.getDefaultSettings(),
+    message: validator.getDefaultMessage()
+  }]));
+};
+var onFormChange = (0, _debounce2.default)(function (_ref) {
+  var data = _ref.data,
+    validationValue = _ref.validationValue,
+    onChangeValidation = _ref.onChangeValidation,
+    validatorIndex = _ref.validatorIndex;
+  var newValidationValue = (0, _cloneDeep2.default)(validationValue);
+  newValidationValue[validatorIndex] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, newValidationValue[validatorIndex]), (0, _cloneDeep2.default)(data));
+  onChangeValidation(newValidationValue);
+}, 200);
+var renderEmpty = function renderEmpty() {
+  return null;
+};
+var getValidatorPlugin = function getValidatorPlugin(name) {
+  var plugin = _plugins.plugins.byType("cms-model-field-validator").find(function (plugin) {
+    return plugin.validator.name === name;
+  });
+  if (!plugin) {
+    return null;
+  }
+  return plugin.validator;
+};
+var ValidatorItem = function ValidatorItem(_ref2) {
+  var validator = _ref2.validator,
+    value = _ref2.value,
+    _onChange = _ref2.onChange;
+  var validatorName = validator.getName();
+  var plugin = getValidatorPlugin(validatorName);
+  if (!plugin) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+  var validatorIndex = (value || []).findIndex(function (item) {
+    return item.name === validatorName;
+  });
+  var data = (value || [])[validatorIndex];
+  if (typeof plugin.renderCustomUi === "function") {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: validatorName
+    }, plugin.renderCustomUi());
+  }
+  var renderSettings = plugin.renderSettings || renderEmpty;
+  var actions = !validator.isRequired() ? /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Actions, null, /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
+    label: "Enabled",
+    value: validatorIndex >= 0,
+    onChange: function onChange() {
+      return onEnabledChange({
+        data: data,
+        validationValue: value,
+        onChangeValidation: _onChange,
+        validator: validator
+      });
+    }
+  })) : null;
+  var description = [/*#__PURE__*/_react.default.createElement("span", {
+    key: "msg"
+  }, "This message will be displayed to the user.")];
+  var variables = validator.getVariables();
+  if (variables.length) {
+    description.push( /*#__PURE__*/_react.default.createElement("span", {
+      key: "vars"
+    }, "\xA0Available variables:\xA0"));
+    for (var i = 0; i < variables.length; i++) {
+      var variable = variables[i];
+      description.push( /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+        key: variable.name,
+        content: variable.description,
+        placement: "bottom"
+      }, /*#__PURE__*/_react.default.createElement(Variable, {
+        dangerouslySetInnerHTML: {
+          __html: "{".concat(variable.name, "}")
+        }
+      })));
+      if (i < variables.length - 1) {
+        description.push( /*#__PURE__*/_react.default.createElement(Comma, {
+          key: "comma-".concat(i)
+        }, ","));
+      }
+    }
+    description.push( /*#__PURE__*/_react.default.createElement(Comma, {
+      key: "dot"
+    }, "."));
+  }
+  return /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
+    key: validator.getName(),
+    "data-testid": "cms.editor.field-validator.".concat(validator.getName()),
+    interactive: false,
+    open: !!data,
+    title: validator.getLabel(),
+    description: validator.getDescription(),
+    actions: actions,
+    className: noPadding
+  }, data && /*#__PURE__*/_react.default.createElement(_form.Form, {
+    data: data,
+    onChange: function onChange(data) {
+      return onFormChange({
+        data: data,
+        validationValue: value,
+        onChangeValidation: _onChange,
+        validatorIndex: validatorIndex
+      });
+    }
+  }, function (_ref3) {
+    var Bind = _ref3.Bind;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
+      className: gridBottomPadding
+    }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+      span: 12
+    }, /*#__PURE__*/_react.default.createElement(Bind, {
+      name: "message",
+      validators: _validation.validation.create("required")
+    }, function (bind) {
+      return /*#__PURE__*/_react.default.createElement(_Input.Input, Object.assign({}, bind, {
+        label: "Message",
+        "data-testid": "cms.editfield.validators.required",
+        description: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, description)
+      }));
+    }))), renderSettings(validator));
+  }));
+};
+var ValidatorsList = function ValidatorsList(props) {
+  var name = props.name,
+    validators = props.validators;
+  return /*#__PURE__*/_react.default.createElement(_form.Bind, {
+    name: name,
+    defaultValue: []
+  }, function (bind) {
+    var value = bind.value,
+      onChange = bind.onChange;
+    return /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, validators.map(function (validator) {
+      return /*#__PURE__*/_react.default.createElement(ValidatorItem, {
+        key: validator.getName(),
+        value: value,
+        onChange: onChange,
+        validator: validator
+      });
+    }));
+  });
+};
+exports.ValidatorsList = ValidatorsList;