@webiny/app-headless-cms 5.33.5-beta.0 → 5.34.0-beta.0

package/admin/components/FieldEditor/EditFieldDialog.js

@@ -15,15 +15,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _emotion = require("emotion");
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _Dialog = require("@webiny/ui/Dialog");
+var _Dialog = require("../Dialog");
 
 var _form = require("@webiny/form");
 
@@ -39,286 +37,145 @@ var _AppearanceTab = _interopRequireDefault(require("./EditFieldDialog/Appearanc
 
 var _PredefinedValues = _interopRequireDefault(require("./EditFieldDialog/PredefinedValues"));
 
-var _ValidatorsTab = _interopRequireDefault(require("./EditFieldDialog/ValidatorsTab"));
-
-var _Grid = require("@webiny/ui/Grid");
-
-var _Typography = require("@webiny/ui/Typography");
-
-var _Elevation = require("@webiny/ui/Elevation");
+var _ValidatorsList = require("./EditFieldDialog/ValidatorsList");
 
-var _useFieldEditor2 = require("./useFieldEditor");
+var _Button = require("@webiny/ui/Button");
 
-var _invariant = _interopRequireDefault(require("invariant"));
+var _hooks = require("../../hooks");
 
-var _Button = require("@webiny/ui/Button");
+var _ModelFieldProvider = require("../ModelFieldProvider");
 
-var _useContentModelEditor = require("../ContentModelEditor/useContentModelEditor");
+var _ValidationsSection = require("./EditFieldDialog/ValidationsSection");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _getValidators = require("./EditFieldDialog/getValidators");
 
-var _excluded = ["field", "onSubmit"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 var t = _i18n.i18n.namespace("app-headless-cms/admin/components/editor");
 
-var dialogBody = /*#__PURE__*/(0, _emotion.css)({
-  "&.webiny-ui-dialog__content": {
-    width: 875,
-    height: 450
-  }
-}, "label:dialogBody;");
-
-var getValidators = function getValidators(fieldPlugin, key) {
-  var defaultValidators = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+var FullScreenDialog = /*#__PURE__*/(0, _styled.default)(_Dialog.Dialog, {
+  label: "FullScreenDialog",
+  target: "eoy63ui0"
+})("width:100vw;height:100vh;.mdc-dialog__surface{width:100%;max-width:100% !important;max-height:100% !important;.webiny-ui-dialog__content{max-width:100% !important;max-height:100% !important;width:100vw;height:calc(100vh - 155px);overflow:scroll !important;}}");
 
-  var mappedValidators = _plugins.plugins.byType("cms-editor-field-validator").map(function (_ref) {
-    var validator = _ref.validator;
-    var allowedValidators = fieldPlugin.field[key] || defaultValidators;
+function setupState(field, fieldPlugin, contentModel) {
+  var clonedField = (0, _cloneDeep.default)(field);
 
-    if (allowedValidators.includes(validator.name)) {
-      return {
-        optional: true,
-        validator: validator
-      };
-    } else if (allowedValidators.includes("!".concat(validator.name))) {
-      return {
-        optional: false,
-        validator: validator
+  if (!clonedField.renderer || !clonedField.renderer.name) {
+    var _plugins$byType$filte = _plugins.plugins.byType("cms-editor-field-renderer").filter(function (item) {
+      return item.renderer.canUse({
+        field: field,
+        fieldPlugin: fieldPlugin
+      });
+    }),
+        _plugins$byType$filte2 = (0, _slicedToArray2.default)(_plugins$byType$filte, 1),
+        renderPlugin = _plugins$byType$filte2[0];
+
+    if (renderPlugin) {
+      clonedField.renderer = {
+        name: renderPlugin.renderer.rendererName
       };
     }
-
-    return null;
-  });
-
-  var filteredValidators = mappedValidators.filter(Boolean);
-  return filteredValidators
-  /**
-   * We can safely cast because we are filtering in previous step.
-   */
-  .sort(function (a, b) {
-    if (!a.optional && b.optional) {
-      return -1;
-    }
-
-    if (a.optional && !b.optional) {
-      return 1;
-    }
-
-    return 0;
-  });
-};
-
-var getListValidators = function getListValidators(fieldPlugin) {
-  return getValidators(fieldPlugin, "listValidators", ["minLength", "maxLength"]);
-};
-
-var getFieldValidators = function getFieldValidators(fieldPlugin) {
-  return getValidators(fieldPlugin, "validators");
-};
-
-var fieldEditorDialog = /*#__PURE__*/(0, _emotion.css)({
-  width: "100vw",
-  height: "100vh",
-  ".mdc-dialog__surface": {
-    maxWidth: "100% !important",
-    maxHeight: "100% !important",
-    ".webiny-ui-dialog__content": {
-      maxWidth: "100% !important",
-      maxHeight: "100% !important",
-      width: "100vw",
-      height: "calc(100vh - 155px)",
-      paddingTop: "0 !important"
-    }
   }
-}, "label:fieldEditorDialog;");
-
-var EditFieldDialog = function EditFieldDialog(_ref2) {
-  var field = _ref2.field,
-      _onSubmit = _ref2.onSubmit,
-      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-
-  var _useState = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      current = _useState2[0],
-      setCurrent = _useState2[1];
-
-  var _useFieldEditor = (0, _useFieldEditor2.useFieldEditor)(),
-      getFieldPlugin = _useFieldEditor.getFieldPlugin;
-
-  var _useContentModelEdito = (0, _useContentModelEditor.useContentModelEditor)(),
-      contentModel = _useContentModelEdito.data,
-      setContentModelData = _useContentModelEdito.setData;
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isTitleField = _useState4[0],
-      setIsTitleField = _useState4[1];
-
-  (0, _react.useEffect)(function () {
-    if (!field) {
-      setCurrent(field);
-      setIsTitleField(false);
-      return;
-    }
 
-    var clonedField = (0, _cloneDeep2.default)(field);
+  return {
+    shadowField: clonedField,
+    isTitleField: contentModel.titleFieldId === field.fieldId
+  };
+}
+
+var EditFieldDialog = function EditFieldDialog(props) {
+  var _useModelField = (0, _hooks.useModelField)(),
+      field = _useModelField.field,
+      fieldPlugin = _useModelField.fieldPlugin;
+
+  var _useModelEditor = (0, _hooks.useModelEditor)(),
+      contentModel = _useModelEditor.data,
+      setContentModelData = _useModelEditor.setData;
+
+  var _useState = (0, _react.useState)(setupState(field, fieldPlugin, contentModel)),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+      _useState2$ = _useState2[0],
+      shadowField = _useState2$.shadowField,
+      isTitleField = _useState2$.isTitleField;
+
+  var headerTitle = t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Field Settings - {fieldTypeLabel}"])))({
+    fieldTypeLabel: fieldPlugin.field.label
+  });
 
-    if (!clonedField.renderer || !clonedField.renderer.name) {
-      var _plugins$byType$filte = _plugins.plugins.byType("cms-editor-field-renderer").filter(function (item) {
-        return item.renderer.canUse({
-          field: field
+  var onSubmit = function onSubmit(data, form) {
+    /**
+     * In case title field `fieldId` changed, we need to update the title field on the model itself.
+     */
+    if (isTitleField && contentModel.titleFieldId !== data.fieldId) {
+      setContentModelData(function (prev) {
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+          titleFieldId: data.fieldId
         });
-      }),
-          _plugins$byType$filte2 = (0, _slicedToArray2.default)(_plugins$byType$filte, 1),
-          renderPlugin = _plugins$byType$filte2[0];
-
-      if (renderPlugin) {
-        clonedField.renderer = {
-          name: renderPlugin.renderer.rendererName
-        };
-      }
-    }
-
-    if (contentModel.titleFieldId === field.fieldId) {
-      setIsTitleField(true);
-    } else if (isTitleField === true) {
-      setIsTitleField(false);
+      });
     }
 
-    setCurrent(clonedField);
-  }, [field]);
-  var onClose = (0, _react.useCallback)(function () {
-    setCurrent(null);
-    props.onClose();
-  }, []);
-  var render = null;
-  var headerTitle = t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Field Settings"])));
+    props.onSubmit(data, form);
+  };
 
-  if (current) {
-    /**
-     * Something must be very wrong for field plugin to be missing.
-     */
-    var fieldPlugin = getFieldPlugin(current.type);
-    /**
-     * We will throw error because of that.
-     */
-
-    (0, _invariant.default)(fieldPlugin, "Missing field plugin for type \"".concat(current.type, "\"."));
-    headerTitle = t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Field Settings - {fieldTypeLabel}"])))({
-      fieldTypeLabel: fieldPlugin.field.label
-    });
-    render = /*#__PURE__*/_react.default.createElement(_form.Form, {
-      data: current,
-      onSubmit: function onSubmit(data) {
-        /**
-         * We know that data is CmsEditorField.
-         */
-        return _onSubmit(data);
-      }
-    }, function (form) {
-      var hasValidators = Array.isArray(fieldPlugin.field.validators) && fieldPlugin.field.validators.length > 0;
-      var showValidatorsTab = form.data.multipleValues || Array.isArray(fieldPlugin.field.validators) && fieldPlugin.field.validators.length > 0;
-      var predefinedValuesTabEnabled = fieldPlugin.field.allowPredefinedValues && form.data.predefinedValues && form.data.predefinedValues.enabled;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, {
-        className: dialogBody
-      }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, null, /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
-        label: t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["General"])))
-      }, /*#__PURE__*/_react.default.createElement(_GeneralTab.default, {
-        form: form,
-        field: form.data,
-        fieldPlugin: fieldPlugin
-      })), /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
-        label: t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Predefined Values"]))),
+  return /*#__PURE__*/_react.default.createElement(FullScreenDialog, {
+    preventOutsideDismiss: true,
+    open: true,
+    onClose: props.onClose,
+    "data-testid": "cms-editor-edit-fields-dialog"
+  }, /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, null, headerTitle), /*#__PURE__*/_react.default.createElement(_form.Form, {
+    data: shadowField,
+    onSubmit: onSubmit
+  }, function (_ref) {
+    var shadowField = _ref.data,
+        submit = _ref.submit;
+    var individualValidation = (0, _getValidators.getFieldValidators)(shadowField, fieldPlugin);
+    var hasValidators = individualValidation.validators.length > 0;
+    var showValidatorsTab = shadowField.multipleValues || individualValidation.validators.length > 0;
+    var predefinedValuesTabEnabled = fieldPlugin.field.allowPredefinedValues && shadowField.predefinedValues && shadowField.predefinedValues.enabled;
+    var listValidation = (0, _getValidators.getListValidators)(shadowField, fieldPlugin);
+    return (
+      /*#__PURE__*/
+
+      /**
+       * We're using the `shadowField` as the new context, because we want all changes by form inputs
+       * to immediately be propagated to all dialog components.
+       */
+      _react.default.createElement(_ModelFieldProvider.ModelFieldProvider, {
+        field: shadowField
+      }, /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, null, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, null, /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+        label: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["General"])))
+      }, /*#__PURE__*/_react.default.createElement(_GeneralTab.default, null)), /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+        label: t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Predefined Values"]))),
         disabled: !predefinedValuesTabEnabled
-      }, predefinedValuesTabEnabled && /*#__PURE__*/_react.default.createElement(_PredefinedValues.default, {
-        form: form,
-        field: form.data,
-        fieldPlugin: fieldPlugin
-      })), showValidatorsTab ? /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+      }, predefinedValuesTabEnabled && /*#__PURE__*/_react.default.createElement(_PredefinedValues.default, null)), /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+        visible: showValidatorsTab,
         label: "Validators",
         "data-testid": "cms.editor.field.tabs.validators"
