@webiny/app-headless-cms 0.0.0-ee-vpcs.549378cf03

package/admin/components/ContentModelEditor/ContentModelEditorProvider.js

@@ -0,0 +1,323 @@
+"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.contentModelEditorReducer = exports.contentModelEditorContext = exports.ContentModelEditorProvider = void 0;
+
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _pick = _interopRequireDefault(require("lodash/pick"));
+
+var _reactRouter = require("@webiny/react-router");
+
+var _useSnackbar2 = require("@webiny/app-admin/hooks/useSnackbar");
+
+var _contentModels = require("../../graphql/contentModels");
+
+var _viewsGraphql = require("../../viewsGraphql");
+
+var _ModelProvider = require("../ModelProvider");
+
+var contentModelEditorContext = /*#__PURE__*/_react.default.createContext(undefined);
+
+exports.contentModelEditorContext = contentModelEditorContext;
+
+var contentModelEditorReducer = function contentModelEditorReducer(prev, action) {
+  var data = action.data,
+      type = action.type;
+
+  switch (type) {
+    case "state":
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), data);
+
+    case "data":
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+        data: data
+      });
+
+    default:
+      return prev;
+  }
+};
+/**
+ * Cleanup is required because backend always expects string value in predefined values entries
+ */
+
+
+exports.contentModelEditorReducer = contentModelEditorReducer;
+
+var cleanupModelDataFields = function cleanupModelDataFields(fields) {
+  return fields.map(function (field) {
+    var predefinedValues = field.predefinedValues;
+
+    var _ref = predefinedValues || {},
+        _ref$enabled = _ref.enabled,
+        enabled = _ref$enabled === void 0 ? false : _ref$enabled,
+        _ref$values = _ref.values,
+        values = _ref$values === void 0 ? [] : _ref$values;
+
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, field), {}, {
+      predefinedValues: {
+        enabled: enabled,
+        values: values.map(function (_ref2) {
+          var label = _ref2.label,
+              value = _ref2.value,
+              selected = _ref2.selected;
+          return {
+            label: label,
+            selected: selected || false,
+            value: String(value)
+          };
+        })
+      }
+    });
+  });
+};
+
+var cleanupModelData = function cleanupModelData(data) {
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+    fields: cleanupModelDataFields(data.fields)
+  });
+};
+
+var ContentModelEditorProvider = function ContentModelEditorProvider(_ref3) {
+  var children = _ref3.children,
+      apolloClient = _ref3.apolloClient,
+      modelId = _ref3.modelId;
+
+  var _useReducer = (0, _react.useReducer)(contentModelEditorReducer, {
+    modelId: modelId || null,
+    isPristine: true,
+    data: null,
+    activeTabIndex: 0
+  }),
+      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var tabsRef = (0, _react.useRef)();
+
+  var _useRouter = (0, _reactRouter.useRouter)(),
+      history = _useRouter.history;
+
+  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var setPristine = function setPristine(flag) {
+    dispatch({
+      type: "state",
+      data: {
+        isPristine: flag
+      }
+    });
+  };
+
+  var saveContentModel = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(data) {
+      var modelData, response;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!data) {
+                data = state.data;
+              }
+
+              modelData = (0, _pick.default)(data, ["group", "layout", "fields", "tags", "name", "settings", "description", "titleFieldId"]);
+              _context.next = 4;
+              return apolloClient.mutate({
+                mutation: _contentModels.UPDATE_CONTENT_MODEL,
+                variables: {
+                  modelId: data.modelId,
+                  data: cleanupModelData(modelData)
+                },
+                refetchQueries: [{
+                  query: _viewsGraphql.LIST_MENU_CONTENT_GROUPS_MODELS
+                }]
+              });
+
+            case 4:
+              response = _context.sent;
+              setPristine(true);
+
+              if (!(!response.data || !response.data.updateContentModel)) {
+                _context.next = 8;
+                break;
+              }
+
+              return _context.abrupt("return", {
+                data: null,
+                error: null
+              });
+
+            case 8:
+              return _context.abrupt("return", response.data.updateContentModel);
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function saveContentModel(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var setActiveTabIndex = (0, _react.useCallback)(function (activeTabIndex) {
+    dispatch({
+      type: "state",
+      data: {
+        activeTabIndex: activeTabIndex
+      }
+    });
+  }, []);
+  /**
+   * Set form data by providing a callback, which receives a fresh copy of data on which you can work on.
+   * Return new data once finished.
+   */
+
+  var setData = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(setter) {
+      var saveModel,
+          data,
+          _args2 = arguments;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              saveModel = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : false;
+              setPristine(false);
+              data = setter(state.data);
+              dispatch({
+                type: "data",
+                data: data
+              });
+
+              if (saveModel) {
+                _context2.next = 6;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 6:
+              _context2.next = 8;
+              return saveContentModel(data);
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function setData(_x2) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+
+  var getContentModel = /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3(modelId) {
+      var response, _get, data, error;
+
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return apolloClient.query({
+                query: _contentModels.GET_CONTENT_MODEL,
+                variables: {
+                  modelId: modelId
+                }
+              });
+
+            case 2:
+              response = _context3.sent;
+              _get = (0, _get2.default)(response, "data.getContentModel"), data = _get.data, error = _get.error;
+
+              if (!error) {
+                _context3.next = 6;
+                break;
+              }
+
+              throw new Error(error.message);
+
+            case 6:
+              _context3.next = 8;
+              return setData(function () {
+                return data;
+              }, false);
+
+            case 8:
+              setPristine(true);
+              return _context3.abrupt("return", response);
+
+            case 10:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function getContentModel(_x3) {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    if (!modelId) {
+      return;
+    }
+
+    getContentModel(modelId).catch(function () {
+      history.push("/cms/content-models");
+      showSnackbar("Could not load content model with given ID.");
+    });
+  }, [modelId]);
+  var value = (0, _react.useMemo)(function () {
+    return {
+      // Keeping `data` for compatibility
+      data: state.data,
+      contentModel: state.data,
+      modelId: modelId,
+      apolloClient: apolloClient,
+      dispatch: dispatch,
+      isPristine: state.isPristine,
+      getContentModel: getContentModel,
+      saveContentModel: saveContentModel,
+      setData: setData,
+      tabsRef: tabsRef,
+      activeTabIndex: state.activeTabIndex,
+      setActiveTabIndex: setActiveTabIndex
+    };
+  }, [state, apolloClient]);
+  var Provider = contentModelEditorContext.Provider;
+  return /*#__PURE__*/_react.default.createElement(Provider, {
+    value: value
+  }, /*#__PURE__*/_react.default.createElement(_ModelProvider.ModelProvider, {
+    model: value.contentModel
+  }, children));
+};
+
+exports.ContentModelEditorProvider = ContentModelEditorProvider;

package/admin/components/ContentModelEditor/ContentModelEditorProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["contentModelEditorContext","React","createContext","undefined","contentModelEditorReducer","prev","action","data","type","cleanupModelDataFields","fields","map","field","predefinedValues","enabled","values","label","value","selected","String","cleanupModelData","ContentModelEditorProvider","children","apolloClient","modelId","useReducer","isPristine","activeTabIndex","state","dispatch","tabsRef","useRef","useRouter","history","useSnackbar","showSnackbar","setPristine","flag","saveContentModel","modelData","pick","mutate","mutation","UPDATE_CONTENT_MODEL","variables","refetchQueries","query","LIST_MENU_CONTENT_GROUPS_MODELS","response","updateContentModel","error","setActiveTabIndex","useCallback","setData","setter","saveModel","getContentModel","GET_CONTENT_MODEL","get","Error","message","useEffect","catch","push","useMemo","contentModel","Provider"],"sources":["ContentModelEditorProvider.tsx"],"sourcesContent":["import React, {\n    MutableRefObject,\n    useCallback,\n    useEffect,\n    useMemo,\n    useReducer,\n    useRef\n} from \"react\";\nimport get from \"lodash/get\";\nimport pick from \"lodash/pick\";\nimport { ApolloClient } from \"apollo-client\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport {\n    GET_CONTENT_MODEL,\n    GetCmsModelQueryResponse,\n    GetCmsModelQueryVariables,\n    UPDATE_CONTENT_MODEL,\n    UpdateCmsModelMutationResponse,\n    UpdateCmsModelMutationVariables\n} from \"~/admin/graphql/contentModels\";\nimport { LIST_MENU_CONTENT_GROUPS_MODELS } from \"~/admin/viewsGraphql\";\nimport { CmsModelField, CmsModel } from \"~/types\";\nimport { FetchResult } from \"apollo-link\";\nimport { TabsImperativeApi } from \"@webiny/ui/Tabs\";\nimport { ModelProvider } from \"~/admin/components/ModelProvider\";\n\nexport interface ContentModelEditorProviderContext {\n    apolloClient: ApolloClient<any>;\n    data: CmsModel;\n    contentModel: CmsModel;\n    isPristine: boolean;\n    getContentModel: (modelId: string) => Promise<FetchResult<GetCmsModelQueryResponse>>;\n    saveContentModel: (\n        data?: CmsModel\n    ) => Promise<UpdateCmsModelMutationResponse[\"updateContentModel\"]>;\n    setData: (setter: (model: CmsModel) => void, saveContentModel?: boolean) => Promise<any>;\n    tabsRef: MutableRefObject<TabsImperativeApi | undefined>;\n    activeTabIndex: number;\n    setActiveTabIndex: (index: number) => void;\n}\n\nexport const contentModelEditorContext = React.createContext<\n    ContentModelEditorProviderContext | undefined\n>(undefined);\n\ntype PickedCmsModel = Pick<\n    CmsModel,\n    \"layout\" | \"fields\" | \"name\" | \"settings\" | \"description\" | \"titleFieldId\" | \"group\"\n>;\ninterface State {\n    modelId: string | null;\n    isPristine: boolean;\n    data: CmsModel;\n    activeTabIndex: number;\n}\ninterface Action {\n    data: Partial<State> | Partial<CmsModel>;\n    type: \"state\" | \"data\";\n}\ninterface Reducer {\n    (prev: State, action: Action): State;\n}\nexport const contentModelEditorReducer: Reducer = (prev: State, action: Action): State => {\n    const { data, type } = action;\n    switch (type) {\n        case \"state\":\n            return { ...prev, ...data };\n\n        case \"data\":\n            return { ...prev, data: data as CmsModel };\n        default:\n            return prev;\n    }\n};\n\n/**\n * Cleanup is required because backend always expects string value in predefined values entries\n */\nconst cleanupModelDataFields = (fields: CmsModelField[]): CmsModelField[] => {\n    return fields.map(field => {\n        const { predefinedValues } = field;\n        const { enabled = false, values = [] } = predefinedValues || {};\n        return {\n            ...field,\n            predefinedValues: {\n                enabled,\n                values: values.map(({ label, value, selected }) => {\n                    return {\n                        label,\n                        selected: selected || false,\n                        value: String(value)\n                    };\n                })\n            }\n        };\n    });\n};\n\nconst cleanupModelData = (data: PickedCmsModel): PickedCmsModel => {\n    return {\n        ...data,\n        fields: cleanupModelDataFields(data.fields)\n    };\n};\n\ninterface ContentModelEditorProviderProps {\n    apolloClient: ApolloClient<any>;\n    modelId?: string;\n    children: React.ReactElement;\n}\n\nexport const ContentModelEditorProvider: React.FC<ContentModelEditorProviderProps> = ({\n    children,\n    apolloClient,\n    modelId\n}) => {\n    const [state, dispatch] = useReducer<Reducer>(contentModelEditorReducer, {\n        modelId: modelId || null,\n        isPristine: true,\n        data: null as unknown as CmsModel,\n        activeTabIndex: 0\n    });\n\n    const tabsRef = useRef<TabsImperativeApi>();\n\n    const { history } = useRouter();\n    const { showSnackbar } = useSnackbar();\n\n    const setPristine = (flag: boolean): void => {\n        dispatch({ type: \"state\", data: { isPristine: flag } });\n    };\n\n    const saveContentModel = async (\n        data?: CmsModel\n    ): Promise<UpdateCmsModelMutationResponse[\"updateContentModel\"]> => {\n        if (!data) {\n            data = state.data;\n        }\n        const modelData: PickedCmsModel = pick(data, [\n            \"group\",\n            \"layout\",\n            \"fields\",\n            \"tags\",\n            \"name\",\n            \"settings\",\n            \"description\",\n            \"titleFieldId\"\n        ]);\n        const response = await apolloClient.mutate<\n            UpdateCmsModelMutationResponse,\n            UpdateCmsModelMutationVariables\n        >({\n            mutation: UPDATE_CONTENT_MODEL,\n            variables: {\n                modelId: data.modelId,\n                data: cleanupModelData(modelData)\n            },\n            refetchQueries: [\n                {\n                    query: LIST_MENU_CONTENT_GROUPS_MODELS\n                }\n            ]\n        });\n\n        setPristine(true);\n\n        if (!response.data || !response.data.updateContentModel) {\n            return {\n                data: null,\n                error: null\n            };\n        }\n\n        return response.data.updateContentModel;\n    };\n\n    const setActiveTabIndex = useCallback((activeTabIndex: number) => {\n        dispatch({ type: \"state\", data: { activeTabIndex } });\n    }, []);\n\n    /**\n     * Set form data by providing a callback, which receives a fresh copy of data on which you can work on.\n     * Return new data once finished.\n     */\n    const setData = async (setter: (value: any) => any, saveModel = false): Promise<void> => {\n        setPristine(false);\n        const data = setter(state.data);\n        dispatch({ type: \"data\", data });\n        if (!saveModel) {\n            return;\n        }\n        await saveContentModel(data);\n    };\n\n    const getContentModel = async (\n        modelId: string\n    ): Promise<FetchResult<GetCmsModelQueryResponse>> => {\n        const response = await apolloClient.query<\n            GetCmsModelQueryResponse,\n            GetCmsModelQueryVariables\n        >({\n            query: GET_CONTENT_MODEL,\n            variables: {\n                modelId\n            }\n        });\n\n        const { data, error } = get(response, \"data.getContentModel\");\n        if (error) {\n            throw new Error(error.message);\n        }\n\n        await setData(() => data, false);\n        setPristine(true);\n        return response;\n    };\n\n    useEffect(() => {\n        if (!modelId) {\n            return;\n        }\n        getContentModel(modelId).catch(() => {\n            history.push(`/cms/content-models`);\n            showSnackbar(`Could not load content model with given ID.`);\n        });\n    }, [modelId]);\n\n    const value = useMemo<ContentModelEditorProviderContext>(\n        () => ({\n            // Keeping `data` for compatibility\n            data: state.data,\n            contentModel: state.data,\n            modelId,\n            apolloClient,\n            dispatch,\n            isPristine: state.isPristine,\n            getContentModel,\n            saveContentModel,\n            setData,\n            tabsRef,\n            activeTabIndex: state.activeTabIndex,\n            setActiveTabIndex\n        }),\n        [state, apolloClient]\n    );\n\n    const { Provider } = contentModelEditorContext;\n\n    return (\n        <Provider value={value}>\n            <ModelProvider model={value.contentModel}>{children}</ModelProvider>\n        </Provider>\n    );\n};\n"],"mappings":"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"}

package/admin/components/ContentModelEditor/Editor.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="web" />
+import React from "react";
+export declare const EditContainer: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement>>, object>;
+export declare const Editor: React.FC;

package/admin/components/ContentModelEditor/Editor.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Editor = exports.EditContainer = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactRouter = require("@webiny/react-router");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _emotion = require("emotion");
+
+var _i18n = require("@webiny/app/i18n");
+
+var _Progress = require("@webiny/ui/Progress");
+
+var _SplitView = require("@webiny/app-admin/components/SplitView");
+
+var _Icon = require("@webiny/ui/Icon");
+
+var _Typography = require("@webiny/ui/Typography");
+
+var _Tabs = require("@webiny/ui/Tabs");
+
+var _roundAssignment24px = require("./icons/round-assignment-24px.svg");
+
+var _FieldsSidebar = require("./FieldsSidebar");
+
+var _FieldEditor = require("../FieldEditor");
+
+var _PreviewTab = require("./PreviewTab");
+
+var _Header = _interopRequireDefault(require("./Header"));
+
+var _DragPreview = _interopRequireDefault(require("../DragPreview"));
+
+var _useModelEditor2 = require("./useModelEditor");
+
+var _templateObject;
+
+var t = _i18n.i18n.ns("app-headless-cms/admin/editor");
+
+var prompt = t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["There are some unsaved changes! Are you sure you want to navigate away and discard all changes?"])));
+var ContentContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "epn2fgg0",
+  label: "ContentContainer"
+})({
+  paddingTop: 65
+});
+var EditContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "epn2fgg1",
+  label: "EditContainer"
+})({
+  padding: 40,
+  position: "relative"
+});
+exports.EditContainer = EditContainer;
+var LeftBarTitle = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "epn2fgg2",
+  label: "LeftBarTitle"
+})({
+  borderBottom: "1px solid var(--mdc-theme-on-background)",
+  display: "flex",
+  alignItems: "center",
+  padding: 25,
+  color: "var(--mdc-theme-on-surface)"
+});
+var titleIcon = /*#__PURE__*/(0, _emotion.css)({
+  height: 24,
+  marginRight: 15,
+  color: "var(--mdc-theme-primary)"
+}, "label:titleIcon;");
+var LeftBarFieldList = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "epn2fgg3",
+  label: "LeftBarFieldList"
+})({
+  padding: 40,
+  overflow: "auto",
+  height: "calc(100vh - 250px)"
+});
+var formTabs = /*#__PURE__*/(0, _emotion.css)({
+  "&.webiny-ui-tabs": {
+    ".webiny-ui-tabs__tab-bar": {
+      backgroundColor: "var(--mdc-theme-surface)"
+    }
+  }
+}, "label:formTabs;");
+
+var Editor = function Editor() {
+  var _useModelEditor = (0, _useModelEditor2.useModelEditor)(),
+      data = _useModelEditor.data,
+      setData = _useModelEditor.setData,
+      isPristine = _useModelEditor.isPristine;
+
+  var tabsRef = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      activeTabIndex = _useState2[0],
+      setActiveTabIndex = _useState2[1];
+
+  var onChange = function onChange(_ref) {
+    var fields = _ref.fields,
+        layout = _ref.layout;
+    setData(function (data) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+        fields: fields,
+        layout: layout
+      });
+    });
+  };
+
+  if (!data) {
+    return /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, {
+      label: "Loading content model..."
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "content-model-editor"
+  }, /*#__PURE__*/_react.default.createElement(_reactRouter.Prompt, {
+    when: !isPristine,
+    message: prompt
+  }), /*#__PURE__*/_react.default.createElement(_Header.default, null), /*#__PURE__*/_react.default.createElement(ContentContainer, null, /*#__PURE__*/_react.default.createElement(_SplitView.SplitView, null, /*#__PURE__*/_react.default.createElement(_SplitView.LeftPanel, {
+    span: 4
+  }, /*#__PURE__*/_react.default.createElement(LeftBarTitle, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    className: titleIcon,
+    icon: /*#__PURE__*/_react.default.createElement(_roundAssignment24px.ReactComponent, null)
+  }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline6"
+  }, "Fields")), /*#__PURE__*/_react.default.createElement(LeftBarFieldList, null, /*#__PURE__*/_react.default.createElement(_FieldsSidebar.FieldsSidebar, {
+    onFieldDragStart: function onFieldDragStart() {
+      if (!tabsRef.current) {
+        return;
+      }
+
+      tabsRef.current.switchTab(0);
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_SplitView.RightPanel, {
+    span: 8
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, {
+    className: formTabs,
+    ref: tabsRef,
+    onActivate: function onActivate(e) {
+      return setActiveTabIndex(e);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+    label: "Edit",
+    "data-testid": "cms.editor.tab.edit"
+  }, /*#__PURE__*/_react.default.createElement(EditContainer, null, /*#__PURE__*/_react.default.createElement(_FieldEditor.FieldEditor, {
+    fields: data.fields,
+    layout: data.layout || [],
+    onChange: onChange
+  }))), /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+    label: "Preview",
+    "data-testid": "cms.editor.tab.preview"
+  }, /*#__PURE__*/_react.default.createElement(_PreviewTab.PreviewTab, {
+    activeTab: activeTabIndex === 1
+  })))))), /*#__PURE__*/_react.default.createElement(_DragPreview.default, null));
+};
+
+exports.Editor = Editor;

