@webiny/app-headless-cms 5.22.0-beta.1 → 5.22.1-beta.0

package/admin/components/ContentEntryForm/useContentEntryForm.js

@@ -128,7 +128,10 @@ export function useContentEntryForm(params) {
                   }
 
                   resetInvalidFieldValues();
-                  GQLCache.addEntryToListCache(contentModel, cache, entry, listQueryVariables);
+
+                  if (typeof params.onSubmit !== "function") {
+                    GQLCache.addEntryToListCache(contentModel, cache, entry, listQueryVariables);
+                  }
                 }
               });
 
@@ -149,7 +152,13 @@ export function useContentEntryForm(params) {
             case 10:
               resetInvalidFieldValues();
               showSnackbar("".concat(contentModel.name, " entry created successfully!"));
-              goToRevision(entry.id);
+
+              if (typeof params.onSubmit === "function") {
+                params.onSubmit(entry);
+              } else {
+                goToRevision(entry.id);
+              }
+
               return _context.abrupt("return", entry);
 
             case 14:
@@ -243,7 +252,7 @@ export function useContentEntryForm(params) {
                   GQLCache.updateLatestRevisionInListCache(contentModel, cache, newRevision, listQueryVariables);
                   GQLCache.addRevisionToRevisionsCache(contentModel, cache, newRevision);
                   showSnackbar("A new revision was created!");
-                  history.push("/cms/content-entries/".concat(contentModel.modelId, "?id=").concat(encodeURIComponent(newRevision.id)));
+                  goToRevision(newRevision.id);
                 }
               });
 

package/admin/plugins/fieldRenderers/file/fileField.js

@@ -7,7 +7,6 @@ import { i18n } from "@webiny/app/i18n";
 import { Cell, Grid } from "@webiny/ui/Grid";
 import { FileManager } from "@webiny/app-admin/components";
 import File from "./File";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
 var t = i18n.ns("app-headless-cms/admin/fields/file");
 var plugin = {
   type: "cms-editor-field-renderer",
@@ -57,7 +56,7 @@ var plugin = {
             description: field.helpText
           }));
         });
-      }), field.helpText && /*#__PURE__*/React.createElement(FormElementMessage, null, field.helpText)));
+      })));
     }
   }
 };

package/admin/plugins/fieldRenderers/ref/components/MissingEntryHelpText.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const MissingEntryHelpText: React.FC<{
+    refModelId: string;
+}>;
+export default MissingEntryHelpText;

package/admin/plugins/fieldRenderers/ref/components/MissingEntryHelpText.js

@@ -0,0 +1,30 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import styled from "@emotion/styled";
+import { Typography } from "@webiny/ui/Typography";
+import { Link } from "@webiny/react-router";
+import { createNewEntryUrl } from "./createEntryUrl";
+import { i18n } from "@webiny/app/i18n";
+var t = i18n.ns("app-headless-cms/admin/fields/ref");
+var missingEntryLabel = t(_templateObject || (_templateObject = _taggedTemplateLiteral(["If you can't find the intended reference value in the target model,\n         please close this dialog and populate the {newEntryLink} in the target model first."])));
+var HelpTextTypography = /*#__PURE__*/styled(Typography, {
+  label: "HelpTextTypography",
+  target: "ex67440"
+})("&{display:inline-block;color:var(--mdc-theme-text-secondary-on-background) !important;}");
+
+var MissingEntryHelpText = function MissingEntryHelpText(_ref) {
+  var refModelId = _ref.refModelId;
+  return /*#__PURE__*/React.createElement(HelpTextTypography, {
+    use: "caption"
+  }, missingEntryLabel({
+    newEntryLink: /*#__PURE__*/React.createElement(Link, {
+      to: createNewEntryUrl(refModelId),
+      target: "_blank"
+    }, t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["entry"]))))
+  }));
+};
+
+export default MissingEntryHelpText;

package/admin/plugins/fieldRenderers/ref/components/NewRefEntryFormDialog.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export declare const NewEntryButton: () => JSX.Element;
+interface NewRefEntryProps {
+    modelId: string;
+    children: React.ReactElement;
+    onChange: Function;
+}
+declare const NewRefEntryFormDialog: React.FC<NewRefEntryProps>;
+export default NewRefEntryFormDialog;