-      }, form.data.multipleValues ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-        span: 12
-      }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-        use: "headline5"
-      }, "List validators"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-        use: "body2"
-      }, "These validators are applied to the entire list of values.")), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-        span: 12
-      }, /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
-        z: 2
-      }, /*#__PURE__*/_react.default.createElement(_ValidatorsTab.default, {
-        field: current,
-        name: "listValidation",
-        validators: getListValidators(fieldPlugin),
-        form: form
-      })))), /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-        span: 12
-      }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-        use: "headline5"
-      }, "Individual value validators"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-        use: "body2"
-      }, "These validators are applied to each value in the list.")), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-        span: 12
-      }, /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
-        z: 2
-      }, /*#__PURE__*/_react.default.createElement(_ValidatorsTab.default, {
-        field: current,
-        form: form,
+      }, shadowField.multipleValues ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ValidationsSection.ValidationsSection, {
+        validators: listValidation.validators,
+        fieldKey: "listValidators",
+        title: listValidation.title || "List validators",
+        description: listValidation.description || "These validators are applied to the entire list of values."
+      }), hasValidators ? /*#__PURE__*/_react.default.createElement(_ValidationsSection.ValidationsSection, {
+        fieldKey: "validators",
+        validators: individualValidation.validators,
+        title: individualValidation.title || "Individual value validators",
+        description: individualValidation.description || "These validators are applied to each value in the list."
+      }) : null) : null, !shadowField.multipleValues && hasValidators ? /*#__PURE__*/_react.default.createElement(_ValidatorsList.ValidatorsList, {
         name: "validation",
-        validators: getFieldValidators(fieldPlugin)
-      }))))) : null, !form.data.multipleValues && hasValidators ? /*#__PURE__*/_react.default.createElement(_ValidatorsTab.default, {
-        field: current,
-        form: form,
-        name: "validation",
-        validators: getFieldValidators(fieldPlugin)
-      }) : null) : null, /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
-        label: t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Appearance"])))
-      }, /*#__PURE__*/_react.default.createElement(_AppearanceTab.default, {
-        form: form,
-        field: form.data // TODO @ts-refactor verify that this actually worked? There was no fieldPlugin in AppearanceTab props
-        // @ts-ignore
-        ,
-        fieldPlugin: fieldPlugin
-      })))), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+        validators: individualValidation.validators
+      }) : null), /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+        label: t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Appearance"])))
+      }, /*#__PURE__*/_react.default.createElement(_AppearanceTab.default, null)))), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
         "data-testid": "cms.editor.field.settings.cancel",
