@webiny/app-headless-cms 0.0.0-mt-1

package/admin/views/contentModelGroups/ContentModelGroupsForm.js

@@ -0,0 +1,231 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+var _excluded = ["id"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback } from "react";
+import styled from "@emotion/styled";
+import isEmpty from "lodash/isEmpty";
+import get from "lodash/get";
+import pick from "lodash/pick";
+import { Form } from "@webiny/form";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { Input } from "@webiny/ui/Input";
+import { ButtonDefault, ButtonIcon, ButtonPrimary } from "@webiny/ui/Button";
+import { CircularProgress } from "@webiny/ui/Progress";
+import { i18n } from "@webiny/app/i18n";
+import { validation } from "@webiny/validation";
+import { SimpleFormHeader, SimpleForm, SimpleFormFooter, SimpleFormContent } from "@webiny/app-admin/components/SimpleForm";
+import IconPicker from "./IconPicker";
+import { useRouter } from "@webiny/react-router";
+import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import EmptyView from "@webiny/app-admin/components/EmptyView";
+import { ReactComponent as AddIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/add-18px.svg";
+import { useMutation, useQuery } from "../../hooks";
+import * as GQL from "./graphql";
+import usePermission from "../../hooks/usePermission";
+import { Tooltip } from "@webiny/ui/Tooltip";
+var t = i18n.ns("app-headless-cms/admin/content-model-groups/form");
+var ButtonWrapper = /*#__PURE__*/styled("div", {
+  target: "e7xbi20",
+  label: "ButtonWrapper"
+})({
+  display: "flex",
+  justifyContent: "space-between"
+});
+
+function ContentModelGroupsForm(_ref) {
+  var canCreate = _ref.canCreate;
+
+  var _useRouter = useRouter(),
+      location = _useRouter.location,
+      history = _useRouter.history;
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var _usePermission = usePermission(),
+      canEdit = _usePermission.canEdit;
+
+  var newEntry = new URLSearchParams(location.search).get("new") === "true";
+  var id = new URLSearchParams(location.search).get("id");
+  var getQuery = useQuery(GQL.GET_CONTENT_MODEL_GROUP, {
+    variables: {
+      id: id
+    },
+    skip: !id,
+    onCompleted: function onCompleted(data) {
+      if (!data) {
+        return;
+      }
+
+      var error = data.contentModelGroup.error;
+
+      if (error) {
+        history.push("/cms/content-model-group");
+        showSnackbar(error.message);
+      }
+    }
+  }); // Create a new group and update list cache
+
+  var _useMutation = useMutation(GQL.CREATE_CONTENT_MODEL_GROUP, {
+    update: function update(cache, _ref2) {
+      var data = _ref2.data;
+
+      if (data.contentModelGroup.error) {
+        return;
+      }
+
+      var gqlParams = {
+        query: GQL.LIST_CONTENT_MODEL_GROUPS
+      };
+
+      var _cache$readQuery = cache.readQuery(gqlParams),
+          listContentModelGroups = _cache$readQuery.listContentModelGroups;
+
+      cache.writeQuery(_objectSpread(_objectSpread({}, gqlParams), {}, {
+        data: {
+          listContentModelGroups: _objectSpread(_objectSpread({}, listContentModelGroups), {}, {
+            data: [data.contentModelGroup.data].concat(_toConsumableArray(listContentModelGroups.data))
+          })
+        }
+      }));
+    }
+  }),
+      _useMutation2 = _slicedToArray(_useMutation, 2),
+      create = _useMutation2[0],
+      createMutation = _useMutation2[1];
+
+  var _useMutation3 = useMutation(GQL.UPDATE_CONTENT_MODEL_GROUP),
+      _useMutation4 = _slicedToArray(_useMutation3, 2),
+      update = _useMutation4[0],
+      updateMutation = _useMutation4[1];
+
+  var loading = [getQuery, createMutation, updateMutation].find(function (item) {
+    return item.loading;
+  });
+  var onSubmit = useCallback( /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
+      var id, group, _ref5, _ref6, operation, args, response, _response$data$conten, data, error;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              id = _ref3.id, group = _objectWithoutProperties(_ref3, _excluded);
+              _ref5 = id ? [update, {
+                variables: {
+                  id: id,
+                  data: pick(group, ["name", "description", "icon"])
+                }
+              }] : [create, {
+                variables: {
+                  data: pick(group, ["name", "description", "icon"])
+                }
+              }], _ref6 = _slicedToArray(_ref5, 2), operation = _ref6[0], args = _ref6[1];
+              _context.next = 4;
+              return operation(args);
+
+            case 4:
+              response = _context.sent;
+              _response$data$conten = response.data.contentModelGroup, data = _response$data$conten.data, error = _response$data$conten.error;
+
+              if (!error) {
+                _context.next = 8;
+                break;
+              }
+
+              return _context.abrupt("return", showSnackbar(error.message));
+
+            case 8:
+              !id && history.push("/cms/content-model-groups?id=".concat(data.id));
+              showSnackbar(t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Content model group saved successfully!"]))));
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }(), [id]);
+  var data = getQuery.loading ? null : get(getQuery, "data.contentModelGroup.data", null);
+  var showEmptyView = !newEntry && !loading && isEmpty(data); // Render "No content selected" view.
+
+  if (showEmptyView) {
+    return /*#__PURE__*/React.createElement(EmptyView, {
+      title: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Click on the left side list to display group details {message}"])))({
+        message: canCreate ? "or create a..." : ""
+      }),
+      action: canCreate ? /*#__PURE__*/React.createElement(ButtonDefault, {
+        "data-testid": "new-record-button",
+        onClick: function onClick() {
+          return history.push("/cms/content-model-groups?new=true");
+        }
+      }, /*#__PURE__*/React.createElement(ButtonIcon, {
+        icon: /*#__PURE__*/React.createElement(AddIcon, null)
+      }), " ", t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["New Group"])))) : null
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(Form, {
+    onSubmit: onSubmit,
+    data: data || {
+      icon: "fas/star"
+    }
+  }, function (_ref7) {
+    var data = _ref7.data,
+        form = _ref7.form,
+        Bind = _ref7.Bind;
+    return /*#__PURE__*/React.createElement(SimpleForm, {
+      "data-testid": "pb-content-model-groups-form"
+    }, /*#__PURE__*/React.createElement(SimpleFormHeader, {
+      title: data.name ? data.name : t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["New content model group"])))
+    }), loading && /*#__PURE__*/React.createElement(CircularProgress, null), /*#__PURE__*/React.createElement(SimpleFormContent, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "name",
+      validators: validation.create("required,maxLength:100")
+    }, /*#__PURE__*/React.createElement(Input, {
+      label: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Name"])))
+    }))), /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "icon",
+      validators: validation.create("required")
+    }, /*#__PURE__*/React.createElement(IconPicker, {
+      label: t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Group icon"]))),
+      description: t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Icon that will be displayed in the main menu."])))
+    }))), /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "description"
+    }, /*#__PURE__*/React.createElement(Input, {
+      rows: 5,
+      label: t(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["Description"])))
+    }))))), /*#__PURE__*/React.createElement(SimpleFormFooter, null, /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonDefault, {
+      onClick: function onClick() {
+        return history.push("/cms/content-model-groups");
+      }
+    }, t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["Cancel"])))), canEdit(data, "cms.contentModelGroup") && /*#__PURE__*/React.createElement(React.Fragment, null, !data.plugin ? /*#__PURE__*/React.createElement(ButtonPrimary, {
+      onClick: form.submit
+    }, t(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["Save content model group"])))) : /*#__PURE__*/React.createElement(Tooltip, {
+      content: "Content model group is registered via a plugin.",
+      placement: "bottom"
+    }, /*#__PURE__*/React.createElement(ButtonPrimary, {
+      disabled: true
+    }, t(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["Save content model group"])))))))));
+  });
+}
+
+export default ContentModelGroupsForm;