package/admin/plugins/fieldRenderers/ref/components/NewRefEntryFormDialog.js

@@ -0,0 +1,147 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import React, { useCallback, useState } from "react";
+import get from "lodash/get";
+import { css } from "emotion";
+import styled from "@emotion/styled";
+import { Dialog, DialogActions, DialogButton, DialogCancel, DialogContent, DialogTitle } from "@webiny/ui/Dialog";
+import { ButtonDefault, ButtonIcon } from "@webiny/ui/Button";
+import { useSnackbar } from "@webiny/app-admin";
+import { i18n } from "@webiny/app/i18n";
+import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
+import { Provider as ContentEntriesProvider } from "../../../../views/contentEntries/ContentEntriesContext";
+import { Provider as ContentEntryProvider } from "../../../../views/contentEntries/ContentEntry/ContentEntryContext";
+import { ContentEntryForm } from "../../../../components/ContentEntryForm/ContentEntryForm";
+import { useQuery } from "../../../../hooks";
+import { GET_CONTENT_MODEL } from "../../../../graphql/contentModels";
+import { useContentEntry } from "../../../../views/contentEntries/hooks/useContentEntry";
+import { useNewRefEntryDialog } from "../hooks/useNewRefEntryDialog";
+var t = i18n.ns("app-headless-cms/admin/fields/ref");
+var dialogContentStyles = /*#__PURE__*/css("width:786px;label:dialogContentStyles;");
+var dialogContainerStyles = /*#__PURE__*/css("&.mdc-dialog{z-index:17;}label:dialogContainerStyles;");
+
+var EntryForm = function EntryForm(_ref) {
+  var onCreate = _ref.onCreate;
+
+  var _useContentEntry = useContentEntry(),
+      setFormRef = _useContentEntry.setFormRef,
+      contentModel = _useContentEntry.contentModel;
+
+  return /*#__PURE__*/React.createElement(ContentEntryForm, {
+    contentModel: contentModel,
+    onSubmit: onCreate,
+    onForm: function onForm(form) {
+      return setFormRef(form);
+    },
+    entry: {}
+  });
+};
+
+var DialogSaveButton = function DialogSaveButton() {
+  var _useContentEntry2 = useContentEntry(),
+      form = _useContentEntry2.form;
+
+  return /*#__PURE__*/React.createElement(DialogButton, {
+    onClick: function onClick() {
+      return form.current.submit();
+    }
+  }, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Save"]))));
+};
+
+var DefaultButton = /*#__PURE__*/styled(ButtonDefault, {
+  label: "DefaultButton",
+  target: "eantjap0"
+})("margin-left:32px;");
+export var NewEntryButton = function NewEntryButton() {
+  var _useNewRefEntryDialog = useNewRefEntryDialog(),
+      setOpen = _useNewRefEntryDialog.setOpen;
+
+  return /*#__PURE__*/React.createElement(DefaultButton, {
+    small: true,
+    onClick: function onClick() {
+      return setOpen(true);
+    }
+  }, /*#__PURE__*/React.createElement(ButtonIcon, {
+    icon: /*#__PURE__*/React.createElement(AddIcon, null)
+  }), t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["New Entry"]))));
+};
+
+var NewRefEntryFormDialog = function NewRefEntryFormDialog(_ref2) {
+  var modelId = _ref2.modelId,
+      children = _ref2.children,
+      onChange = _ref2.onChange;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      contentModel = _useState2[0],
+      setContentModel = _useState2[1];
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  useQuery(GET_CONTENT_MODEL, {
+    skip: !modelId,
+    variables: {
+      modelId: modelId
+    },
+    onCompleted: function onCompleted(data) {
+      var contentModelData = get(data, "getContentModel.data");
+
+      if (contentModelData) {
+        return setContentModel(contentModelData);
+      }
+
+      showSnackbar(t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Could not load content for model \"{modelId}\". Redirecting..."])))({
+        modelId: modelId
+      }));
+    }
+  });
+
+  var _useNewRefEntryDialog2 = useNewRefEntryDialog(),
+      open = _useNewRefEntryDialog2.open,
+      setOpen = _useNewRefEntryDialog2.setOpen;
+
+  var hideDialog = useCallback(function () {
+    return setOpen(false);
+  }, []);
+  var onCreate = useCallback(function (entry) {
+    onChange(entry);
+    /* 
+    Close the modal
+     */
+
+    setOpen(false);
+  }, [modelId, onChange]);
+
+  if (!contentModel) {
+    return children;
+  }
+
+  return /*#__PURE__*/React.createElement(ContentEntriesProvider, {
+    contentModel: contentModel,
+    key: contentModel.modelId,
+    insideDialog: true
+  }, /*#__PURE__*/React.createElement(ContentEntryProvider, {
+    isNewEntry: function isNewEntry() {
+      return true;
+    },
+    getContentId: function getContentId() {
+      return null;
+    }
+  }, /*#__PURE__*/React.createElement(Dialog, {
+    open: open,
+    onClose: hideDialog,
+    className: dialogContainerStyles
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["New {modelName} Entry"])))({
+    modelName: contentModel.name
+  })), /*#__PURE__*/React.createElement(DialogContent, {
+    className: dialogContentStyles
+  }, /*#__PURE__*/React.createElement(EntryForm, {
+    onCreate: onCreate
+  })), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(DialogCancel, null, t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Cancel"])))), /*#__PURE__*/React.createElement(DialogSaveButton, null))), children));
+};
+
+export default NewRefEntryFormDialog;

