@blaze-cms/plugin-data-ui 0.146.0-node18.1 → 0.146.0-rc-eagle-3.0

package/lib/components/EntityManager/Entity/Entity.js

@@ -1,38 +1,12 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.object.define-properties.js");
-require("core-js/modules/es.object.define-property.js");
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-require("core-js/modules/es.object.keys.js");
-require("core-js/modules/es.string.iterator.js");
-require("core-js/modules/es.weak-map.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-require("core-js/modules/es.array.concat.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.find-index.js");
-require("core-js/modules/es.array.for-each.js");
-require("core-js/modules/es.array.includes.js");
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.array.map.js");
-require("core-js/modules/es.array.slice.js");
-require("core-js/modules/es.function.name.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.string.includes.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/web.dom-collections.iterator.js");
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
 var _client = require("@apollo/client");
@@ -44,134 +18,78 @@ var _admin = require("@blaze-cms/admin");
 var _toaster = require("@blaze-react/toaster");
 var _lodash = _interopRequireDefault(require("lodash.clonedeep"));
 var _dataMappers = require("../utils/data-mappers");
-var _isFormEmpty = _interopRequireDefault(require("../utils/is-form-empty"));
 var _actionsHandlers = _interopRequireDefault(require("./actions-handlers"));
 var _SideBarRelations = _interopRequireDefault(require("./SideBarRelations"));
-var _Tabs = _interopRequireDefault(require("../../Tabs"));
 var _useCallbackDebounce = _interopRequireDefault(require("../../hooks/useCallbackDebounce"));
 var _constants = require("../../../constants");
 var _EntityHeader = _interopRequireDefault(require("./EntityHeader"));
 var _entity = require("../utils/entity");
-var _useToggle5 = _interopRequireDefault(require("../../../utils/hooks/useToggle"));
+var _useToggle = _interopRequireDefault(require("../../../utils/hooks/useToggle"));
 var _InfoBoxes = _interopRequireDefault(require("../../InfoBoxes/InfoBoxes"));
 var _RecordEditContext = require("../utils/RecordEditContext");
-var _excluded = ["isValid", "fields", "isNewValueSet", "valuesChecked", "currentField", "value"];
+const _excluded = ["isValid", "fields", "isNewValueSet", "valuesChecked", "currentField", "value"];
 /* eslint-disable no-undef */
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Entity = function Entity(_ref) {
-  var _schema$interfaces, _schema$interfaces2, _formData$values;
-  var formData = _ref.formData,
-    entity = _ref.entity,
-    schema = _ref.schema,
-    previousQuery = _ref.previousQuery,
-    action = _ref.action,
-    history = _ref.history,
-    updateFormData = _ref.updateFormData,
-    onViewUrl = _ref.onViewUrl,
-    refetchRecord = _ref.refetchRecord;
-  var client = (0, _client.useApolloClient)();
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    setCurrentTabId = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    formValues = _useState4[0],
-    setFormValues = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    entitySchema = _useState6[0],
-    setEntitySchema = _useState6[1];
-  var _useState7 = (0, _react.useState)(null),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    entityData = _useState8[0],
-    setEntityData = _useState8[1];
-  var _useState9 = (0, _react.useState)(null),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    entityIdentifier = _useState10[0],
-    setEntityIdentifier = _useState10[1];
-  var _useState11 = (0, _react.useState)(''),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    pageTitle = _useState12[0],
-    setPageTitle = _useState12[1];
-  var _useState13 = (0, _react.useState)(false),
-    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-    isSaveButtonAvailable = _useState14[0],
-    setIsSaveButtonAvailable = _useState14[1];
-  var _useState15 = (0, _react.useState)(formData && formData.values && formData.values.status),
-    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-    entityIsPublished = _useState16[0],
-    setEntityIsPublish = _useState16[1];
-  var _useState17 = (0, _react.useState)(false),
-    _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
-    isEnablePublishButton = _useState18[0],
-    setEnablePublishButton = _useState18[1];
-  var _useState19 = (0, _react.useState)(false),
-    _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
-    isEnablePreviewButton = _useState20[0],
-    setEnablePreviewButton = _useState20[1];
-  var _useToggle = (0, _useToggle5["default"])(false),
-    _useToggle2 = (0, _slicedToArray2["default"])(_useToggle, 2),
-    modalStatus = _useToggle2[0],
-    setModalStatus = _useToggle2[1];
-  var _useToggle3 = (0, _useToggle5["default"])(false),
-    _useToggle4 = (0, _slicedToArray2["default"])(_useToggle3, 2),
-    copyModalStatus = _useToggle4[0],
-    setCopyModalStatus = _useToggle4[1];
-  var _useState21 = (0, _react.useState)(true),
-    _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
-    pageBuilderTemplateStatus = _useState22[0],
-    setPageBuilderTemplateStatus = _useState22[1];
-  var _useState23 = (0, _react.useState)(false),
-    _useState24 = (0, _slicedToArray2["default"])(_useState23, 2),
-    shouldCopyData = _useState24[0],
-    setShouldCopyData = _useState24[1];
-  var _useState25 = (0, _react.useState)(false),
-    _useState26 = (0, _slicedToArray2["default"])(_useState25, 2),
-    isFormValid = _useState26[0],
-    setIsFormValid = _useState26[1];
-  var _useState27 = (0, _react.useState)(null),
-    _useState28 = (0, _slicedToArray2["default"])(_useState27, 2),
-    formDataFromCopy = _useState28[0],
-    setFormDataFromCopy = _useState28[1];
-  var _useState29 = (0, _react.useState)(null),
-    _useState30 = (0, _slicedToArray2["default"])(_useState29, 2),
-    newUpdatedDate = _useState30[0],
-    setNewUpdatedDate = _useState30[1];
-  var _useState31 = (0, _react.useState)(_constants.SAVE_BUTTON_TEXTS.save),
-    _useState32 = (0, _slicedToArray2["default"])(_useState31, 2),
-    saveButtonText = _useState32[0],
-    setSaveButtonText = _useState32[1];
-  var _useState33 = (0, _react.useState)(null),
-    _useState34 = (0, _slicedToArray2["default"])(_useState33, 2),
-    externalUpdateTime = _useState34[0],
-    setExternalUpdateTime = _useState34[1];
-  var isCreatePage = history.location.pathname.includes('create');
-  var _useState35 = (0, _react.useState)(isCreatePage),
-    _useState36 = (0, _slicedToArray2["default"])(_useState35, 2),
-    isNewEntity = _useState36[0],
-    setIsNewEntity = _useState36[1];
-  var shouldUpdateState = !entityIdentifier || (0, _entity.checkFulfilConditions)(entity, schema, previousQuery, !entityData) || entityData && entityData.id !== entity.id;
-  var clonedFormData = (0, _lodash["default"])(formData);
-  var _useToasts = (0, _toaster.useToasts)(),
-    addToast = _useToasts.addToast;
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const Entity = ({
+  formData,
+  entity,
+  schema,
+  previousQuery,
+  action,
+  history,
+  updateFormData,
+  onViewUrl,
+  refetchRecord
+}) => {
+  var _formData$values;
+  const [formValues, setFormValues] = (0, _react.useState)(null);
+  const [entitySchema, setEntitySchema] = (0, _react.useState)(null);
+  const [entityData, setEntityData] = (0, _react.useState)(null);
+  const [entityIdentifier, setEntityIdentifier] = (0, _react.useState)(null);
+  const [pageTitle, setPageTitle] = (0, _react.useState)('');
+  const [isSaveButtonAvailable, setIsSaveButtonAvailable] = (0, _react.useState)(false);
+  const [entityIsPublished, setEntityIsPublish] = (0, _react.useState)(formData && formData.values && formData.values.status);
+  const [isEnablePublishButton, setEnablePublishButton] = (0, _react.useState)(false);
+  const [isEnablePreviewButton, setEnablePreviewButton] = (0, _react.useState)(false);
+  const [modalStatus, setModalStatus] = (0, _useToggle.default)(false);
+  const [copyModalStatus, setCopyModalStatus] = (0, _useToggle.default)(false);
+  const [pageBuilderTemplateStatus, setPageBuilderTemplateStatus] = (0, _react.useState)(true);
+  const [shouldCopyData, setShouldCopyData] = (0, _react.useState)(false);
+  const [isFormValid, setIsFormValid] = (0, _react.useState)(false);
+  const [formDataFromCopy, setFormDataFromCopy] = (0, _react.useState)(null);
+  const [newUpdatedDate, setNewUpdatedDate] = (0, _react.useState)(null);
+  const [saveButtonText, setSaveButtonText] = (0, _react.useState)(_constants.SAVE_BUTTON_TEXTS.save);
+  const [externalUpdateTime, setExternalUpdateTime] = (0, _react.useState)(null);
+  const [suppressPrompt, setSuppressPrompt] = (0, _react.useState)(false);
+  const [isRightSidebarOpen, setIsRightSidebarOpen] = (0, _react.useState)(true);
+  const handleToggleRightSidebar = () => setIsRightSidebarOpen(!isRightSidebarOpen);
+  const isCreatePage = history.location.pathname.includes('create');
+  const [isNewEntity, setIsNewEntity] = (0, _react.useState)(isCreatePage);
+  const client = (0, _client.useApolloClient)();
+  const shouldUpdateState = !entityIdentifier || (0, _entity.checkFulfilConditions)(entity, schema, previousQuery, !entityData) || entityData && entityData.id !== entity.id;
+  const clonedFormData = (0, _lodash.default)(formData);
+  const {
+    addToast
+  } = (0, _toaster.useToasts)();
 
   // Here's how we'll keep track of our component's mounted state
-  var componentIsMounted = (0, _react.useRef)(true);
-  var _schema$displayProper = schema.displayProperties.saveOnChange,
-    saveOnChange = _schema$displayProper === void 0 ? false : _schema$displayProper;
-  (0, _useCallbackDebounce["default"])(function () {
+  const componentIsMounted = (0, _react.useRef)(true);
+  const {
+    displayProperties: {
+      saveOnChange = false
+    }
+  } = schema;
+  (0, _useCallbackDebounce.default)(() => {
     isSaveButtonAvailable && onSubmit();
   }, 500, [isSaveButtonAvailable], !saveOnChange);
-  (0, _react.useEffect)(function () {
-    return function () {
-      componentIsMounted.current = false;
-    };
+  (0, _react.useEffect)(() => () => {
+    componentIsMounted.current = false;
   }, []); // Using an empty dependency array ensures this only runs on unmount
 
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (shouldUpdateState) {
       setSaveButtonText(_constants.SAVE_BUTTON_TEXTS.save);
       setEntityData(entity);
@@ -183,7 +101,7 @@ var Entity = function Entity(_ref) {
       setEnablePreviewButton(!!schema.interfaces.includes(_constants.PREVIEW_INTERFACE));
     }
     if (formData && pageBuilderTemplateStatus) {
-      var isPageBuilderTemplateSet = !!formData.values.pageBuilderTemplateId;
+      const isPageBuilderTemplateSet = !!formData.values.pageBuilderTemplateId;
       client.writeQuery({
         query: (0, _adminUiUtils.getQuery)('GET_PB_TEMPLATE_STATUS'),
         data: {
@@ -196,60 +114,45 @@ var Entity = function Entity(_ref) {
       client.writeQuery({
         query: (0, _adminUiUtils.getQuery)('GET_CURRENT_ENTITY'),
         data: {
-          currentEntity: schema.id
+          currentEntity: schema.id,
+          currentItemId: entity ? entity.id : null
         }
       });
     }
   }, [client, entity, entityData, formData, formValues, pageBuilderTemplateStatus, previousQuery, schema, shouldUpdateState]);
-  var getFullUrl = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-      var query, _yield$client$query, _yield$client$query$d, _yield$client$query$d2, _yield$client$query$d3, getEntityUrl;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            query = (0, _adminUiUtils.getQuery)('GET_ENTITY_URL');
-            _context.next = 3;
-            return client.query({
-              query: query,
-              variables: {
-                itemId: entity.id,
-                itemEntity: schema.id,
-                fullUrl: true
-              },
-              fetchPolicy: 'network-only'
-            });
-          case 3:
-            _yield$client$query = _context.sent;
-            _yield$client$query$d = _yield$client$query.data;
-            _yield$client$query$d2 = _yield$client$query$d === void 0 ? {} : _yield$client$query$d;
-            _yield$client$query$d3 = _yield$client$query$d2.getEntityUrl;
-            getEntityUrl = _yield$client$query$d3 === void 0 ? '' : _yield$client$query$d3;
-            return _context.abrupt("return", getEntityUrl);
-          case 9:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function getFullUrl() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var getFormValues = function getFormValues(values) {
+  const getFullUrl = async () => {
+    const query = (0, _adminUiUtils.getQuery)('GET_ENTITY_URL');
+    const {
+      data: {
+        getEntityUrl = ''
+      } = {}
+    } = await client.query({
+      query,
+      variables: {
+        itemId: entity.id,
+        itemEntity: schema.id,
+        fullUrl: true
+      },
+      fetchPolicy: 'network-only'
+    });
+    return getEntityUrl;
+  };
+  const getFormValues = values => {
     if (componentIsMounted.current) {
       setFormValues(values);
     }
   };
-  var onChangeSideBarRelations = function onChangeSideBarRelations(_ref3, requiredChildField) {
-    var id = _ref3.id,
-      value = _ref3.value;
-    var updatedFormValues = (0, _entity.getUpdatedFormValues)({
-      id: id,
-      value: value,
-      requiredChildField: requiredChildField,
-      formValues: formValues
+  const onChangeSideBarRelations = ({
+    id,
+    value
+  }, requiredChildField) => {
+    const updatedFormValues = (0, _entity.getUpdatedFormValues)({
+      id,
+      value,
+      requiredChildField,
+      formValues
     });
-    var shouldActiveSaveButton = (0, _entity.validateSideBarRelations)(updatedFormValues, requiredChildField);
+    const shouldActiveSaveButton = (0, _entity.validateSideBarRelations)(updatedFormValues, requiredChildField);
     if (isFormValid && shouldActiveSaveButton && componentIsMounted.current) {
       setIsSaveButtonAvailable(true);
       setSaveButtonText(_constants.SAVE_BUTTON_TEXTS.save);
@@ -260,174 +163,143 @@ var Entity = function Entity(_ref) {
       setFormValues(updatedFormValues);
     }
   };
-  var onChangeFormValues = /*#__PURE__*/function () {
-    var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(_ref4) {
-      var isValid, fields, isNewValueSet, valuesChecked, currentField, fieldValue, otherProps, updatedFormValues, pageBuilderTemplateId, pageBuilder, _yield$client$query2, _yield$client$query2$, data, itemsToAdd, _fields$filter, _fields$filter2, _fields$filter2$, updatedEntity, isValidAndNewValueSet, isNotValidOrNotNewValueSet;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            isValid = _ref4.isValid, fields = _ref4.fields, isNewValueSet = _ref4.isNewValueSet, valuesChecked = _ref4.valuesChecked, currentField = _ref4.currentField, fieldValue = _ref4.value, otherProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
-            updatedFormValues = valuesChecked ? valuesChecked.slice() : [];
-            if (!(currentField === _constants.PAGE_BUILDER_TEMPLATE_FIELD_ID)) {
-              _context2.next = 14;
-              break;
-            }
-            pageBuilderTemplateId = fieldValue;
-            client.writeQuery({
-              query: (0, _adminUiUtils.getQuery)('GET_PB_TEMPLATE_STATUS'),
-              data: {
-                pageBuilderTemplateSet: !!pageBuilderTemplateId,
-                pageBuilderTemplateId: pageBuilderTemplateId
-              }
-            });
-            if (componentIsMounted.current) {
-              setPageBuilderTemplateStatus(false);
-            }
-            pageBuilder = updatedFormValues.filter(function (formValue) {
-              return formValue.id === _constants.PAGE_BUILDER_FIELD_ID;
-            });
-            if (!pageBuilderTemplateId) {
-              _context2.next = 14;
-              break;
-            }
-            _context2.next = 10;
-            return client.query({
-              query: (0, _adminUiUtils.getQuery)('MERGE_PB_TEMPLATE_CHANGES'),
-              variables: {
-                parent: {
-                  pageBuilder: pageBuilder[0].value,
-                  pageBuilderTemplateId: pageBuilderTemplateId
-                },
-                entityIdentifier: entityIdentifier
-              }
-            });
-          case 10:
-            _yield$client$query2 = _context2.sent;
-            _yield$client$query2$ = _yield$client$query2.data;
-            data = _yield$client$query2$ === void 0 ? {} : _yield$client$query2$;
-            if (data && data.mergePageBuilderTemplateChanges) {
-              updatedFormValues = updatedFormValues.map(function (updatedFormValue) {
-                if (updatedFormValue.id === _constants.PAGE_BUILDER_FIELD_ID) {
-                  return _objectSpread(_objectSpread({}, updatedFormValue), {}, {
-                    value: data.mergePageBuilderTemplateChanges
-                  });
-                }
-                return updatedFormValue;
-              });
-            }
-          case 14:
-            itemsToAdd = [];
-            if (formValues && formValues.length > updatedFormValues.length) {
-              [].concat((0, _toConsumableArray2["default"])(updatedFormValues), (0, _toConsumableArray2["default"])(formValues)).forEach(function (item) {
-                var index = updatedFormValues.findIndex(function (value) {
-                  return value.id === item.id;
-                });
-                if (index === -1) {
-                  itemsToAdd.push(item);
-                }
+  const onChangeFormValues = async _ref => {
+    let {
+        isValid,
+        fields,
+        isNewValueSet,
+        valuesChecked,
+        currentField,
+        value: fieldValue
+      } = _ref,
+      otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    let updatedFormValues = valuesChecked ? valuesChecked.slice() : [];
+    if (currentField === _constants.PAGE_BUILDER_TEMPLATE_FIELD_ID) {
+      const pageBuilderTemplateId = fieldValue;
+      client.writeQuery({
+        query: (0, _adminUiUtils.getQuery)('GET_PB_TEMPLATE_STATUS'),
+        data: {
+          pageBuilderTemplateSet: !!pageBuilderTemplateId,
+          pageBuilderTemplateId
+        }
+      });
+      if (componentIsMounted.current) {
+        setPageBuilderTemplateStatus(false);
+      }
+      const pageBuilder = updatedFormValues.filter(formValue => formValue.id === _constants.PAGE_BUILDER_FIELD_ID);
+      if (pageBuilderTemplateId) {
+        const {
+          data = {}
+        } = await client.query({
+          query: (0, _adminUiUtils.getQuery)('MERGE_PB_TEMPLATE_CHANGES'),
+          variables: {
+            parent: {
+              pageBuilder: pageBuilder[0].value,
+              pageBuilderTemplateId
+            },
+            entityIdentifier
+          }
+        });
+        if (data && data.mergePageBuilderTemplateChanges) {
+          updatedFormValues = updatedFormValues.map(updatedFormValue => {
+            if (updatedFormValue.id === _constants.PAGE_BUILDER_FIELD_ID) {
+              return _objectSpread(_objectSpread({}, updatedFormValue), {}, {
+                value: data.mergePageBuilderTemplateChanges
               });
             }
-            _fields$filter = fields.filter(function (_ref6) {
-              var id = _ref6.id;
-              return id === 'name';
-            }), _fields$filter2 = (0, _slicedToArray2["default"])(_fields$filter, 1), _fields$filter2$ = _fields$filter2[0], updatedEntity = _fields$filter2$ === void 0 ? null : _fields$filter2$;
-            updatedEntity && setPageTitle(updatedEntity.value);
-            isValidAndNewValueSet = isValid && isNewValueSet;
-            isNotValidOrNotNewValueSet = !isValid || !isNewValueSet;
-            if (componentIsMounted.current) {
-              setIsFormValid(isValid);
-            }
-            if (isValidAndNewValueSet && componentIsMounted.current) {
-              setIsSaveButtonAvailable(true);
-              setSaveButtonText(_constants.SAVE_BUTTON_TEXTS.save);
-            }
-            if (isNotValidOrNotNewValueSet && componentIsMounted.current) {
-              setIsSaveButtonAvailable(false);
-            }
-            if (componentIsMounted.current) {
-              setFormValues([].concat((0, _toConsumableArray2["default"])(updatedFormValues), itemsToAdd));
-            }
-          case 24:
-          case "end":
-            return _context2.stop();
+            return updatedFormValue;
+          });
         }
-      }, _callee2);
-    }));
-    return function onChangeFormValues(_x) {
-      return _ref5.apply(this, arguments);
-    };
-  }();
-  var onSubmit = function onSubmit(event) {
+      }
+    }
+    const itemsToAdd = [];
+    if (formValues && formValues.length > updatedFormValues.length) {
+      [...updatedFormValues, ...formValues].forEach(item => {
+        const index = updatedFormValues.findIndex(value => value.id === item.id);
+        if (index === -1) {
+          itemsToAdd.push(item);
+        }
+      });
+    }
+    const [updatedEntity = null] = fields.filter(({
+      id
+    }) => id === 'name');
+    updatedEntity && setPageTitle(updatedEntity.value);
+    const isNotValidOrNotNewValueSet = !isValid || !isNewValueSet;
+    if (componentIsMounted.current) {
+      setIsFormValid(isValid);
+    }
+    if (isValid && isNewValueSet && componentIsMounted.current) {
+      setIsSaveButtonAvailable(true);
+      setSaveButtonText(_constants.SAVE_BUTTON_TEXTS.save);
+    }
+    if (isNotValidOrNotNewValueSet && componentIsMounted.current) {
+      setIsSaveButtonAvailable(false);
+    }
+    if (componentIsMounted.current) {
+      setFormValues([...updatedFormValues, ...itemsToAdd]);
+    }
+  };
+  const onSubmit = event => {
     event && event.preventDefault();
     if (!isSaveButtonAvailable) return null;
-    var parsedFormValues = (0, _reactFormBuilder.parseFormValues)(formValues);
-    var updatedFormValues = newUpdatedDate ? _objectSpread(_objectSpread({}, formData.values), {}, {
+    if (isCreatePage) {
+      setSuppressPrompt(true);
+    }
+    const parsedFormValues = (0, _reactFormBuilder.parseFormValues)(formValues);
+    const updatedFormValues = newUpdatedDate ? _objectSpread(_objectSpread({}, formData.values), {}, {
       update: newUpdatedDate
     }) : _objectSpread({}, formData.values);
-    var handleUpdateFormData = function handleUpdateFormData() {
-      return updateFormData({
-        values: _objectSpread(_objectSpread({}, updatedFormValues), parsedFormValues)
-      }, true);
-    };
-    var submitParams = {
+    const handleUpdateFormData = () => updateFormData({
+      values: _objectSpread(_objectSpread({}, updatedFormValues), parsedFormValues)
+    }, true);
+    const submitParams = {
       update: {
-        entitySchema: entitySchema,
-        entityData: entityData,
-        parsedFormValues: parsedFormValues,
-        client: client,
-        setIsSaveButtonAvailable: setIsSaveButtonAvailable,
-        setNewUpdatedDate: setNewUpdatedDate,
-        newUpdatedDate: newUpdatedDate,
-        previousQuery: previousQuery,
-        setSaveButtonText: setSaveButtonText,
-        handleUpdateFormData: handleUpdateFormData
+        entitySchema,
+        entityData,
+        parsedFormValues,
+        client,
+        setIsSaveButtonAvailable,
+        setNewUpdatedDate,
+        newUpdatedDate,
+        previousQuery,
+        setSaveButtonText,
+        handleUpdateFormData
       },
       create: {
-        entitySchema: entitySchema,
-        parsedFormValues: parsedFormValues,
-        client: client,
-        setEntityData: setEntityData,
-        setIsSaveButtonAvailable: setIsSaveButtonAvailable,
-        history: history,
-        setIsNewEntity: setIsNewEntity,
-        setSaveButtonText: setSaveButtonText,
-        handleUpdateFormData: handleUpdateFormData
+        entitySchema,
+        parsedFormValues,
+        client,
+        setEntityData,
+        setIsSaveButtonAvailable,
+        history,
+        setIsNewEntity,
+        setSaveButtonText,
+        handleUpdateFormData
       }
     };
-    var currentAction = submitParams[action];
-    return _actionsHandlers["default"][action].submit(currentAction, addToast);
+    const currentAction = submitParams[action];
+    return _actionsHandlers.default[action].submit(currentAction, addToast);
   };
-  var onDelete = /*#__PURE__*/function () {
-    var _ref7 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-      var id;
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            id = formData.values.id;
-            if (componentIsMounted.current) {
-              setIsSaveButtonAvailable(false);
-            }
-            _context3.next = 4;
-            return _actionsHandlers["default"]["delete"].submit({
-              entitySchema: entitySchema,
-              client: client,
-              parsedFormValues: {
-                id: id
-              }
-            }, addToast);
-          case 4:
-            history.push("/data-listing/".concat(entitySchema.id));
-          case 5:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3);
-    }));
-    return function onDelete() {
-      return _ref7.apply(this, arguments);
-    };
-  }();
-  var onCopy = function onCopy() {
+  const onDelete = async () => {
+    const {
+      values: {
+        id
+      }
+    } = formData;
+    if (componentIsMounted.current) {
+      setIsSaveButtonAvailable(false);
+    }
+    await _actionsHandlers.default.delete.submit({
+      entitySchema,
+      client,
+      parsedFormValues: {
+        id
+      }
+    }, addToast);
+    history.push(`/data-listing/${entitySchema.id}`);
+  };
+  const onCopy = () => {
     if (formDataFromCopy && componentIsMounted.current) {
       updateFormData(formDataFromCopy);
       setShouldCopyData(true);
@@ -438,91 +310,65 @@ var Entity = function Entity(_ref) {
       }
     }
   };
-  var updateCopyData = function updateCopyData() {
+  const updateCopyData = () => {
     setCopyModalStatus(!copyModalStatus);
     setShouldCopyData(false);
   };
-  var handleCopyDataFromClose = function handleCopyDataFromClose() {
+  const handleCopyDataFromClose = () => {
     setCopyModalStatus(false);
     setFormDataFromCopy(null);
   };
-  var getFormData = function getFormData(formDataValues) {
-    var formDataUpdated = {
+  const getFormData = formDataValues => {
+    const formDataUpdated = {
       values: _objectSpread({}, formDataValues)
     };
     setFormDataFromCopy(formDataUpdated);
   };
-  var handlePublishAndUnpublish = /*#__PURE__*/function () {
-    var _ref9 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4(_ref8) {
-      var textContent, isPublishButton, isPublished, isUnpublish, savedPageMessage;
-      return _regenerator["default"].wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            textContent = _ref8.target.textContent;
-            isPublishButton = textContent === _constants.TEXT_CONTENT_TYPE;
-            isPublished = entityIsPublished === _constants.ENTITY_PUBLISHED;
-            isUnpublish = (0, _entity.checkFulfilConditions)(!isPublishButton, !isPublished);
-            if (!isUnpublish) {
-              _context4.next = 6;
-              break;
-            }
-            return _context4.abrupt("return", addToast(_constants.UNPUBLISHED_WARNING, {
-              appearance: 'warning',
-              autoDismiss: true
-            }));
-          case 6:
-            if (!(0, _entity.checkFulfilConditions)(isPublishButton, isSaveButtonAvailable)) {
-              _context4.next = 12;
-              break;
-            }
-            _context4.next = 9;
-            return onSubmit();
-          case 9:
-            savedPageMessage = _context4.sent;
-            if (!(savedPageMessage === _constants.ERROR)) {
-              _context4.next = 12;
-              break;
-            }
-            return _context4.abrupt("return", addToast("Content not published", {
-              appearance: _constants.ERROR,
-              autoDismiss: true
-            }));
-          case 12:
-            return _context4.abrupt("return", _actionsHandlers["default"].shared.triggerPublish({
-              entityData: entityData,
-              client: client,
-              setEntityIsPublish: setEntityIsPublish,
-              entitySchema: entitySchema,
-              textContent: textContent,
-              refetchRecord: refetchRecord
-            }, addToast));
-          case 13:
-          case "end":
-            return _context4.stop();
-        }
-      }, _callee4);
-    }));
-    return function handlePublishAndUnpublish(_x2) {
-      return _ref9.apply(this, arguments);
-    };
-  }();
-  var showModal = (0, _entity.checkFulfilConditions)(formData, modalStatus);
-  var onViewUrlHandler = (0, _entity.canViewPage)(formData, entity, schema, entityIsPublished) ? function () {
-    return (0, _entity.onViewUrlClick)(getFullUrl);
-  } : onViewUrl;
-  var pageName = formData && formData.values && formData.values.name;
-  var hasNewFormValues = (0, _entity.checkFulfilConditions)(isNewEntity, !(0, _isFormEmpty["default"])(formValues));
-  var hasToDisplayPrompt = isSaveButtonAvailable || hasNewFormValues;
-  var showSideBarRelations = (0, _entity.checkFulfilConditions)(schema, formData);
-  var showPageBuilderTabs = (schema === null || schema === void 0 ? void 0 : (_schema$interfaces = schema.interfaces) === null || _schema$interfaces === void 0 ? void 0 : _schema$interfaces.includes('page-builder/page-builder-template')) || (schema === null || schema === void 0 ? void 0 : (_schema$interfaces2 = schema.interfaces) === null || _schema$interfaces2 === void 0 ? void 0 : _schema$interfaces2.includes('page-builder/page-builder'));
-  return /*#__PURE__*/_react["default"].createElement(_RecordEditContext.RecordEditContextProvider, {
+  const handlePublishAndUnpublish = async ({
+    target: {
+      textContent
+    }
+  }) => {
+    const isPublishButton = textContent === _constants.TEXT_CONTENT_TYPE;
+    const isPublished = entityIsPublished === _constants.ENTITY_PUBLISHED;
+    const isUnpublish = (0, _entity.checkFulfilConditions)(!isPublishButton, !isPublished);
+    if (isUnpublish) {
+      return addToast(_constants.UNPUBLISHED_WARNING, {
+        appearance: 'warning',
+        autoDismiss: true
+      });
+    }
+    if ((0, _entity.checkFulfilConditions)(isPublishButton, isSaveButtonAvailable)) {
+      const savedPageMessage = await onSubmit();
+      if (savedPageMessage === _constants.ERROR) {
+        return addToast(`Content not published`, {
+          appearance: _constants.ERROR,
+          autoDismiss: true
+        });
+      }
+    }
+    return _actionsHandlers.default.shared.triggerPublish({
+      entityData,
+      client,
+      setEntityIsPublish,
+      entitySchema,
+      textContent,
+      refetchRecord
+    }, addToast);
+  };
+  const showModal = (0, _entity.checkFulfilConditions)(formData, modalStatus);
+  const onViewUrlHandler = (0, _entity.canViewPage)(entity, schema, entityIsPublished) ? () => (0, _entity.onViewUrlClick)(getFullUrl) : onViewUrl;
+  const pageName = formData && formData.values && formData.values.name;
+  const hasToDisplayPrompt = isSaveButtonAvailable && !suppressPrompt;
+  const showSideBarRelations = (0, _entity.checkFulfilConditions)(schema, formData);
+  return /*#__PURE__*/_react.default.createElement(_RecordEditContext.RecordEditContextProvider, {
     value: {
-      externalUpdateTime: externalUpdateTime,
+      externalUpdateTime,
       updated: formData === null || formData === void 0 ? void 0 : (_formData$values = formData.values) === null || _formData$values === void 0 ? void 0 : _formData$values.updated
     }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "page"
-  }, /*#__PURE__*/_react["default"].createElement(_EntityHeader["default"], {
+  }, /*#__PURE__*/_react.default.createElement(_EntityHeader.default, {
     entityData: entityData,
     entityIdentifier: entityIdentifier,
     pageTitle: pageTitle,
@@ -539,46 +385,35 @@ var Entity = function Entity(_ref) {
     saveButtonText: saveButtonText,
     saveOnChange: saveOnChange,
     entitySchema: entitySchema
-  }), /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "page-wrapper__content"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "tabs-wrapper tabs-wrapper__tab"
-  }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Prompt, {
+  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Prompt, {
     when: hasToDisplayPrompt,
     message: _constants.LEAVE_PAGE_MESSAGE
-  }), showModal && /*#__PURE__*/_react["default"].createElement(_admin.DeleteAction, {
+  }), showModal && /*#__PURE__*/_react.default.createElement(_admin.DeleteAction, {
     onClose: setModalStatus,
     deleteAction: onDelete,
     itemName: formData.values.name
-  }), copyModalStatus && /*#__PURE__*/_react["default"].createElement(_admin.CopyDataFromAction, {
+  }), copyModalStatus && /*#__PURE__*/_react.default.createElement(_admin.CopyDataFromAction, {
     onClose: handleCopyDataFromClose,
     copyAction: onCopy,
     getFormData: getFormData
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "page__content--fixed"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: `page__content${!isRightSidebarOpen ? ' right-sidebar-collapsed' : ''}`
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "page__content"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "content"
-  }, /*#__PURE__*/_react["default"].createElement(_pluginRenderHooksUi.RenderHook, {
-    hookKey: "entity:".concat(action, ":main:top"),
+  }, /*#__PURE__*/_react.default.createElement(_pluginRenderHooksUi.RenderHook, {
+    hookKey: `entity:${action}:main:top`,
     entity: entity,
     schema: schema
-  }), /*#__PURE__*/_react["default"].createElement(_InfoBoxes["default"], {
+  }), /*#__PURE__*/_react.default.createElement(_InfoBoxes.default, {
     id: entity.id,
     schema: schema
-  }), /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
-    enabled: showPageBuilderTabs,
-    onTabChange: function onTabChange(tabId) {
-      client.writeQuery({
-        query: _adminUiUtils.GET_CURRENT_TAB_ID,
-        data: {
-          currentTabId: tabId
-        }
-      });
-      setCurrentTabId(tabId);
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_reactFormBuilder.FormBuilder, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFormBuilder.FormBuilder, {
     getIsFormValid: setIsFormValid,
     getFormValues: getFormValues,
     schema: schema,
@@ -588,30 +423,33 @@ var Entity = function Entity(_ref) {
     updateCopyData: updateCopyData,
     formValues: formValues,
     isNewEntity: isNewEntity,
-    onExternalUpdate: setExternalUpdateTime
-  })), /*#__PURE__*/_react["default"].createElement(_pluginRenderHooksUi.RenderHook, {
-    hookKey: "entity:".concat(action, ":main:bottom"),
+    onExternalUpdate: setExternalUpdateTime,
+    mode: isNewEntity ? 'create' : 'update'
+  }), /*#__PURE__*/_react.default.createElement(_pluginRenderHooksUi.RenderHook, {
+    hookKey: `entity:${action}:main:bottom`,
     entity: entity,
     schema: schema
-  }))))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "column column--one-third page-sidebar page-sidebar--relations"
-  }, showSideBarRelations && /*#__PURE__*/_react["default"].createElement(_SideBarRelations["default"], {
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: `column column--one-third page-sidebar page-sidebar--relations${!isRightSidebarOpen ? ' sidebar--collapsed' : ''}`
+  }, showSideBarRelations && /*#__PURE__*/_react.default.createElement(_SideBarRelations.default, {
     entity: entity,
     formData: formData.values,
     schema: schema,
-    onChange: onChangeSideBarRelations
+    onChange: onChangeSideBarRelations,
+    isOpen: isRightSidebarOpen,
+    onToggle: handleToggleRightSidebar
   })))));
 };
 Entity.propTypes = {
-  entity: _propTypes["default"].object,
-  schema: _propTypes["default"].object,
-  previousQuery: _propTypes["default"].object,
-  action: _propTypes["default"].string.isRequired,
-  history: _propTypes["default"].object.isRequired,
-  formData: _propTypes["default"].object,
-  updateFormData: _propTypes["default"].func.isRequired,
-  onViewUrl: _propTypes["default"].func,
-  refetchRecord: _propTypes["default"].func.isRequired
+  entity: _propTypes.default.object,
+  schema: _propTypes.default.object,
+  previousQuery: _propTypes.default.object,
+  action: _propTypes.default.string.isRequired,
+  history: _propTypes.default.object.isRequired,
+  formData: _propTypes.default.object,
+  updateFormData: _propTypes.default.func.isRequired,
+  onViewUrl: _propTypes.default.func,
+  refetchRecord: _propTypes.default.func.isRequired
 };
 Entity.defaultProps = {
   previousQuery: null,
@@ -620,5 +458,5 @@ Entity.defaultProps = {
   formData: null,
   onViewUrl: null
 };
-var _default = exports["default"] = (0, _reactRouterDom.withRouter)(Entity);
+var _default = exports.default = (0, _reactRouterDom.withRouter)(Entity);
 //# sourceMappingURL=Entity.js.map