@webiny/app-headless-cms 5.19.1-beta.0 → 5.20.0-beta.2

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

@@ -1,3 +1,10 @@
 import React from "react";
-declare const _default: React.MemoExoticComponent<(props: any) => JSX.Element>;
+import { CmsEditorField } from "../../../types";
+export interface Props {
+    field: CmsEditorField;
+    onDelete: Function;
+    onEdit: Function;
+    parent?: CmsEditorField;
+}
+declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

package/admin/components/FieldEditor/Field.js

@@ -133,12 +133,13 @@ var Field = function Field(props) {
     return null;
   }
 
+  var isTitleField = field.fieldId === data.titleFieldId && !parent;
   var lockedFields = data.lockedFields || [];
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Info, null, /*#__PURE__*/React.createElement(Typography, {
     use: "subtitle1"
   }, field.label), /*#__PURE__*/React.createElement(Typography, {
     use: "caption"
-  }, fieldPlugin.field.label, " ", field.multipleValues && /*#__PURE__*/React.createElement(React.Fragment, null, "(", t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["multiple values"]))), ")"), field.fieldId === data.titleFieldId && /*#__PURE__*/React.createElement(React.Fragment, null, "(", t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["entry title"]))), ")"))), /*#__PURE__*/React.createElement(Actions, null, /*#__PURE__*/React.createElement(IconButton, {
+  }, fieldPlugin.field.label, " ", field.multipleValues && /*#__PURE__*/React.createElement(React.Fragment, null, "(", t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["multiple values"]))), ")"), isTitleField && /*#__PURE__*/React.createElement(React.Fragment, null, "(", t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["entry title"]))), ")"))), /*#__PURE__*/React.createElement(Actions, null, /*#__PURE__*/React.createElement(IconButton, {
     "data-testid": "cms.editor.edit-field",
     icon: /*#__PURE__*/React.createElement(EditIcon, null),
     onClick: function onClick() {

package/admin/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export { default as useCms } from "./useCms";
 export { default as useQuery } from "./useQuery";
+export * from "./useQueryLocale";
 export { default as useLazyQuery } from "./useLazyQuery";
 export { default as useMutation } from "./useMutation";
 export { default as useApolloClient } from "./useApolloClient";

package/admin/hooks/index.js

@@ -1,5 +1,6 @@
 export { default as useCms } from "./useCms";
 export { default as useQuery } from "./useQuery";
+export * from "./useQueryLocale";
 export { default as useLazyQuery } from "./useLazyQuery";
 export { default as useMutation } from "./useMutation";
 export { default as useApolloClient } from "./useApolloClient";

package/admin/hooks/useQueryLocale.d.ts

@@ -0,0 +1,2 @@
+import { DocumentNode } from "graphql";
+export declare const useQueryLocale: (query: DocumentNode, locale: string, options?: {}) => import("@apollo/react-common").QueryResult<any, Record<string, any>>;

package/admin/hooks/useQueryLocale.js

@@ -0,0 +1,15 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import useCms from "./useCms";
+import { useQuery as apolloUseQuery } from "@apollo/react-hooks";
+export var useQueryLocale = function useQueryLocale(query, locale) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+  var _useCms = useCms(),
+      getApolloClient = _useCms.getApolloClient;
+
+  var client = getApolloClient(locale);
+  return apolloUseQuery(query, _objectSpread({
+    client: client,
+    skip: !client
+  }, options));
+};

package/admin/icons/clone.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes" display="none">
+	<path display="inline" fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Rounded">
+	<path d="M3,6L3,6C2.45,6,2,6.45,2,7v13c0,1.1,0.9,2,2,2h13c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H5c-0.55,0-1-0.45-1-1V7
+		C4,6.45,3.55,6,3,6z M20,2H8C6.9,2,6,2.9,6,4v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M18,11h-3v3
+		c0,0.55-0.45,1-1,1h0c-0.55,0-1-0.45-1-1v-3h-3c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h3V6c0-0.55,0.45-1,1-1h0c0.55,0,1,0.45,1,1
+		v3h3c0.55,0,1,0.45,1,1v0C19,10.55,18.55,11,18,11z"/>
+</g>
+</svg>

package/admin/plugins/transformers/dateTransformer.js

@@ -13,6 +13,10 @@ var throwTransformError = function throwTransformError(params) {
 };
 
 var dateOnly = function dateOnly(value) {
+  if (!value) {
+    return new Date().toISOString().substr(0, 10);
+  }
+
   try {
     var date = new Date(value).toISOString();
     return date.substr(0, 10);
@@ -28,7 +32,9 @@ var dateOnly = function dateOnly(value) {
 var extractTimeZone = function extractTimeZone(value) {
   var result;
 
-  if (value.includes("+")) {
+  if (!value) {
+    return [new Date().toISOString(), "00:00"];
+  } else if (value.includes("+")) {
     result = value.split("+");
   } else {
     result = value.split("-");
@@ -44,7 +50,9 @@ var extractTimeZone = function extractTimeZone(value) {
 };
 
 var extractTime = function extractTime(value) {
-  if (value.includes(":") === false) {
+  if (!value) {
+    return "00:00:00";
+  } else if (value.includes(":") === false) {
     throw new WebinyError("Time value is missing : separators.", "TIME_ERROR", {
       value: value
     });
@@ -60,7 +68,11 @@ var extractTime = function extractTime(value) {
 };
 
 var dateTimeWithTimezone = function dateTimeWithTimezone(value) {
-  if (value.includes("T") === false) {
+  if (!value) {
+    var _date = new Date().toISOString();
+
+    return _date.replace(/\.([0-9]+)Z/, "+00:00");
+  } else if (value.includes("T") === false) {
     return value;
   }
 
@@ -91,7 +103,9 @@ var dateTimeWithTimezone = function dateTimeWithTimezone(value) {
 };
 
 var dateTimeWithoutTimezone = function dateTimeWithoutTimezone(value) {
-  if (value.includes(" ") === false) {
+  if (!value) {
+    return new Date().toISOString();
+  } else if (value.includes(" ") === false) {
     return value;
   }
 
@@ -106,8 +120,16 @@ var dateTimeWithoutTimezone = function dateTimeWithoutTimezone(value) {
   }
 };
 
+var time = function time(value) {
+  if (!value) {
+    return "00:00:00";
+  }
+
+  return extractTime(value);
+};
+
 var transformers = {
-  time: null,
+  time: time,
   date: dateOnly,
   dateTimeWithoutTimezone: dateTimeWithoutTimezone,
   dateTimeWithTimezone: dateTimeWithTimezone
@@ -120,12 +142,6 @@ export default (function () {
     transform: function transform(value, field) {
       // check types in packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/dateTimeField.tsx
       var type = field.settings.type;
-
-      if (!value) {
-        console.log("Field \"".concat(field.fieldId, "\" has no value."));
-        return null;
-      }
-
       var transform = transformers[type];
 
       if (!transform) {

package/admin/views/contentEntries/ContentEntry/prepareFormData.d.ts

@@ -1,2 +1,2 @@
 import { CmsEditorContentModel } from "../../../../types";
-export declare const prepareFormData: (data: Record<string, any>, model: CmsEditorContentModel) => Record<string, any>;
+export declare const prepareFormData: (input: Record<string, any>, model: CmsEditorContentModel) => Record<string, any>;

package/admin/views/contentEntries/ContentEntry/prepareFormData.js

@@ -63,17 +63,18 @@ var createTransformers = function createTransformers(fields) {
   return transformers;
 };
 
-export var prepareFormData = function prepareFormData(data, model) {
+export var prepareFormData = function prepareFormData(input, model) {
   var transformers = createTransformers(model.fields);
-  return Object.keys(data).reduce(function (acc, key) {
-    var value = data[key];
+  return Object.keys(transformers).reduce(function (output, key) {
+    var value = input[key];
+    var transform = transformers[key];
+    var transformedValue = transform(value);
 
-    if (!transformers[key]) {
-      acc[key] = value;
-      return acc;
+    if (transformedValue === undefined) {
+      return output;
     }
 
-    acc[key] = transformers[key](value);
-    return acc;
-  }, {});
+    output[key] = transformedValue;
+    return output;
+  }, input);
 };

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

@@ -0,0 +1,11 @@
+import React from "react";
+import * as UID from "@webiny/ui/Dialog";
+import { CmsEditorContentModel } from "../../../types";
+export interface Props {
+    open: boolean;
+    onClose: UID.DialogOnClose;
+    contentModel: CmsEditorContentModel;
+    closeModal: () => void;
+}
+declare const CloneContentModelDialog: React.FC<Props>;
+export default CloneContentModelDialog;

package/admin/views/contentModels/CloneContentModelDialog.js

@@ -0,0 +1,272 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback } from "react";
+import { css } from "emotion";
+import get from "lodash/get";
+import { useRouter } from "@webiny/react-router";
+import { Form } from "@webiny/form";
+import { Input } from "@webiny/ui/Input";
+import { Select } from "@webiny/ui/Select";
+import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import { CircularProgress } from "@webiny/ui/Progress";
+import { validation } from "@webiny/validation";
+import { useMutation, useQueryLocale } from "../../hooks";
+import { i18n } from "@webiny/app/i18n";
+import { ButtonDefault } from "@webiny/ui/Button";
+import * as UID from "@webiny/ui/Dialog";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { addModelToGroupCache, addModelToListCache } from "./cache";
+import * as GQL from "../../viewsGraphql";
+import { useI18N } from "@webiny/app-i18n/hooks/useI18N";
+var t = i18n.ns("app-headless-cms/admin/views/content-models/clone-content-model-dialog");
+var narrowDialog = /*#__PURE__*/css({
+  ".mdc-dialog__surface": {
+    width: 600,
+    minWidth: 600
+  }
+}, "label:narrowDialog;");
+var noPadding = /*#__PURE__*/css({
+  padding: "5px !important"
+}, "label:noPadding;");
+
+/**
+ * This list is to disallow creating models that might interfere with GraphQL schema creation.
+ * Add more if required.
+ */
+var disallowedModelIdEndingList = ["Response", "List", "Meta", "Input", "Sorter"];
+
+var getSelectedGroup = function getSelectedGroup(groups, model) {
+  if (groups.length === 0 || !model) {
+    return "";
+  }
+
+  var current = model.group.id;
+  var group = groups.find(function (g) {
+    return g.value === current;
+  });
+
+  if (group) {
+    return group.value;
+  }
+
+  var defaultSelected = groups.find(function () {
+    return true;
+  });
+  return defaultSelected ? defaultSelected.value : group.id;
+};
+
+var CloneContentModelDialog = function CloneContentModelDialog(_ref) {
+  var open = _ref.open,
+      onClose = _ref.onClose,
+      contentModel = _ref.contentModel,
+      closeModal = _ref.closeModal;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      loading = _React$useState2[0],
+      setLoading = _React$useState2[1];
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var _useRouter = useRouter(),
+      history = _useRouter.history;
+
+  var _useI18N = useI18N(),
+      getLocales = _useI18N.getLocales,
+      getCurrentLocale = _useI18N.getCurrentLocale,
+      setCurrentLocale = _useI18N.setCurrentLocale;
+
+  var currentLocale = getCurrentLocale();
+
+  var _React$useState3 = React.useState(currentLocale),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      locale = _React$useState4[0],
+      setLocale = _React$useState4[1];
+
+  var _useMutation = useMutation(GQL.CREATE_CONTENT_MODEL_FROM, {
+    onError: function onError(error) {
+      setLoading(false);
+      showSnackbar(error.message);
+    },
+    update: function update(cache, response) {
+      var _response$data$create = response.data.createContentModelFrom,
+          model = _response$data$create.data,
+          error = _response$data$create.error;
+
+      if (error) {
+        setLoading(false);
+        return showSnackbar(error.message);
+      }
+
+      if (currentLocale !== locale) {
+        setCurrentLocale(locale, "content");
+        window.location.reload();
+        return;
+      }
+
+      addModelToListCache(cache, model);
+      addModelToGroupCache(cache, model);
+      history.push("/cms/content-models/");
+      closeModal();
+    }
+  }),
+      _useMutation2 = _slicedToArray(_useMutation, 1),
+      createContentModelFrom = _useMutation2[0];
+
+  var _useQueryLocale = useQueryLocale(GQL.LIST_MENU_CONTENT_GROUPS_MODELS, locale, {
+    skip: !open
+  }),
+      data = _useQueryLocale.data,
+      loadingGroups = _useQueryLocale.loading;
+
+  var contentModelGroups = get(data, "listContentModelGroups.data", []).map(function (item) {
+    return {
+      value: item.id,
+      label: item.name
+    };
+  });
+  var selectedGroup = getSelectedGroup(contentModelGroups, contentModel);
+  var nameValidator = useCallback(function (name) {
+    var target = (name || "").trim();
+
+    if (!target.charAt(0).match(/[a-zA-Z]/)) {
+      throw new Error("Value is not valid - must not start with a number.");
+    }
+
+    if (target.toLowerCase() === "id") {
+      throw new Error('Value is not valid - "id" is an auto-generated field.');
+    }
+
+    var _iterator = _createForOfIteratorHelper(disallowedModelIdEndingList),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var ending = _step.value;
+        var re = new RegExp("".concat(ending, "$"), "i");
+        var matched = target.match(re);
+
+        if (matched === null) {
+          continue;
+        }
+
+        throw new Error("Model name that ends with \"".concat(ending, "\" is not allowed."));
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return true;
+  }, undefined);
+  var locales = getLocales().map(function (locale) {
+    return {
+      value: locale.code,
+      label: locale.code === currentLocale ? "Current locale" : locale.code
+    };
+  });
+  return /*#__PURE__*/React.createElement(UID.Dialog, {
+    open: open,
+    onClose: onClose,
+    className: narrowDialog,
+    "data-testid": "cms-clone-content-model-modal"
+  }, loadingGroups && /*#__PURE__*/React.createElement(CircularProgress, {
+    label: "Please wait while we load required information."
+  }), open && /*#__PURE__*/React.createElement(Form, {
+    data: {
+      group: selectedGroup,
+      locale: locale,
+      name: contentModel.name
+    },
+    onSubmit: /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                setLoading(true);
+                _context.next = 3;
+                return createContentModelFrom({
+                  variables: {
+                    modelId: contentModel.modelId,
+                    data: data
+                  }
+                });
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }()
+  }, function (_ref3) {
+    var Bind = _ref3.Bind,
+        submit = _ref3.submit;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement(CircularProgress, null), /*#__PURE__*/React.createElement(UID.DialogTitle, null, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Clone Content Model"])))), /*#__PURE__*/React.createElement(UID.DialogContent, null, /*#__PURE__*/React.createElement(Grid, {
+      className: noPadding
+    }, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "name",
+      validators: [validation.create("required,maxLength:100"), nameValidator]
+    }, /*#__PURE__*/React.createElement(Input, {
+      label: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Name"]))),
+      description: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["The name of the content model"])))
+    }))), /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "group",
+      validators: validation.create("required")
+    }, /*#__PURE__*/React.createElement(Select, {
+      description: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Choose a content model group"]))),
+      label: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Content model group"]))),
+      options: contentModelGroups
+    }))), /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "locale",
+      validators: validation.create("required"),
+      afterChange: function afterChange(value) {
+        if (!value) {
+          return;
+        }
+
+        setLocale(value);
+      }
+    }, /*#__PURE__*/React.createElement(Select, {
+      description: t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Choose a locale into which you wish to clone the model"]))),
+      label: t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Content model locale"]))),
+      options: locales
+    }))), /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "description"
+    }, function (props) {
+      return /*#__PURE__*/React.createElement(Input, Object.assign({}, props, {
+        rows: 4,
+        maxLength: 200,
+        characterCount: true,
+        label: t(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["Description"]))),
+        value: contentModel.description
+      }));
+    })))), /*#__PURE__*/React.createElement(UID.DialogActions, null, /*#__PURE__*/React.createElement(ButtonDefault, {
+      onClick: submit
+    }, "+ ", t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["Clone"]))))));
+  }));
+};
+
+export default CloneContentModelDialog;