package/admin/plugins/fieldRenderers/ref/components/createEntryUrl.d.ts

@@ -3,3 +3,4 @@ export interface Params {
     modelId: string;
 }
 export declare const createEntryUrl: ({ modelId, id }: Params) => string;
+export declare const createNewEntryUrl: (modelId: string) => string;

package/admin/plugins/fieldRenderers/ref/components/createEntryUrl.js

@@ -2,4 +2,7 @@ export var createEntryUrl = function createEntryUrl(_ref) {
   var modelId = _ref.modelId,
       id = _ref.id;
   return "/cms/content-entries/".concat(modelId, "?id=").concat(encodeURIComponent(id));
+};
+export var createNewEntryUrl = function createNewEntryUrl(modelId) {
+  return "/cms/content-entries/".concat(modelId, "?new=true");
 };

package/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntry.d.ts

@@ -0,0 +1,11 @@
+import { CmsEditorField } from "../../../../../types";
+interface UseNewRefEntryParams {
+    field: CmsEditorField;
+}
+interface UseNewRefEntry {
+    renderNewEntryModal: boolean;
+    renderedInPreviewTab: boolean;
+    refModelId: string;
+}
+export declare const useNewRefEntry: ({ field }: UseNewRefEntryParams) => UseNewRefEntry;
+export {};

package/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntry.js

@@ -0,0 +1,30 @@
+import { useContext } from "react";
+import { Context as ContentEntriesContext } from "../../../../views/contentEntries/ContentEntriesContext";
+export var useNewRefEntry = function useNewRefEntry(_ref) {
+  var field = _ref.field;
+  var refModelId = field.settings.models[0].modelId;
+  var contentEntriesContextValue = useContext(ContentEntriesContext);
+  /**
+   * We don't wrap the "ContentEntryForm" with "ContentEntriesContextProvider"
+   * when rendering it inside content model editor's preview tab.
+   *
+   * And we also don't want to have new ref field Dialog in the preview tab.
+   * Therefore, we check for "contentEntriesContextValue" to know that we're inside preview tab.
+   */
+
+  var renderedInPreviewTab = contentEntriesContextValue === null;
+  var renderNewEntryModal;
+
+  if (renderedInPreviewTab) {
+    renderNewEntryModal = false;
+  } else {
+    var insideDialog = contentEntriesContextValue.insideDialog;
+    renderNewEntryModal = !insideDialog;
+  }
+
+  return {
+    renderNewEntryModal: renderNewEntryModal,
+    renderedInPreviewTab: renderedInPreviewTab,
+    refModelId: refModelId
+  };
+};

package/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntryDialog.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface NewRefEntryDialogContextValue {
+    open: boolean;
+    setOpen: Function;
+}
+export declare const NewRefEntryDialogContext: React.Context<NewRefEntryDialogContextValue>;
+export declare const NewRefEntryDialogContextProvider: ({ children }: {
+    children: any;
+}) => JSX.Element;
+export declare const useNewRefEntryDialog: () => NewRefEntryDialogContextValue;

