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

package/admin/views/contentEntries/ContentEntry/header/revisionSelector/RevisionSelector.js

@@ -0,0 +1,75 @@
+import _get from "lodash/get";
+import React from "react";
+import { css } from "emotion";
+import { useRouter } from "@webiny/react-router";
+import { ButtonDefault } from "@webiny/ui/Button";
+import { Icon } from "@webiny/ui/Icon";
+import { Typography } from "@webiny/ui/Typography";
+import { Menu, MenuItem } from "@webiny/ui/Menu";
+import { ReactComponent as DownButton } from "@svgr/webpack!../../../../../icons/round-arrow_drop_down-24px.svg";
+import { useContentEntry } from "../../../hooks/useContentEntry";
+import statusLabels from "../../../../../constants/statusLabels";
+var buttonStyle = /*#__PURE__*/css({
+  "&.mdc-button": {
+    color: "var(--mdc-theme-text-primary-on-background) !important"
+  }
+}, "label:buttonStyle;");
+var menuStyles = /*#__PURE__*/css({
+  width: 150,
+  right: 0,
+  ".mdc-list-item": {
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "baseline",
+    textAlign: "left"
+  }
+}, "label:menuStyles;");
+
+var RevisionSelector = function RevisionSelector() {
+  var _useContentEntry = useContentEntry(),
+      entry = _useContentEntry.entry,
+      revisions = _useContentEntry.revisions,
+      loading = _useContentEntry.loading;
+
+  var _useRouter = useRouter(),
+      location = _useRouter.location,
+      history = _useRouter.history;
+
+  var query = new URLSearchParams(location.search);
+  var currentRevision = {
+    version: _get(entry, "meta.version", 1),
+    status: _get(entry, "meta.status", "draft")
+  };
+  var allRevisions = revisions.length ? revisions : [{
+    id: "new",
+    meta: {
+      version: 1,
+      status: "draft"
+    }
+  }];
+  return /*#__PURE__*/React.createElement(Menu, {
+    className: menuStyles,
+    handle: /*#__PURE__*/React.createElement(ButtonDefault, {
+      className: buttonStyle,
+      disabled: loading
+    }, "v", currentRevision.version, " (", statusLabels[currentRevision.status], ")", " ", /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(DownButton, null)
+    }))
+  }, allRevisions.map(function (revision) {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      key: revision.id,
+      onClick: function onClick() {
+        query.set("id", encodeURIComponent(revision.id));
+        history.push({
+          search: query.toString()
+        });
+      }
+    }, /*#__PURE__*/React.createElement(Typography, {
+      use: "body2"
+    }, "v", revision.meta.version), /*#__PURE__*/React.createElement(Typography, {
+      use: "caption"
+    }, "(", statusLabels[revision.meta.status], ")"));
+  }));
+};
+
+export default RevisionSelector;

package/admin/views/contentEntries/ContentEntry/header/saveAndPublishContent/SaveAndPublishContent.d.ts

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

package/admin/views/contentEntries/ContentEntry/header/saveAndPublishContent/SaveAndPublishContent.js

@@ -0,0 +1,84 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React from "react";
+import { css } from "emotion";
+import { i18n } from "@webiny/app/i18n";
+import { ButtonPrimary } from "@webiny/ui/Button";
+import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
+import { useRevision } from "../../useRevision";
+import { useContentEntry } from "../../../hooks/useContentEntry";
+import usePermission from "../../../../../hooks/usePermission";
+var t = i18n.ns("app-headless-cms/admin/plugins/content-details/header/publish-revision");
+var buttonStyles = /*#__PURE__*/css({
+  marginLeft: 16
+}, "label:buttonStyles;");
+
+var SaveAndPublishButton = function SaveAndPublishButton() {
+  var _useContentEntry = useContentEntry(),
+      form = _useContentEntry.form,
+      loading = _useContentEntry.loading,
+      entry = _useContentEntry.entry;
+
+  var _useRevision = useRevision({
+    revision: entry
+  }),
+      publishRevision = _useRevision.publishRevision;
+
+  var _useConfirmationDialo = useConfirmationDialog({
+    title: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Publish content"]))),
+    message: /*#__PURE__*/React.createElement("p", null, t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["You are about to publish a new revision. Are you sure you want to continue?"])))),
+    dataTestId: "cms-confirm-save-and-publish"
+  }),
+      showConfirmation = _useConfirmationDialo.showConfirmation;
+
+  var _usePermission = usePermission(),
+      canEdit = _usePermission.canEdit,
+      canPublish = _usePermission.canPublish;
+
+  if (!canEdit(entry, "cms.contentEntry") || !canPublish("cms.contentEntry")) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(ButtonPrimary, {
+    className: buttonStyles,
+    onClick: function onClick() {
+      showConfirmation( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var entry;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return form.current.submit();
+
+              case 2:
+                entry = _context.sent;
+
+                if (entry) {
+                  _context.next = 5;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 5:
+                _context.next = 7;
+                return publishRevision(entry.id);
+
+              case 7:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      })));
+    },
+    disabled: loading
+  }, t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Save & Publish"]))));
+};
+
+export default SaveAndPublishButton;