package/admin/components/ContentModelEditor/Editor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","prompt","ContentContainer","styled","paddingTop","EditContainer","padding","position","LeftBarTitle","borderBottom","display","alignItems","color","titleIcon","css","height","marginRight","LeftBarFieldList","overflow","formTabs","backgroundColor","Editor","useModelEditor","data","setData","isPristine","tabsRef","useRef","useState","activeTabIndex","setActiveTabIndex","onChange","fields","layout","current","switchTab","e"],"sources":["Editor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Prompt } from \"@webiny/react-router\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { LeftPanel, RightPanel, SplitView } from \"@webiny/app-admin/components/SplitView\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Tab, Tabs, TabsImperativeApi } from \"@webiny/ui/Tabs\";\nimport { ReactComponent as FormIcon } from \"./icons/round-assignment-24px.svg\";\nimport { FieldsSidebar } from \"./FieldsSidebar\";\nimport { FieldEditor } from \"../FieldEditor\";\nimport { PreviewTab } from \"./PreviewTab\";\nimport Header from \"./Header\";\nimport DragPreview from \"../DragPreview\";\nimport { useModelEditor } from \"./useModelEditor\";\nimport { CmsModelField, CmsEditorFieldsLayout } from \"~/types\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/editor\");\n\nconst prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;\n\nconst ContentContainer = styled(\"div\")({\n    paddingTop: 65\n});\n\nexport const EditContainer = styled(\"div\")({\n    padding: 40,\n    position: \"relative\"\n});\n\nconst LeftBarTitle = styled(\"div\")({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: 25,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst titleIcon = css({\n    height: 24,\n    marginRight: 15,\n    color: \"var(--mdc-theme-primary)\"\n});\n\nconst LeftBarFieldList = styled(\"div\")({\n    padding: 40,\n    overflow: \"auto\",\n    height: \"calc(100vh - 250px)\"\n});\n\nconst formTabs = css({\n    \"&.webiny-ui-tabs\": {\n        \".webiny-ui-tabs__tab-bar\": {\n            backgroundColor: \"var(--mdc-theme-surface)\"\n        }\n    }\n});\n\ninterface OnChangeParams {\n    fields: CmsModelField[];\n    layout: CmsEditorFieldsLayout;\n}\n\nexport const Editor: React.FC = () => {\n    const { data, setData, isPristine } = useModelEditor();\n\n    const tabsRef = useRef<TabsImperativeApi>();\n    const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n    const onChange = ({ fields, layout }: OnChangeParams) => {\n        setData(data => ({ ...data, fields, layout }));\n    };\n\n    if (!data) {\n        return <CircularProgress label={\"Loading content model...\"} />;\n    }\n\n    return (\n        <div className={\"content-model-editor\"}>\n            <Prompt when={!isPristine} message={prompt} />\n            <Header />\n            <ContentContainer>\n                <SplitView>\n                    <LeftPanel span={4}>\n                        <LeftBarTitle>\n                            <Icon className={titleIcon} icon={<FormIcon />} />\n                            <Typography use={\"headline6\"}>Fields</Typography>\n                        </LeftBarTitle>\n                        <LeftBarFieldList>\n                            <FieldsSidebar\n                                onFieldDragStart={() => {\n                                    if (!tabsRef.current) {\n                                        return;\n                                    }\n                                    tabsRef.current.switchTab(0);\n                                }}\n                            />\n                        </LeftBarFieldList>\n                    </LeftPanel>\n                    <RightPanel span={8}>\n                        <Tabs\n                            className={formTabs}\n                            ref={tabsRef}\n                            onActivate={e => setActiveTabIndex(e)}\n                        >\n                            <Tab label={\"Edit\"} data-testid={\"cms.editor.tab.edit\"}>\n                                <EditContainer>\n                                    <FieldEditor\n                                        fields={data.fields}\n                                        layout={data.layout || []}\n                                        onChange={onChange}\n                                    />\n                                </EditContainer>\n                            </Tab>\n                            <Tab label={\"Preview\"} data-testid={\"cms.editor.tab.preview\"}>\n                                <PreviewTab activeTab={activeTabIndex === 1} />\n                            </Tab>\n                        </Tabs>\n                    </RightPanel>\n                </SplitView>\n            </ContentContainer>\n            <DragPreview />\n        </div>\n    );\n};\n"],"mappings":"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"}