package/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntryDialog.js

@@ -0,0 +1,28 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useContext, useState } from "react";
+export var NewRefEntryDialogContext = /*#__PURE__*/createContext(null);
+export var NewRefEntryDialogContextProvider = function NewRefEntryDialogContextProvider(_ref) {
+  var children = _ref.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(NewRefEntryDialogContext.Provider, {
+    value: {
+      open: open,
+      setOpen: setOpen
+    }
+  }, children);
+};
+export var useNewRefEntryDialog = function useNewRefEntryDialog() {
+  var _useContext = useContext(NewRefEntryDialogContext),
+      open = _useContext.open,
+      setOpen = _useContext.setOpen;
+
+  return {
+    open: open,
+    setOpen: setOpen
+  };
+};

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

@@ -13,12 +13,12 @@ export interface ContentEntriesContext {
     canCreate: boolean;
     listQueryVariables: ListQueryVariables;
     setListQueryVariables: Dispatch<SetStateAction<ListQueryVariables>>;
+    insideDialog?: boolean;
 }
 export declare const Context: React.Context<ContentEntriesContext>;
-export declare const Provider: {
-    ({ contentModel, children }: {
-        contentModel: any;
-        children: any;
-    }): JSX.Element;
-    displayName: string;
-};
+export interface ContentEntriesContextProviderProps {
+    contentModel: CmsEditorContentModel;
+    children: React.ReactNode;
+    insideDialog?: boolean;
+}
+export declare const Provider: React.FC<ContentEntriesContextProviderProps>;

package/admin/views/contentEntries/ContentEntriesContext.js