package/admin/views/contentEntries/ContentEntry/header/saveContent/SaveContent.d.ts

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

package/admin/views/contentEntries/ContentEntry/header/saveContent/SaveContent.js

@@ -0,0 +1,32 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React from "react";
+import { i18n } from "@webiny/app/i18n";
+import { ButtonSecondary } from "@webiny/ui/Button";
+import { useContentEntry } from "../../../hooks/useContentEntry";
+import usePermission from "../../../../../hooks/usePermission";
+var t = i18n.ns("app-headless-cms/admin/plugins/content-details/header/publish-revision");
+
+var SaveContentButton = function SaveContentButton() {
+  var _useContentEntry = useContentEntry(),
+      form = _useContentEntry.form,
+      entry = _useContentEntry.entry;
+
+  var _usePermission = usePermission(),
+      canEdit = _usePermission.canEdit;
+
+  if (!canEdit(entry, "cms.contentEntry")) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(ButtonSecondary, {
+    "data-testid": "cms-content-save-content-button",
+    onClick: function onClick() {
+      return form.current.submit();
+    }
+  }, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Save"]))));
+};
+
+export default SaveContentButton;

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

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

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

@@ -0,0 +1,79 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper";
+import { plugins } from "@webiny/plugins";
+
+var getAvailableTransformerPlugins = function getAvailableTransformerPlugins() {
+  return plugins.byType("cms-field-value-transformer").reduce(function (transformers, pl) {
+    var fieldTypes = Array.isArray(pl.fieldType) ? pl.fieldType : [pl.fieldType];
+
+    var _iterator = _createForOfIteratorHelper(fieldTypes),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _fieldType = _step.value;
+
+        if (transformers[_fieldType]) {
+          console.warn("Transformer for field type \"".concat(_fieldType, "\" is already defined. There cannot be more than one transformer."));
+          continue;
+        }
+
+        transformers[_fieldType] = pl;
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return transformers;
+  }, {});
+};
+
+var createTransformers = function createTransformers(fields) {
+  var transformerPlugins = getAvailableTransformerPlugins();
+  var transformers = {};
+
+  var _iterator2 = _createForOfIteratorHelper(fields),
+      _step2;
+
+  try {
+    var _loop = function _loop() {
+      var field = _step2.value;
+
+      if (!transformerPlugins[field.type]) {
+        return "continue";
+      }
+
+      transformers[field.fieldId] = function (value) {
+        return transformerPlugins[field.type].transform(value, field);
+      };
+    };
+
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _ret = _loop();
+
+      if (_ret === "continue") continue;
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+
+  return transformers;
+};
+
+export var prepareFormData = function prepareFormData(data, model) {
+  var transformers = createTransformers(model.fields);
+  return Object.keys(data).reduce(function (acc, key) {
+    var value = data[key];
+
+    if (!transformers[key]) {
+      acc[key] = value;
+      return acc;
+    }
+
+    acc[key] = transformers[key](value);
+    return acc;
+  }, {});
+};

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

@@ -0,0 +1,13 @@
+import { CmsEditorContentEntry } from "../../../../types";
+export declare type UseRevisionProps = {
+    revision: CmsEditorContentEntry;
+};
+export declare const useRevision: ({ revision }: UseRevisionProps) => {
+    createRevision: (...params: any[]) => any;
+    editRevision: (...params: any[]) => any;
+    deleteRevision: (...params: any[]) => any;
+    publishRevision: (...params: any[]) => any;
+    unpublishRevision: (...params: any[]) => any;
+    requestReview: (...params: any[]) => any;
+    requestChanges: (...params: any[]) => any;
+};

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

@@ -0,0 +1,335 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useMemo } from "react";
+import { useRouter } from "@webiny/react-router";
+import { useHandlers } from "@webiny/app/hooks/useHandlers";
+import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import * as GQL from "../../../graphql/contentEntries";
+import * as GQLCache from "./cache";
+import { useApolloClient } from "../../../hooks";
+import { useContentEntry } from "../hooks/useContentEntry";
+export var useRevision = function useRevision(_ref) {
+  var revision = _ref.revision;
+
+  var _useContentEntry = useContentEntry(),
+      contentModel = _useContentEntry.contentModel,
+      entry = _useContentEntry.entry,
+      setLoading = _useContentEntry.setLoading,
+      listQueryVariables = _useContentEntry.listQueryVariables;
+
+  var _useRouter = useRouter(),
+      history = _useRouter.history;
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var client = useApolloClient();
+  var modelId = contentModel.modelId;
+
+  var _useMemo = useMemo(function () {
+    return {
+      CREATE_REVISION: GQL.createCreateFromMutation(contentModel),
+      DELETE_REVISION: GQL.createDeleteMutation(contentModel),
+      PUBLISH_REVISION: GQL.createPublishMutation(contentModel),
+      UNPUBLISH_REVISION: GQL.createUnpublishMutation(contentModel),
+      REQUEST_REVIEW: GQL.createRequestReviewMutation(contentModel),
+      REQUEST_CHANGES: GQL.createRequestChangesMutation(contentModel)
+    };
+  }, [modelId]),
+      CREATE_REVISION = _useMemo.CREATE_REVISION,
+      DELETE_REVISION = _useMemo.DELETE_REVISION,
+      PUBLISH_REVISION = _useMemo.PUBLISH_REVISION,
+      UNPUBLISH_REVISION = _useMemo.UNPUBLISH_REVISION,
+      REQUEST_REVIEW = _useMemo.REQUEST_REVIEW,
+      REQUEST_CHANGES = _useMemo.REQUEST_CHANGES;
+
+  var _useHandlers = useHandlers({
+    entry: entry
+  }, {
+    createRevision: function createRevision() {
+      return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _yield$client$mutate, res, _res$content, data, error;
+
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                setLoading(true);
+                _context.next = 3;
+                return client.mutate({
+                  mutation: CREATE_REVISION,
+                  variables: {
+                    revision: revision.id
+                  },
+                  update: function update(cache, _ref3) {
+                    var data = _ref3.data;
+                    var newRevision = data.content.data;
+                    GQLCache.updateLatestRevisionInListCache(contentModel, cache, newRevision, listQueryVariables);
+                    GQLCache.addRevisionToRevisionsCache(contentModel, cache, newRevision);
+                  }
+                });
+
+              case 3:
+                _yield$client$mutate = _context.sent;
+                res = _yield$client$mutate.data;
+                setLoading(false);
+                _res$content = res.content, data = _res$content.data, error = _res$content.error;
+
+                if (!error) {
+                  _context.next = 9;
+                  break;
+                }
+
+                return _context.abrupt("return", showSnackbar(error.message));
+
+              case 9:
+                history.push("/cms/content-entries/".concat(modelId, "?id=").concat(encodeURIComponent(data.id)));
+
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+    },
+    editRevision: function editRevision() {
+      return function () {
+        history.push("/cms/content-entries/".concat(modelId, "/?id=").concat(encodeURIComponent(revision.id)));
+      };
+    },
+    deleteRevision: function deleteRevision(_ref4) {
+      var entry = _ref4.entry;
+      return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                setLoading(true);
+                _context2.next = 3;
+                return client.mutate({
+                  mutation: DELETE_REVISION,
+                  variables: {
+                    revision: revision.id
+                  },
+                  update: function update(cache, _ref6) {
+                    var data = _ref6.data;
+                    var error = data.content.error;
+
+                    if (error) {
+                      return showSnackbar(error.message);
+                    } // We have other revisions, update entry's cache
+
+
+                    // We have other revisions, update entry's cache
+                    var revisions = GQLCache.removeRevisionFromEntryCache(contentModel, cache, revision);
+
+                    if (revision.id === entry.id) {
+                      GQLCache.updateLatestRevisionInListCache(contentModel, cache, revisions[0], listQueryVariables); // Redirect to the first revision in the list of all entry revisions.
+
+                      // Redirect to the first revision in the list of all entry revisions.
+                      return history.push("/cms/content-entries/".concat(modelId, "?id=") + encodeURIComponent(revisions[0].id));
+                    }
+                  }
+                });
+
+              case 3:
+                setLoading(false);
+
+              case 4:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+    },
+    publishRevision: function publishRevision() {
+      return /*#__PURE__*/function () {
+        var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(id) {
+          return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+            while (1) {
+              switch (_context3.prev = _context3.next) {
+                case 0:
+                  setLoading(true);
+                  _context3.next = 3;
+                  return client.mutate({
+                    mutation: PUBLISH_REVISION,
+                    variables: {
+                      revision: id || revision.id
+                    },
+                    update: function update(cache, _ref8) {
+                      var data = _ref8.data;
+                      var _data$content = data.content,
+                          published = _data$content.data,
+                          error = _data$content.error;
+
+                      if (error) {
+                        return showSnackbar(error.message);
+                      }
+
+                      GQLCache.unpublishPreviouslyPublishedRevision(contentModel, cache, published.id);
+                      showSnackbar( /*#__PURE__*/React.createElement("span", null, "Successfully published revision", " ", /*#__PURE__*/React.createElement("strong", null, "#", published.meta.version), "!"));
+                    }
+                  });
+
+                case 3:
+                  setLoading(false);
+
+                case 4:
+                case "end":
+                  return _context3.stop();
+              }
+            }
+          }, _callee3);
+        }));
+
+        return function (_x) {
+          return _ref7.apply(this, arguments);
+        };
+      }();
+    },
+    unpublishRevision: function unpublishRevision() {
+      return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+        var _yield$client$mutate2, data, error;
+
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                setLoading(true);
+                _context4.next = 3;
+                return client.mutate({
+                  mutation: UNPUBLISH_REVISION,
+                  variables: {
+                    revision: revision.id
+                  }
+                });
+
+              case 3:
+                _yield$client$mutate2 = _context4.sent;
+                data = _yield$client$mutate2.data;
+                setLoading(false);
+                error = data.content.error;
+
+                if (!error) {
+                  _context4.next = 9;
+                  break;
+                }
+
+                return _context4.abrupt("return", showSnackbar(error.message));
+
+              case 9:
+                showSnackbar( /*#__PURE__*/React.createElement("span", null, "Successfully unpublished revision ", /*#__PURE__*/React.createElement("strong", null, "#", revision.meta.version), "!"));
+
+              case 10:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+    },
+    requestReview: function requestReview() {
+      return /*#__PURE__*/function () {
+        var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(id) {
+          return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+            while (1) {
+              switch (_context5.prev = _context5.next) {
+                case 0:
+                  setLoading(true);
+                  _context5.next = 3;
+                  return client.mutate({
+                    mutation: REQUEST_REVIEW,
+                    variables: {
+                      revision: id || revision.id
+                    },
+                    update: function update(_, _ref11) {
+                      var data = _ref11.data;
+                      var error = data.content.error;
+
+                      if (error) {
+                        return showSnackbar(error.message);
+                      }
+
+                      showSnackbar( /*#__PURE__*/React.createElement("span", null, "Review requested successfully!"));
+                    }
+                  });
+
+                case 3:
+                  setLoading(false);
+
+                case 4:
+                case "end":
+                  return _context5.stop();
+              }
+            }
+          }, _callee5);
+        }));
+
+        return function (_x2) {
+          return _ref10.apply(this, arguments);
+        };
+      }();
+    },
+    requestChanges: function requestChanges() {
+      return /*#__PURE__*/function () {
+        var _ref12 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(id) {
+          return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+            while (1) {
+              switch (_context6.prev = _context6.next) {
+                case 0:
+                  setLoading(true);
+                  _context6.next = 3;
+                  return client.mutate({
+                    mutation: REQUEST_CHANGES,
+                    variables: {
+                      revision: id || revision.id
+                    },
+                    update: function update(_, _ref13) {
+                      var data = _ref13.data;
+                      var error = data.content.error;
+
+                      if (error) {
+                        return showSnackbar(error.message);
+                      }
+
+                      showSnackbar( /*#__PURE__*/React.createElement("span", null, "Changes requested successfully!"));
+                    }
+                  });
+
+                case 3:
+                  setLoading(false);
+
+                case 4:
+                case "end":
+                  return _context6.stop();
+              }
+            }
+          }, _callee6);
+        }));
+
+        return function (_x3) {
+          return _ref12.apply(this, arguments);
+        };
+      }();
+    }
+  }),
+      createRevision = _useHandlers.createRevision,
+      editRevision = _useHandlers.editRevision,
+      deleteRevision = _useHandlers.deleteRevision,
+      publishRevision = _useHandlers.publishRevision,
+      unpublishRevision = _useHandlers.unpublishRevision,
+      requestReview = _useHandlers.requestReview,
+      requestChanges = _useHandlers.requestChanges;
+
+  return {
+    createRevision: createRevision,
+    editRevision: editRevision,
+    deleteRevision: deleteRevision,
+    publishRevision: publishRevision,
+    unpublishRevision: unpublishRevision,
+    requestReview: requestReview,
+    requestChanges: requestChanges
+  };
+};

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

@@ -0,0 +1,12 @@
+import React from "react";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "test-id": {
+                children?: React.ReactNode;
+            };
+        }
+    }
+}
+declare const ContentEntry: () => JSX.Element;
+export default ContentEntry;