-        onClick: onClose
-      }, t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Cancel"])))), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+        onClick: props.onClose
+      }, t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Cancel"])))), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
         "data-testid": "cms.editor.field.settings.save",
-        onClick: function onClick(ev) {
-          /**
-           * In case title field fieldID changed, we need to change it in the model data as well.
-           */
-          if (isTitleField && contentModel.titleFieldId !== form.data.fieldId) {
-            setContentModelData(function (prev) {
-              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
-                titleFieldId: form.data.fieldId
-              });
-            }).then(function () {
-              form.submit(ev);
-            }).catch(function (ex) {
-              console.error(ex.message);
-            });
-            return;
-          }
-          /**
-           * Or just continue as usually
-           */
-
-
-          form.submit(ev);
-        }
-      }, t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["Save Field"]))))));
-    });
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
-    preventOutsideDismiss: true,
-    open: !!current,
-    onClose: onClose,
-    "data-testid": "cms-editor-edit-fields-dialog",
-    className: fieldEditorDialog
-  }, /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, null, headerTitle), render);
+        onClick: submit
+      }, t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Save Field"]))))))
+    );
+  }));
 };
 
 var _default = EditFieldDialog;

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","namespace","dialogBody","css","width","height","getValidators","fieldPlugin","key","defaultValidators","mappedValidators","plugins","byType","map","validator","allowedValidators","field","includes","name","optional","filteredValidators","filter","Boolean","sort","a","b","getListValidators","getFieldValidators","fieldEditorDialog","maxWidth","maxHeight","paddingTop","EditFieldDialog","onSubmit","props","useState","current","setCurrent","useFieldEditor","getFieldPlugin","useContentModelEditor","contentModel","data","setContentModelData","setData","isTitleField","setIsTitleField","useEffect","clonedField","renderer","item","canUse","renderPlugin","rendererName","titleFieldId","fieldId","onClose","useCallback","render","headerTitle","type","invariant","fieldTypeLabel","label","form","hasValidators","Array","isArray","validators","length","showValidatorsTab","multipleValues","predefinedValuesTabEnabled","allowPredefinedValues","predefinedValues","enabled","ev","prev","then","submit","catch","ex","console","error","message"],"sources":["EditFieldDialog.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\nimport { cloneDeep } from \"lodash\";\nimport { css } from \"emotion\";\nimport { Dialog, DialogContent, DialogTitle, DialogActions } from \"@webiny/ui/Dialog\";\nimport { Form } from \"@webiny/form\";\nimport { Tabs, Tab } from \"@webiny/ui/Tabs\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport {\n    CmsEditorField,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldTypePlugin,\n    CmsEditorFieldValidatorPlugin\n} from \"~/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport GeneralTab from \"./EditFieldDialog/GeneralTab\";\nimport AppearanceTab from \"./EditFieldDialog/AppearanceTab\";\nimport PredefinedValues from \"./EditFieldDialog/PredefinedValues\";\nimport ValidatorsTab from \"./EditFieldDialog/ValidatorsTab\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { useFieldEditor } from \"~/admin/components/FieldEditor/useFieldEditor\";\nimport invariant from \"invariant\";\nimport { ButtonDefault, ButtonPrimary } from \"@webiny/ui/Button\";\nimport { useContentModelEditor } from \"~/admin/components/ContentModelEditor/useContentModelEditor\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst dialogBody = css({\n    \"&.webiny-ui-dialog__content\": {\n        width: 875,\n        height: 450\n    }\n});\n\ninterface EditFieldDialogProps {\n    field: CmsEditorField | null;\n    onClose: () => void;\n    onSubmit: (data: CmsEditorField) => void;\n}\n\ninterface Validator {\n    optional: boolean;\n    validator: CmsEditorFieldValidatorPlugin[\"validator\"];\n}\nconst getValidators = (\n    fieldPlugin: CmsEditorFieldTypePlugin,\n    /**\n     * We only have validators and listValidators, thats why the strict string types\n     */\n    key: \"validators\" | \"listValidators\",\n    defaultValidators: string[] = []\n): Validator[] => {\n    const mappedValidators = plugins\n        .byType<CmsEditorFieldValidatorPlugin>(\"cms-editor-field-validator\")\n        .map(({ validator }) => {\n            const allowedValidators = fieldPlugin.field[key] || defaultValidators;\n            if (allowedValidators.includes(validator.name)) {\n                return {\n                    optional: true,\n                    validator\n                };\n            } else if (allowedValidators.includes(`!${validator.name}`)) {\n                return {\n                    optional: false,\n                    validator\n                };\n            }\n\n            return null;\n        });\n\n    const filteredValidators = mappedValidators.filter(Boolean) as Validator[];\n\n    return (\n        filteredValidators\n            /**\n             * We can safely cast because we are filtering in previous step.\n             */\n            .sort((a: Validator, b: Validator) => {\n                if (!a.optional && b.optional) {\n                    return -1;\n                }\n\n                if (a.optional && !b.optional) {\n                    return 1;\n                }\n\n                return 0;\n            }) as Validator[]\n    );\n};\n\nconst getListValidators = (fieldPlugin: CmsEditorFieldTypePlugin) => {\n    return getValidators(fieldPlugin, \"listValidators\", [\"minLength\", \"maxLength\"]);\n};\n\nconst getFieldValidators = (fieldPlugin: CmsEditorFieldTypePlugin) => {\n    return getValidators(fieldPlugin, \"validators\");\n};\n\nconst fieldEditorDialog = css({\n    width: \"100vw\",\n    height: \"100vh\",\n    \".mdc-dialog__surface\": {\n        maxWidth: \"100% !important\",\n        maxHeight: \"100% !important\",\n        \".webiny-ui-dialog__content\": {\n            maxWidth: \"100% !important\",\n            maxHeight: \"100% !important\",\n            width: \"100vw\",\n            height: \"calc(100vh - 155px)\",\n            paddingTop: \"0 !important\"\n        }\n    }\n});\n\nconst EditFieldDialog: React.FC<EditFieldDialogProps> = ({ field, onSubmit, ...props }) => {\n    const [current, setCurrent] = useState<CmsEditorField | null>(null);\n    const { getFieldPlugin } = useFieldEditor();\n    const { data: contentModel, setData: setContentModelData } = useContentModelEditor();\n\n    const [isTitleField, setIsTitleField] = useState<boolean>(false);\n\n    useEffect((): void => {\n        if (!field) {\n            setCurrent(field);\n            setIsTitleField(false);\n            return;\n        }\n\n        const clonedField = cloneDeep(field);\n\n        if (!clonedField.renderer || !clonedField.renderer.name) {\n            const [renderPlugin] = plugins\n                .byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\")\n                .filter(item => item.renderer.canUse({ field }));\n\n            if (renderPlugin) {\n                clonedField.renderer = { name: renderPlugin.renderer.rendererName };\n            }\n        }\n        if (contentModel.titleFieldId === field.fieldId) {\n            setIsTitleField(true);\n        } else if (isTitleField === true) {\n            setIsTitleField(false);\n        }\n        setCurrent(clonedField);\n    }, [field]);\n\n    const onClose = useCallback((): void => {\n        setCurrent(null);\n        props.onClose();\n    }, []);\n\n    let render = null;\n    let headerTitle = t`Field Settings`;\n\n    if (current) {\n        /**\n         * Something must be very wrong for field plugin to be missing.\n         */\n        const fieldPlugin = getFieldPlugin(current.type) as CmsEditorFieldTypePlugin;\n        /**\n         * We will throw error because of that.\n         */\n        invariant(fieldPlugin, `Missing field plugin for type \"${current.type}\".`);\n\n        headerTitle = t`Field Settings - {fieldTypeLabel}`({\n            fieldTypeLabel: fieldPlugin.field.label\n        });\n\n        render = (\n            <Form\n                data={current}\n                onSubmit={data => {\n                    /**\n                     * We know that data is CmsEditorField.\n                     */\n                    return onSubmit(data as unknown as CmsEditorField);\n                }}\n            >\n                {form => {\n                    const hasValidators =\n                        Array.isArray(fieldPlugin.field.validators) &&\n                        fieldPlugin.field.validators.length > 0;\n\n                    const showValidatorsTab =\n                        form.data.multipleValues ||\n                        (Array.isArray(fieldPlugin.field.validators) &&\n                            fieldPlugin.field.validators.length > 0);\n\n                    const predefinedValuesTabEnabled =\n                        fieldPlugin.field.allowPredefinedValues &&\n                        form.data.predefinedValues &&\n                        form.data.predefinedValues.enabled;\n\n                    return (\n                        <>\n                            <DialogContent className={dialogBody}>\n                                <Tabs>\n                                    <Tab label={t`General`}>\n                                        <GeneralTab\n                                            form={form}\n                                            field={form.data as CmsEditorField}\n                                            fieldPlugin={fieldPlugin}\n                                        />\n                                    </Tab>\n                                    <Tab\n                                        label={t`Predefined Values`}\n                                        disabled={!predefinedValuesTabEnabled}\n                                    >\n                                        {predefinedValuesTabEnabled && (\n                                            <PredefinedValues\n                                                form={form}\n                                                field={form.data as CmsEditorField}\n                                                fieldPlugin={fieldPlugin}\n                                            />\n                                        )}\n                                    </Tab>\n\n                                    {showValidatorsTab ? (\n                                        <Tab\n                                            label={\"Validators\"}\n                                            data-testid={\"cms.editor.field.tabs.validators\"}\n                                        >\n                                            {form.data.multipleValues ? (\n                                                <>\n                                                    <Grid>\n                                                        <Cell span={12}>\n                                                            <Typography use={\"headline5\"}>\n                                                                List validators\n                                                            </Typography>\n                                                            <br />\n                                                            <Typography use={\"body2\"}>\n                                                                These validators are applied to the\n                                                                entire list of values.\n                                                            </Typography>\n                                                        </Cell>\n                                                        <Cell span={12}>\n                                                            <Elevation z={2}>\n                                                                <ValidatorsTab\n                                                                    field={current}\n                                                                    name={\"listValidation\"}\n                                                                    validators={getListValidators(\n                                                                        fieldPlugin\n                                                                    )}\n                                                                    form={form}\n                                                                />\n                                                            </Elevation>\n                                                        </Cell>\n                                                    </Grid>\n\n                                                    <Grid>\n                                                        <Cell span={12}>\n                                                            <Typography use={\"headline5\"}>\n                                                                Individual value validators\n                                                            </Typography>\n                                                            <br />\n                                                            <Typography use={\"body2\"}>\n                                                                These validators are applied to each\n                                                                value in the list.\n                                                            </Typography>\n                                                        </Cell>\n                                                        <Cell span={12}>\n                                                            <Elevation z={2}>\n                                                                <ValidatorsTab\n                                                                    field={current}\n                                                                    form={form}\n                                                                    name={\"validation\"}\n                                                                    validators={getFieldValidators(\n                                                                        fieldPlugin\n                                                                    )}\n                                                                />\n                                                            </Elevation>\n                                                        </Cell>\n                                                    </Grid>\n                                                </>\n                                            ) : null}\n\n                                            {!form.data.multipleValues && hasValidators ? (\n                                                <ValidatorsTab\n                                                    field={current}\n                                                    form={form}\n                                                    name={\"validation\"}\n                                                    validators={getFieldValidators(fieldPlugin)}\n                                                />\n                                            ) : null}\n                                        </Tab>\n                                    ) : null}\n                                    <Tab label={t`Appearance`}>\n                                        <AppearanceTab\n                                            form={form}\n                                            field={form.data as CmsEditorField}\n                                            // TODO @ts-refactor verify that this actually worked? There was no fieldPlugin in AppearanceTab props\n                                            // @ts-ignore\n                                            fieldPlugin={fieldPlugin}\n                                        />\n                                    </Tab>\n                                </Tabs>\n                            </DialogContent>\n                            <DialogActions>\n                                <ButtonDefault\n                                    data-testid=\"cms.editor.field.settings.cancel\"\n                                    onClick={onClose}\n                                >{t`Cancel`}</ButtonDefault>\n                                <ButtonPrimary\n                                    data-testid=\"cms.editor.field.settings.save\"\n                                    onClick={ev => {\n                                        /**\n                                         * In case title field fieldID changed, we need to change it in the model data as well.\n                                         */\n                                        if (\n                                            isTitleField &&\n                                            contentModel.titleFieldId !== form.data.fieldId\n                                        ) {\n                                            setContentModelData(prev => {\n                                                return {\n                                                    ...prev,\n                                                    titleFieldId: form.data.fieldId\n                                                };\n                                            })\n                                                .then(() => {\n                                                    form.submit(ev);\n                                                })\n                                                .catch(ex => {\n                                                    console.error(ex.message);\n                                                });\n                                            return;\n                                        }\n                                        /**\n                                         * Or just continue as usually\n                                         */\n                                        form.submit(ev);\n                                    }}\n                                >{t`Save Field`}</ButtonPrimary>\n                            </DialogActions>\n                        </>\n                    );\n                }}\n            </Form>\n        );\n    }\n\n    return (\n        <Dialog\n            preventOutsideDismiss\n            open={!!current}\n            onClose={onClose}\n            data-testid={\"cms-editor-edit-fields-dialog\"}\n            className={fieldEditorDialog}\n        >\n            <DialogTitle>{headerTitle}</DialogTitle>\n            {render}\n        </Dialog>\n    );\n};\n\nexport default EditFieldDialog;\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","namespace","FullScreenDialog","styled","Dialog","setupState","field","fieldPlugin","contentModel","clonedField","cloneDeep","renderer","name","plugins","byType","filter","item","canUse","renderPlugin","rendererName","shadowField","isTitleField","titleFieldId","fieldId","EditFieldDialog","props","useModelField","useModelEditor","data","setContentModelData","setData","useState","headerTitle","fieldTypeLabel","label","onSubmit","form","prev","onClose","submit","individualValidation","getFieldValidators","hasValidators","validators","length","showValidatorsTab","multipleValues","predefinedValuesTabEnabled","allowPredefinedValues","predefinedValues","enabled","listValidation","getListValidators","title","description"],"sources":["EditFieldDialog.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport styled from \"@emotion/styled\";\nimport { Dialog, DialogContent, DialogTitle, DialogActions } from \"~/admin/components/Dialog\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { Tabs, Tab } from \"@webiny/ui/Tabs\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport {\n    CmsEditorContentModel,\n    CmsModelField,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldTypePlugin\n} from \"~/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport GeneralTab from \"./EditFieldDialog/GeneralTab\";\nimport AppearanceTab from \"./EditFieldDialog/AppearanceTab\";\nimport PredefinedValues from \"./EditFieldDialog/PredefinedValues\";\nimport { ValidatorsList } from \"./EditFieldDialog/ValidatorsList\";\nimport { ButtonDefault, ButtonPrimary } from \"@webiny/ui/Button\";\nimport { useModelField, useModelEditor } from \"~/admin/hooks\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider\";\nimport { ValidationsSection } from \"~/admin/components/FieldEditor/EditFieldDialog/ValidationsSection\";\nimport { getFieldValidators, getListValidators } from \"./EditFieldDialog/getValidators\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst FullScreenDialog = styled(Dialog)`\n    width: 100vw;\n    height: 100vh;\n    .mdc-dialog__surface {\n        width: 100%;\n        max-width: 100% !important;\n        max-height: 100% !important;\n        .webiny-ui-dialog__content {\n            max-width: 100% !important;\n            max-height: 100% !important;\n            width: 100vw;\n            height: calc(100vh - 155px);\n            overflow: scroll !important;\n        }\n    }\n`;\n\nfunction setupState(\n    field: CmsModelField,\n    fieldPlugin: CmsEditorFieldTypePlugin,\n    contentModel: CmsEditorContentModel\n): EditFieldState {\n    const clonedField = cloneDeep(field);\n\n    if (!clonedField.renderer || !clonedField.renderer.name) {\n        const [renderPlugin] = plugins\n            .byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\")\n            .filter(item => item.renderer.canUse({ field, fieldPlugin }));\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: React.FC<EditFieldDialogProps> = props => {\n    const { field, fieldPlugin } = useModelField();\n    const { data: contentModel, setData: setContentModelData } = useModelEditor();\n    const [{ shadowField, isTitleField }] = useState<EditFieldState>(\n        setupState(field, fieldPlugin, contentModel)\n    );\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    return (\n        <FullScreenDialog\n            preventOutsideDismiss\n            open={true}\n            onClose={props.onClose}\n            data-testid={\"cms-editor-edit-fields-dialog\"}\n        >\n            <DialogTitle>{headerTitle}</DialogTitle>\n            <Form<CmsModelField> data={shadowField} onSubmit={onSubmit}>\n                {({ data: shadowField, submit }) => {\n                    const individualValidation = getFieldValidators(shadowField, fieldPlugin);\n\n                    const hasValidators = individualValidation.validators.length > 0;\n\n                    const showValidatorsTab =\n                        shadowField.multipleValues || individualValidation.validators.length > 0;\n\n                    const predefinedValuesTabEnabled =\n                        fieldPlugin.field.allowPredefinedValues &&\n                        shadowField.predefinedValues &&\n                        shadowField.predefinedValues.enabled;\n\n                    const listValidation = getListValidators(shadowField, fieldPlugin);\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                        <ModelFieldProvider field={shadowField}>\n                            <DialogContent>\n                                <Tabs>\n                                    <Tab label={t`General`}>\n                                        <GeneralTab />\n                                    </Tab>\n                                    <Tab\n                                        label={t`Predefined Values`}\n                                        disabled={!predefinedValuesTabEnabled}\n                                    >\n                                        {predefinedValuesTabEnabled && <PredefinedValues />}\n                                    </Tab>\n\n                                    <Tab\n                                        visible={showValidatorsTab}\n                                        label={\"Validators\"}\n                                        data-testid={\"cms.editor.field.tabs.validators\"}\n                                    >\n                                        {shadowField.multipleValues ? (\n                                            <>\n                                                <ValidationsSection\n                                                    validators={listValidation.validators}\n                                                    fieldKey={\"listValidators\"}\n                                                    title={\n                                                        listValidation.title || \"List validators\"\n                                                    }\n                                                    description={\n                                                        listValidation.description ||\n                                                        \"These validators are applied to the entire list of values.\"\n                                                    }\n                                                />\n\n                                                {hasValidators ? (\n                                                    <ValidationsSection\n                                                        fieldKey={\"validators\"}\n                                                        validators={individualValidation.validators}\n                                                        title={\n                                                            individualValidation.title ||\n                                                            \"Individual value validators\"\n                                                        }\n                                                        description={\n                                                            individualValidation.description ||\n                                                            \"These validators are applied to each value in the list.\"\n                                                        }\n                                                    />\n                                                ) : null}\n                                            </>\n                                        ) : null}\n\n                                        {!shadowField.multipleValues && hasValidators ? (\n                                            <ValidatorsList\n                                                name={\"validation\"}\n                                                validators={individualValidation.validators}\n                                            />\n                                        ) : null}\n                                    </Tab>\n                                    <Tab label={t`Appearance`}>\n                                        <AppearanceTab />\n                                    </Tab>\n                                </Tabs>\n                            </DialogContent>\n                            <DialogActions>\n                                <ButtonDefault\n                                    data-testid=\"cms.editor.field.settings.cancel\"\n                                    onClick={props.onClose}\n                                >{t`Cancel`}</ButtonDefault>\n                                <ButtonPrimary\n                                    data-testid=\"cms.editor.field.settings.save\"\n                                    onClick={submit}\n                                >{t`Save Field`}</ButtonPrimary>\n                            </DialogActions>\n                        </ModelFieldProvider>\n                    );\n                }}\n            </Form>\n        </FullScreenDialog>\n    );\n};\n\nexport default EditFieldDialog;\n"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 import React from "react";
-import { CmsEditorField } from "../../../types";
+import { CmsModelField } from "../../../types";
 export interface FieldProps {
-    field: CmsEditorField;
-    onDelete: (field: CmsEditorField) => void;
-    onEdit: (field: CmsEditorField) => void;
-    parent?: CmsEditorField;
+    field: CmsModelField;
+    onDelete: (field: CmsModelField) => void;
+    onEdit: (field: CmsModelField) => void;
+    parent?: CmsModelField;
 }
 declare const _default: React.NamedExoticComponent<FieldProps>;
 export default _default;

package/admin/components/FieldEditor/Field.js

@@ -27,7 +27,7 @@ var _Button = require("@webiny/ui/Button");
 
 var _Typography = require("@webiny/ui/Typography");
 
-var _edit = require("../../icons/edit.svg");
+var _edit = require("@material-design-icons/svg/outlined/edit.svg");
 
 var _delete = require("../../icons/delete.svg");
 
@@ -47,9 +47,9 @@ var _i18n = require("@webiny/app/i18n");
 
 var _useSnackbar2 = require("@webiny/app-admin/hooks/useSnackbar");
 
-var _useContentModelEditor = require("../ContentModelEditor/useContentModelEditor");
+var _hooks = require("../../hooks");
 
-var _useFieldEditor2 = require("./useFieldEditor");
+var _useModelFieldEditor2 = require("./useModelFieldEditor");
 
 var _appAdmin = require("@webiny/app-admin");
 
@@ -101,6 +101,10 @@ var menuStyles = /*#__PURE__*/(0, _emotion.css)({
     pointerEvents: "none"
   }
 }, "label:menuStyles;");
