@webiny/app-headless-cms 0.0.0-mt-3 → 0.0.0-unstable.5e7233243f

package/admin/views/contentEntries/ContentEntriesList.js

@@ -1,40 +1,79 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-
-import React, { useMemo } from "react";
-import debounce from "lodash/debounce";
-import { css } from "emotion";
-import TimeAgo from "timeago-react";
-import pluralize from "pluralize";
-import styled from "@emotion/styled";
-import { i18n } from "@webiny/app/i18n";
-import { Form } from "@webiny/form";
-import { Typography } from "@webiny/ui/Typography";
-import * as UIList from "@webiny/ui/List";
-import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
-import { Scrollbar } from "@webiny/ui/Scrollbar";
-import { ReactComponent as AddIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/add-18px.svg";
-import { ReactComponent as FilterIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/filter-24px.svg";
-import SearchUI from "@webiny/app-admin/components/SearchUI";
-import statusLabels from "../../constants/statusLabels";
-import { useCallback } from "react";
-import { useContentEntriesList } from "./hooks/useContentEntriesList";
-var t = i18n.ns("app-headless-cms/admin/contents/data-list");
-var rightAlign = /*#__PURE__*/css({
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _emotion = require("emotion");
+
+var _timeagoReact = _interopRequireDefault(require("timeago-react"));
+
+var _pluralize = _interopRequireDefault(require("pluralize"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _i18n = require("@webiny/app/i18n");
+
+var _form = require("@webiny/form");
+
+var _Typography = require("@webiny/ui/Typography");
+
+var UIList = _interopRequireWildcard(require("@webiny/ui/List"));
+
+var _Button = require("@webiny/ui/Button");
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _Scrollbar = require("@webiny/ui/Scrollbar");
+
+var _Select = require("@webiny/ui/Select");
+
+var _add18px = require("@webiny/app-admin/assets/icons/add-18px.svg");
+
+var _filter24px = require("@webiny/app-admin/assets/icons/filter-24px.svg");
+
+var _SearchUI = _interopRequireDefault(require("@webiny/app-admin/components/SearchUI"));
+
+var _statusLabels = _interopRequireDefault(require("../../constants/statusLabels"));
+
+var _useContentEntriesList = require("./hooks/useContentEntriesList");
+
+var _ContentEntriesViewConfig = require("./experiment/ContentEntriesViewConfig");
+
+var _reactRouter = require("@webiny/react-router");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var _excluded = ["sort", "status"];
+
+var t = _i18n.i18n.ns("app-headless-cms/admin/contents/data-list");
+
+var rightAlign = /*#__PURE__*/(0, _emotion.css)({
   alignItems: "flex-end !important",
   justifyContent: "center !important"
 }, "label:rightAlign;");
-var ModelId = /*#__PURE__*/styled("span", {
+var ModelId = /*#__PURE__*/(0, _styled.default)("span", {
   target: "e1yw2ynr0",
   label: "ModelId"
 })({
   color: "var(--mdc-theme-text-secondary-on-background)"
 });
-var InlineLoaderWrapper = /*#__PURE__*/styled("div", {
+var InlineLoaderWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1yw2ynr1",
   label: "InlineLoaderWrapper"
 })({
@@ -48,14 +87,14 @@ var InlineLoaderWrapper = /*#__PURE__*/styled("div", {
   height: 40,
   backgroundColor: "var(--mdc-theme-surface)"
 });
-var listItemMinHeight = /*#__PURE__*/css({
+var listItemMinHeight = /*#__PURE__*/(0, _emotion.css)({
   minHeight: "66px !important"
 }, "label:listItemMinHeight;");
 
 var ContentEntriesList = function ContentEntriesList() {
-  var _useContentEntriesLis = useContentEntriesList(),
+  var _useContentEntriesLis = (0, _useContentEntriesList.useContentEntriesList)(),
       contentModel = _useContentEntriesLis.contentModel,
-      entryId = _useContentEntriesLis.entryId,
+      id = _useContentEntriesLis.id,
       loading = _useContentEntriesLis.loading,
       canCreate = _useContentEntriesLis.canCreate,
       onCreate = _useContentEntriesLis.onCreate,
@@ -69,112 +108,112 @@ var ContentEntriesList = function ContentEntriesList() {
       filter = _useContentEntriesLis.filter,
       setFilter = _useContentEntriesLis.setFilter;
 
-  var loadMoreOnScroll = useCallback(debounce(function (scrollFrame) {
+  var viewConfig = (0, _ContentEntriesViewConfig.useContentEntriesViewConfig)();
+  var loadMoreOnScroll = (0, _react.useCallback)((0, _debounce.default)(function (scrollFrame) {
     if (scrollFrame.top > 0.9) {
       loadMore();
     }
   }, 500), [data]);
-  var entriesDataListModalOverlay = useMemo(function () {
-    return /*#__PURE__*/React.createElement(UIList.DataListModalOverlay, null, /*#__PURE__*/React.createElement(Form, {
-      data: listQueryVariables,
-      onChange: function onChange(_ref) {
-        var status = _ref.status,
-            sort = _ref.sort;
-        setListQueryVariables(function (prevState) {
-          return _objectSpread(_objectSpread({}, prevState), {}, {
-            sort: sort,
-            status: status
-          });
+  var formInitialData = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, listQueryVariables), {}, {
+    sort: listQueryVariables.sort ? listQueryVariables.sort[0] : ""
+  });
+  var appliesToContentModel = (0, _react.useCallback)(function (_ref) {
+    var modelIds = _ref.modelIds;
+    return modelIds.length === 0 || modelIds.includes(contentModel.modelId);
+  }, [contentModel]);
+  var entriesDataListModalOverlay = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(UIList.DataListModalOverlay, null, /*#__PURE__*/_react.default.createElement(_form.Form, {
+      data: formInitialData,
+      onChange: function onChange(_ref2) {
+        var sort = _ref2.sort,
+            status = _ref2.status,
+            data = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+        setListQueryVariables(function () {
+          return (0, _objectSpread2.default)({
+            status: status,
+            // GraphQL Schema requires "sort" to be an array.
+            sort: [sort]
+          }, data);
         });
       }
-    }, function (_ref2) {
-      var Bind = _ref2.Bind;
-      return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+    }, function (_ref3) {
+      var Bind = _ref3.Bind;
+      return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
         span: 12
-      }, /*#__PURE__*/React.createElement(Bind, {
+      }, /*#__PURE__*/_react.default.createElement(Bind, {
         name: "sort"
-      }, /*#__PURE__*/React.createElement(Select, {
-        label: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Sort by"])))
-      }, sorters.map(function (_ref3) {
-        var label = _ref3.label,
-            value = _ref3.value;
-        return /*#__PURE__*/React.createElement("option", {
-          key: label,
+      }, /*#__PURE__*/_react.default.createElement(_Select.Select, {
+        label: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Sort by"])))
+      }, sorters.map(function (_ref4) {
+        var value = _ref4.value,
+            label = _ref4.label;
+        return /*#__PURE__*/_react.default.createElement("option", {
+          key: value,
           value: value
         }, label);
-      })))), /*#__PURE__*/React.createElement(Cell, {
-        span: 12
-      }, /*#__PURE__*/React.createElement(Bind, {
-        name: "status"
-      }, /*#__PURE__*/React.createElement(Select, {
-        label: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Filter by status"]))),
-        description: "Filter by a specific page status."
-      }, /*#__PURE__*/React.createElement("option", {
-        value: "all"
-      }, t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["All"])))), /*#__PURE__*/React.createElement("option", {
-        value: "draft"
-      }, t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Draft"])))), /*#__PURE__*/React.createElement("option", {
-        value: "published"
-      }, t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Published"])))), /*#__PURE__*/React.createElement("option", {
-        value: "unpublished"
-      }, t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Unpublished"])))), /*#__PURE__*/React.createElement("option", {
-        value: "reviewRequested"
-      }, t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Review requested"])))), /*#__PURE__*/React.createElement("option", {
-        value: "changesRequested"
-      }, t(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["Changes requested"]))))))));
+      })))), viewConfig.filters.filter(appliesToContentModel).map(function (filter) {
+        return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+          span: 12,
+          key: filter.name
+        }, filter.element);
+      }));
     }));
-  }, [listQueryVariables]);
-  return /*#__PURE__*/React.createElement(UIList.DataList, {
+  }, [listQueryVariables, viewConfig.filters]);
+  return /*#__PURE__*/_react.default.createElement(UIList.DataList, {
     loading: loading,
     data: data,
-    title: /*#__PURE__*/React.createElement("span", null, pluralize(contentModel.name), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Typography, {
+    title: /*#__PURE__*/_react.default.createElement("span", null, (0, _pluralize.default)(contentModel.name), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
       use: "subtitle1"
-    }, /*#__PURE__*/React.createElement(ModelId, null, "Model ID: ", contentModel.modelId))),
-    actions: canCreate ? /*#__PURE__*/React.createElement(ButtonSecondary, {
+    }, /*#__PURE__*/_react.default.createElement(ModelId, null, "Model ID:", " ", /*#__PURE__*/_react.default.createElement(_reactRouter.Link, {
+      to: "/cms/content-models/".concat(contentModel.modelId)
+    }, contentModel.modelId)))),
+    actions: canCreate ? /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
       "data-testid": "new-record-button",
       onClick: onCreate
-    }, /*#__PURE__*/React.createElement(ButtonIcon, {
-      icon: /*#__PURE__*/React.createElement(AddIcon, null)
-    }), " ", t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["New Entry"])))) : null,
-    search: /*#__PURE__*/React.createElement(SearchUI, {
+    }, /*#__PURE__*/_react.default.createElement(_Button.ButtonIcon, {
+      icon: /*#__PURE__*/_react.default.createElement(_add18px.ReactComponent, null)
+    }), " ", t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["New Entry"])))) : null,
+    search: /*#__PURE__*/_react.default.createElement(_SearchUI.default, {
       value: filter,
       onChange: setFilter,
-      inputPlaceholder: t(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["Search {title}"])))({
-        title: pluralize(contentModel.name)
+      inputPlaceholder: t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Search {title}"])))({
+        title: (0, _pluralize.default)(contentModel.name)
       })
     }),
     modalOverlay: entriesDataListModalOverlay,