package/admin/views/contentModelGroups/DelayedOnChange.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+/**
+ * This component is used to wrap Input and Textarea components to optimize form re-render.
+ * These 2 are the only components that trigger form model change on each character input.
+ * This means, whenever you type a letter an entire form re-renders.
+ * On complex forms you will feel and see a significant delay if this component is not used.
+ *
+ * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when
+ * a user stops typing for given period of time (400ms by default).
+ */
+declare class DelayedOnChange extends React.Component<any> {
+    static defaultProps: {
+        delay: number;
+    };
+    delay: any;
+    state: {
+        value: string;
+    };
+    componentDidMount(): void;
+    applyValue: (value: any, callback?: Function) => void;
+    onChange: (value: any) => void;
+    changed: () => void;
+    render(): React.DetailedReactHTMLElement<any, HTMLElement>;
+}
+export default DelayedOnChange;

package/admin/views/contentModelGroups/DelayedOnChange.js

@@ -0,0 +1,134 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children"];
+import * as React from "react";
+import noop from "lodash/noop";
+/**
+ * This component is used to wrap Input and Textarea components to optimize form re-render.
+ * These 2 are the only components that trigger form model change on each character input.
+ * This means, whenever you type a letter an entire form re-renders.
+ * On complex forms you will feel and see a significant delay if this component is not used.
+ *
+ * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when
+ * a user stops typing for given period of time (400ms by default).
+ */
+
+var DelayedOnChange = /*#__PURE__*/function (_React$Component) {
+  _inherits(DelayedOnChange, _React$Component);
+
+  var _super = _createSuper(DelayedOnChange);
+
+  function DelayedOnChange() {
+    var _this;
+
+    _classCallCheck(this, DelayedOnChange);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "delay", null);
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      value: ""
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "applyValue", function (value) {
+      var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
+      _this.delay && clearTimeout(_this.delay);
+      _this.delay = null;
+
+      _this.props.onChange(value, callback);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (value) {
+      _this.setState({
+        value: value
+      }, _this.changed);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "changed", function () {
+      _this.delay && clearTimeout(_this.delay);
+      _this.delay = null;
+      _this.delay = setTimeout(function () {
+        return _this.applyValue(_this.state.value);
+      }, _this.props.delay);
+    });
+
+    return _this;
+  }
+
+  _createClass(DelayedOnChange, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setState({
+        value: this.props.value
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          children = _this$props.children,
+          other = _objectWithoutProperties(_this$props, _excluded);
+
+      var newProps = _objectSpread(_objectSpread({}, other), {}, {
+        value: this.state.value,
+        onChange: this.onChange
+      });
+
+      var renderProp = typeof children === "function" ? children : false;
+      var child = renderProp ? renderProp(newProps) : /*#__PURE__*/React.cloneElement(children, newProps);
+
+      var props = _objectSpread({}, child.props);
+
+      var realOnKeyDown = props.onKeyDown || noop;
+      var realOnBlur = props.onBlur || noop; // Need to apply value if input lost focus
+
+      props.onBlur = function (e) {
+        e.persist();
+
+        _this2.applyValue(e.target.value, function () {
+          return realOnBlur(e);
+        });
+      }; // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.
+
+
+      props.onKeyDown = function (e) {
+        e.persist();
+
+        if (e.key === "Tab") {
+          _this2.applyValue(e.target.value, function () {
+            return realOnKeyDown(e);
+          });
+        } else if (e.key === "Enter" && props["data-on-enter"]) {
+          _this2.applyValue(e.target.value, function () {
+            return realOnKeyDown(e);
+          });
+        } else {
+          realOnKeyDown(e);
+        }
+      };
+
+      return /*#__PURE__*/React.cloneElement(child, props);
+    }
+  }]);
+
+  return DelayedOnChange;
+}(React.Component);
+
+_defineProperty(DelayedOnChange, "defaultProps", {
+  delay: 400
+});
+
+export default DelayedOnChange;