package/admin/views/contentModels/ContentModels.js

@@ -6,6 +6,7 @@ import ContentModelsDataList from "./ContentModelsDataList";
 import NewContentModelDialog from "./NewContentModelDialog";
 import { Cell } from "@webiny/ui/Grid";
 import { Grid } from "@webiny/ui/Grid";
+import CloneContentModelDialog from "./CloneContentModelDialog";
 var grid = /*#__PURE__*/css({
   "&.mdc-layout-grid": {
     padding: 0,
@@ -39,6 +40,11 @@ function ContentModels() {
       newContentModelDialogOpened = _React$useState2[0],
       openNewContentModelDialog = _React$useState2[1];
 
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      cloneContentModel = _React$useState4[0],
+      setCloneContentModel = _React$useState4[1];
+
   var _useSecurity = useSecurity(),
       identity = _useSecurity.identity;
 
@@ -55,15 +61,29 @@ function ContentModels() {
 
     return permission.rwd.includes("w");
   }, []);
+  var closeModal = useCallback(function () {
+    setCloneContentModel(null);
+  }, []);
   var onCreate = useCallback(function () {
     return openNewContentModelDialog(true);
   }, []);
   var onClose = useCallback(function () {
     return openNewContentModelDialog(false);
   }, []);
+  var onClone = useCallback(function (contentModel) {
+    return setCloneContentModel(contentModel);
+  }, []);
+  var onCloneClose = useCallback(function () {
+    return setCloneContentModel(null);
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NewContentModelDialog, {
     open: newContentModelDialogOpened,
     onClose: onClose
+  }), /*#__PURE__*/React.createElement(CloneContentModelDialog, {
+    open: !!cloneContentModel,
+    contentModel: cloneContentModel,
+    onClose: onCloneClose,
+    closeModal: closeModal
   }), /*#__PURE__*/React.createElement(Grid, {
     className: grid
   }, /*#__PURE__*/React.createElement(Cell, {
@@ -73,7 +93,8 @@ function ContentModels() {
     className: centeredContent
   }, /*#__PURE__*/React.createElement(ContentModelsDataList, {
     canCreate: canCreate,
-    onCreate: onCreate
+    onCreate: onCreate,
+    onClone: onClone
   })), /*#__PURE__*/React.createElement(Cell, {
     span: 3
   })));

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

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { CmsEditorContentModel } from "../../../types";
 declare type ContentModelsDataListProps = {
     canCreate: boolean;
     onCreate: () => void;
+    onClone: (contentModel: CmsEditorContentModel) => void;
 };
-declare const ContentModelsDataList: ({ canCreate, onCreate }: ContentModelsDataListProps) => JSX.Element;
+declare const ContentModelsDataList: ({ canCreate, onCreate, onClone }: ContentModelsDataListProps) => JSX.Element;
 export default ContentModelsDataList;

package/admin/views/contentModels/ContentModelsDataList.js

@@ -2,7 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useCallback, useMemo, useState } from "react";
@@ -12,6 +12,7 @@ import get from "lodash/get";
 import { useRouter } from "@webiny/react-router";
 import { DeleteIcon, EditIcon } from "@webiny/ui/List/DataList/icons";
 import { ReactComponent as ViewListIcon } from "@svgr/webpack!../../icons/view_list.svg";
+import { ReactComponent as CloneIcon } from "@svgr/webpack!../../icons/clone.svg";
 import { useApolloClient, useQuery } from "../../hooks";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import * as UIL from "@webiny/ui/List";
@@ -61,7 +62,8 @@ var listItemMinHeight = /*#__PURE__*/css({
 
 var ContentModelsDataList = function ContentModelsDataList(_ref) {
   var canCreate = _ref.canCreate,
-      onCreate = _ref.onCreate;
+      onCreate = _ref.onCreate,
+      onClone = _ref.onClone;
 
   var _useState = useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -259,14 +261,24 @@ var ContentModelsDataList = function ContentModelsDataList(_ref) {
           return editRecord(contentModel);
         },
         "data-testid": "cms-edit-content-model-button"
-      }))), canDelete(contentModel, "cms.contentModel") && contentModel.plugin ? /*#__PURE__*/React.createElement(Tooltip, {
-        content: t(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["Content model is registered via a plugin."]))),
+      }))), /*#__PURE__*/React.createElement(Tooltip, {
+        content: "Clone content model",
+        placement: "top"
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        "data-testid": "cms-clone-content-model-button",
+        icon: /*#__PURE__*/React.createElement(CloneIcon, null),
+        label: t(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["View entries"]))),
+        onClick: function onClick() {
+          return onClone(contentModel);
+        }
+      })), canDelete(contentModel, "cms.contentModel") && contentModel.plugin ? /*#__PURE__*/React.createElement(Tooltip, {
+        content: t(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["Content model is registered via a plugin."]))),
         placement: "top"
       }, /*#__PURE__*/React.createElement(DeleteIcon, {
         disabled: true,
         "data-testid": "cms-delete-content-model-button"
       })) : /*#__PURE__*/React.createElement(Tooltip, {
-        content: t(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["Delete content model"]))),
+        content: t(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["Delete content model"]))),
         placement: "top"
       }, /*#__PURE__*/React.createElement(DeleteIcon, {
         onClick: function onClick() {

package/admin/views/contentModels/NewContentModelDialog.js

@@ -63,6 +63,7 @@ var NewContentModelDialog = function NewContentModelDialog(_ref) {
           error = _data$createContentMo.error;
 
       if (error) {
+        setLoading(false);
         return showSnackbar(error.message);
       }
 

package/admin/viewsGraphql.d.ts

@@ -1,4 +1,5 @@
 export declare const LIST_MENU_CONTENT_GROUPS_MODELS: import("graphql").DocumentNode;
 export declare const LIST_CONTENT_MODELS: import("graphql").DocumentNode;
 export declare const CREATE_CONTENT_MODEL: import("graphql").DocumentNode;
+export declare const CREATE_CONTENT_MODEL_FROM: import("graphql").DocumentNode;
 export declare const DELETE_CONTENT_MODEL: import("graphql").DocumentNode;

package/admin/viewsGraphql.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import gql from "graphql-tag";
 var ERROR_FIELDS = "\n    code\n    message\n    data\n";
@@ -9,4 +9,5 @@ var BASE_CONTENT_MODEL_FIELDS = "\n    description\n    modelId\n    name\n    s
 export var LIST_MENU_CONTENT_GROUPS_MODELS = gql(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    query CmsListMenuContentGroupsModels {\n        listContentModelGroups {\n            data {\n                id\n                name\n                icon\n                plugin\n                contentModels {\n                    name\n                    modelId\n                    plugin\n                    createdBy {\n                        id\n                        displayName\n                        type\n                    }\n                }\n            }\n        }\n    }\n"])));
 export var LIST_CONTENT_MODELS = gql(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    query CmsListContentModels {\n        listContentModels {\n            data {\n                ", "\n            }\n        }\n    }\n"])), BASE_CONTENT_MODEL_FIELDS);
 export var CREATE_CONTENT_MODEL = gql(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    mutation CmsCreateContentModel($data: CmsContentModelCreateInput!) {\n        createContentModel(data: $data) {\n            data {\n                ", "\n            }\n            error {\n                message\n                data\n            }\n        }\n    }\n"])), BASE_CONTENT_MODEL_FIELDS);
-export var DELETE_CONTENT_MODEL = gql(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    mutation CmsDeleteContentModel($modelId: ID!) {\n        deleteContentModel(modelId: $modelId) {\n            data\n            error {\n                ", "\n            }\n        }\n    }\n"])), ERROR_FIELDS);
+export var CREATE_CONTENT_MODEL_FROM = gql(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    mutation CmsCreateContentModelFrom($modelId: ID!, $data: CmsContentModelCreateFromInput!) {\n        createContentModelFrom(modelId: $modelId, data: $data) {\n            data {\n                ", "\n            }\n            error {\n                message\n                data\n            }\n        }\n    }\n"])), BASE_CONTENT_MODEL_FIELDS);
+export var DELETE_CONTENT_MODEL = gql(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    mutation CmsDeleteContentModel($modelId: ID!) {\n        deleteContentModel(modelId: $modelId) {\n            data\n            error {\n                ", "\n            }\n        }\n    }\n"])), ERROR_FIELDS);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/app-headless-cms",
-	"version": "5.19.1-beta.0",
+	"version": "5.20.0-beta.2",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -24,19 +24,19 @@
 		"@fortawesome/react-fontawesome": "0.1.16",
 		"@svgr/webpack": "4.3.3",
 		"@types/react": "16.14.2",
-		"@webiny/app": "5.19.1-beta.0",
-		"@webiny/app-admin": "5.19.1-beta.0",
-		"@webiny/app-graphql-playground": "5.19.1-beta.0",
-		"@webiny/app-i18n": "5.19.1-beta.0",
-		"@webiny/app-plugin-admin-welcome-screen": "5.19.1-beta.0",
-		"@webiny/app-security": "5.19.1-beta.0",
-		"@webiny/error": "5.19.1-beta.0",
-		"@webiny/form": "5.19.1-beta.0",
-		"@webiny/plugins": "5.19.1-beta.0",
-		"@webiny/react-router": "5.19.1-beta.0",
-		"@webiny/ui": "5.19.1-beta.0",
-		"@webiny/utils": "5.19.1-beta.0",
-		"@webiny/validation": "5.19.1-beta.0",
+		"@webiny/app": "5.20.0-beta.2",
+		"@webiny/app-admin": "5.20.0-beta.2",
+		"@webiny/app-graphql-playground": "5.20.0-beta.2",
+		"@webiny/app-i18n": "5.20.0-beta.2",
+		"@webiny/app-plugin-admin-welcome-screen": "5.20.0-beta.2",
+		"@webiny/app-security": "5.20.0-beta.2",
+		"@webiny/error": "5.20.0-beta.2",
+		"@webiny/form": "5.20.0-beta.2",
+		"@webiny/plugins": "5.20.0-beta.2",
+		"@webiny/react-router": "5.20.0-beta.2",
+		"@webiny/ui": "5.20.0-beta.2",
+		"@webiny/utils": "5.20.0-beta.2",
+		"@webiny/validation": "5.20.0-beta.2",
 		"apollo-cache": "1.3.5",
 		"apollo-client": "2.6.10",
 		"apollo-link": "1.2.14",
@@ -68,8 +68,8 @@
 		"@babel/preset-env": "^7.5.5",
 		"@babel/preset-react": "^7.0.0",
 		"@babel/preset-typescript": "^7.8.3",
-		"@webiny/cli": "^5.19.1-beta.0",
-		"@webiny/project-utils": "^5.19.1-beta.0",
+		"@webiny/cli": "^5.20.0-beta.2",
+		"@webiny/project-utils": "^5.20.0-beta.2",
 		"babel-plugin-emotion": "^9.2.8",
 		"babel-plugin-lodash": "^3.3.4",
 		"babel-plugin-module-resolver": "^4.1.0",
@@ -107,5 +107,5 @@
 			]
 		}
 	},
-	"gitHead": "c217ea1361f1d1536c6c4ee577579e1faca240eb"
+	"gitHead": "86c73ea3b5bf71372f255aa24ee8c6ed98466b7f"
 }