-    modalOverlayAction: /*#__PURE__*/React.createElement(UIList.DataListModalOverlayAction, {
-      icon: /*#__PURE__*/React.createElement(FilterIcon, null),
+    modalOverlayAction: /*#__PURE__*/_react.default.createElement(UIList.DataListModalOverlayAction, {
+      icon: /*#__PURE__*/_react.default.createElement(_filter24px.ReactComponent, null),
       "data-testid": "default-data-list.filter"
     })
-  }, function (_ref4) {
-    var data = _ref4.data;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Scrollbar, {
+  }, function (_ref5) {
+    var data = _ref5.data;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Scrollbar.Scrollbar, {
       "data-testid": "default-data-list",
       onScrollFrame: function onScrollFrame(scrollFrame) {
         return loadMoreOnScroll(scrollFrame);
       }
     }, data.map(function (item) {
-      return /*#__PURE__*/React.createElement(UIList.ListItem, {
+      return /*#__PURE__*/_react.default.createElement(UIList.ListItem, {
         key: item.id,
         className: listItemMinHeight,
-        selected: item.id === entryId
-      }, /*#__PURE__*/React.createElement(UIList.ListItemText, {
+        selected: item.id === id
+      }, /*#__PURE__*/_react.default.createElement(UIList.ListItemText, {
         onClick: editEntry(item)
-      }, item.meta.title || "Untitled", /*#__PURE__*/React.createElement(UIList.ListItemTextSecondary, null, t(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["Last modified: {time}."])))({
-        time: /*#__PURE__*/React.createElement(TimeAgo, {
+      }, item.meta.title || "Untitled", /*#__PURE__*/_react.default.createElement(UIList.ListItemTextSecondary, null, t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Last modified: {time}."])))({
+        time: /*#__PURE__*/_react.default.createElement(_timeagoReact.default, {
           datetime: item.savedOn
         })
-      }))), /*#__PURE__*/React.createElement(UIList.ListItemMeta, {
+      }))), /*#__PURE__*/_react.default.createElement(UIList.ListItemMeta, {
         className: rightAlign
-      }, /*#__PURE__*/React.createElement(Typography, {
-        use: "subtitle2"
-      }, statusLabels[item.meta.status], " (v", item.meta.version, ")")));
-    })), loadMoreLoading && /*#__PURE__*/React.createElement(InlineLoaderWrapper, null, /*#__PURE__*/React.createElement(Typography, {
+      }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "subtitle2",
+        "data-testid": "ul.list.subtitle"
+      }, _statusLabels.default[item.meta.status], " (v", item.meta.version, ")")));
+    })), loadMoreLoading && /*#__PURE__*/_react.default.createElement(InlineLoaderWrapper, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
       use: "overline"
-    }, t(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["Loading more entries..."]))))));
+    }, t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Loading more entries..."]))))));
   });
 };
 