package/admin/views/contentModelGroups/IconPicker.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { FormComponentProps } from "@webiny/ui/types";
+declare const IconPicker: ({ value, onChange, label, description, validation }: FormComponentProps & {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+}) => JSX.Element;
+export default IconPicker;

package/admin/views/contentModelGroups/IconPicker.js

@@ -0,0 +1,204 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from "react";
+import { css } from "emotion";
+import { plugins } from "@webiny/plugins";
+import { Typography } from "@webiny/ui/Typography";
+import { Grid } from "react-virtualized";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import DelayedOnChange from "./DelayedOnChange";
+import { Menu } from "@webiny/ui/Menu";
+import { Input } from "@webiny/ui/Input";
+import { FormElementMessage } from "@webiny/ui/FormElementMessage";
+/**
+ * Controls the helper text below the checkbox.
+ * @type {string}
+ */
+
+var iconPickerLabel = /*#__PURE__*/css({
+  marginBottom: 5,
+  marginLeft: 2
+}, "label:iconPickerLabel;");
+var MenuWrapper = /*#__PURE__*/css({
+  color: "var(--mdc-theme-text-secondary-on-background)",
+  backgroundColor: "var(--mdc-theme-on-background)",
+  padding: "16px 8px"
+}, "label:MenuWrapper;");
+var NoResultWrapper = /*#__PURE__*/css({
+  width: 640,
+  color: "var(--mdc-theme-text-secondary-on-background)",
+  padding: "16px 12px"
+}, "label:NoResultWrapper;");
+var COLUMN_COUNT = 6;
+var gridItem = /*#__PURE__*/css({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "flex-start",
+  boxSizing: "border-box",
+  paddingTop: 15,
+  alignItems: "center",
+  textAlign: "center",
+  cursor: "pointer",
+  transform: "translateZ(0)",
+  borderRadius: 2,
+  color: "var(--mdc-theme-text-secondary-on-background)",
+  transition: "all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
+  "&::after": {
+    boxShadow: "0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)",
+    transition: "opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: -1,
+    opacity: 0
+  },
+  "&:hover": {
+    backgroundColor: "var(--mdc-theme-background)",
+    color: "var(--mdc-theme-text-primary-on-background)",
+    "&::after": {
+      opacity: 1
+    }
+  },
+  ">svg": {
+    width: 42,
+    marginBottom: 5
+  }
+}, "label:gridItem;");
+var grid = /*#__PURE__*/css({
+  padding: 20
+}, "label:grid;");
+var pickIcon = /*#__PURE__*/css({
+  width: 50,
+  textAlign: "center",
+  cursor: "pointer"
+}, "label:pickIcon;");
+var searchInput = /*#__PURE__*/css({
+  input: {
+    padding: "20px 12px 20px"
+  }
+}, "label:searchInput;");
+var useState = React.useState,
+    useCallback = React.useCallback,
+    useMemo = React.useMemo;
+
+var IconPicker = function IconPicker(_ref) {
+  var value = _ref.value,
+      onChange = _ref.onChange,
+      label = _ref.label,
+      description = _ref.description,
+      validation = _ref.validation;
+
+  var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      filter = _useState2[0],
+      setFilter = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      mustRenderGrid = _useState4[0],
+      setMustRenderGrid = _useState4[1];
+
+  var onFilterChange = useCallback(function (value, cb) {
+    setFilter(value);
+    cb();
+  }, [filter]);
+  var allIcons = useMemo(function () {
+    var iconPlugins = plugins.byType("cms-icons");
+    return iconPlugins.reduce(function (icons, pl) {
+      return icons.concat(pl.getIcons());
+    }, []);
+  }, []);
+  var icons = useMemo(function () {
+    return filter ? allIcons.filter(function (ic) {
+      return ic.name.includes(filter);
+    }) : allIcons;
+  }, [filter]);
+  var renderCell = useCallback(function (_ref2) {
+    var closeMenu = _ref2.closeMenu;
+    return function renderCell(_ref3) {
+      var columnIndex = _ref3.columnIndex,
+          key = _ref3.key,
+          rowIndex = _ref3.rowIndex,
+          style = _ref3.style;
+      var item = icons[rowIndex * COLUMN_COUNT + columnIndex];
+
+      if (!item) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        key: key,
+        style: style,
+        className: gridItem,
+        onClick: function onClick() {
+          onChange(item.id.join("/"));
+          closeMenu();
+        }
+      }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: item.id,
+        size: "2x"
+      }), /*#__PURE__*/React.createElement(Typography, {
+        use: "body2"
+      }, item.name));
+    };
+  }, [icons]);
+  var renderGrid = useCallback(function (_ref4) {
+    var closeMenu = _ref4.closeMenu;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DelayedOnChange, {
+      value: filter,
+      onChange: onFilterChange
+    }, function (_ref5) {
+      var value = _ref5.value,
+          onChange = _ref5.onChange;
+      return /*#__PURE__*/React.createElement(Input, {
+        autoFocus: true,
+        className: searchInput,
+        value: value,
+        onChange: onChange,
+        placeholder: "Search icons..."
+      });
+    }), icons.length === 0 ? /*#__PURE__*/React.createElement("div", {
+      className: NoResultWrapper
+    }, /*#__PURE__*/React.createElement(Typography, {
+      use: "body1"
+    }, "No results found.")) : /*#__PURE__*/React.createElement(Grid, {
+      className: grid,
+      cellRenderer: renderCell({
+        closeMenu: closeMenu
+      }),
+      columnCount: COLUMN_COUNT,
+      columnWidth: 100,
+      height: 440,
+      rowCount: Math.ceil(icons.length / COLUMN_COUNT),
+      rowHeight: 100,
+      width: 640
+    }));
+  }, [icons]);
+  var fontAwesomeIconValue = typeof value === "string" && value.includes("/") ? value.split("/") : ["fas", "star"];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
+    className: iconPickerLabel
+  }, /*#__PURE__*/React.createElement(Typography, {
+    use: "body1"
+  }, label)), /*#__PURE__*/React.createElement("div", {
+    className: MenuWrapper
+  }, /*#__PURE__*/React.createElement(Menu, {
+    onOpen: function onOpen() {
+      return setMustRenderGrid(true);
+    },
+    onClose: function onClose() {
+      return setMustRenderGrid(false);
+    },
+    handle: /*#__PURE__*/React.createElement("div", {
+      className: pickIcon
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: fontAwesomeIconValue,
+      size: "2x"
+    }))
+  }, mustRenderGrid && renderGrid)), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+    error: true
+  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+};
+
+export default IconPicker;

