@webiny/app-headless-cms 5.25.0-beta.2 → 5.25.0-beta.3

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

@@ -1,21 +1,15 @@
 import { CmsEditorField } from "../../../../../types";
 import { BindComponentRenderProp } from "@webiny/form";
-export interface ReferencedCmsEntry {
-    id: string;
-    modelId: string;
-    modelName: string;
-    published: boolean;
-    name: string;
-}
+import { OptionItem } from "./types";
 interface UseReferencesParams {
     bind: BindComponentRenderProp;
     field: CmsEditorField;
 }
 export declare const useReferences: ({ bind, field }: UseReferencesParams) => {
-    onChange: (values: ReferencedCmsEntry[]) => void;
+    onChange: (values: OptionItem[]) => void;
     loading: boolean;
     setSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
-    entries: ReferencedCmsEntry[];
-    options: import("./getOptions").OptionItem[];
+    entries: OptionItem[];
+    options: OptionItem[];
 };
 export {};

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

@@ -1,25 +1,15 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useApolloClient } from "../../../../hooks";
-import * as GQL from "./graphql";
-import { getOptions } from "./getOptions";
-
-function distinctBy(key, array) {
-  var keys = array.map(function (value) {
-    return value[key];
-  });
-  return array.filter(function (value, index) {
-    return keys.indexOf(value[key]) === index;
-  });
-}
-
+import { SEARCH_CONTENT_ENTRIES, GET_CONTENT_ENTRIES } from "./graphql";
+import { convertReferenceEntriesToOptionCollection, convertReferenceEntryToOption } from "./helpers";
 export var useReferences = function useReferences(_ref) {
   var bind = _ref.bind,
       field = _ref.field;
-  var allEntries = useRef([]);
+  var allEntries = useRef({});
   var client = useApolloClient();
 
   var _useState = useState(""),
@@ -32,7 +22,7 @@ export var useReferences = function useReferences(_ref) {
       loading = _useState4[0],
       setLoading = _useState4[1];
 
-  var _useState5 = useState([]),
+  var _useState5 = useState({}),
       _useState6 = _slicedToArray(_useState5, 2),
       entries = _useState6[0],
       setEntries = _useState6[1];
@@ -53,7 +43,7 @@ export var useReferences = function useReferences(_ref) {
 
   var searchEntries = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _yield$client$query, data;
+      var _yield$client$query, data, collection;
 
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -70,7 +60,7 @@ export var useReferences = function useReferences(_ref) {
               setLoading(true);
               _context.next = 5;
               return client.query({
-                query: GQL.SEARCH_CONTENT_ENTRIES,
+                query: SEARCH_CONTENT_ENTRIES,
                 variables: {
                   modelIds: models.map(function (m) {
                     return m.modelId;
@@ -83,10 +73,11 @@ export var useReferences = function useReferences(_ref) {
               _yield$client$query = _context.sent;
               data = _yield$client$query.data;
               setLoading(false);
-              allEntries.current = distinctBy("id", [].concat(_toConsumableArray(allEntries.current), _toConsumableArray(data.content.data)));
-              setEntries(data.content.data);
+              collection = convertReferenceEntriesToOptionCollection(data.content.data);
+              allEntries.current = _objectSpread(_objectSpread({}, allEntries.current), collection);
+              setEntries(collection);
 
-            case 10:
+            case 11:
             case "end":
               return _context.stop();
           }
@@ -104,12 +95,11 @@ export var useReferences = function useReferences(_ref) {
   }, [search]);
   useEffect(function () {
     client.query({
-      query: GQL.SEARCH_CONTENT_ENTRIES,
+      query: SEARCH_CONTENT_ENTRIES,
       variables: {
         modelIds: models.map(function (m) {
           return m.modelId;
         }),
-        query: "__latest__",
         limit: 10
       },
 
@@ -120,34 +110,56 @@ export var useReferences = function useReferences(_ref) {
       fetchPolicy: "network-only"
     }).then(function (_ref3) {
       var data = _ref3.data;
-      setLatestEntries(data.content.data);
-      allEntries.current = _toConsumableArray(data.content.data);
+      var collection = convertReferenceEntriesToOptionCollection(data.content.data);
+      setLatestEntries(Object.values(collection));
+      allEntries.current = _objectSpread({}, collection);
     });
   }, [modelsHash]);
   useEffect(function () {
-    if (!values || !values.length) {
+    if (!values || values.length == 0) {
       return;
     }
 
     setLoading(true);
     client.query({
-      query: GQL.GET_CONTENT_ENTRIES,
+      query: GET_CONTENT_ENTRIES,
       variables: {
-        entries: values
+        /**
+         * We need make sure nothing else other than modelId and id is passed to entries variable.
+         */
+        entries: values.map(function (value) {
+          return {
+            modelId: value.modelId,
+            id: value.id
+          };
+        })
       }
     }).then(function (res) {
       setLoading(false);
-      var entries = res.data.content.data; // Calculate a couple of props for the Autocomplete component.
-
-      setValueEntries(entries.map(function (entry) {
-        return {
-          id: entry.id,
-          modelId: entry.model.modelId,
-          modelName: entry.model.name,
-          published: entry.status === "published",
-          name: entry.title
-        };
-      }));
+      var latest = (res.data.latest.data || []).reduce(function (collection, item) {
+        collection[item.entryId] = item;
+        return collection;
+      }, {});
+      var entries = (res.data.published.data || []).reduce(function (collection, item) {
+        var entryId = item.entryId;
+        var existingItem = latest[entryId];
+
+        if (existingItem) {
+          collection[entryId] = _objectSpread(_objectSpread({}, existingItem), {}, {
+            published: {
+              id: item.id,
+              entryId: item.entryId,
+              title: item.title
+            }
+          });
+          return collection;
+        }
+
+        collection[entryId] = item;
+        return collection;
+      }, latest); // Calculate a couple of props for the Autocomplete component.
+
+      setValueEntries(Object.values(entries).map(convertReferenceEntryToOption));
     });
   }, []);
   /**
@@ -168,11 +180,11 @@ export var useReferences = function useReferences(_ref) {
   }, []); // Format options for the Autocomplete component.
 
   var options = useMemo(function () {
-    return getOptions(entries);
+    return Object.values(entries);
   }, [entries]); // Format default options for the Autocomplete component.
 
   var defaultOptions = useMemo(function () {
-    return getOptions(latestEntries);
+    return Object.values(latestEntries);
   }, [latestEntries]);
   return {
     onChange: onChange,

package/admin/plugins/fieldRenderers/ref/components/useReferences.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useReferences.ts"],"names":["useCallback","useEffect","useMemo","useRef","useState","useApolloClient","GQL","getOptions","distinctBy","key","array","keys","map","value","filter","index","indexOf","useReferences","bind","field","allEntries","client","search","setSearch","loading","setLoading","entries","setEntries","latestEntries","setLatestEntries","valueEntries","setValueEntries","models","settings","modelsHash","join","values","searchEntries","query","SEARCH_CONTENT_ENTRIES","variables","modelIds","m","modelId","data","current","content","limit","fetchPolicy","then","length","GET_CONTENT_ENTRIES","res","entry","id","model","modelName","name","published","status","title","onChange","item","options","defaultOptions"],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useApolloClient } from \"~/admin/hooks\";\nimport * as GQL from \"./graphql\";\nimport { getOptions } from \"./getOptions\";\nimport { CmsEditorField, CmsLatestContentEntry, CmsModel } from \"~/types\";\nimport {\n    CmsEntrySearchQueryResponse,\n    CmsEntrySearchQueryVariables,\n    CmsEntryGetListResponse,\n    CmsEntryGetListVariables,\n    CmsEntryGetEntryVariable\n} from \"./graphql\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\nexport interface ReferencedCmsEntry {\n    id: string;\n    modelId: string;\n    modelName: string;\n    published: boolean;\n    name: string;\n}\n\nfunction distinctBy(\n    key: keyof CmsLatestContentEntry,\n    array: CmsLatestContentEntry[]\n): CmsLatestContentEntry[] {\n    const keys = array.map(value => value[key]);\n    return array.filter((value, index) => keys.indexOf(value[key]) === index);\n}\n\ninterface UseReferencesParams {\n    bind: BindComponentRenderProp;\n    field: CmsEditorField;\n}\nexport const useReferences = ({ bind, field }: UseReferencesParams) => {\n    const allEntries = useRef<CmsLatestContentEntry[]>([]);\n    const client = useApolloClient();\n    const [search, setSearch] = useState<string>(\"\");\n    const [loading, setLoading] = useState<boolean>(false);\n    const [entries, setEntries] = useState<CmsLatestContentEntry[]>([]);\n    const [latestEntries, setLatestEntries] = useState<CmsLatestContentEntry[]>([]);\n    const [valueEntries, setValueEntries] = useState<ReferencedCmsEntry[]>([]);\n\n    const models = (field.settings ? field.settings.models || [] : []) as Pick<\n        CmsModel,\n        \"modelId\"\n    >[];\n    const modelsHash = models.join(\",\");\n    const values: CmsEntryGetEntryVariable[] = bind.value ? bind.value : [];\n\n    const searchEntries = async (): Promise<void> => {\n        if (!search) {\n            return;\n        }\n\n        setLoading(true);\n        const { data } = await client.query<\n            CmsEntrySearchQueryResponse,\n            CmsEntrySearchQueryVariables\n        >({\n            query: GQL.SEARCH_CONTENT_ENTRIES,\n            variables: { modelIds: models.map(m => m.modelId), query: search }\n        });\n        setLoading(false);\n\n        allEntries.current = distinctBy(\"id\", [...allEntries.current, ...data.content.data]);\n        setEntries(data.content.data);\n    };\n\n    useEffect(() => {\n        searchEntries();\n    }, [search]);\n\n    useEffect(() => {\n        client\n            .query<CmsEntrySearchQueryResponse, CmsEntrySearchQueryVariables>({\n                query: GQL.SEARCH_CONTENT_ENTRIES,\n                variables: {\n                    modelIds: models.map(m => m.modelId),\n                    query: \"__latest__\",\n                    limit: 10\n                },\n                /**\n                 * We cannot update this query response in cache after a reference entry being created/deleted,\n                 * which result in cached response being stale, therefore, we're setting the fetchPolicy to \"network-only\" to by passing cache.\n                 */\n                fetchPolicy: \"network-only\"\n            })\n            .then(({ data }) => {\n                setLatestEntries(data.content.data);\n                allEntries.current = [...data.content.data];\n            });\n    }, [modelsHash]);\n\n    useEffect(() => {\n        if (!values || !values.length) {\n            return;\n        }\n\n        setLoading(true);\n\n        client\n            .query<CmsEntryGetListResponse, CmsEntryGetListVariables>({\n                query: GQL.GET_CONTENT_ENTRIES,\n                variables: { entries: values }\n            })\n            .then(res => {\n                setLoading(false);\n                const entries = res.data.content.data;\n\n                // Calculate a couple of props for the Autocomplete component.\n                setValueEntries(\n                    entries.map(entry => ({\n                        id: entry.id,\n                        modelId: entry.model.modelId,\n                        modelName: entry.model.name,\n                        published: entry.status === \"published\",\n                        name: entry.title\n                    }))\n                );\n            });\n    }, []);\n\n    /**\n     * onChange callback will update internal component state using the previously loaded entries by IDs.\n     * It will also format the value to store to the DB.\n     */\n    const onChange = useCallback((values: ReferencedCmsEntry[]) => {\n        setSearch(\"\");\n        setValueEntries(values);\n\n        // Update parent form\n        bind.onChange(values.map(item => ({ modelId: item.modelId, id: item.id })));\n    }, []);\n\n    // Format options for the Autocomplete component.\n    const options = useMemo(() => getOptions(entries), [entries]);\n\n    // Format default options for the Autocomplete component.\n    const defaultOptions = useMemo(() => getOptions(latestEntries), [latestEntries]);\n\n    return {\n        onChange,\n        loading,\n        setSearch,\n        // Selected entries\n        entries: valueEntries,\n        // Options to show when the autocomplete dropdown is visible\n        options: search ? options : defaultOptions || []\n    };\n};\n"]}
+{"version":3,"sources":["useReferences.ts"],"names":["useCallback","useEffect","useMemo","useRef","useState","useApolloClient","SEARCH_CONTENT_ENTRIES","GET_CONTENT_ENTRIES","convertReferenceEntriesToOptionCollection","convertReferenceEntryToOption","useReferences","bind","field","allEntries","client","search","setSearch","loading","setLoading","entries","setEntries","latestEntries","setLatestEntries","valueEntries","setValueEntries","models","settings","modelsHash","join","values","value","searchEntries","query","variables","modelIds","map","m","modelId","data","collection","content","current","limit","fetchPolicy","then","Object","length","id","res","latest","reduce","item","entryId","published","existingItem","title","onChange","options","defaultOptions"],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useApolloClient } from \"~/admin/hooks\";\nimport { CmsEditorField, CmsModel } from \"~/types\";\nimport {\n    SEARCH_CONTENT_ENTRIES,\n    GET_CONTENT_ENTRIES,\n    CmsEntrySearchQueryResponse,\n    CmsEntrySearchQueryVariables,\n    CmsEntryGetListResponse,\n    CmsEntryGetListVariables,\n    CmsEntryGetEntryVariable\n} from \"./graphql\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { CmsReferenceContentEntry, OptionItem, OptionItemCollection } from \"./types\";\nimport {\n    convertReferenceEntriesToOptionCollection,\n    convertReferenceEntryToOption\n} from \"~/admin/plugins/fieldRenderers/ref/components/helpers\";\n\ninterface UseReferencesParams {\n    bind: BindComponentRenderProp;\n    field: CmsEditorField;\n}\nexport const useReferences = ({ bind, field }: UseReferencesParams) => {\n    const allEntries = useRef<OptionItemCollection>({});\n    const client = useApolloClient();\n    const [search, setSearch] = useState<string>(\"\");\n    const [loading, setLoading] = useState<boolean>(false);\n    const [entries, setEntries] = useState<OptionItemCollection>({});\n    const [latestEntries, setLatestEntries] = useState<OptionItem[]>([]);\n    const [valueEntries, setValueEntries] = useState<OptionItem[]>([]);\n\n    const models = (field.settings ? field.settings.models || [] : []) as Pick<\n        CmsModel,\n        \"modelId\"\n    >[];\n    const modelsHash = models.join(\",\");\n    const values: CmsEntryGetEntryVariable[] = bind.value ? bind.value : [];\n\n    const searchEntries = async (): Promise<void> => {\n        if (!search) {\n            return;\n        }\n\n        setLoading(true);\n        const { data } = await client.query<\n            CmsEntrySearchQueryResponse,\n            CmsEntrySearchQueryVariables\n        >({\n            query: SEARCH_CONTENT_ENTRIES,\n            variables: {\n                modelIds: models.map(m => m.modelId),\n                query: search\n            }\n        });\n        setLoading(false);\n\n        const collection = convertReferenceEntriesToOptionCollection(data.content.data);\n\n        allEntries.current = {\n            ...allEntries.current,\n            ...collection\n        };\n\n        setEntries(collection);\n    };\n\n    useEffect(() => {\n        searchEntries();\n    }, [search]);\n\n    useEffect(() => {\n        client\n            .query<CmsEntrySearchQueryResponse, CmsEntrySearchQueryVariables>({\n                query: SEARCH_CONTENT_ENTRIES,\n                variables: {\n                    modelIds: models.map(m => m.modelId),\n                    limit: 10\n                },\n                /**\n                 * We cannot update this query response in cache after a reference entry being created/deleted,\n                 * which result in cached response being stale, therefore, we're setting the fetchPolicy to \"network-only\" to by passing cache.\n                 */\n                fetchPolicy: \"network-only\"\n            })\n            .then(({ data }) => {\n                const collection = convertReferenceEntriesToOptionCollection(data.content.data);\n                setLatestEntries(Object.values(collection));\n                allEntries.current = {\n                    ...collection\n                };\n            });\n    }, [modelsHash]);\n\n    useEffect(() => {\n        if (!values || values.length == 0) {\n            return;\n        }\n\n        setLoading(true);\n\n        client\n            .query<CmsEntryGetListResponse, CmsEntryGetListVariables>({\n                query: GET_CONTENT_ENTRIES,\n                variables: {\n                    /**\n                     * We need make sure nothing else other than modelId and id is passed to entries variable.\n                     */\n                    entries: values.map(value => {\n                        return {\n                            modelId: value.modelId,\n                            id: value.id\n                        };\n                    })\n                }\n            })\n            .then(res => {\n                setLoading(false);\n\n                const latest = (res.data.latest.data || []).reduce((collection, item) => {\n                    collection[item.entryId] = item;\n                    return collection;\n                }, {} as Record<string, CmsReferenceContentEntry>);\n\n                const entries = (res.data.published.data || []).reduce((collection, item) => {\n                    const entryId = item.entryId;\n                    const existingItem = latest[entryId];\n                    if (existingItem) {\n                        collection[entryId] = {\n                            ...existingItem,\n                            published: {\n                                id: item.id,\n                                entryId: item.entryId,\n                                title: item.title\n                            }\n                        };\n                        return collection;\n                    }\n                    collection[entryId] = item;\n                    return collection;\n                }, latest);\n\n                // Calculate a couple of props for the Autocomplete component.\n                setValueEntries(Object.values(entries).map(convertReferenceEntryToOption));\n            });\n    }, []);\n\n    /**\n     * onChange callback will update internal component state using the previously loaded entries by IDs.\n     * It will also format the value to store to the DB.\n     */\n    const onChange = useCallback((values: OptionItem[]): void => {\n        setSearch(\"\");\n        setValueEntries(values);\n\n        // Update parent form\n        bind.onChange(\n            values.map(item => ({\n                modelId: item.modelId,\n                id: item.id\n            }))\n        );\n    }, []);\n\n    // Format options for the Autocomplete component.\n    const options = useMemo(() => Object.values(entries), [entries]);\n\n    // Format default options for the Autocomplete component.\n    const defaultOptions = useMemo(() => Object.values(latestEntries), [latestEntries]);\n\n    return {\n        onChange,\n        loading,\n        setSearch,\n        // Selected entries\n        entries: valueEntries,\n        // Options to show when the autocomplete dropdown is visible\n        options: search ? options : defaultOptions || []\n    };\n};\n"]}

package/admin/plugins/index.d.ts

@@ -1,4 +1,4 @@
-declare const _default: () => (import("@webiny/app/types").CacheGetObjectIdPlugin | import("@webiny/app-admin/types").AdminInstallationPlugin | import("@webiny/app-admin/types").AdminAppPermissionRendererPlugin | import("../../types").CmsEditorFormSettingsPlugin | import("../../types").CmsIconsPlugin | import("../../types").CmsFieldValueTransformer[] | import("@webiny/app/types").RoutePlugin[] | import("../../types").CmsContentDetailsPlugin[] | {
+declare const _default: () => (import("../../types").CmsEditorFormSettingsPlugin | import("../../types").CmsIconsPlugin | import("../../types").CmsFieldValueTransformer[] | import("@webiny/app/types").CacheGetObjectIdPlugin | import("@webiny/app/types").RoutePlugin[] | import("@webiny/app-admin/types").AdminInstallationPlugin | import("@webiny/app-admin/types").AdminAppPermissionRendererPlugin | import("../../types").CmsContentDetailsPlugin[] | {
     name: string;
     type: string;
     render(): JSX.Element;

package/admin/views/contentEntries/ContentEntries.js

@@ -22,7 +22,9 @@ var ContentEntries = function ContentEntries() {
   var _useRouter = useRouter(),
       params = _useRouter.params;
 
-  var _useState = useState(),
+  var modelId = params ? params["modelId"] : null;
+
+  var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       contentModel = _useState2[0],
       setContentModel = _useState2[1];
@@ -30,12 +32,10 @@ var ContentEntries = function ContentEntries() {
   var _useRouter2 = useRouter(),
       history = _useRouter2.history;
 
-  var modelId = params ? params["modelId"] : null;
-
   var _useSnackbar = useSnackbar(),
       showSnackbar = _useSnackbar.showSnackbar;
 
-  useQuery(GET_CONTENT_MODEL, {
+  var _useQuery = useQuery(GET_CONTENT_MODEL, {
     skip: !modelId,
     variables: {
       modelId: modelId
@@ -52,12 +52,17 @@ var ContentEntries = function ContentEntries() {
         modelId: modelId
       }));
     }
-  });
+  }),
+      loading = _useQuery.loading,
+      error = _useQuery.error;
 
-  if (!contentModel) {
+  if (!contentModel || loading) {
     return /*#__PURE__*/React.createElement(CircularProgress, {
       label: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Loading content model..."])))
     });
+  } else if (error) {
+    showSnackbar(error.message);
+    return null;
   }
 
   return /*#__PURE__*/React.createElement(ContentEntriesProvider, {

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

@@ -1 +1 @@
-{"version":3,"sources":["ContentEntries.tsx"],"names":["React","useState","get","useRouter","useSnackbar","i18n","CircularProgress","LeftPanel","RightPanel","SplitView","Provider","ContentEntriesProvider","GET_CONTENT_MODEL","useQuery","ContentEntriesList","ContentEntry","ContentEntryProvider","t","ns","ContentEntries","params","contentModel","setContentModel","history","modelId","showSnackbar","skip","variables","onCompleted","data","push"],"mappings":";;;;;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,OAAOC,GAAP,MAAgB,YAAhB;AACA,SAASC,SAAT,QAA0B,sBAA1B;AACA,SAASC,WAAT,QAA4B,qCAA5B;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAASC,SAAT,EAAoBC,UAApB,EAAgCC,SAAhC,QAAiD,wCAAjD;AACA,SAASC,QAAQ,IAAIC,sBAArB;AACA,SACIC,iBADJ;AAKA,SAASC,QAAT;AACA,OAAOC,kBAAP;AACA,SAASC,YAAT;AACA,SAASL,QAAQ,IAAIM,oBAArB;AAGA,IAAMC,CAAC,GAAGZ,IAAI,CAACa,EAAL,CAAQ,wCAAR,CAAV;;AAEA,IAAMC,cAAwB,GAAG,SAA3BA,cAA2B,GAAM;AACnC,mBAAmBhB,SAAS,EAA5B;AAAA,MAAQiB,MAAR,cAAQA,MAAR;;AACA,kBAAwCnB,QAAQ,EAAhD;AAAA;AAAA,MAAOoB,YAAP;AAAA,MAAqBC,eAArB;;AACA,oBAAoBnB,SAAS,EAA7B;AAAA,MAAQoB,OAAR,eAAQA,OAAR;;AACA,MAAMC,OAAO,GAAGJ,MAAM,GAAGA,MAAM,CAAC,SAAD,CAAT,GAAuB,IAA7C;;AACA,qBAAyBhB,WAAW,EAApC;AAAA,MAAQqB,YAAR,gBAAQA,YAAR;;AAEAZ,EAAAA,QAAQ,CAAsDD,iBAAtD,EAAyE;AAC7Ec,IAAAA,IAAI,EAAE,CAACF,OADsE;AAE7EG,IAAAA,SAAS,EAAE;AAAEH,MAAAA,OAAO,EAAPA;AAAF,KAFkE;AAG7EI,IAAAA,WAAW,EAAE,qBAAAC,IAAI,EAAI;AACjB,UAAMR,YAAY,GAAGnB,GAAG,CAAC2B,IAAD,EAAO,sBAAP,EAA+B,IAA/B,CAAxB;;AACA,UAAIR,YAAJ,EAAkB;AACd,eAAOC,eAAe,CAACD,YAAD,CAAtB;AACH;;AAEDE,MAAAA,OAAO,CAACO,IAAR,CAAa,qBAAb;AACAL,MAAAA,YAAY,CACRR,CAAC,mIAAD,CAAgE;AAC5DO,QAAAA,OAAO,EAAPA;AAD4D,OAAhE,CADQ,CAAZ;AAKH;AAf4E,GAAzE,CAAR;;AAkBA,MAAI,CAACH,YAAL,EAAmB;AACf,wBAAO,oBAAC,gBAAD;AAAkB,MAAA,KAAK,EAAEJ,CAAF;AAAvB,MAAP;AACH;;AAED,sBACI,oBAAC,sBAAD;AAAwB,IAAA,YAAY,EAAEI,YAAtC;AAAoD,IAAA,GAAG,EAAEA,YAAY,CAACG;AAAtE,kBACI,oBAAC,SAAD,qBACI,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAE;AAAjB,kBACI,oBAAC,kBAAD,OADJ,CADJ,eAII,oBAAC,UAAD;AAAY,IAAA,IAAI,EAAE;AAAlB,kBACI,oBAAC,oBAAD,qBACI,oBAAC,YAAD,OADJ,CADJ,CAJJ,CADJ,CADJ;AAcH,CA3CD;;AA6CA,eAAeL,cAAf","sourcesContent":["import React, { useState } from \"react\";\nimport get from \"lodash/get\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { LeftPanel, RightPanel, SplitView } from \"@webiny/app-admin/components/SplitView\";\nimport { Provider as ContentEntriesProvider } from \"~/admin/views/contentEntries/ContentEntriesContext\";\nimport {\n    GET_CONTENT_MODEL,\n    GetCmsModelQueryResponse,\n    GetCmsModelQueryVariables\n} from \"~/admin/graphql/contentModels\";\nimport { useQuery } from \"../../hooks\";\nimport ContentEntriesList from \"~/admin/views/contentEntries/ContentEntriesList\";\nimport { ContentEntry } from \"~/admin/views/contentEntries/ContentEntry\";\nimport { Provider as ContentEntryProvider } from \"./ContentEntry/ContentEntryContext\";\nimport { CmsModel } from \"~/types\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-entries\");\n\nconst ContentEntries: React.FC = () => {\n    const { params } = useRouter();\n    const [contentModel, setContentModel] = useState<CmsModel>();\n    const { history } = useRouter();\n    const modelId = params ? params[\"modelId\"] : null;\n    const { showSnackbar } = useSnackbar();\n\n    useQuery<GetCmsModelQueryResponse, GetCmsModelQueryVariables>(GET_CONTENT_MODEL, {\n        skip: !modelId,\n        variables: { modelId },\n        onCompleted: data => {\n            const contentModel = get(data, \"getContentModel.data\", null);\n            if (contentModel) {\n                return setContentModel(contentModel);\n            }\n\n            history.push(\"/cms/content-models\");\n            showSnackbar(\n                t`Could not load content for model \"{modelId}\". Redirecting...`({\n                    modelId\n                })\n            );\n        }\n    });\n\n    if (!contentModel) {\n        return <CircularProgress label={t`Loading content model...`} />;\n    }\n\n    return (\n        <ContentEntriesProvider contentModel={contentModel} key={contentModel.modelId}>\n            <SplitView>\n                <LeftPanel span={4}>\n                    <ContentEntriesList />\n                </LeftPanel>\n                <RightPanel span={8}>\n                    <ContentEntryProvider>\n                        <ContentEntry />\n                    </ContentEntryProvider>\n                </RightPanel>\n            </SplitView>\n        </ContentEntriesProvider>\n    );\n};\n\nexport default ContentEntries;\n"]}
+{"version":3,"sources":["ContentEntries.tsx"],"names":["React","useState","get","useRouter","useSnackbar","i18n","CircularProgress","LeftPanel","RightPanel","SplitView","Provider","ContentEntriesProvider","GET_CONTENT_MODEL","useQuery","ContentEntriesList","ContentEntry","ContentEntryProvider","t","ns","ContentEntries","params","modelId","contentModel","setContentModel","history","showSnackbar","skip","variables","onCompleted","data","push","loading","error","message"],"mappings":";;;;;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,OAAOC,GAAP,MAAgB,YAAhB;AACA,SAASC,SAAT,QAA0B,sBAA1B;AACA,SAASC,WAAT,QAA4B,qCAA5B;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAASC,SAAT,EAAoBC,UAApB,EAAgCC,SAAhC,QAAiD,wCAAjD;AACA,SAASC,QAAQ,IAAIC,sBAArB;AACA,SACIC,iBADJ;AAKA,SAASC,QAAT;AACA,OAAOC,kBAAP;AACA,SAASC,YAAT;AACA,SAASL,QAAQ,IAAIM,oBAArB;AAGA,IAAMC,CAAC,GAAGZ,IAAI,CAACa,EAAL,CAAQ,wCAAR,CAAV;;AAEA,IAAMC,cAAwB,GAAG,SAA3BA,cAA2B,GAAM;AACnC,mBAAmBhB,SAAS,EAA5B;AAAA,MAAQiB,MAAR,cAAQA,MAAR;;AACA,MAAMC,OAAO,GAAGD,MAAM,GAAGA,MAAM,CAAC,SAAD,CAAT,GAAuB,IAA7C;;AACA,kBAAwCnB,QAAQ,CAAkB,IAAlB,CAAhD;AAAA;AAAA,MAAOqB,YAAP;AAAA,MAAqBC,eAArB;;AACA,oBAAoBpB,SAAS,EAA7B;AAAA,MAAQqB,OAAR,eAAQA,OAAR;;AACA,qBAAyBpB,WAAW,EAApC;AAAA,MAAQqB,YAAR,gBAAQA,YAAR;;AAEA,kBAA2BZ,QAAQ,CAC/BD,iBAD+B,EAE/B;AACIc,IAAAA,IAAI,EAAE,CAACL,OADX;AAEIM,IAAAA,SAAS,EAAE;AACPN,MAAAA,OAAO,EAAPA;AADO,KAFf;AAKIO,IAAAA,WAAW,EAAE,qBAAAC,IAAI,EAAI;AACjB,UAAMP,YAAY,GAAGpB,GAAG,CAAC2B,IAAD,EAAO,sBAAP,EAA+B,IAA/B,CAAxB;;AACA,UAAIP,YAAJ,EAAkB;AACd,eAAOC,eAAe,CAACD,YAAD,CAAtB;AACH;;AAEDE,MAAAA,OAAO,CAACM,IAAR,CAAa,qBAAb;AACAL,MAAAA,YAAY,CACRR,CAAC,mIAAD,CAAgE;AAC5DI,QAAAA,OAAO,EAAPA;AAD4D,OAAhE,CADQ,CAAZ;AAKH;AAjBL,GAF+B,CAAnC;AAAA,MAAQU,OAAR,aAAQA,OAAR;AAAA,MAAiBC,KAAjB,aAAiBA,KAAjB;;AAuBA,MAAI,CAACV,YAAD,IAAiBS,OAArB,EAA8B;AAC1B,wBAAO,oBAAC,gBAAD;AAAkB,MAAA,KAAK,EAAEd,CAAF;AAAvB,MAAP;AACH,GAFD,MAEO,IAAIe,KAAJ,EAAW;AACdP,IAAAA,YAAY,CAACO,KAAK,CAACC,OAAP,CAAZ;AACA,WAAO,IAAP;AACH;;AAED,sBACI,oBAAC,sBAAD;AAAwB,IAAA,YAAY,EAAEX,YAAtC;AAAoD,IAAA,GAAG,EAAEA,YAAY,CAACD;AAAtE,kBACI,oBAAC,SAAD,qBACI,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAE;AAAjB,kBACI,oBAAC,kBAAD,OADJ,CADJ,eAII,oBAAC,UAAD;AAAY,IAAA,IAAI,EAAE;AAAlB,kBACI,oBAAC,oBAAD,qBACI,oBAAC,YAAD,OADJ,CADJ,CAJJ,CADJ,CADJ;AAcH,CAnDD;;AAqDA,eAAeF,cAAf","sourcesContent":["import React, { useState } from \"react\";\nimport get from \"lodash/get\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { LeftPanel, RightPanel, SplitView } from \"@webiny/app-admin/components/SplitView\";\nimport { Provider as ContentEntriesProvider } from \"~/admin/views/contentEntries/ContentEntriesContext\";\nimport {\n    GET_CONTENT_MODEL,\n    GetCmsModelQueryResponse,\n    GetCmsModelQueryVariables\n} from \"~/admin/graphql/contentModels\";\nimport { useQuery } from \"../../hooks\";\nimport ContentEntriesList from \"~/admin/views/contentEntries/ContentEntriesList\";\nimport { ContentEntry } from \"~/admin/views/contentEntries/ContentEntry\";\nimport { Provider as ContentEntryProvider } from \"./ContentEntry/ContentEntryContext\";\nimport { CmsModel } from \"~/types\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-entries\");\n\nconst ContentEntries: React.FC = () => {\n    const { params } = useRouter();\n    const modelId = params ? params[\"modelId\"] : null;\n    const [contentModel, setContentModel] = useState<CmsModel | null>(null);\n    const { history } = useRouter();\n    const { showSnackbar } = useSnackbar();\n\n    const { loading, error } = useQuery<GetCmsModelQueryResponse, GetCmsModelQueryVariables>(\n        GET_CONTENT_MODEL,\n        {\n            skip: !modelId,\n            variables: {\n                modelId\n            },\n            onCompleted: data => {\n                const contentModel = get(data, \"getContentModel.data\", null);\n                if (contentModel) {\n                    return setContentModel(contentModel);\n                }\n\n                history.push(\"/cms/content-models\");\n                showSnackbar(\n                    t`Could not load content for model \"{modelId}\". Redirecting...`({\n                        modelId\n                    })\n                );\n            }\n        }\n    );\n\n    if (!contentModel || loading) {\n        return <CircularProgress label={t`Loading content model...`} />;\n    } else if (error) {\n        showSnackbar(error.message);\n        return null;\n    }\n\n    return (\n        <ContentEntriesProvider contentModel={contentModel} key={contentModel.modelId}>\n            <SplitView>\n                <LeftPanel span={4}>\n                    <ContentEntriesList />\n                </LeftPanel>\n                <RightPanel span={8}>\n                    <ContentEntryProvider>\n                        <ContentEntry />\n                    </ContentEntryProvider>\n                </RightPanel>\n            </SplitView>\n        </ContentEntriesProvider>\n    );\n};\n\nexport default ContentEntries;\n"]}

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

@@ -171,9 +171,9 @@ export var Provider = function Provider(_ref) {
   }, [contentModel.modelId]);
   var getEntry = useQuery(READ_CONTENT, {
     variables: {
-      revision: contentId ? decodeURIComponent(contentId) : ""
+      revision: revisionId || ""
     },
-    skip: !contentId,
+    skip: !revisionId,
     onCompleted: function onCompleted(data) {
       if (!data) {
         return;

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

@@ -1 +1 @@
-{"version":3,"sources":["ContentEntryContext.tsx"],"names":["React","useRef","useState","useCallback","useMemo","isEmpty","get","useRouter","useSnackbar","useQuery","useContentEntries","parseIdentifier","createReadQuery","createRevisionsQuery","Context","createContext","createEntry","entry","form","current","submit","canCreate","showEmptyView","tabs","setTabsRef","refetchContent","revisions","setLoading","loading","listQueryVariables","setListQueryVariables","contentModel","sorters","setFormRef","useContentEntryProviderProps","location","query","URLSearchParams","search","isNewEntry","getContentId","Provider","children","formRef","tabsRef","history","showSnackbar","isLoading","contentEntryProviderProps","newEntry","contentId","revisionId","decodeURIComponent","entryId","result","id","READ_CONTENT","modelId","GET_REVISIONS","push","getEntry","variables","revision","skip","onCompleted","data","error","content","message","getRevisions","value","refetch","displayName"],"mappings":"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","sourcesContent":["import React, {\n    useRef,\n    useState,\n    useCallback,\n    useMemo,\n    Dispatch,\n    SetStateAction,\n    MutableRefObject\n} from \"react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport get from \"lodash/get\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { useQuery } from \"~/admin/hooks\";\nimport { ContentEntriesContext } from \"~/admin/views/contentEntries/ContentEntriesContext\";\nimport { useContentEntries } from \"~/admin/views/contentEntries/hooks/useContentEntries\";\nimport { CmsContentEntryRevision, CmsEditorContentEntry, CmsEditorContentModel } from \"~/types\";\nimport { Tabs } from \"@webiny/ui/Tabs\";\nimport { parseIdentifier } from \"@webiny/utils\";\nimport {\n    CmsEntriesListRevisionsQueryResponse,\n    CmsEntriesListRevisionsQueryVariables,\n    CmsEntryGetQueryResponse,\n    CmsEntryGetQueryVariables,\n    createReadQuery,\n    createRevisionsQuery\n} from \"~/admin/graphql/contentEntries\";\n\ninterface ContentEntryContextForm {\n    submit: (ev: React.SyntheticEvent) => Promise<CmsEditorContentEntry | null>;\n}\ntype ContentEntryContextFormRef = MutableRefObject<ContentEntryContextForm>;\ntype ContentEntryContextTabsRef = MutableRefObject<Tabs | null>;\nexport interface ContentEntryContext extends ContentEntriesContext {\n    createEntry: () => void;\n    entry: CmsEditorContentEntry;\n    form: ContentEntryContextFormRef;\n    setFormRef: (form: { submit: Function }) => void;\n    loading: boolean;\n    setLoading: Dispatch<SetStateAction<boolean>>;\n    revisions: CmsContentEntryRevision[];\n    refetchContent: () => void;\n    tabs: ContentEntryContextTabsRef;\n    setTabsRef: (tabs: Tabs) => void;\n    showEmptyView: boolean;\n}\n\nexport const Context = React.createContext<ContentEntryContext>({\n    createEntry: () => {\n        return void 0;\n    },\n    entry: null as unknown as CmsEditorContentEntry,\n    form: {\n        current: {\n            submit: async () => {\n                return null;\n            }\n        }\n    },\n    canCreate: false,\n    showEmptyView: false,\n    tabs: {\n        current: null\n    },\n    setTabsRef: () => {\n        return void 0;\n    },\n    refetchContent: () => {\n        return void 0;\n    },\n    revisions: [],\n    setLoading: () => {\n        return void 0;\n    },\n    loading: false,\n    listQueryVariables: {},\n    setListQueryVariables: () => {\n        return void 0;\n    },\n    contentModel: null as unknown as CmsEditorContentModel,\n    sorters: [],\n    setFormRef: () => {\n        return void 0;\n    }\n});\n\nexport interface ContentEntryContextProviderProps extends Partial<UseContentEntryProviderProps> {\n    children: React.ReactNode;\n}\n\ninterface UseContentEntryProviderProps {\n    getContentId: () => string | null;\n    isNewEntry: () => boolean;\n}\n\nexport const useContentEntryProviderProps = (): UseContentEntryProviderProps => {\n    const { location } = useRouter();\n    const query = new URLSearchParams(location.search);\n\n    const isNewEntry = (): boolean => {\n        return query.get(\"new\") === \"true\";\n    };\n\n    const getContentId = (): string | null => {\n        return query.get(\"id\") || null;\n    };\n\n    return {\n        getContentId,\n        isNewEntry\n    };\n};\n\nexport const Provider: React.FC<ContentEntryContextProviderProps> = ({\n    children,\n    isNewEntry,\n    getContentId\n}) => {\n    const { contentModel, canCreate, listQueryVariables, setListQueryVariables, sorters } =\n        useContentEntries();\n\n    const formRef = useRef<ContentEntryContextForm>({\n        submit: async () => {\n            return null;\n        }\n    });\n    const tabsRef = useRef<Tabs | null>(null);\n    const { history } = useRouter();\n    const { showSnackbar } = useSnackbar();\n    const [isLoading, setLoading] = useState(false);\n\n    const contentEntryProviderProps = useContentEntryProviderProps();\n\n    const newEntry =\n        typeof isNewEntry === \"function\" ? isNewEntry() : contentEntryProviderProps.isNewEntry();\n    const contentId =\n        typeof getContentId === \"function\"\n            ? getContentId()\n            : contentEntryProviderProps.getContentId();\n\n    const revisionId = contentId ? decodeURIComponent(contentId) : null;\n    let entryId = null;\n    if (revisionId) {\n        const result = parseIdentifier(revisionId);\n        entryId = result ? result.id : null;\n    }\n\n    const { READ_CONTENT } = useMemo(() => {\n        return {\n            READ_CONTENT: createReadQuery(contentModel)\n        };\n    }, [contentModel.modelId]);\n\n    const { GET_REVISIONS } = useMemo(() => {\n        return {\n            GET_REVISIONS: createRevisionsQuery(contentModel)\n        };\n    }, [contentModel.modelId]);\n\n    const setFormRef = useCallback(\n        form => {\n            formRef.current = form;\n        },\n        [formRef]\n    );\n\n    const setTabsRef = useCallback(\n        (tabs: Tabs) => {\n            tabsRef.current = tabs;\n        },\n        [tabsRef]\n    );\n\n    const createEntry = useCallback((): void => {\n        history.push(`/cms/content-entries/${contentModel.modelId}?new=true`);\n    }, [contentModel.modelId]);\n\n    const getEntry = useQuery<CmsEntryGetQueryResponse, CmsEntryGetQueryVariables>(READ_CONTENT, {\n        variables: {\n            revision: contentId ? decodeURIComponent(contentId) : \"\"\n        },\n        skip: !contentId,\n        onCompleted: data => {\n            if (!data) {\n                return;\n            }\n\n            const { error } = data.content;\n            if (!error) {\n                return;\n            }\n            history.push(`/cms/content-entries/${contentModel.modelId}`);\n            showSnackbar(error.message);\n        }\n    });\n\n    const getRevisions = useQuery<\n        CmsEntriesListRevisionsQueryResponse,\n        CmsEntriesListRevisionsQueryVariables\n    >(GET_REVISIONS, {\n        variables: {\n            id: entryId as string\n        },\n        skip: !entryId\n    });\n\n    const loading = isLoading || getEntry.loading || getRevisions.loading;\n    const entry: CmsEditorContentEntry = get(getEntry, \"data.content.data\") || {};\n\n    const value = {\n        canCreate,\n        contentModel,\n        createEntry,\n        listQueryVariables,\n        setListQueryVariables,\n        sorters,\n        entry,\n        form: formRef,\n        loading,\n        revisions: get(getRevisions, \"data.revisions.data\") || {},\n        refetchContent: getEntry.refetch,\n        setFormRef,\n        setLoading,\n        setTabsRef,\n        showEmptyView: !newEntry && !loading && isEmpty(entry),\n        tabs: tabsRef\n    };\n\n    return <Context.Provider value={value}>{children}</Context.Provider>;\n};\n\nProvider.displayName = \"ContentEntryProvider\";\n"]}
+{"version":3,"sources":["ContentEntryContext.tsx"],"names":["React","useRef","useState","useCallback","useMemo","isEmpty","get","useRouter","useSnackbar","useQuery","useContentEntries","parseIdentifier","createReadQuery","createRevisionsQuery","Context","createContext","createEntry","entry","form","current","submit","canCreate","showEmptyView","tabs","setTabsRef","refetchContent","revisions","setLoading","loading","listQueryVariables","setListQueryVariables","contentModel","sorters","setFormRef","useContentEntryProviderProps","location","query","URLSearchParams","search","isNewEntry","getContentId","Provider","children","formRef","tabsRef","history","showSnackbar","isLoading","contentEntryProviderProps","newEntry","contentId","revisionId","decodeURIComponent","entryId","result","id","READ_CONTENT","modelId","GET_REVISIONS","push","getEntry","variables","revision","skip","onCompleted","data","error","content","message","getRevisions","value","refetch","displayName"],"mappings":"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","sourcesContent":["import React, {\n    useRef,\n    useState,\n    useCallback,\n    useMemo,\n    Dispatch,\n    SetStateAction,\n    MutableRefObject\n} from \"react\";\nimport isEmpty from \"lodash/isEmpty\";\nimport get from \"lodash/get\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { useQuery } from \"~/admin/hooks\";\nimport { ContentEntriesContext } from \"~/admin/views/contentEntries/ContentEntriesContext\";\nimport { useContentEntries } from \"~/admin/views/contentEntries/hooks/useContentEntries\";\nimport { CmsContentEntryRevision, CmsEditorContentEntry, CmsEditorContentModel } from \"~/types\";\nimport { Tabs } from \"@webiny/ui/Tabs\";\nimport { parseIdentifier } from \"@webiny/utils\";\nimport {\n    CmsEntriesListRevisionsQueryResponse,\n    CmsEntriesListRevisionsQueryVariables,\n    CmsEntryGetQueryResponse,\n    CmsEntryGetQueryVariables,\n    createReadQuery,\n    createRevisionsQuery\n} from \"~/admin/graphql/contentEntries\";\n\ninterface ContentEntryContextForm {\n    submit: (ev: React.SyntheticEvent) => Promise<CmsEditorContentEntry | null>;\n}\ntype ContentEntryContextFormRef = MutableRefObject<ContentEntryContextForm>;\ntype ContentEntryContextTabsRef = MutableRefObject<Tabs | null>;\nexport interface ContentEntryContext extends ContentEntriesContext {\n    createEntry: () => void;\n    entry: CmsEditorContentEntry;\n    form: ContentEntryContextFormRef;\n    setFormRef: (form: { submit: Function }) => void;\n    loading: boolean;\n    setLoading: Dispatch<SetStateAction<boolean>>;\n    revisions: CmsContentEntryRevision[];\n    refetchContent: () => void;\n    tabs: ContentEntryContextTabsRef;\n    setTabsRef: (tabs: Tabs) => void;\n    showEmptyView: boolean;\n}\n\nexport const Context = React.createContext<ContentEntryContext>({\n    createEntry: () => {\n        return void 0;\n    },\n    entry: null as unknown as CmsEditorContentEntry,\n    form: {\n        current: {\n            submit: async () => {\n                return null;\n            }\n        }\n    },\n    canCreate: false,\n    showEmptyView: false,\n    tabs: {\n        current: null\n    },\n    setTabsRef: () => {\n        return void 0;\n    },\n    refetchContent: () => {\n        return void 0;\n    },\n    revisions: [],\n    setLoading: () => {\n        return void 0;\n    },\n    loading: false,\n    listQueryVariables: {},\n    setListQueryVariables: () => {\n        return void 0;\n    },\n    contentModel: null as unknown as CmsEditorContentModel,\n    sorters: [],\n    setFormRef: () => {\n        return void 0;\n    }\n});\n\nexport interface ContentEntryContextProviderProps extends Partial<UseContentEntryProviderProps> {\n    children: React.ReactNode;\n}\n\ninterface UseContentEntryProviderProps {\n    getContentId: () => string | null;\n    isNewEntry: () => boolean;\n}\n\nexport const useContentEntryProviderProps = (): UseContentEntryProviderProps => {\n    const { location } = useRouter();\n    const query = new URLSearchParams(location.search);\n\n    const isNewEntry = (): boolean => {\n        return query.get(\"new\") === \"true\";\n    };\n\n    const getContentId = (): string | null => {\n        return query.get(\"id\") || null;\n    };\n\n    return {\n        getContentId,\n        isNewEntry\n    };\n};\n\nexport const Provider: React.FC<ContentEntryContextProviderProps> = ({\n    children,\n    isNewEntry,\n    getContentId\n}) => {\n    const { contentModel, canCreate, listQueryVariables, setListQueryVariables, sorters } =\n        useContentEntries();\n\n    const formRef = useRef<ContentEntryContextForm>({\n        submit: async () => {\n            return null;\n        }\n    });\n    const tabsRef = useRef<Tabs | null>(null);\n    const { history } = useRouter();\n    const { showSnackbar } = useSnackbar();\n    const [isLoading, setLoading] = useState(false);\n\n    const contentEntryProviderProps = useContentEntryProviderProps();\n\n    const newEntry =\n        typeof isNewEntry === \"function\" ? isNewEntry() : contentEntryProviderProps.isNewEntry();\n    const contentId =\n        typeof getContentId === \"function\"\n            ? getContentId()\n            : contentEntryProviderProps.getContentId();\n\n    const revisionId = contentId ? decodeURIComponent(contentId) : null;\n    let entryId: string | null = null;\n    if (revisionId) {\n        const result = parseIdentifier(revisionId);\n        entryId = result ? result.id : null;\n    }\n\n    const { READ_CONTENT } = useMemo(() => {\n        return {\n            READ_CONTENT: createReadQuery(contentModel)\n        };\n    }, [contentModel.modelId]);\n\n    const { GET_REVISIONS } = useMemo(() => {\n        return {\n            GET_REVISIONS: createRevisionsQuery(contentModel)\n        };\n    }, [contentModel.modelId]);\n\n    const setFormRef = useCallback(\n        form => {\n            formRef.current = form;\n        },\n        [formRef]\n    );\n\n    const setTabsRef = useCallback(\n        (tabs: Tabs) => {\n            tabsRef.current = tabs;\n        },\n        [tabsRef]\n    );\n\n    const createEntry = useCallback((): void => {\n        history.push(`/cms/content-entries/${contentModel.modelId}?new=true`);\n    }, [contentModel.modelId]);\n\n    const getEntry = useQuery<CmsEntryGetQueryResponse, CmsEntryGetQueryVariables>(READ_CONTENT, {\n        variables: {\n            revision: revisionId || \"\"\n        },\n        skip: !revisionId,\n        onCompleted: data => {\n            if (!data) {\n                return;\n            }\n\n            const { error } = data.content;\n            if (!error) {\n                return;\n            }\n            history.push(`/cms/content-entries/${contentModel.modelId}`);\n            showSnackbar(error.message);\n        }\n    });\n\n    const getRevisions = useQuery<\n        CmsEntriesListRevisionsQueryResponse,\n        CmsEntriesListRevisionsQueryVariables\n    >(GET_REVISIONS, {\n        variables: {\n            id: entryId as string\n        },\n        skip: !entryId\n    });\n\n    const loading = isLoading || getEntry.loading || getRevisions.loading;\n    const entry: CmsEditorContentEntry = get(getEntry, \"data.content.data\") || {};\n\n    const value = {\n        canCreate,\n        contentModel,\n        createEntry,\n        listQueryVariables,\n        setListQueryVariables,\n        sorters,\n        entry,\n        form: formRef,\n        loading,\n        revisions: get(getRevisions, \"data.revisions.data\") || {},\n        refetchContent: getEntry.refetch,\n        setFormRef,\n        setLoading,\n        setTabsRef,\n        showEmptyView: !newEntry && !loading && isEmpty(entry),\n        tabs: tabsRef\n    };\n\n    return <Context.Provider value={value}>{children}</Context.Provider>;\n};\n\nProvider.displayName = \"ContentEntryProvider\";\n"]}

package/admin/views/contentModels/CloneContentModelDialog.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
-import React, { useCallback } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import { css } from "emotion";
 import get from "lodash/get";
 import { useRouter } from "@webiny/react-router";
@@ -40,7 +40,7 @@ var noPadding = /*#__PURE__*/css({
 var disallowedModelIdEndingList = ["Response", "List", "Meta", "Input", "Sorter"];
 
 var getSelectedGroup = function getSelectedGroup(groups, model) {
-  if (groups.length === 0 || !model) {
+  if (!groups || groups.length === 0 || !model) {
     return "";
   }
 
@@ -65,10 +65,10 @@ var CloneContentModelDialog = function CloneContentModelDialog(_ref) {
       contentModel = _ref.contentModel,
       closeModal = _ref.closeModal;
 
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      loading = _React$useState2[0],
-      setLoading = _React$useState2[1];
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
 
   var _useSnackbar = useSnackbar(),
       showSnackbar = _useSnackbar.showSnackbar;
@@ -83,10 +83,15 @@ var CloneContentModelDialog = function CloneContentModelDialog(_ref) {
 
   var currentLocale = getCurrentLocale();
 
-  var _React$useState3 = React.useState(currentLocale || ""),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      locale = _React$useState4[0],
-      setLocale = _React$useState4[1];
+  var _useState3 = useState(currentLocale || ""),
+      _useState4 = _slicedToArray(_useState3, 2),
+      locale = _useState4[0],
+      setLocale = _useState4[1];
+
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      groups = _useState6[0],
+      setGroups = _useState6[1];
 
   var _useMutation = useMutation(CREATE_CONTENT_MODEL_FROM, {
     onError: function onError(error) {
@@ -124,19 +129,34 @@ var CloneContentModelDialog = function CloneContentModelDialog(_ref) {
       _useMutation2 = _slicedToArray(_useMutation, 1),
       createContentModelFrom = _useMutation2[0];
 
+  var locales = getLocales().map(function (_ref2) {
+    var code = _ref2.code;
+    return {
+      value: code,
+      label: code === currentLocale ? "Current locale" : code
+    };
+  });
+
   var _useQueryLocale = useQueryLocale(LIST_MENU_CONTENT_GROUPS_MODELS, locale, {
-    skip: !open
+    skip: !open || !!groups
   }),
       data = _useQueryLocale.data,
-      loadingGroups = _useQueryLocale.loading;
+      groupsLoading = _useQueryLocale.loading;
 
-  var contentModelGroups = get(data, "listContentModelGroups.data", []).map(function (item) {
-    return {
-      value: item.id,
-      label: item.name
-    };
-  });
-  var selectedGroup = getSelectedGroup(contentModelGroups, contentModel);
+  useEffect(function () {
+    if (!data || groupsLoading) {
+      return;
+    }
+
+    var contentModelGroups = get(data, "listContentModelGroups.data", []).map(function (item) {
+      return {
+        value: item.id,
+        label: item.name
+      };
+    });
+    setGroups(contentModelGroups);
+  }, [data, groupsLoading]);
+  var selectedGroup = getSelectedGroup(groups, contentModel);
   var nameValidator = useCallback(function (name) {
     var target = (name || "").trim();
 
@@ -171,18 +191,12 @@ var CloneContentModelDialog = function CloneContentModelDialog(_ref) {
 
     return true;
   }, []);
-  var locales = getLocales().map(function (locale) {
-    return {
-      value: locale.code,
-      label: locale.code === currentLocale ? "Current locale" : locale.code
-    };
-  });
   return /*#__PURE__*/React.createElement(UID.Dialog, {
     open: open,
     onClose: onClose,
     className: narrowDialog,
     "data-testid": "cms-clone-content-model-modal"
-  }, loadingGroups && /*#__PURE__*/React.createElement(CircularProgress, {
+  }, (!groups || groupsLoading) && /*#__PURE__*/React.createElement(CircularProgress, {
     label: "Please wait while we load required information."
   }), open && /*#__PURE__*/React.createElement(Form, {
     data: {
@@ -203,9 +217,9 @@ var CloneContentModelDialog = function CloneContentModelDialog(_ref) {
         }
       });
     }
-  }, function (_ref2) {
-    var Bind = _ref2.Bind,
-        submit = _ref2.submit;
+  }, function (_ref3) {
+    var Bind = _ref3.Bind,
+        submit = _ref3.submit;
     return /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement(CircularProgress, null), /*#__PURE__*/React.createElement(UID.DialogTitle, null, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Clone Content Model"])))), /*#__PURE__*/React.createElement(UID.DialogContent, null, /*#__PURE__*/React.createElement(Grid, {
       className: noPadding
     }, /*#__PURE__*/React.createElement(Cell, {
@@ -218,15 +232,6 @@ var CloneContentModelDialog = function CloneContentModelDialog(_ref) {
       description: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["The name of the content model"])))
     }))), /*#__PURE__*/React.createElement(Cell, {
       span: 12
-    }, /*#__PURE__*/React.createElement(Bind, {
-      name: "group",
-      validators: validation.create("required")
-    }, /*#__PURE__*/React.createElement(Select, {
-      description: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Choose a content model group"]))),
-      label: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Content model group"]))),
-      options: contentModelGroups
-    }))), /*#__PURE__*/React.createElement(Cell, {
-      span: 12
     }, /*#__PURE__*/React.createElement(Bind, {
       name: "locale",
       validators: validation.create("required"),
@@ -236,13 +241,23 @@ var CloneContentModelDialog = function CloneContentModelDialog(_ref) {
         }
 
         setLocale(value);
+        setGroups(null);
       }
     }, /*#__PURE__*/React.createElement(Select, {
-      description: t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Choose a locale into which you wish to clone the model"]))),
-      label: t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Content model locale"]))),
+      description: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Choose a locale into which you wish to clone the model"]))),
+      label: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Content model locale"]))),
       options: locales
     }))), /*#__PURE__*/React.createElement(Cell, {
       span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "group",
+      validators: validation.create("required")
+    }, /*#__PURE__*/React.createElement(Select, {
+      description: t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Choose a content model group"]))),
+      label: t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Content model group"]))),
+      options: groups || []
+    }))), /*#__PURE__*/React.createElement(Cell, {
+      span: 12
     }, /*#__PURE__*/React.createElement(Bind, {
       name: "description"
     }, function (props) {