package/admin/components/ContentModelEditor/FieldsSidebar.d.ts

@@ -0,0 +1,6 @@
+import React, { DragEventHandler } from "react";
+interface FieldsSidebarProps {
+    onFieldDragStart: DragEventHandler;
+}
+export declare const FieldsSidebar: React.FC<FieldsSidebarProps>;
+export {};

package/admin/components/ContentModelEditor/FieldsSidebar.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldsSidebar = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _plugins = require("@webiny/plugins");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Icon = require("@webiny/ui/Icon");
+
+var _Draggable = _interopRequireDefault(require("../Draggable"));
+
+var FieldContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1s2p6i00",
+  label: "FieldContainer"
+})({
+  padding: "10px 15px",
+  marginBottom: 20,
+  display: "flex",
+  width: "100%",
+  backgroundColor: "var(--mdc-theme-on-background)",
+  borderRadius: 15,
+  boxSizing: "border-box",
+  cursor: "grab",
+  opacity: 1,
+  transition: "opacity 225ms",
+  "&:hover": {
+    opacity: 0.8
+  },
+  "&:last-child": {
+    marginBottom: 0
+  }
+});
+var FileInfo = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1s2p6i01",
+  label: "FileInfo"
+})({});
+var FieldLabel = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1s2p6i02",
+  label: "FieldLabel"
+})({
+  textTransform: "uppercase",
+  lineHeight: "145%",
+  color: "var(--mdc-theme-on-surface)"
+});
+var FieldDescription = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1s2p6i03",
+  label: "FieldDescription"
+})({
+  fontSize: 14,
+  color: "var(--mdc-theme-text-secondary-on-background)"
+});
+var FieldHandle = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1s2p6i04",
+  label: "FieldHandle"
+})({
+  marginRight: 15,
+  color: "var(--mdc-theme-on-surface)"
+});
+
+var Field = function Field(props) {
+  var onFieldDragStart = props.onFieldDragStart,
+      _props$fieldType = props.fieldType,
+      type = _props$fieldType.type,
+      label = _props$fieldType.label,
+      icon = _props$fieldType.icon,
+      description = _props$fieldType.description;
+  return /*#__PURE__*/_react.default.createElement(_Draggable.default, {
+    beginDrag: {
+      type: "newField",
+      fieldType: type
+    }
+  }, function (_ref) {
+    var drag = _ref.drag;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: drag,
+      style: {
+        marginBottom: 10
+      },
+      "data-testid": "cms-editor-fields-field-".concat(type),
+      onDragStart: onFieldDragStart
+    }, /*#__PURE__*/_react.default.createElement(FieldContainer, null, /*#__PURE__*/_react.default.createElement(FieldHandle, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+      icon: icon
+    })), /*#__PURE__*/_react.default.createElement(FileInfo, null, /*#__PURE__*/_react.default.createElement(FieldLabel, null, label), /*#__PURE__*/_react.default.createElement(FieldDescription, null, description))));
+  });
+};
+
+var FieldsSidebar = function FieldsSidebar(_ref2) {
+  var onFieldDragStart = _ref2.onFieldDragStart;
+
+  var fieldTypePlugin = _plugins.plugins.byType("cms-editor-field-type");
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fieldTypePlugin.map(function (fieldPlugin) {
+    return /*#__PURE__*/_react.default.createElement(Field, {
+      key: fieldPlugin.field.type,
+      fieldType: fieldPlugin.field,
+      onFieldDragStart: onFieldDragStart
+    });
+  }));
+};
+
+exports.FieldsSidebar = FieldsSidebar;