package/admin/views/contentModelGroups/graphql.d.ts

@@ -0,0 +1,5 @@
+export declare const LIST_CONTENT_MODEL_GROUPS: import("graphql").DocumentNode;
+export declare const GET_CONTENT_MODEL_GROUP: import("graphql").DocumentNode;
+export declare const CREATE_CONTENT_MODEL_GROUP: import("graphql").DocumentNode;
+export declare const UPDATE_CONTENT_MODEL_GROUP: import("graphql").DocumentNode;
+export declare const DELETE_CONTENT_MODEL_GROUP: import("graphql").DocumentNode;

package/admin/views/contentModelGroups/graphql.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import gql from "graphql-tag";
+var fields = "\n    id\n    name\n    slug\n    description\n    icon\n    createdOn\n    plugin\n    createdBy {\n        id\n        displayName\n        type\n    }\n";
+export var LIST_CONTENT_MODEL_GROUPS = gql(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    query CmsListContentModelGroups {\n        listContentModelGroups {\n            data {\n                ", "\n                contentModels {\n                    modelId\n                    name\n                }\n            }\n        }\n    }\n"])), fields);
+export var GET_CONTENT_MODEL_GROUP = gql(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    query CmsGetContentModelGroup($id: ID!) {\n        contentModelGroup: getContentModelGroup(id: $id){\n            data {\n                ", "\n            }\n            error {\n                code\n                message\n            }\n        }\n    }\n"])), fields);
+export var CREATE_CONTENT_MODEL_GROUP = gql(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    mutation CmsCreateContentModelGroup($data: CmsContentModelGroupInput!){\n        contentModelGroup: createContentModelGroup(data: $data) {\n            data {\n                ", "\n                contentModels {\n                    modelId\n                    name\n                }\n            }\n            error {\n                code\n                message\n                data\n            }\n        }\n    }\n"])), fields);
+export var UPDATE_CONTENT_MODEL_GROUP = gql(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    mutation CmsUpdateContentModelGroup($id: ID!, $data: CmsContentModelGroupInput!){\n        contentModelGroup: updateContentModelGroup(id: $id, data: $data) {\n            data {\n                ", "\n            }\n            error {\n                code\n                message\n                data\n            }\n        }\n    }\n"])), fields);
+export var DELETE_CONTENT_MODEL_GROUP = gql(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    mutation CmsDeleteContentModelGroup($id: ID!) {\n        deleteContentModelGroup(id: $id) {\n            data\n            error {\n                code\n                message\n            }\n        }\n    }\n"])));

package/admin/views/contentModels/ContentModelEditor.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function ContentModelEditorView(): JSX.Element;

package/admin/views/contentModels/ContentModelEditor.js

@@ -0,0 +1,35 @@
+import React from "react";
+import HTML5Backend from "react-dnd-html5-backend";
+import { DndProvider } from "react-dnd";
+import { Editor } from "../../components/ContentModelEditor/Editor";
+import { useRouter } from "@webiny/react-router";
+import { useCms } from "../../hooks";
+import { ContentModelEditorProvider } from "../../components/ContentModelEditor/Context";
+import Snackbar from "@webiny/app-admin/ui/views/AdminView/components/Snackbar";
+export default function ContentModelEditorView() {
+  var _useRouter = useRouter(),
+      match = _useRouter.match;
+
+  var _useCms = useCms(),
+      apolloClient = _useCms.apolloClient;
+
+  var _ref = match.params,
+      modelId = _ref.modelId;
+
+  if (!apolloClient) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(ContentModelEditorProvider, {
+    key: modelId,
+    apolloClient: apolloClient,
+    modelId: modelId
+  }, /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, /*#__PURE__*/React.createElement(Editor, null), /*#__PURE__*/React.createElement("div", {
+    style: {
+      zIndex: 10,
+      position: "absolute"
+    }
+  }, /*#__PURE__*/React.createElement(Snackbar, null))));
+}

package/admin/views/contentModels/ContentModels.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function ContentModels(): JSX.Element;
+export default ContentModels;