+var FieldExtra = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FieldExtra",
+  target: "erv8xml4"
+})("padding:10px 0 10px;:empty{display:none;}");
 var allowedTitleFieldTypes = ["text", "number"];
 
 var isFieldAllowedToBeTitle = function isFieldAllowedToBeTitle(field, parent) {
@@ -121,13 +125,13 @@ var Field = function Field(props) {
   var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
       showSnackbar = _useSnackbar.showSnackbar;
 
-  var _useContentModelEdito = (0, _useContentModelEditor.useContentModelEditor)(),
-      setData = _useContentModelEdito.setData,
-      data = _useContentModelEdito.data;
+  var _useModelEditor = (0, _hooks.useModelEditor)(),
+      setData = _useModelEditor.setData,
+      data = _useModelEditor.data;
 
-  var _useFieldEditor = (0, _useFieldEditor2.useFieldEditor)(),
-      getFieldPlugin = _useFieldEditor.getFieldPlugin,
-      getFieldRendererPlugin = _useFieldEditor.getFieldRendererPlugin;
+  var _useModelFieldEditor = (0, _useModelFieldEditor2.useModelFieldEditor)(),
+      getFieldPlugin = _useModelFieldEditor.getFieldPlugin,
+      getFieldRendererPlugin = _useModelFieldEditor.getFieldRendererPlugin;
 
   var _useConfirmationDialo = (0, _appAdmin.useConfirmationDialog)({
     title: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Warning - You are trying to delete a locked field!"]))),
@@ -191,19 +195,20 @@ var Field = function Field(props) {
   }
 
   var rendererPlugin = getFieldRendererPlugin(field.renderer.name);
+  var canEdit = fieldPlugin.field.canEditSettings !== false;
   var isTitleField = data && field.fieldId === data.titleFieldId && !parent;
   var info = [rendererPlugin === null || rendererPlugin === void 0 ? void 0 : rendererPlugin.renderer.name, field.multipleValues ? "multiple values" : null, isTitleField ? "entry title" : null].filter(Boolean).join(", ");
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(FieldContainer, null, /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "subtitle1"
   }, field.label), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "caption"
-  }, fieldPlugin.field.label, " ", field.multipleValues && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(LowerCase, null, "(", info, ")"))), /*#__PURE__*/_react.default.createElement(Actions, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+  }, fieldPlugin.field.label, " ", field.multipleValues && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(LowerCase, null, "(", info, ")"))), /*#__PURE__*/_react.default.createElement(Actions, null, canEdit ? /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     "data-testid": "cms.editor.edit-field",
     icon: /*#__PURE__*/_react.default.createElement(_edit.ReactComponent, null),
     onClick: function onClick() {
       return onEdit(field);
     }
-  }), /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+  }) : null, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
     className: menuStyles,
     handle: /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
       icon: /*#__PURE__*/_react.default.createElement(_more_vert.ReactComponent, null)
@@ -221,9 +226,7 @@ var Field = function Field(props) {
     onClick: onDelete
   }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
     icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, null)
-  })), t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["Delete"]))))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "field-extra"
-  }, fieldPlugin.field.render && fieldPlugin.field.render({
+  })), t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["Delete"]))))))), /*#__PURE__*/_react.default.createElement(FieldExtra, null, fieldPlugin.field.render && fieldPlugin.field.render({
     field: field,
     data: data,
     setData: setData