-export default ContentEntriesList;
+var _default = ContentEntriesList;
+exports.default = _default;

package/admin/views/contentEntries/ContentEntriesList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","rightAlign","css","alignItems","justifyContent","ModelId","styled","color","InlineLoaderWrapper","position","bottom","left","display","width","height","backgroundColor","listItemMinHeight","minHeight","ContentEntriesList","useContentEntriesList","contentModel","id","loading","canCreate","onCreate","data","editEntry","loadMore","loadMoreLoading","listQueryVariables","setListQueryVariables","sorters","filter","setFilter","viewConfig","useContentEntriesViewConfig","loadMoreOnScroll","useCallback","debounce","scrollFrame","top","formInitialData","sort","appliesToContentModel","modelIds","length","includes","modelId","entriesDataListModalOverlay","useMemo","status","Bind","map","value","label","filters","name","element","pluralize","title","item","meta","time","savedOn","statusLabels","version"],"sources":["ContentEntriesList.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport debounce from \"lodash/debounce\";\nimport { css } from \"emotion\";\n/**\n * Package timeago-react does not have types.\n */\n// @ts-ignore\nimport TimeAgo from \"timeago-react\";\nimport pluralize from \"pluralize\";\nimport styled from \"@emotion/styled\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Form } from \"@webiny/form\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport * as UIList from \"@webiny/ui/List\";\nimport { ButtonIcon, ButtonSecondary } from \"@webiny/ui/Button\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Scrollbar } from \"@webiny/ui/Scrollbar\";\nimport { Select } from \"@webiny/ui/Select\";\nimport { ReactComponent as AddIcon } from \"@webiny/app-admin/assets/icons/add-18px.svg\";\nimport { ReactComponent as FilterIcon } from \"@webiny/app-admin/assets/icons/filter-24px.svg\";\nimport SearchUI from \"@webiny/app-admin/components/SearchUI\";\nimport statusLabels from \"../../constants/statusLabels\";\nimport { useCallback } from \"react\";\nimport { useContentEntriesList } from \"~/admin/views/contentEntries/hooks/useContentEntriesList\";\nimport { positionValues as PositionValues } from \"react-custom-scrollbars\";\nimport { CmsEditorContentEntry } from \"~/types\";\nimport {\n    useContentEntriesViewConfig,\n    ContentEntriesViewConfigFilter\n} from \"./experiment/ContentEntriesViewConfig\";\nimport { Link } from \"@webiny/react-router\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/contents/data-list\");\n\nconst rightAlign = css({\n    alignItems: \"flex-end !important\",\n    justifyContent: \"center !important\"\n});\n\nconst ModelId = styled(\"span\")({\n    color: \"var(--mdc-theme-text-secondary-on-background)\"\n});\n\nconst InlineLoaderWrapper = styled(\"div\")({\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    width: \"100%\",\n    height: 40,\n    backgroundColor: \"var(--mdc-theme-surface)\"\n});\n\nconst listItemMinHeight = css({\n    minHeight: \"66px !important\"\n});\n\nconst ContentEntriesList: React.FC = () => {\n    const {\n        contentModel,\n        id,\n        loading,\n        canCreate,\n        onCreate,\n        data,\n        editEntry,\n        loadMore,\n        loadMoreLoading,\n        listQueryVariables,\n        setListQueryVariables,\n        sorters,\n        filter,\n        setFilter\n    } = useContentEntriesList();\n\n    const viewConfig = useContentEntriesViewConfig();\n\n    const loadMoreOnScroll = useCallback(\n        debounce((scrollFrame: PositionValues) => {\n            if (scrollFrame.top > 0.9) {\n                loadMore();\n            }\n        }, 500),\n        [data]\n    );\n\n    const formInitialData = {\n        ...listQueryVariables,\n        sort: listQueryVariables.sort ? listQueryVariables.sort[0] : \"\"\n    };\n\n    const appliesToContentModel = useCallback(\n        ({ modelIds }: ContentEntriesViewConfigFilter) => {\n            return modelIds.length === 0 || modelIds.includes(contentModel.modelId);\n        },\n        [contentModel]\n    );\n\n    const entriesDataListModalOverlay = useMemo(\n        () => (\n            <UIList.DataListModalOverlay>\n                <Form\n                    data={formInitialData}\n                    onChange={({ sort, status, ...data }) => {\n                        setListQueryVariables(() => ({\n                            status,\n                            // GraphQL Schema requires \"sort\" to be an array.\n                            sort: [sort],\n                            // Spread the rest of form data\n                            ...data\n                        }));\n                    }}\n                >\n                    {({ Bind }) => (\n                        <Grid>\n                            <Cell span={12}>\n                                <Bind name={\"sort\"}>\n                                    <Select label={t`Sort by`}>\n                                        {sorters.map(({ value, label }) => {\n                                            return (\n                                                <option key={value} value={value}>\n                                                    {label}\n                                                </option>\n                                            );\n                                        })}\n                                    </Select>\n                                </Bind>\n                            </Cell>\n                            {viewConfig.filters.filter(appliesToContentModel).map(filter => (\n                                <Cell span={12} key={filter.name}>\n                                    {filter.element}\n                                </Cell>\n                            ))}\n                        </Grid>\n                    )}\n                </Form>\n            </UIList.DataListModalOverlay>\n        ),\n        [listQueryVariables, viewConfig.filters]\n    );\n\n    return (\n        <UIList.DataList\n            loading={loading}\n            data={data}\n            title={\n                <span>\n                    {pluralize(contentModel.name)}\n                    <br />\n                    <Typography use={\"subtitle1\"}>\n                        <ModelId>\n                            Model ID:{\" \"}\n                            <Link to={`/cms/content-models/${contentModel.modelId}`}>\n                                {contentModel.modelId}\n                            </Link>\n                        </ModelId>\n                    </Typography>\n                </span>\n            }\n            actions={\n                canCreate ? (\n                    <ButtonSecondary data-testid=\"new-record-button\" onClick={onCreate}>\n                        <ButtonIcon icon={<AddIcon />} /> {t`New Entry`}\n                    </ButtonSecondary>\n                ) : null\n            }\n            search={\n                <SearchUI\n                    value={filter}\n                    onChange={setFilter}\n                    inputPlaceholder={t`Search {title}`({ title: pluralize(contentModel.name) })}\n                />\n            }\n            modalOverlay={entriesDataListModalOverlay}\n            modalOverlayAction={\n                <UIList.DataListModalOverlayAction\n                    icon={<FilterIcon />}\n                    data-testid={\"default-data-list.filter\"}\n                />\n            }\n        >\n            {({ data }: { data: CmsEditorContentEntry[] }) => (\n                <>\n                    <Scrollbar\n                        data-testid=\"default-data-list\"\n                        onScrollFrame={scrollFrame => loadMoreOnScroll(scrollFrame)}\n                    >\n                        {data.map(item => (\n                            <UIList.ListItem\n                                key={item.id}\n                                className={listItemMinHeight}\n                                selected={item.id === id}\n                            >\n                                <UIList.ListItemText onClick={editEntry(item)}>\n                                    {item.meta.title || \"Untitled\"}\n                                    <UIList.ListItemTextSecondary>\n                                        {t`Last modified: {time}.`({\n                                            time: <TimeAgo datetime={item.savedOn} />\n                                        })}\n                                    </UIList.ListItemTextSecondary>\n                                </UIList.ListItemText>\n\n                                <UIList.ListItemMeta className={rightAlign}>\n                                    <Typography use={\"subtitle2\"} data-testid=\"ul.list.subtitle\">\n                                        {statusLabels[item.meta.status]} (v{item.meta.version})\n                                    </Typography>\n                                </UIList.ListItemMeta>\n                            </UIList.ListItem>\n                        ))}\n                    </Scrollbar>\n                    {loadMoreLoading && (\n                        <InlineLoaderWrapper>\n                            <Typography use={\"overline\"}>{t`Loading more entries...`}</Typography>\n                        </InlineLoaderWrapper>\n                    )}\n                </>\n            )}\n        </UIList.DataList>\n    );\n};\n\nexport default ContentEntriesList;\n"],"mappings":"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"}

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