@@ -17,7 +17,8 @@ var SORTERS = [{
 export var Context = /*#__PURE__*/React.createContext(null);
 export var Provider = function Provider(_ref) {
   var contentModel = _ref.contentModel,
-      children = _ref.children;
+      children = _ref.children,
+      insideDialog = _ref.insideDialog;
 
   var _useSecurity = useSecurity(),
       identity = _useSecurity.identity;
@@ -65,6 +66,7 @@ export var Provider = function Provider(_ref) {
     }]);
   }, [contentModel.modelId]);
   var value = {
+    insideDialog: insideDialog,
     contentModel: contentModel,
     sorters: sorters,
     canCreate: canCreate,

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

@@ -20,9 +20,16 @@ export interface ContentEntryContext extends ContentEntriesContext {
     showEmptyView: boolean;
 }
 export declare const Context: React.Context<ContentEntryContext>;
+export interface ContentEntryContextProviderProps extends GetContentEntryFormType {
+    children: React.ReactNode;
+}
+interface GetContentEntryFormType {
+    getContentId?: () => string | null;
+    isNewEntry?: () => boolean;
+}
+export declare const useContentEntryProviderProps: () => GetContentEntryFormType;
 export declare const Provider: {
-    ({ children }: {
-        children: any;
-    }): JSX.Element;
+    ({ children, isNewEntry, getContentId }: ContentEntryContextProviderProps): JSX.Element;
     displayName: string;
 };
+export {};

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

@@ -9,8 +9,29 @@ import { useQuery } from "../../../hooks";
 import { useContentEntries } from "../hooks/useContentEntries";
 import { parseIdentifier } from "@webiny/utils";
 export var Context = /*#__PURE__*/React.createContext(null);
+export var useContentEntryProviderProps = function useContentEntryProviderProps() {
+  var _useRouter = useRouter(),
+      location = _useRouter.location;
+
+  var query = new URLSearchParams(location.search);
+
+  var isNewEntry = function isNewEntry() {
+    return query.get("new") === "true";
+  };
+
+  var getContentId = function getContentId() {
+    return query.get("id");
+  };
+
+  return {
+    getContentId: getContentId,
+    isNewEntry: isNewEntry
+  };
+};
 export var Provider = function Provider(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      isNewEntry = _ref.isNewEntry,
+      getContentId = _ref.getContentId;
 
   var _useContentEntries = useContentEntries(),
       contentModel = _useContentEntries.contentModel,
@@ -22,9 +43,8 @@ export var Provider = function Provider(_ref) {
   var formRef = useRef(null);
   var tabsRef = useRef(null);
 
-  var _useRouter = useRouter(),
-      history = _useRouter.history,
-      location = _useRouter.location;
+  var _useRouter2 = useRouter(),
+      history = _useRouter2.history;
 
   var _useSnackbar = useSnackbar(),
       showSnackbar = _useSnackbar.showSnackbar;
@@ -34,9 +54,9 @@ export var Provider = function Provider(_ref) {
       isLoading = _useState2[0],
       setLoading = _useState2[1];
 
-  var newEntry = new URLSearchParams(location.search).get("new") === "true";
-  var query = new URLSearchParams(location.search);
-  var contentId = query.get("id");
+  var contentEntryProviderProps = useContentEntryProviderProps();
+  var newEntry = typeof isNewEntry === "function" ? isNewEntry() : contentEntryProviderProps.isNewEntry();
+  var contentId = typeof getContentId === "function" ? getContentId() : contentEntryProviderProps.getContentId();
   var revisionId = contentId ? decodeURIComponent(contentId) : null;
   var entryId = null;
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/app-headless-cms",
-	"version": "5.22.0-beta.1",
+	"version": "5.22.1-beta.0",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -24,19 +24,19 @@
 		"@fortawesome/react-fontawesome": "0.1.16",
 		"@svgr/webpack": "6.2.0",
 		"@types/react": "16.14.2",
-		"@webiny/app": "5.22.0-beta.1",
-		"@webiny/app-admin": "5.22.0-beta.1",
-		"@webiny/app-graphql-playground": "5.22.0-beta.1",
-		"@webiny/app-i18n": "5.22.0-beta.1",
-		"@webiny/app-plugin-admin-welcome-screen": "5.22.0-beta.1",
-		"@webiny/app-security": "5.22.0-beta.1",
-		"@webiny/error": "5.22.0-beta.1",
-		"@webiny/form": "5.22.0-beta.1",
-		"@webiny/plugins": "5.22.0-beta.1",
-		"@webiny/react-router": "5.22.0-beta.1",
-		"@webiny/ui": "5.22.0-beta.1",
-		"@webiny/utils": "5.22.0-beta.1",
-		"@webiny/validation": "5.22.0-beta.1",
+		"@webiny/app": "5.22.1-beta.0",
+		"@webiny/app-admin": "5.22.1-beta.0",
+		"@webiny/app-graphql-playground": "5.22.1-beta.0",
+		"@webiny/app-i18n": "5.22.1-beta.0",
+		"@webiny/app-plugin-admin-welcome-screen": "5.22.1-beta.0",
+		"@webiny/app-security": "5.22.1-beta.0",
+		"@webiny/error": "5.22.1-beta.0",
+		"@webiny/form": "5.22.1-beta.0",
+		"@webiny/plugins": "5.22.1-beta.0",
+		"@webiny/react-router": "5.22.1-beta.0",
+		"@webiny/ui": "5.22.1-beta.0",
+		"@webiny/utils": "5.22.1-beta.0",
+		"@webiny/validation": "5.22.1-beta.0",
 		"apollo-cache": "1.3.5",
 		"apollo-client": "2.6.10",
 		"apollo-link": "1.2.14",
@@ -68,8 +68,8 @@
 		"@babel/preset-env": "^7.16.4",
 		"@babel/preset-react": "^7.16.0",
 		"@babel/preset-typescript": "^7.16.0",
-		"@webiny/cli": "^5.22.0-beta.1",
-		"@webiny/project-utils": "^5.22.0-beta.1",
+		"@webiny/cli": "^5.22.1-beta.0",
+		"@webiny/project-utils": "^5.22.1-beta.0",
 		"babel-plugin-emotion": "^9.2.8",
 		"babel-plugin-lodash": "^3.3.4",
 		"babel-plugin-module-resolver": "^4.1.0",
@@ -101,5 +101,5 @@
 			]
 		}
 	},
-	"gitHead": "b651010b23f28b3ce1c27130713322ce65b32dcd"
+	"gitHead": "37f7c3d99baa1793fe29221b5eca40fe92cfe190"
 }