@@ -1,13 +1,15 @@
-import React, { Dispatch, SetStateAction, MutableRefObject } from "react";
+import React, { Dispatch, SetStateAction, MutableRefObject, RefObject } from "react";
 import { ContentEntriesContext } from "../ContentEntriesContext";
 import { CmsContentEntryRevision, CmsEditorContentEntry } from "../../../../types";
-import { Tabs } from "@webiny/ui/Tabs";
+import { TabsImperativeApi } from "@webiny/ui/Tabs";
+interface ContentEntryContextForm {
+    submit: (ev: React.SyntheticEvent) => Promise<CmsEditorContentEntry | null>;
+}
+declare type ContentEntryContextFormRef = MutableRefObject<ContentEntryContextForm>;
 export interface ContentEntryContext extends ContentEntriesContext {
     createEntry: () => void;
     entry: CmsEditorContentEntry;
-    form: MutableRefObject<{
-        submit: Function;
-    }>;
+    form: ContentEntryContextFormRef;
     setFormRef: (form: {
         submit: Function;
     }) => void;
@@ -15,14 +17,17 @@ export interface ContentEntryContext extends ContentEntriesContext {
     setLoading: Dispatch<SetStateAction<boolean>>;
     revisions: CmsContentEntryRevision[];
     refetchContent: () => void;
-    tabs: MutableRefObject<Tabs>;
-    setTabsRef: (tabs: Tabs) => void;
+    tabsRef: RefObject<TabsImperativeApi | undefined>;
     showEmptyView: boolean;
 }
-export declare const Context: React.Context<ContentEntryContext>;
-export declare const Provider: {
-    ({ children }: {
-        children: any;
-    }): JSX.Element;
-    displayName: string;
-};
+export declare const Context: React.Context<ContentEntryContext | undefined>;
+export interface ContentEntryContextProviderProps extends Partial<UseContentEntryProviderProps> {
+    children: React.ReactNode;
+}
+interface UseContentEntryProviderProps {
+    getContentId: () => string | null;
+    isNewEntry: () => boolean;
+}
+export declare const useContentEntryProviderProps: () => UseContentEntryProviderProps;
+export declare const Provider: React.FC<ContentEntryContextProviderProps>;
+export {};

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

@@ -1,72 +1,150 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useRef, useState, useCallback, useMemo } from "react";
-import isEmpty from "lodash/isEmpty";
-import get from "lodash/get";
-import { useRouter } from "@webiny/react-router";
-import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import * as GQL from "../../../graphql/contentEntries";
-import { useQuery } from "../../../hooks";
-import { useContentEntries } from "../hooks/useContentEntries";
-export var Context = /*#__PURE__*/React.createContext(null);
-export var Provider = function Provider(_ref) {
-  var children = _ref.children;
-
-  var _useContentEntries = useContentEntries(),
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useContentEntryProviderProps = exports.Provider = exports.Context = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _reactRouter = require("@webiny/react-router");
+
+var _useSnackbar2 = require("@webiny/app-admin/hooks/useSnackbar");
+
+var _hooks = require("../../../hooks");
+
+var _useContentEntries2 = require("../hooks/useContentEntries");
+
+var _utils = require("@webiny/utils");
+
+var _contentEntries = require("../../../graphql/contentEntries");
+
+var Context = /*#__PURE__*/_react.default.createContext(undefined);
+
+exports.Context = Context;
+
+var useContentEntryProviderProps = function useContentEntryProviderProps() {
+  var _useRouter = (0, _reactRouter.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") || null;
+  };
+
+  return {
+    getContentId: getContentId,
+    isNewEntry: isNewEntry
+  };
+};
+
+exports.useContentEntryProviderProps = useContentEntryProviderProps;
+
+var Provider = function Provider(_ref) {
+  var children = _ref.children,
+      isNewEntry = _ref.isNewEntry,
+      getContentId = _ref.getContentId;
+
+  var _useContentEntries = (0, _useContentEntries2.useContentEntries)(),
       contentModel = _useContentEntries.contentModel,
       canCreate = _useContentEntries.canCreate,
       listQueryVariables = _useContentEntries.listQueryVariables,
       setListQueryVariables = _useContentEntries.setListQueryVariables,
       sorters = _useContentEntries.sorters;
 
-  var formRef = useRef(null);
-  var tabsRef = useRef(null);
+  var formRef = (0, _react.useRef)({
+    submit: function () {
+      var _submit = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+        return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", null);
 
-  var _useRouter = useRouter(),
-      history = _useRouter.history,
-      location = _useRouter.location;
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
 
-  var _useSnackbar = useSnackbar(),
+      function submit() {
+        return _submit.apply(this, arguments);
+      }
+
+      return submit;
+    }()
+  });
+
+  var _useRouter2 = (0, _reactRouter.useRouter)(),
+      history = _useRouter2.history;
+
+  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
       showSnackbar = _useSnackbar.showSnackbar;
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       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 = revisionId ? revisionId.split("#")[0] : null;
+  var entryId = null;
 
-  var _useMemo = useMemo(function () {
+  if (revisionId) {
+    var result = (0, _utils.parseIdentifier)(revisionId);
+    entryId = result ? result.id : null;
+  }
+
+  var tabsRef = (0, _react.useRef)();
+
+  var _useMemo = (0, _react.useMemo)(function () {
     return {
-      READ_CONTENT: GQL.createReadQuery(contentModel)
+      READ_CONTENT: (0, _contentEntries.createReadQuery)(contentModel)
     };
   }, [contentModel.modelId]),
       READ_CONTENT = _useMemo.READ_CONTENT;
 
-  var _useMemo2 = useMemo(function () {
+  var _useMemo2 = (0, _react.useMemo)(function () {
     return {
-      GET_REVISIONS: GQL.createRevisionsQuery(contentModel)
+      GET_REVISIONS: (0, _contentEntries.createRevisionsQuery)(contentModel)
     };
   }, [contentModel.modelId]),
       GET_REVISIONS = _useMemo2.GET_REVISIONS;
 
-  var setFormRef = useCallback(function (form) {
+  var setFormRef = (0, _react.useCallback)(function (form) {
     formRef.current = form;
   }, [formRef]);
-  var setTabsRef = useCallback(function (tabs) {
-    tabsRef.current = tabs;
-  }, [tabsRef]);
-  var createEntry = useCallback(function () {
+  var createEntry = (0, _react.useCallback)(function () {
     history.push("/cms/content-entries/".concat(contentModel.modelId, "?new=true"));
   }, [contentModel.modelId]);
-  var getEntry = useQuery(READ_CONTENT, {
+  var getEntry = (0, _hooks.useQuery)(READ_CONTENT, {
     variables: {
-      revision: decodeURIComponent(contentId)
+      revision: revisionId || ""
     },
-    skip: !contentId,
+    skip: !revisionId,
     onCompleted: function onCompleted(data) {
       if (!data) {
         return;
@@ -74,20 +152,22 @@ export var Provider = function Provider(_ref) {
 
       var error = data.content.error;
 
-      if (error) {
-        history.push("/cms/content-entries/".concat(contentModel.modelId));
-        showSnackbar(error.message);
+      if (!error) {
+        return;
       }
+
+      history.push("/cms/content-entries/".concat(contentModel.modelId));
+      showSnackbar(error.message);
     }
   });
-  var getRevisions = useQuery(GET_REVISIONS, {
+  var getRevisions = (0, _hooks.useQuery)(GET_REVISIONS, {
     variables: {
       id: entryId
     },
     skip: !entryId
   });
   var loading = isLoading || getEntry.loading || getRevisions.loading;
-  var entry = get(getEntry, "data.content.data") || {};
+  var entry = (0, _get.default)(getEntry, "data.content.data") || {};
   var value = {
     canCreate: canCreate,
     contentModel: contentModel,
@@ -98,16 +178,17 @@ export var Provider = function Provider(_ref) {
     entry: entry,
     form: formRef,
     loading: loading,
-    revisions: get(getRevisions, "data.revisions.data") || {},
+    revisions: (0, _get.default)(getRevisions, "data.revisions.data") || [],
     refetchContent: getEntry.refetch,
     setFormRef: setFormRef,
     setLoading: setLoading,
-    setTabsRef: setTabsRef,
-    showEmptyView: !newEntry && !loading && isEmpty(entry),
-    tabs: tabsRef
+    tabsRef: tabsRef,
+    showEmptyView: !newEntry && !loading && (0, _isEmpty.default)(entry)
   };
-  return /*#__PURE__*/React.createElement(Context.Provider, {
+  return /*#__PURE__*/_react.default.createElement(Context.Provider, {
     value: value
   }, children);
 };
+
+exports.Provider = Provider;
 Provider.displayName = "ContentEntryProvider";