@webiny/app-headless-cms 6.4.11-beta.1 → 6.4.12-beta.0

package/HeadlessCMS.js

@@ -25,7 +25,7 @@ const HeadlessCMSExtension = ({ createApolloClient })=>{
     plugins.register(allPlugins);
     plugins.register(new ApolloCacheObjectIdPlugin((obj)=>{
         if ("CmsContentModelField" === obj.__typename) return null;
-        if (obj.__typename && attachTypeName.includes(obj.__typename)) return `${obj.__typename}_${obj.id}`;
+        else if (obj.__typename && attachTypeName.includes(obj.__typename)) return `${obj.__typename}_${obj.id}`;
     }));
     return /*#__PURE__*/ react.createElement(Fragment, null, /*#__PURE__*/ react.createElement(RegisterFeature, {
         feature: CmsPermissionsFeature

package/HeadlessCMS.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeadlessCMS.js","sources":["../src/HeadlessCMS.tsx"],"sourcesContent":["import React, { Fragment, memo } from \"react\";\nimport type { ApolloClient } from \"apollo-client\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Provider, RegisterFeature } from \"@webiny/app-admin\";\nimport { ApolloCacheObjectIdPlugin } from \"@webiny/app\";\nimport { CmsProvider } from \"~/admin/contexts/Cms/index.js\";\nimport apiInformation from \"~/admin/plugins/apiInformation/index.js\";\nimport { ContentEntriesModule } from \"~/admin/views/contentEntries/ContentEntriesModule.js\";\nimport allPlugins from \"~/allPlugins.js\";\nimport { LexicalEditorCmsPlugin } from \"~/admin/components/LexicalCmsEditor/LexicalEditorCmsPlugin.js\";\nimport { SingletonContentEntryModule } from \"~/admin/views/contentEntries/SingletonContentEntryModule.js\";\nimport { RoutesConfig } from \"./admin/RoutesConfig.js\";\nimport { CmsSecurityPermission } from \"~/admin/plugins/permissionRenderer/index.js\";\nimport { CmsPermissionsFeature } from \"~/features/permissions/feature.js\";\n\ninterface HeadlessCMSProvider {\n    children: React.ReactNode;\n}\n\nconst createHeadlessCMSProvider =\n    (createApolloClient: CreateApolloClient) =>\n    (Component: React.ComponentType<React.PropsWithChildren>) => {\n        return function HeadlessCMSProvider({ children }: HeadlessCMSProvider) {\n            return (\n                <CmsProvider createApolloClient={createApolloClient}>\n                    <Component>{children}</Component>\n                </CmsProvider>\n            );\n        };\n    };\n\ninterface CreateApolloClientParams {\n    uri: string;\n}\n\ninterface CreateApolloClient {\n    (params: CreateApolloClientParams): ApolloClient<any>;\n}\n\nexport interface HeadlessCMSProps {\n    createApolloClient: CreateApolloClient;\n}\n\n/**\n * If there is a problem with some state being reset, it's probably because of this plugin.\n * Check that __typename from the API and the __typename in the state are the same.\n * If not, add it into the attachTypeName array.\n */\nconst attachTypeName = [\"CmsContentEntry\", \"RefField\"];\n\nconst HeadlessCMSExtension = ({ createApolloClient }: HeadlessCMSProps) => {\n    plugins.register(apiInformation);\n    plugins.register(allPlugins);\n\n    plugins.register(\n        new ApolloCacheObjectIdPlugin(obj => {\n            if (obj.__typename === \"CmsContentModelField\") {\n                return null;\n            } else if (obj.__typename && attachTypeName.includes(obj.__typename)) {\n                return `${obj.__typename}_${obj.id}`;\n            }\n\n            return undefined;\n        })\n    );\n\n    return (\n        <Fragment>\n            <RegisterFeature feature={CmsPermissionsFeature} />\n            <RoutesConfig />\n            <ContentEntriesModule />\n            <SingletonContentEntryModule />\n            <Provider hoc={createHeadlessCMSProvider(createApolloClient)} />\n            <LexicalEditorCmsPlugin />\n            <CmsSecurityPermission />\n        </Fragment>\n    );\n};\n\nexport const HeadlessCMS = memo(HeadlessCMSExtension);\n"],"names":["createHeadlessCMSProvider","createApolloClient","Component","children","CmsProvider","attachTypeName","HeadlessCMSExtension","plugins","apiInformation","allPlugins","ApolloCacheObjectIdPlugin","obj","Fragment","RegisterFeature","CmsPermissionsFeature","RoutesConfig","ContentEntriesModule","SingletonContentEntryModule","Provider","LexicalEditorCmsPlugin","CmsSecurityPermission","HeadlessCMS","memo"],"mappings":";;;;;;;;;;;;;AAmBA,MAAMA,4BACF,CAACC,qBACD,CAACC,YACU,SAA6B,EAAEC,QAAQ,EAAuB;YACjE,OAAO,WAAP,GACI,oBAACC,aAAWA;gBAAC,oBAAoBH;6BAC7B,oBAACC,WAAAA,MAAWC;QAGxB;AAoBR,MAAME,iBAAiB;IAAC;IAAmB;CAAW;AAEtD,MAAMC,uBAAuB,CAAC,EAAEL,kBAAkB,EAAoB;IAClEM,QAAQ,QAAQ,CAACC;IACjBD,QAAQ,QAAQ,CAACE;IAEjBF,QAAQ,QAAQ,CACZ,IAAIG,0BAA0BC,CAAAA;QAC1B,IAAIA,AAAmB,2BAAnBA,IAAI,UAAU,EACd,OAAO;QACJ,IAAIA,IAAI,UAAU,IAAIN,eAAe,QAAQ,CAACM,IAAI,UAAU,GAC/D,OAAO,GAAGA,IAAI,UAAU,CAAC,CAAC,EAAEA,IAAI,EAAE,EAAE;IAI5C;IAGJ,OAAO,WAAP,GACI,oBAACC,UAAQA,MAAAA,WAAAA,GACL,oBAACC,iBAAeA;QAAC,SAASC;sBAC1B,oBAACC,cAAYA,OAAAA,WAAAA,GACb,oBAACC,sBAAoBA,OAAAA,WAAAA,GACrB,oBAACC,6BAA2BA,OAAAA,WAAAA,GAC5B,oBAACC,UAAQA;QAAC,KAAKlB,0BAA0BC;sBACzC,oBAACkB,wBAAsBA,OAAAA,WAAAA,GACvB,oBAACC,uBAAqBA;AAGlC;AAEO,MAAMC,cAAc,WAAHA,GAAGC,KAAKhB"}
+{"version":3,"file":"HeadlessCMS.js","sources":["../src/HeadlessCMS.tsx"],"sourcesContent":["import React, { Fragment, memo } from \"react\";\nimport type { ApolloClient } from \"apollo-client\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Provider, RegisterFeature } from \"@webiny/app-admin\";\nimport { ApolloCacheObjectIdPlugin } from \"@webiny/app\";\nimport { CmsProvider } from \"~/admin/contexts/Cms/index.js\";\nimport apiInformation from \"~/admin/plugins/apiInformation/index.js\";\nimport { ContentEntriesModule } from \"~/admin/views/contentEntries/ContentEntriesModule.js\";\nimport allPlugins from \"~/allPlugins.js\";\nimport { LexicalEditorCmsPlugin } from \"~/admin/components/LexicalCmsEditor/LexicalEditorCmsPlugin.js\";\nimport { SingletonContentEntryModule } from \"~/admin/views/contentEntries/SingletonContentEntryModule.js\";\nimport { RoutesConfig } from \"./admin/RoutesConfig.js\";\nimport { CmsSecurityPermission } from \"~/admin/plugins/permissionRenderer/index.js\";\nimport { CmsPermissionsFeature } from \"~/features/permissions/feature.js\";\n\ninterface HeadlessCMSProvider {\n    children: React.ReactNode;\n}\n\nconst createHeadlessCMSProvider =\n    (createApolloClient: CreateApolloClient) =>\n    (Component: React.ComponentType<React.PropsWithChildren>) => {\n        return function HeadlessCMSProvider({ children }: HeadlessCMSProvider) {\n            return (\n                <CmsProvider createApolloClient={createApolloClient}>\n                    <Component>{children}</Component>\n                </CmsProvider>\n            );\n        };\n    };\n\ninterface CreateApolloClientParams {\n    uri: string;\n}\n\ninterface CreateApolloClient {\n    (params: CreateApolloClientParams): ApolloClient<any>;\n}\n\nexport interface HeadlessCMSProps {\n    createApolloClient: CreateApolloClient;\n}\n\n/**\n * If there is a problem with some state being reset, it's probably because of this plugin.\n * Check that __typename from the API and the __typename in the state are the same.\n * If not, add it into the attachTypeName array.\n */\nconst attachTypeName = [\"CmsContentEntry\", \"RefField\"];\n\nconst HeadlessCMSExtension = ({ createApolloClient }: HeadlessCMSProps) => {\n    plugins.register(apiInformation);\n    plugins.register(allPlugins);\n\n    plugins.register(\n        new ApolloCacheObjectIdPlugin(obj => {\n            if (obj.__typename === \"CmsContentModelField\") {\n                return null;\n            } else if (obj.__typename && attachTypeName.includes(obj.__typename)) {\n                return `${obj.__typename}_${obj.id}`;\n            }\n\n            return undefined;\n        })\n    );\n\n    return (\n        <Fragment>\n            <RegisterFeature feature={CmsPermissionsFeature} />\n            <RoutesConfig />\n            <ContentEntriesModule />\n            <SingletonContentEntryModule />\n            <Provider hoc={createHeadlessCMSProvider(createApolloClient)} />\n            <LexicalEditorCmsPlugin />\n            <CmsSecurityPermission />\n        </Fragment>\n    );\n};\n\nexport const HeadlessCMS = memo(HeadlessCMSExtension);\n"],"names":["createHeadlessCMSProvider","createApolloClient","Component","children","CmsProvider","attachTypeName","HeadlessCMSExtension","plugins","apiInformation","allPlugins","ApolloCacheObjectIdPlugin","obj","Fragment","RegisterFeature","CmsPermissionsFeature","RoutesConfig","ContentEntriesModule","SingletonContentEntryModule","Provider","LexicalEditorCmsPlugin","CmsSecurityPermission","HeadlessCMS","memo"],"mappings":";;;;;;;;;;;;;AAmBA,MAAMA,4BACF,CAACC,qBACD,CAACC,YACU,SAA6B,EAAEC,QAAQ,EAAuB;YACjE,OAAO,WAAP,GACI,oBAACC,aAAWA;gBAAC,oBAAoBH;6BAC7B,oBAACC,WAAAA,MAAWC;QAGxB;AAoBR,MAAME,iBAAiB;IAAC;IAAmB;CAAW;AAEtD,MAAMC,uBAAuB,CAAC,EAAEL,kBAAkB,EAAoB;IAClEM,QAAQ,QAAQ,CAACC;IACjBD,QAAQ,QAAQ,CAACE;IAEjBF,QAAQ,QAAQ,CACZ,IAAIG,0BAA0BC,CAAAA;QAC1B,IAAIA,AAAmB,2BAAnBA,IAAI,UAAU,EACd,OAAO;aACJ,IAAIA,IAAI,UAAU,IAAIN,eAAe,QAAQ,CAACM,IAAI,UAAU,GAC/D,OAAO,GAAGA,IAAI,UAAU,CAAC,CAAC,EAAEA,IAAI,EAAE,EAAE;IAI5C;IAGJ,OAAO,WAAP,GACI,oBAACC,UAAQA,MAAAA,WAAAA,GACL,oBAACC,iBAAeA;QAAC,SAASC;sBAC1B,oBAACC,cAAYA,OAAAA,WAAAA,GACb,oBAACC,sBAAoBA,OAAAA,WAAAA,GACrB,oBAACC,6BAA2BA,OAAAA,WAAAA,GAC5B,oBAACC,UAAQA;QAAC,KAAKlB,0BAA0BC;sBACzC,oBAACkB,wBAAsBA,OAAAA,WAAAA,GACvB,oBAACC,uBAAqBA;AAGlC;AAEO,MAAMC,cAAc,WAAHA,GAAGC,KAAKhB"}

package/admin/components/ContentEntries/BulkActions/ActionDelete.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const ActionDelete: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const ActionDelete: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/admin/components/ContentEntries/BulkActions/ActionMove.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const ActionMove: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const ActionMove: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/admin/components/ContentEntries/BulkActions/ActionPublish.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const ActionPublish: (() => React.JSX.Element | null) & {
-    displayName: string;
+export declare const ActionPublish: (() => React.JSX.Element | null) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element | null;
 };

package/admin/components/ContentEntries/BulkActions/ActionUnpublish.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const ActionUnpublish: (() => React.JSX.Element | null) & {
-    displayName: string;
+export declare const ActionUnpublish: (() => React.JSX.Element | null) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element | null;
 };

package/admin/components/ContentModelEditor/ContentModelEditor.js

@@ -53,7 +53,7 @@ const ContentModelEditor = makeDecoratable("ContentModelEditor", ()=>{
     if (!data) return /*#__PURE__*/ react.createElement(OverlayLoader, {
         text: "Loading content model..."
     });
-    if (data.isBeingDeleted) return /*#__PURE__*/ react.createElement(ModelIsBeingDeletedError, {
+    else if (data.isBeingDeleted) return /*#__PURE__*/ react.createElement(ModelIsBeingDeletedError, {
         model: data
     });
     return /*#__PURE__*/ react.createElement("div", {

package/admin/components/ContentModelEditor/ContentModelEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/ContentModelEditor/ContentModelEditor.js","sources":["../../../../src/admin/components/ContentModelEditor/ContentModelEditor.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { makeDecoratable, useDialogs, LeftPanel, RightPanel, SplitView } from \"@webiny/app-admin\";\nimport { useRouter } from \"@webiny/app\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Heading, OverlayLoader, Tabs, Text, TimeAgo } from \"@webiny/admin-ui\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as PreviewIcon } from \"@webiny/icons/fullscreen.svg\";\nimport { FieldsSidebar } from \"./FieldsSidebar.js\";\nimport { FieldEditor } from \"../FieldEditor/index.js\";\nimport { PreviewTab } from \"./PreviewTab.js\";\nimport Header from \"./Header.js\";\nimport DragPreview from \"../DragPreview.js\";\nimport { useModelEditor } from \"./useModelEditor.js\";\nimport type { CmsEditorFieldsLayout, CmsModelField } from \"~/types.js\";\nimport { ContentEntryEditorWithConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { ContentEntryProvider } from \"~/admin/views/contentEntries/ContentEntry/ContentEntryContext.js\";\nimport { ContentEntriesProvider } from \"~/admin/views/contentEntries/ContentEntriesContext.js\";\nimport { ModelIsBeingDeletedError } from \"~/admin/components/ContentModelEditor/ModelIsBeingDeletedError/index.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/editor\");\n\nconst prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;\n\ninterface OnChangeParams {\n    fields: CmsModelField[];\n    layout: CmsEditorFieldsLayout;\n}\n\nexport const ContentModelEditor = makeDecoratable(\"ContentModelEditor\", () => {\n    const { data, setData, isPristine, contentModel } = useModelEditor();\n    const router = useRouter();\n    const dialogs = useDialogs();\n\n    // Add a class to <body> to trigger global styles while this component is active\n    useEffect(() => {\n        document.body.classList.add(\"overflow-hidden\");\n\n        return () => {\n            document.body.classList.remove(\"overflow-hidden\");\n        };\n    }, []);\n\n    const isPristineRef = React.useRef(isPristine);\n    isPristineRef.current = isPristine;\n\n    useEffect(() => {\n        return router.addTransitionGuard({\n            guard: () => !isPristineRef.current,\n            onBlocked: () => {\n                dialogs.showDialog({\n                    title: \"Confirm Navigation\",\n                    content: prompt,\n                    acceptLabel: \"Yes!\",\n                    cancelLabel: \"No, stay here.\",\n                    onAccept: () => router.confirmTransition(),\n                    onClose: () => router.cancelTransition()\n                });\n            }\n        });\n    }, []);\n\n    const [activeTab, setActiveTab] = useState<string>(\"edit\");\n\n    const onChange = ({ fields, layout }: OnChangeParams) => {\n        setData(data => ({ ...data, fields, layout }));\n    };\n\n    if (!data) {\n        return <OverlayLoader text={\"Loading content model...\"} />;\n    } else if (data.isBeingDeleted) {\n        return <ModelIsBeingDeletedError model={data} />;\n    }\n\n    return (\n        <div className={\"content-model-editor flex-1\"}>\n            <Header />\n            <div className={\"w-full overflow-y-auto h-main-content\"}>\n                <SplitView>\n                    <LeftPanel span={4} className={\"bg-neutral-light\"}>\n                        <div className={\"px-lg py-md h-[calc(100vh-98px)] overflow-y-scroll\"}>\n                            <FieldsSidebar\n                                onFieldDragStart={() => {\n                                    setActiveTab(\"edit\");\n                                }}\n                            />\n                        </div>\n                    </LeftPanel>\n                    <RightPanel span={8} className={\"bg-neutral-base\"}>\n                        <div className={\"h-full overflow-y-scroll\"}>\n                            {contentModel && (\n                                <div className={\"px-xl pt-lg pb-md-extra\"}>\n                                    <Heading level={4}>{contentModel.name}</Heading>\n                                    <Text size={\"sm\"} className={\"text-neutral-muted\"}>\n                                        {`Created by ${contentModel.createdBy.displayName}. Last modified: `}\n                                        <TimeAgo datetime={contentModel.savedOn} />.\n                                    </Text>\n                                </div>\n                            )}\n                            <Tabs\n                                size={\"md\"}\n                                spacing={\"xl\"}\n                                separator={true}\n                                value={String(activeTab)}\n                                onValueChange={setActiveTab}\n                                tabs={[\n                                    <Tabs.Tab\n                                        key={\"edit\"}\n                                        value={\"edit\"}\n                                        trigger={\"Edit\"}\n                                        icon={<EditIcon />}\n                                        data-testid={\"cms.editor.tab.edit\"}\n                                        content={\n                                            <div className={\"relative mb-lg\"}>\n                                                <FieldEditor\n                                                    fields={data.fields}\n                                                    layout={data.layout || []}\n                                                    onChange={onChange}\n                                                />\n                                            </div>\n                                        }\n                                    />,\n                                    <Tabs.Tab\n                                        key={\"preview\"}\n                                        value={\"preview\"}\n                                        trigger={\"Preview\"}\n                                        icon={<PreviewIcon />}\n                                        data-testid={\"cms.editor.tab.preview\"}\n                                        content={\n                                            <ContentEntryEditorWithConfig>\n                                                <ContentEntriesProvider contentModel={data}>\n                                                    <ContentEntryProvider readonly={true}>\n                                                        <PreviewTab\n                                                            activeTab={activeTab === \"preview\"}\n                                                        />\n                                                    </ContentEntryProvider>\n                                                </ContentEntriesProvider>\n                                            </ContentEntryEditorWithConfig>\n                                        }\n                                    />\n                                ]}\n                            />\n                        </div>\n                    </RightPanel>\n                </SplitView>\n                <DragPreview />\n            </div>\n        </div>\n    );\n});\n"],"names":["t","i18n","prompt","ContentModelEditor","makeDecoratable","data","setData","isPristine","contentModel","useModelEditor","router","useRouter","dialogs","useDialogs","useEffect","document","isPristineRef","React","activeTab","setActiveTab","useState","onChange","fields","layout","OverlayLoader","ModelIsBeingDeletedError","Header","SplitView","LeftPanel","FieldsSidebar","RightPanel","Heading","Text","TimeAgo","Tabs","String","EditIcon","FieldEditor","PreviewIcon","ContentEntryEditorWithConfig","ContentEntriesProvider","ContentEntryProvider","PreviewTab","DragPreview"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,4BAASF,CAAC,CAAC,+FAA+F,CAAC;AAO1G,MAAMG,qBAAqBC,gBAAgB,sBAAsB;IACpE,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGC;IACpD,MAAMC,SAASC;IACf,MAAMC,UAAUC;IAGhBC,UAAU;QACNC,SAAS,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;QAE5B,OAAO;YACHA,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;QACnC;IACJ,GAAG,EAAE;IAEL,MAAMC,gBAAgBC,MAAAA,MAAY,CAACV;IACnCS,cAAc,OAAO,GAAGT;IAExBO,UAAU,IACCJ,OAAO,kBAAkB,CAAC;YAC7B,OAAO,IAAM,CAACM,cAAc,OAAO;YACnC,WAAW;gBACPJ,QAAQ,UAAU,CAAC;oBACf,OAAO;oBACP,SAASV;oBACT,aAAa;oBACb,aAAa;oBACb,UAAU,IAAMQ,OAAO,iBAAiB;oBACxC,SAAS,IAAMA,OAAO,gBAAgB;gBAC1C;YACJ;QACJ,IACD,EAAE;IAEL,MAAM,CAACQ,WAAWC,aAAa,GAAGC,SAAiB;IAEnD,MAAMC,WAAW,CAAC,EAAEC,MAAM,EAAEC,MAAM,EAAkB;QAChDjB,QAAQD,CAAAA,OAAS;gBAAE,GAAGA,IAAI;gBAAEiB;gBAAQC;YAAO;IAC/C;IAEA,IAAI,CAAClB,MACD,OAAO,WAAP,GAAO,oBAACmB,eAAaA;QAAC,MAAM;;IACzB,IAAInB,KAAK,cAAc,EAC1B,OAAO,WAAP,GAAO,oBAACoB,0BAAwBA;QAAC,OAAOpB;;IAG5C,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACqB,QAAMA,OAAAA,WAAAA,GACP,oBAAC;QAAI,WAAW;qBACZ,oBAACC,WAASA,MAAAA,WAAAA,GACN,oBAACC,WAASA;QAAC,MAAM;QAAG,WAAW;qBAC3B,oBAAC;QAAI,WAAW;qBACZ,oBAACC,eAAaA;QACV,kBAAkB;YACdV,aAAa;QACjB;wBAIZ,oBAACW,YAAUA;QAAC,MAAM;QAAG,WAAW;qBAC5B,oBAAC;QAAI,WAAW;OACXtB,gBAAgB,WAAhBA,GACG,oBAAC;QAAI,WAAW;qBACZ,oBAACuB,SAAOA;QAAC,OAAO;OAAIvB,aAAa,IAAI,iBACrC,oBAACwB,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxB,CAAC,WAAW,EAAExB,aAAa,SAAS,CAAC,WAAW,CAAC,iBAAiB,CAAC,gBACpE,oBAACyB,SAAOA;QAAC,UAAUzB,aAAa,OAAO;QAAI,qBAIvD,oBAAC0B,MAAIA;QACD,MAAM;QACN,SAAS;QACT,WAAW;QACX,OAAOC,OAAOjB;QACd,eAAeC;QACf,MAAM;0BACF,oBAACe,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,oBAAM,oBAACE,gBAAQA;gBACf,eAAa;gBACb,uBACI,oBAAC;oBAAI,WAAW;iCACZ,oBAACC,aAAWA;oBACR,QAAQhC,KAAK,MAAM;oBACnB,QAAQA,KAAK,MAAM,IAAI,EAAE;oBACzB,UAAUgB;;;0BAK1B,oBAACa,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,oBAAM,oBAACI,+BAAWA;gBAClB,eAAa;gBACb,uBACI,oBAACC,8BAA4BA,MAAAA,WAAAA,GACzB,oBAACC,wBAAsBA;oBAAC,cAAcnC;iCAClC,oBAACoC,sBAAoBA;oBAAC,UAAU;iCAC5B,oBAACC,YAAUA;oBACP,WAAWxB,AAAc,cAAdA;;;SAOtC;yBAKjB,oBAACyB,aAAWA;AAI5B"}
+{"version":3,"file":"admin/components/ContentModelEditor/ContentModelEditor.js","sources":["../../../../src/admin/components/ContentModelEditor/ContentModelEditor.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { makeDecoratable, useDialogs, LeftPanel, RightPanel, SplitView } from \"@webiny/app-admin\";\nimport { useRouter } from \"@webiny/app\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Heading, OverlayLoader, Tabs, Text, TimeAgo } from \"@webiny/admin-ui\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as PreviewIcon } from \"@webiny/icons/fullscreen.svg\";\nimport { FieldsSidebar } from \"./FieldsSidebar.js\";\nimport { FieldEditor } from \"../FieldEditor/index.js\";\nimport { PreviewTab } from \"./PreviewTab.js\";\nimport Header from \"./Header.js\";\nimport DragPreview from \"../DragPreview.js\";\nimport { useModelEditor } from \"./useModelEditor.js\";\nimport type { CmsEditorFieldsLayout, CmsModelField } from \"~/types.js\";\nimport { ContentEntryEditorWithConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { ContentEntryProvider } from \"~/admin/views/contentEntries/ContentEntry/ContentEntryContext.js\";\nimport { ContentEntriesProvider } from \"~/admin/views/contentEntries/ContentEntriesContext.js\";\nimport { ModelIsBeingDeletedError } from \"~/admin/components/ContentModelEditor/ModelIsBeingDeletedError/index.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/editor\");\n\nconst prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;\n\ninterface OnChangeParams {\n    fields: CmsModelField[];\n    layout: CmsEditorFieldsLayout;\n}\n\nexport const ContentModelEditor = makeDecoratable(\"ContentModelEditor\", () => {\n    const { data, setData, isPristine, contentModel } = useModelEditor();\n    const router = useRouter();\n    const dialogs = useDialogs();\n\n    // Add a class to <body> to trigger global styles while this component is active\n    useEffect(() => {\n        document.body.classList.add(\"overflow-hidden\");\n\n        return () => {\n            document.body.classList.remove(\"overflow-hidden\");\n        };\n    }, []);\n\n    const isPristineRef = React.useRef(isPristine);\n    isPristineRef.current = isPristine;\n\n    useEffect(() => {\n        return router.addTransitionGuard({\n            guard: () => !isPristineRef.current,\n            onBlocked: () => {\n                dialogs.showDialog({\n                    title: \"Confirm Navigation\",\n                    content: prompt,\n                    acceptLabel: \"Yes!\",\n                    cancelLabel: \"No, stay here.\",\n                    onAccept: () => router.confirmTransition(),\n                    onClose: () => router.cancelTransition()\n                });\n            }\n        });\n    }, []);\n\n    const [activeTab, setActiveTab] = useState<string>(\"edit\");\n\n    const onChange = ({ fields, layout }: OnChangeParams) => {\n        setData(data => ({ ...data, fields, layout }));\n    };\n\n    if (!data) {\n        return <OverlayLoader text={\"Loading content model...\"} />;\n    } else if (data.isBeingDeleted) {\n        return <ModelIsBeingDeletedError model={data} />;\n    }\n\n    return (\n        <div className={\"content-model-editor flex-1\"}>\n            <Header />\n            <div className={\"w-full overflow-y-auto h-main-content\"}>\n                <SplitView>\n                    <LeftPanel span={4} className={\"bg-neutral-light\"}>\n                        <div className={\"px-lg py-md h-[calc(100vh-98px)] overflow-y-scroll\"}>\n                            <FieldsSidebar\n                                onFieldDragStart={() => {\n                                    setActiveTab(\"edit\");\n                                }}\n                            />\n                        </div>\n                    </LeftPanel>\n                    <RightPanel span={8} className={\"bg-neutral-base\"}>\n                        <div className={\"h-full overflow-y-scroll\"}>\n                            {contentModel && (\n                                <div className={\"px-xl pt-lg pb-md-extra\"}>\n                                    <Heading level={4}>{contentModel.name}</Heading>\n                                    <Text size={\"sm\"} className={\"text-neutral-muted\"}>\n                                        {`Created by ${contentModel.createdBy.displayName}. Last modified: `}\n                                        <TimeAgo datetime={contentModel.savedOn} />.\n                                    </Text>\n                                </div>\n                            )}\n                            <Tabs\n                                size={\"md\"}\n                                spacing={\"xl\"}\n                                separator={true}\n                                value={String(activeTab)}\n                                onValueChange={setActiveTab}\n                                tabs={[\n                                    <Tabs.Tab\n                                        key={\"edit\"}\n                                        value={\"edit\"}\n                                        trigger={\"Edit\"}\n                                        icon={<EditIcon />}\n                                        data-testid={\"cms.editor.tab.edit\"}\n                                        content={\n                                            <div className={\"relative mb-lg\"}>\n                                                <FieldEditor\n                                                    fields={data.fields}\n                                                    layout={data.layout || []}\n                                                    onChange={onChange}\n                                                />\n                                            </div>\n                                        }\n                                    />,\n                                    <Tabs.Tab\n                                        key={\"preview\"}\n                                        value={\"preview\"}\n                                        trigger={\"Preview\"}\n                                        icon={<PreviewIcon />}\n                                        data-testid={\"cms.editor.tab.preview\"}\n                                        content={\n                                            <ContentEntryEditorWithConfig>\n                                                <ContentEntriesProvider contentModel={data}>\n                                                    <ContentEntryProvider readonly={true}>\n                                                        <PreviewTab\n                                                            activeTab={activeTab === \"preview\"}\n                                                        />\n                                                    </ContentEntryProvider>\n                                                </ContentEntriesProvider>\n                                            </ContentEntryEditorWithConfig>\n                                        }\n                                    />\n                                ]}\n                            />\n                        </div>\n                    </RightPanel>\n                </SplitView>\n                <DragPreview />\n            </div>\n        </div>\n    );\n});\n"],"names":["t","i18n","prompt","ContentModelEditor","makeDecoratable","data","setData","isPristine","contentModel","useModelEditor","router","useRouter","dialogs","useDialogs","useEffect","document","isPristineRef","React","activeTab","setActiveTab","useState","onChange","fields","layout","OverlayLoader","ModelIsBeingDeletedError","Header","SplitView","LeftPanel","FieldsSidebar","RightPanel","Heading","Text","TimeAgo","Tabs","String","EditIcon","FieldEditor","PreviewIcon","ContentEntryEditorWithConfig","ContentEntriesProvider","ContentEntryProvider","PreviewTab","DragPreview"],"mappings":"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"}

package/admin/components/FieldEditor/Field.js

@@ -17,18 +17,18 @@ const allowedTitleFieldTypes = [
 ];
 const isFieldAllowedToBeTitle = (model, field, parent)=>{
     if (field.list || parent) return false;
-    if (false === allowedTitleFieldTypes.includes(field.type)) return false;
-    if (model.titleFieldId === field.fieldId) return false;
+    else if (false === allowedTitleFieldTypes.includes(field.type)) return false;
+    else if (model.titleFieldId === field.fieldId) return false;
     return true;
 };
 const isFieldAllowedToBeDescription = (model, field, parent)=>{
     if (field.list || parent) return false;
-    if (model.descriptionFieldId === field.fieldId) return false;
+    else if (model.descriptionFieldId === field.fieldId) return false;
     return "long-text" === field.type;
 };
 const isFieldAllowedToBeImage = (model, field, parent)=>{
     if (field.list || parent) return false;
-    if (model.imageFieldId === field.fieldId) return false;
+    else if (model.imageFieldId === field.fieldId) return false;
     return "file" === field.type && field.settings?.imagesOnly;
 };
 const getFieldTypeName = (model, field, parent)=>{

package/admin/components/FieldEditor/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/FieldEditor/Field.js","sources":["../../../../src/admin/components/FieldEditor/Field.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useMemo } from \"react\";\nimport capitalize from \"lodash/capitalize.js\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as TitleIcon } from \"@webiny/icons/title.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { plugins } from \"@webiny/plugins\";\nimport type { CmsModelField, CmsEditorFieldOptionPlugin, CmsModel } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useModelEditor } from \"~/admin/hooks/index.js\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor/useModelFieldEditor.js\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { IconButton, Heading, Text, DropdownMenu, Tag } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/field\");\n\nconst allowedTitleFieldTypes: string[] = [\"text\", \"number\"];\n\nconst isFieldAllowedToBeTitle = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {\n    if (field.list || parent) {\n        return false;\n    } else if (allowedTitleFieldTypes.includes(field.type) === false) {\n        return false;\n    } else if (model.titleFieldId === field.fieldId) {\n        return false;\n    }\n    return true;\n};\nconst isFieldAllowedToBeDescription = (\n    model: CmsModel,\n    field: CmsModelField,\n    parent?: CmsModelField\n) => {\n    if (field.list || parent) {\n        return false;\n    } else if (model.descriptionFieldId === field.fieldId) {\n        return false;\n    }\n    return field.type === \"long-text\";\n};\n\nconst isFieldAllowedToBeImage = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {\n    if (field.list || parent) {\n        return false;\n    } else if (model.imageFieldId === field.fieldId) {\n        return false;\n    }\n    return field.type === \"file\" && field.settings?.imagesOnly;\n};\n\nconst getFieldTypeName = (\n    model: CmsModel,\n    field: CmsModelField,\n    parent?: CmsModelField\n): string | null => {\n    if (parent) {\n        return null;\n    }\n    const isTitleField = field.fieldId === model?.titleFieldId && !parent;\n    const isDescriptionField = field.fieldId === model?.descriptionFieldId && !parent;\n    const isImageField = field.fieldId === model?.imageFieldId && !parent;\n\n    return (\n        [\n            isTitleField ? \"entry title\" : null,\n            isDescriptionField ? \"entry description\" : null,\n            isImageField ? \"entry image\" : null\n        ]\n            .filter(Boolean)\n            .join(\"\") || null\n    );\n};\n\nexport interface FieldProps {\n    field: CmsModelField;\n    onDelete: (field: CmsModelField) => void;\n    onEdit: (field: CmsModelField) => void;\n    parent?: CmsModelField;\n}\n\nconst Field = (props: FieldProps) => {\n    const { field, onEdit, parent } = props;\n    const { showSnackbar, showErrorSnackbar } = useSnackbar();\n    const { setData: setModel, data: model } = useModelEditor();\n    const { getFieldPlugin, getFieldRendererPlugin } = useModelFieldEditor();\n\n    const removeFieldFromSelected = useCallback(async () => {\n        if (model.titleFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    titleFieldId: null\n                };\n            });\n        } else if (model.descriptionFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    descriptionFieldId: null\n                };\n            });\n        } else if (model.imageFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    imageFieldId: null\n                };\n            });\n        }\n    }, [field.id, setModel, model]);\n\n    const onDelete = useCallback(async () => {\n        await removeFieldFromSelected();\n        props.onDelete(field);\n        return;\n    }, [field.fieldId]);\n\n    const setAsTitle = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, titleFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showErrorSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Title field set successfully.`);\n    }, [field.fieldId, setModel]);\n\n    const setAsDescription = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, descriptionFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showErrorSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Description field set successfully.`);\n    }, [field.fieldId, setModel]);\n\n    const setAsImage = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, imageFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showErrorSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Image field set successfully.`);\n    }, [field.fieldId, setModel]);\n\n    const fieldPlugin = getFieldPlugin(field.type);\n    const editorFieldOptionPlugins =\n        plugins.byType<CmsEditorFieldOptionPlugin>(\"cms-editor-field-option\");\n\n    if (!fieldPlugin) {\n        return null;\n    }\n\n    const rendererPlugin = getFieldRendererPlugin(field.renderer.name);\n    const canEdit = fieldPlugin.field.canEditSettings !== false;\n\n    const defaultInformationRenderer = useMemo(() => {\n        const fieldTypeName = getFieldTypeName(model, field, parent);\n        const fn = () => {\n            if (!fieldTypeName) {\n                return null;\n            }\n            return <Tag content={capitalize(fieldTypeName)} variant={\"neutral-base\"} />;\n        };\n\n        fn.displayName = \"FieldTypeRenderer\";\n\n        return fn;\n    }, [field.id]);\n\n    const fieldInformationRenderer = fieldPlugin.field?.renderInfo;\n\n    const info = [rendererPlugin?.renderer.name, field.list ? \"multiple values\" : null]\n        .filter(Boolean)\n        .join(\", \");\n\n    return (\n        <Fragment>\n            <div className={\"flex justify-between align-center\"}>\n                <div>\n                    <Heading level={6}>{field.label}</Heading>\n                    <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                        {fieldPlugin.field.label}\n                        {info && <span className={\"lowercase\"}> ({info})</span>}\n                    </Text>\n                </div>\n                <div className={\"flex items-center justify-end gap-sm\"}>\n                    {fieldInformationRenderer\n                        ? fieldInformationRenderer({ model, field })\n                        : defaultInformationRenderer()}\n                    {canEdit ? (\n                        <IconButton\n                            data-testid={\"cms.editor.edit-field\"}\n                            icon={<EditIcon />}\n                            onClick={() => onEdit(field)}\n                            variant={\"ghost\"}\n                            size={\"sm\"}\n                        />\n                    ) : null}\n                    <DropdownMenu\n                        trigger={\n                            <IconButton icon={<MoreVerticalIcon />} variant={\"ghost\"} size={\"sm\"} />\n                        }\n                    >\n                        {editorFieldOptionPlugins.map(pl =>\n                            React.cloneElement(pl.render(), { key: pl.name })\n                        )}\n                        {/* We only allow this action for top-level fields. */}\n                        <DropdownMenu.Item\n                            disabled={!isFieldAllowedToBeTitle(model, field, parent)}\n                            onClick={setAsTitle}\n                            text={t`Use as title`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<TitleIcon />}\n                                    label={t`Use as title`}\n                                />\n                            }\n                        />\n                        <DropdownMenu.Item\n                            disabled={!isFieldAllowedToBeDescription(model, field, parent)}\n                            onClick={setAsDescription}\n                            text={t`Use as description`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<TitleIcon />}\n                                    label={t`Use as description`}\n                                />\n                            }\n                        />\n                        <DropdownMenu.Item\n                            disabled={!isFieldAllowedToBeImage(model, field, parent)}\n                            onClick={setAsImage}\n                            text={t`Use as image`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<TitleIcon />}\n                                    label={t`Use as image`}\n                                />\n                            }\n                        />\n                        <DropdownMenu.Item\n                            onClick={onDelete}\n                            text={t`Delete`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<DeleteIcon />}\n                                    label={t`Delete`}\n                                />\n                            }\n                            className={\"text-destructive-primary! [&_svg]:fill-destructive\"}\n                        />\n                    </DropdownMenu>\n                </div>\n            </div>\n            {fieldPlugin.field.render && (\n                <div className={\"pt-md\"}>\n                    {fieldPlugin.field.render({ field, data: model, setData: setModel })}\n                </div>\n            )}\n        </Fragment>\n    );\n};\n\nexport default React.memo(Field);\n"],"names":["t","i18n","allowedTitleFieldTypes","isFieldAllowedToBeTitle","model","field","parent","isFieldAllowedToBeDescription","isFieldAllowedToBeImage","getFieldTypeName","isTitleField","isDescriptionField","isImageField","Boolean","Field","props","onEdit","showSnackbar","showErrorSnackbar","useSnackbar","setModel","useModelEditor","getFieldPlugin","getFieldRendererPlugin","useModelFieldEditor","removeFieldFromSelected","useCallback","data","onDelete","setAsTitle","response","setAsDescription","setAsImage","fieldPlugin","editorFieldOptionPlugins","plugins","rendererPlugin","canEdit","defaultInformationRenderer","useMemo","fieldTypeName","fn","Tag","capitalize","fieldInformationRenderer","info","Fragment","Heading","Text","IconButton","EditIcon","DropdownMenu","MoreVerticalIcon","pl","React","TitleIcon","DeleteIcon"],"mappings":"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"}
+{"version":3,"file":"admin/components/FieldEditor/Field.js","sources":["../../../../src/admin/components/FieldEditor/Field.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useMemo } from \"react\";\nimport capitalize from \"lodash/capitalize.js\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as TitleIcon } from \"@webiny/icons/title.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { plugins } from \"@webiny/plugins\";\nimport type { CmsModelField, CmsEditorFieldOptionPlugin, CmsModel } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useModelEditor } from \"~/admin/hooks/index.js\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor/useModelFieldEditor.js\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { IconButton, Heading, Text, DropdownMenu, Tag } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/field\");\n\nconst allowedTitleFieldTypes: string[] = [\"text\", \"number\"];\n\nconst isFieldAllowedToBeTitle = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {\n    if (field.list || parent) {\n        return false;\n    } else if (allowedTitleFieldTypes.includes(field.type) === false) {\n        return false;\n    } else if (model.titleFieldId === field.fieldId) {\n        return false;\n    }\n    return true;\n};\nconst isFieldAllowedToBeDescription = (\n    model: CmsModel,\n    field: CmsModelField,\n    parent?: CmsModelField\n) => {\n    if (field.list || parent) {\n        return false;\n    } else if (model.descriptionFieldId === field.fieldId) {\n        return false;\n    }\n    return field.type === \"long-text\";\n};\n\nconst isFieldAllowedToBeImage = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {\n    if (field.list || parent) {\n        return false;\n    } else if (model.imageFieldId === field.fieldId) {\n        return false;\n    }\n    return field.type === \"file\" && field.settings?.imagesOnly;\n};\n\nconst getFieldTypeName = (\n    model: CmsModel,\n    field: CmsModelField,\n    parent?: CmsModelField\n): string | null => {\n    if (parent) {\n        return null;\n    }\n    const isTitleField = field.fieldId === model?.titleFieldId && !parent;\n    const isDescriptionField = field.fieldId === model?.descriptionFieldId && !parent;\n    const isImageField = field.fieldId === model?.imageFieldId && !parent;\n\n    return (\n        [\n            isTitleField ? \"entry title\" : null,\n            isDescriptionField ? \"entry description\" : null,\n            isImageField ? \"entry image\" : null\n        ]\n            .filter(Boolean)\n            .join(\"\") || null\n    );\n};\n\nexport interface FieldProps {\n    field: CmsModelField;\n    onDelete: (field: CmsModelField) => void;\n    onEdit: (field: CmsModelField) => void;\n    parent?: CmsModelField;\n}\n\nconst Field = (props: FieldProps) => {\n    const { field, onEdit, parent } = props;\n    const { showSnackbar, showErrorSnackbar } = useSnackbar();\n    const { setData: setModel, data: model } = useModelEditor();\n    const { getFieldPlugin, getFieldRendererPlugin } = useModelFieldEditor();\n\n    const removeFieldFromSelected = useCallback(async () => {\n        if (model.titleFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    titleFieldId: null\n                };\n            });\n        } else if (model.descriptionFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    descriptionFieldId: null\n                };\n            });\n        } else if (model.imageFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    imageFieldId: null\n                };\n            });\n        }\n    }, [field.id, setModel, model]);\n\n    const onDelete = useCallback(async () => {\n        await removeFieldFromSelected();\n        props.onDelete(field);\n        return;\n    }, [field.fieldId]);\n\n    const setAsTitle = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, titleFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showErrorSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Title field set successfully.`);\n    }, [field.fieldId, setModel]);\n\n    const setAsDescription = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, descriptionFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showErrorSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Description field set successfully.`);\n    }, [field.fieldId, setModel]);\n\n    const setAsImage = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, imageFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showErrorSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Image field set successfully.`);\n    }, [field.fieldId, setModel]);\n\n    const fieldPlugin = getFieldPlugin(field.type);\n    const editorFieldOptionPlugins =\n        plugins.byType<CmsEditorFieldOptionPlugin>(\"cms-editor-field-option\");\n\n    if (!fieldPlugin) {\n        return null;\n    }\n\n    const rendererPlugin = getFieldRendererPlugin(field.renderer.name);\n    const canEdit = fieldPlugin.field.canEditSettings !== false;\n\n    const defaultInformationRenderer = useMemo(() => {\n        const fieldTypeName = getFieldTypeName(model, field, parent);\n        const fn = () => {\n            if (!fieldTypeName) {\n                return null;\n            }\n            return <Tag content={capitalize(fieldTypeName)} variant={\"neutral-base\"} />;\n        };\n\n        fn.displayName = \"FieldTypeRenderer\";\n\n        return fn;\n    }, [field.id]);\n\n    const fieldInformationRenderer = fieldPlugin.field?.renderInfo;\n\n    const info = [rendererPlugin?.renderer.name, field.list ? \"multiple values\" : null]\n        .filter(Boolean)\n        .join(\", \");\n\n    return (\n        <Fragment>\n            <div className={\"flex justify-between align-center\"}>\n                <div>\n                    <Heading level={6}>{field.label}</Heading>\n                    <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                        {fieldPlugin.field.label}\n                        {info && <span className={\"lowercase\"}> ({info})</span>}\n                    </Text>\n                </div>\n                <div className={\"flex items-center justify-end gap-sm\"}>\n                    {fieldInformationRenderer\n                        ? fieldInformationRenderer({ model, field })\n                        : defaultInformationRenderer()}\n                    {canEdit ? (\n                        <IconButton\n                            data-testid={\"cms.editor.edit-field\"}\n                            icon={<EditIcon />}\n                            onClick={() => onEdit(field)}\n                            variant={\"ghost\"}\n                            size={\"sm\"}\n                        />\n                    ) : null}\n                    <DropdownMenu\n                        trigger={\n                            <IconButton icon={<MoreVerticalIcon />} variant={\"ghost\"} size={\"sm\"} />\n                        }\n                    >\n                        {editorFieldOptionPlugins.map(pl =>\n                            React.cloneElement(pl.render(), { key: pl.name })\n                        )}\n                        {/* We only allow this action for top-level fields. */}\n                        <DropdownMenu.Item\n                            disabled={!isFieldAllowedToBeTitle(model, field, parent)}\n                            onClick={setAsTitle}\n                            text={t`Use as title`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<TitleIcon />}\n                                    label={t`Use as title`}\n                                />\n                            }\n                        />\n                        <DropdownMenu.Item\n                            disabled={!isFieldAllowedToBeDescription(model, field, parent)}\n                            onClick={setAsDescription}\n                            text={t`Use as description`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<TitleIcon />}\n                                    label={t`Use as description`}\n                                />\n                            }\n                        />\n                        <DropdownMenu.Item\n                            disabled={!isFieldAllowedToBeImage(model, field, parent)}\n                            onClick={setAsImage}\n                            text={t`Use as image`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<TitleIcon />}\n                                    label={t`Use as image`}\n                                />\n                            }\n                        />\n                        <DropdownMenu.Item\n                            onClick={onDelete}\n                            text={t`Delete`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<DeleteIcon />}\n                                    label={t`Delete`}\n                                />\n                            }\n                            className={\"text-destructive-primary! [&_svg]:fill-destructive\"}\n                        />\n                    </DropdownMenu>\n                </div>\n            </div>\n            {fieldPlugin.field.render && (\n                <div className={\"pt-md\"}>\n                    {fieldPlugin.field.render({ field, data: model, setData: setModel })}\n                </div>\n            )}\n        </Fragment>\n    );\n};\n\nexport default React.memo(Field);\n"],"names":["t","i18n","allowedTitleFieldTypes","isFieldAllowedToBeTitle","model","field","parent","isFieldAllowedToBeDescription","isFieldAllowedToBeImage","getFieldTypeName","isTitleField","isDescriptionField","isImageField","Boolean","Field","props","onEdit","showSnackbar","showErrorSnackbar","useSnackbar","setModel","useModelEditor","getFieldPlugin","getFieldRendererPlugin","useModelFieldEditor","removeFieldFromSelected","useCallback","data","onDelete","setAsTitle","response","setAsDescription","setAsImage","fieldPlugin","editorFieldOptionPlugins","plugins","rendererPlugin","canEdit","defaultInformationRenderer","useMemo","fieldTypeName","fn","Tag","capitalize","fieldInformationRenderer","info","Fragment","Heading","Text","IconButton","EditIcon","DropdownMenu","MoreVerticalIcon","pl","React","TitleIcon","DeleteIcon"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.js

@@ -29,7 +29,7 @@ const AdvancedMultipleReferenceField = (props)=>{
     });
     useEffect(()=>{
         if (loadingModels || !data?.listContentModels?.data) return;
-        if (data.listContentModels.error) {
+        else if (data.listContentModels.error) {
             setLoadedModels([]);
             showSnackbar(data.listContentModels.error.message);
             return;
@@ -98,8 +98,8 @@ const AdvancedMultipleReferenceField = (props)=>{
     ]);
     const onNewEntryCreate = useCallback((data)=>{
         if (!data) return void console.log("Could not store new entry to the reference field. Missing whole entry.");
-        if (!data.id) return void console.log('Could not store new entry to the reference field. Missing "id" value.');
-        if (!data.modelId) return void console.log('Could not store new entry to the reference field. Missing "modelId" value.');
+        else if (!data.id) return void console.log('Could not store new entry to the reference field. Missing "id" value.');
+        else if (!data.modelId) return void console.log('Could not store new entry to the reference field. Missing "modelId" value.');
         storeValues(values.concat([
             {
                 id: data.id,
@@ -111,7 +111,7 @@ const AdvancedMultipleReferenceField = (props)=>{
     ]);
     const onMoveUp = useCallback((index, toTop)=>{
         if (!values?.length) return;
-        if (toTop) {
+        else if (toTop) {
             const arr = values.splice(index, 1);
             bind.onChange(arr.concat(values));
             return;
@@ -122,7 +122,7 @@ const AdvancedMultipleReferenceField = (props)=>{
     ]);
     const onMoveDown = useCallback((index, toBottom)=>{
         if (!values?.length) return;
-        if (true === toBottom) {
+        else if (true === toBottom) {
             const arr = values.splice(index, 1);
             bind.onChange(values.concat(arr));
             return;

package/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.js","sources":["../../../../../../../src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { ListCmsModelsQueryResponse } from \"~/admin/viewsGraphql.js\";\nimport * as GQL from \"~/admin/viewsGraphql.js\";\nimport { withoutBeingDeletedModels } from \"~/admin/viewsGraphql.js\";\nimport type {\n    BindComponentRenderProp,\n    CmsContentEntry,\n    CmsModel,\n    CmsModelFieldRendererProps\n} from \"~/types.js\";\nimport { Options } from \"./Options.js\";\nimport { useReferences } from \"../hooks/useReferences.js\";\nimport { Entry } from \"./Entry.js\";\nimport { ReferencesDialog } from \"./ReferencesDialog.js\";\nimport { useModelField, useModelFieldGraphqlContext, useQuery } from \"~/admin/hooks/index.js\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport type { CmsReferenceValue } from \"~/admin/plugins/fieldRenderers/ref/components/types.js\";\nimport { parseIdentifier } from \"@webiny/utils\";\nimport { Entries } from \"./Entries.js\";\nimport { NewReferencedEntryDialog } from \"~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.js\";\nimport { FormComponentErrorMessage, FormComponentLabel } from \"@webiny/admin-ui\";\nimport { CanEditField, useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\n\ninterface AdvancedMultipleReferenceFieldProps extends CmsModelFieldRendererProps {\n    bind: BindComponentRenderProp<CmsReferenceValue[] | undefined | null>;\n}\n\nexport const AdvancedMultipleReferenceField = (props: AdvancedMultipleReferenceFieldProps) => {\n    const { bind } = props;\n    const { showSnackbar } = useSnackbar();\n    const { field } = useModelField();\n    const rules = useFieldEffectiveRules(field);\n    const requestContext = useModelFieldGraphqlContext();\n    const disabled = !rules.canEdit || rules.disabled;\n\n    const values = useMemo(() => {\n        return bind.value || [];\n    }, [bind.value]);\n\n    const [linkEntryDialogModel, setLinkEntryDialogModel] = useState<CmsModel | null>(null);\n    const [newEntryDialogModel, setNewEntryDialogModel] = useState<CmsModel | null>(null);\n\n    const [loadedModels, setLoadedModels] = useState<CmsModel[]>([]);\n\n    const { data, loading: loadingModels } = useQuery<ListCmsModelsQueryResponse>(\n        GQL.LIST_CONTENT_MODELS,\n        {\n            context: requestContext\n        }\n    );\n\n    useEffect(() => {\n        if (loadingModels || !data?.listContentModels?.data) {\n            return;\n        } else if (data.listContentModels.error) {\n            setLoadedModels([]);\n            showSnackbar(data.listContentModels.error.message);\n            return;\n        }\n        setLoadedModels(withoutBeingDeletedModels(data.listContentModels.data));\n    }, [data]);\n\n    const onNewRecord = useCallback(\n        (modelId: string) => {\n            const model = loadedModels.find(model => model.modelId === modelId);\n            if (!model) {\n                console.log(`Cannot find model by modelId \"${modelId}\".`);\n                return;\n            }\n            setNewEntryDialogModel(model);\n        },\n        [loadedModels, linkEntryDialogModel]\n    );\n\n    const onNewEntryDialogClose = useCallback(() => {\n        setNewEntryDialogModel(null);\n    }, [linkEntryDialogModel]);\n\n    const onExistingRecord = useCallback(\n        (modelId: string) => {\n            const model = loadedModels.find(model => model.modelId === modelId);\n            if (!model) {\n                console.log(`Cannot find model by modelId \"${modelId}\".`);\n                return;\n            }\n            setLinkEntryDialogModel(model);\n        },\n        [loadedModels, linkEntryDialogModel]\n    );\n\n    const onLinkEntryDialogClose = useCallback(() => {\n        setLinkEntryDialogModel(null);\n    }, []);\n\n    const { entries, loadMore } = useReferences({\n        values,\n        perPage: 10,\n        requestContext\n    });\n\n    const onRemove = useCallback(\n        (id: string) => {\n            if (!values || !Array.isArray(values)) {\n                return;\n            }\n            const { id: entryId } = parseIdentifier(id);\n            const newValues = values.filter(value => {\n                const { id: valueEntryId } = parseIdentifier(value.id);\n                return valueEntryId !== entryId;\n            });\n            bind.onChange(newValues.length > 0 ? newValues : null);\n        },\n        [entries, values]\n    );\n\n    const models = useMemo(() => {\n        if (!loadedModels || !field.settings?.models || !Array.isArray(field.settings.models)) {\n            return [];\n        }\n\n        return field.settings.models.reduce<CmsModel[]>((collection, ref) => {\n            const model = loadedModels.find(model => model.modelId === ref.modelId);\n            if (!model) {\n                return collection;\n            }\n            collection.push(model);\n\n            return collection;\n        }, []);\n    }, [loadedModels, entries]);\n\n    const storeValues = useCallback(\n        (values: CmsReferenceValue[]) => {\n            bind.onChange(values?.length ? values : null);\n            return;\n        },\n        [values]\n    );\n\n    const onNewEntryCreate = useCallback(\n        (data: Partial<CmsContentEntry> | null) => {\n            if (!data) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing whole entry.`\n                );\n                return;\n            } else if (!data.id) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing \"id\" value.`\n                );\n                return;\n            } else if (!data.modelId) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing \"modelId\" value.`\n                );\n                return;\n            }\n            storeValues(\n                values.concat([\n                    {\n                        id: data.id,\n                        modelId: data.modelId\n                    }\n                ])\n            );\n        },\n        [storeValues]\n    );\n\n    const onMoveUp = useCallback(\n        (index: number, toTop?: boolean) => {\n            if (!values?.length) {\n                return;\n            } else if (toTop) {\n                const arr = values.splice(index, 1);\n                bind.onChange(arr.concat(values));\n                return;\n            }\n            bind.moveValueUp(index);\n        },\n        [values]\n    );\n    const onMoveDown = useCallback(\n        (index: number, toBottom?: boolean) => {\n            if (!values?.length) {\n                return;\n            } else if (toBottom === true) {\n                const arr = values.splice(index, 1);\n                bind.onChange(values.concat(arr));\n                return;\n            }\n            bind.moveValueDown(index);\n        },\n        [values]\n    );\n\n    const { validation } = bind;\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"@container\"}>\n            <div className={\"flex items-center justify-between\"}>\n                <FormComponentLabel text={field.label} invalid={invalid} disabled={disabled} />\n            </div>\n            <div className={\"webiny_ref-field-container\"}>\n                <Entries entries={entries} loadMore={loadMore}>\n                    {(entry, index) => {\n                        const isFirst = index === 0;\n                        const isLast = index >= values.length - 1;\n                        const model = loadedModels.find(\n                            model => model.modelId === entry.model.modelId\n                        );\n                        if (!model) {\n                            return null;\n                        }\n                        return (\n                            <Entry\n                                disabled={disabled}\n                                model={model}\n                                placement=\"multiRef\"\n                                key={`reference-entry-${entry.id}`}\n                                index={index}\n                                entry={entry}\n                                onRemove={onRemove}\n                                onMoveUp={!isFirst ? onMoveUp : undefined}\n                                onMoveDown={!isLast ? onMoveDown : undefined}\n                            />\n                        );\n                    }}\n                </Entries>\n            </div>\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            {values.length > 0 && <div className=\"mb-md\" />}\n\n            <CanEditField>\n                <Options\n                    models={models}\n                    onNewRecord={onNewRecord}\n                    onLinkExistingRecord={onExistingRecord}\n                />\n            </CanEditField>\n\n            {newEntryDialogModel && (\n                <NewReferencedEntryDialog\n                    model={newEntryDialogModel}\n                    onClose={onNewEntryDialogClose}\n                    onChange={onNewEntryCreate}\n                />\n            )}\n\n            {linkEntryDialogModel && (\n                <ReferencesDialog\n                    {...props}\n                    field={field}\n                    multiple={true}\n                    values={values}\n                    contentModel={linkEntryDialogModel}\n                    storeValues={storeValues}\n                    onDialogClose={onLinkEntryDialogClose}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["AdvancedMultipleReferenceField","props","bind","showSnackbar","useSnackbar","field","useModelField","rules","useFieldEffectiveRules","requestContext","useModelFieldGraphqlContext","disabled","values","useMemo","linkEntryDialogModel","setLinkEntryDialogModel","useState","newEntryDialogModel","setNewEntryDialogModel","loadedModels","setLoadedModels","data","loadingModels","useQuery","GQL","useEffect","withoutBeingDeletedModels","onNewRecord","useCallback","modelId","model","console","onNewEntryDialogClose","onExistingRecord","onLinkEntryDialogClose","entries","loadMore","useReferences","onRemove","id","Array","entryId","parseIdentifier","newValues","value","valueEntryId","models","collection","ref","storeValues","onNewEntryCreate","onMoveUp","index","toTop","arr","onMoveDown","toBottom","validation","validationIsValid","validationMessage","invalid","FormComponentLabel","Entries","entry","isFirst","isLast","Entry","undefined","FormComponentErrorMessage","CanEditField","Options","NewReferencedEntryDialog","ReferencesDialog"],"mappings":"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"}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.js","sources":["../../../../../../../src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { ListCmsModelsQueryResponse } from \"~/admin/viewsGraphql.js\";\nimport * as GQL from \"~/admin/viewsGraphql.js\";\nimport { withoutBeingDeletedModels } from \"~/admin/viewsGraphql.js\";\nimport type {\n    BindComponentRenderProp,\n    CmsContentEntry,\n    CmsModel,\n    CmsModelFieldRendererProps\n} from \"~/types.js\";\nimport { Options } from \"./Options.js\";\nimport { useReferences } from \"../hooks/useReferences.js\";\nimport { Entry } from \"./Entry.js\";\nimport { ReferencesDialog } from \"./ReferencesDialog.js\";\nimport { useModelField, useModelFieldGraphqlContext, useQuery } from \"~/admin/hooks/index.js\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport type { CmsReferenceValue } from \"~/admin/plugins/fieldRenderers/ref/components/types.js\";\nimport { parseIdentifier } from \"@webiny/utils\";\nimport { Entries } from \"./Entries.js\";\nimport { NewReferencedEntryDialog } from \"~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.js\";\nimport { FormComponentErrorMessage, FormComponentLabel } from \"@webiny/admin-ui\";\nimport { CanEditField, useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\n\ninterface AdvancedMultipleReferenceFieldProps extends CmsModelFieldRendererProps {\n    bind: BindComponentRenderProp<CmsReferenceValue[] | undefined | null>;\n}\n\nexport const AdvancedMultipleReferenceField = (props: AdvancedMultipleReferenceFieldProps) => {\n    const { bind } = props;\n    const { showSnackbar } = useSnackbar();\n    const { field } = useModelField();\n    const rules = useFieldEffectiveRules(field);\n    const requestContext = useModelFieldGraphqlContext();\n    const disabled = !rules.canEdit || rules.disabled;\n\n    const values = useMemo(() => {\n        return bind.value || [];\n    }, [bind.value]);\n\n    const [linkEntryDialogModel, setLinkEntryDialogModel] = useState<CmsModel | null>(null);\n    const [newEntryDialogModel, setNewEntryDialogModel] = useState<CmsModel | null>(null);\n\n    const [loadedModels, setLoadedModels] = useState<CmsModel[]>([]);\n\n    const { data, loading: loadingModels } = useQuery<ListCmsModelsQueryResponse>(\n        GQL.LIST_CONTENT_MODELS,\n        {\n            context: requestContext\n        }\n    );\n\n    useEffect(() => {\n        if (loadingModels || !data?.listContentModels?.data) {\n            return;\n        } else if (data.listContentModels.error) {\n            setLoadedModels([]);\n            showSnackbar(data.listContentModels.error.message);\n            return;\n        }\n        setLoadedModels(withoutBeingDeletedModels(data.listContentModels.data));\n    }, [data]);\n\n    const onNewRecord = useCallback(\n        (modelId: string) => {\n            const model = loadedModels.find(model => model.modelId === modelId);\n            if (!model) {\n                console.log(`Cannot find model by modelId \"${modelId}\".`);\n                return;\n            }\n            setNewEntryDialogModel(model);\n        },\n        [loadedModels, linkEntryDialogModel]\n    );\n\n    const onNewEntryDialogClose = useCallback(() => {\n        setNewEntryDialogModel(null);\n    }, [linkEntryDialogModel]);\n\n    const onExistingRecord = useCallback(\n        (modelId: string) => {\n            const model = loadedModels.find(model => model.modelId === modelId);\n            if (!model) {\n                console.log(`Cannot find model by modelId \"${modelId}\".`);\n                return;\n            }\n            setLinkEntryDialogModel(model);\n        },\n        [loadedModels, linkEntryDialogModel]\n    );\n\n    const onLinkEntryDialogClose = useCallback(() => {\n        setLinkEntryDialogModel(null);\n    }, []);\n\n    const { entries, loadMore } = useReferences({\n        values,\n        perPage: 10,\n        requestContext\n    });\n\n    const onRemove = useCallback(\n        (id: string) => {\n            if (!values || !Array.isArray(values)) {\n                return;\n            }\n            const { id: entryId } = parseIdentifier(id);\n            const newValues = values.filter(value => {\n                const { id: valueEntryId } = parseIdentifier(value.id);\n                return valueEntryId !== entryId;\n            });\n            bind.onChange(newValues.length > 0 ? newValues : null);\n        },\n        [entries, values]\n    );\n\n    const models = useMemo(() => {\n        if (!loadedModels || !field.settings?.models || !Array.isArray(field.settings.models)) {\n            return [];\n        }\n\n        return field.settings.models.reduce<CmsModel[]>((collection, ref) => {\n            const model = loadedModels.find(model => model.modelId === ref.modelId);\n            if (!model) {\n                return collection;\n            }\n            collection.push(model);\n\n            return collection;\n        }, []);\n    }, [loadedModels, entries]);\n\n    const storeValues = useCallback(\n        (values: CmsReferenceValue[]) => {\n            bind.onChange(values?.length ? values : null);\n            return;\n        },\n        [values]\n    );\n\n    const onNewEntryCreate = useCallback(\n        (data: Partial<CmsContentEntry> | null) => {\n            if (!data) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing whole entry.`\n                );\n                return;\n            } else if (!data.id) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing \"id\" value.`\n                );\n                return;\n            } else if (!data.modelId) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing \"modelId\" value.`\n                );\n                return;\n            }\n            storeValues(\n                values.concat([\n                    {\n                        id: data.id,\n                        modelId: data.modelId\n                    }\n                ])\n            );\n        },\n        [storeValues]\n    );\n\n    const onMoveUp = useCallback(\n        (index: number, toTop?: boolean) => {\n            if (!values?.length) {\n                return;\n            } else if (toTop) {\n                const arr = values.splice(index, 1);\n                bind.onChange(arr.concat(values));\n                return;\n            }\n            bind.moveValueUp(index);\n        },\n        [values]\n    );\n    const onMoveDown = useCallback(\n        (index: number, toBottom?: boolean) => {\n            if (!values?.length) {\n                return;\n            } else if (toBottom === true) {\n                const arr = values.splice(index, 1);\n                bind.onChange(values.concat(arr));\n                return;\n            }\n            bind.moveValueDown(index);\n        },\n        [values]\n    );\n\n    const { validation } = bind;\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"@container\"}>\n            <div className={\"flex items-center justify-between\"}>\n                <FormComponentLabel text={field.label} invalid={invalid} disabled={disabled} />\n            </div>\n            <div className={\"webiny_ref-field-container\"}>\n                <Entries entries={entries} loadMore={loadMore}>\n                    {(entry, index) => {\n                        const isFirst = index === 0;\n                        const isLast = index >= values.length - 1;\n                        const model = loadedModels.find(\n                            model => model.modelId === entry.model.modelId\n                        );\n                        if (!model) {\n                            return null;\n                        }\n                        return (\n                            <Entry\n                                disabled={disabled}\n                                model={model}\n                                placement=\"multiRef\"\n                                key={`reference-entry-${entry.id}`}\n                                index={index}\n                                entry={entry}\n                                onRemove={onRemove}\n                                onMoveUp={!isFirst ? onMoveUp : undefined}\n                                onMoveDown={!isLast ? onMoveDown : undefined}\n                            />\n                        );\n                    }}\n                </Entries>\n            </div>\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            {values.length > 0 && <div className=\"mb-md\" />}\n\n            <CanEditField>\n                <Options\n                    models={models}\n                    onNewRecord={onNewRecord}\n                    onLinkExistingRecord={onExistingRecord}\n                />\n            </CanEditField>\n\n            {newEntryDialogModel && (\n                <NewReferencedEntryDialog\n                    model={newEntryDialogModel}\n                    onClose={onNewEntryDialogClose}\n                    onChange={onNewEntryCreate}\n                />\n            )}\n\n            {linkEntryDialogModel && (\n                <ReferencesDialog\n                    {...props}\n                    field={field}\n                    multiple={true}\n                    values={values}\n                    contentModel={linkEntryDialogModel}\n                    storeValues={storeValues}\n                    onDialogClose={onLinkEntryDialogClose}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["AdvancedMultipleReferenceField","props","bind","showSnackbar","useSnackbar","field","useModelField","rules","useFieldEffectiveRules","requestContext","useModelFieldGraphqlContext","disabled","values","useMemo","linkEntryDialogModel","setLinkEntryDialogModel","useState","newEntryDialogModel","setNewEntryDialogModel","loadedModels","setLoadedModels","data","loadingModels","useQuery","GQL","useEffect","withoutBeingDeletedModels","onNewRecord","useCallback","modelId","model","console","onNewEntryDialogClose","onExistingRecord","onLinkEntryDialogClose","entries","loadMore","useReferences","onRemove","id","Array","entryId","parseIdentifier","newValues","value","valueEntryId","models","collection","ref","storeValues","onNewEntryCreate","onMoveUp","index","toTop","arr","onMoveDown","toBottom","validation","validationIsValid","validationMessage","invalid","FormComponentLabel","Entries","entry","isFirst","isLast","Entry","undefined","FormComponentErrorMessage","CanEditField","Options","NewReferencedEntryDialog","ReferencesDialog"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.js

@@ -23,7 +23,7 @@ const AdvancedSingleReferenceField = (props)=>{
     });
     useEffect(()=>{
         if (loadingModels || !data?.listContentModels?.data) return;
-        if (data.listContentModels.error) {
+        else if (data.listContentModels.error) {
             setLoadedModels([]);
             showSnackbar(data.listContentModels.error.message);
             return;
@@ -75,7 +75,7 @@ const AdvancedSingleReferenceField = (props)=>{
     const loading = loadingEntries || loadingModels;
     const storeValues = useCallback((values)=>{
         if (values.length > 1) return void console.log("More than one value selected. This should never happen.");
-        if (0 === values.length || !values[0]?.id) return void bind.onChange(null);
+        else if (0 === values.length || !values[0]?.id) return void bind.onChange(null);
         bind.onChange(values[0]);
     }, [
         bind.value,
@@ -84,8 +84,8 @@ const AdvancedSingleReferenceField = (props)=>{
     ]);
     const onNewEntryCreate = useCallback((data)=>{
         if (!data) return void console.log("Could not store new entry to the reference field. Missing whole entry.");
-        if (!data.id) return void console.log('Could not store new entry to the reference field. Missing "id" value.');
-        if (!data.modelId) return void console.log('Could not store new entry to the reference field. Missing "modelId" value.');
+        else if (!data.id) return void console.log('Could not store new entry to the reference field. Missing "id" value.');
+        else if (!data.modelId) return void console.log('Could not store new entry to the reference field. Missing "modelId" value.');
         storeValues([
             {
                 id: data.id,

package/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.js","sources":["../../../../../../../src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type {\n    BindComponentRenderProp,\n    CmsContentEntry,\n    CmsModelFieldRendererProps,\n    CmsModel\n} from \"~/types.js\";\nimport { Options } from \"./Options.js\";\nimport { useReferences } from \"../hooks/useReferences.js\";\nimport { Entry } from \"./Entry.js\";\nimport { ReferencesDialog } from \"./ReferencesDialog.js\";\nimport { useQuery, useModelFieldGraphqlContext, useModelField } from \"~/admin/hooks/index.js\";\nimport type { ListCmsModelsQueryResponse } from \"~/admin/viewsGraphql.js\";\nimport * as GQL from \"~/admin/viewsGraphql.js\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport type { CmsReferenceValue } from \"~/admin/plugins/fieldRenderers/ref/components/types.js\";\nimport { NewReferencedEntryDialog } from \"~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.js\";\nimport { FormComponentErrorMessage, FormComponentLabel, OverlayLoader } from \"@webiny/admin-ui\";\nimport { CanEditField, useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\n\ninterface AdvancedSingleReferenceFieldProps extends CmsModelFieldRendererProps {\n    bind: BindComponentRenderProp<CmsReferenceValue | null>;\n}\n\nexport const AdvancedSingleReferenceField = (props: AdvancedSingleReferenceFieldProps) => {\n    const { bind } = props;\n    const { showSnackbar } = useSnackbar();\n    const { field } = useModelField();\n    const rules = useFieldEffectiveRules(field);\n\n    const [linkEntryDialogModel, setLinkEntryDialogModel] = useState<CmsModel | null>(null);\n    const [newEntryDialogModel, setNewEntryDialogModel] = useState<CmsModel | null>(null);\n    const [loadedModels, setLoadedModels] = useState<CmsModel[]>([]);\n    const requestContext = useModelFieldGraphqlContext();\n\n    const { data, loading: loadingModels } = useQuery<ListCmsModelsQueryResponse>(\n        GQL.LIST_CONTENT_MODELS,\n        {\n            context: requestContext\n        }\n    );\n\n    useEffect(() => {\n        if (loadingModels || !data?.listContentModels?.data) {\n            return;\n        } else if (data.listContentModels.error) {\n            setLoadedModels([]);\n            showSnackbar(data.listContentModels.error.message);\n            return;\n        }\n        setLoadedModels(data.listContentModels.data);\n    }, [data]);\n\n    const onNewRecord = useCallback(\n        (modelId: string) => {\n            const model = loadedModels.find(model => model.modelId === modelId);\n            if (!model) {\n                console.log(`Cannot find model by modelId \"${modelId}\".`);\n                return;\n            }\n            setNewEntryDialogModel(model);\n        },\n        [loadedModels, linkEntryDialogModel]\n    );\n\n    const onNewEntryDialogClose = useCallback(() => {\n        setNewEntryDialogModel(null);\n    }, [linkEntryDialogModel]);\n\n    const onExistingRecord = useCallback(\n        (modelId: string) => {\n            const model = loadedModels.find(model => model.modelId === modelId);\n            if (!model) {\n                console.log(`Cannot find model by modelId \"${modelId}\".`);\n                return;\n            }\n            setLinkEntryDialogModel(model);\n        },\n        [loadedModels, linkEntryDialogModel]\n    );\n\n    const onLinkEntryDialogClose = useCallback(() => {\n        setLinkEntryDialogModel(null);\n    }, []);\n\n    const { entries, loading: loadingEntries } = useReferences({\n        values: bind.value,\n        requestContext\n    });\n\n    const onRemove = useCallback(() => {\n        bind.onChange(null);\n    }, [entries]);\n\n    const models = useMemo(() => {\n        if (!loadedModels || !field.settings?.models) {\n            return [];\n        }\n\n        return (field.settings?.models || [])\n            .map(({ modelId }) => {\n                return loadedModels.find(model => model.modelId === modelId);\n            })\n            .filter(Boolean) as CmsModel[];\n    }, [loadedModels, entries]);\n\n    const loading = loadingEntries || loadingModels;\n\n    const storeValues = useCallback(\n        (values: CmsReferenceValue[]) => {\n            if (values.length > 1) {\n                console.log(\"More than one value selected. This should never happen.\");\n                return;\n            } else if (values.length === 0 || !values[0]?.id) {\n                bind.onChange(null);\n                return;\n            }\n            bind.onChange(values[0]);\n        },\n        [bind.value, bind.onChange, entries]\n    );\n\n    const onNewEntryCreate = useCallback(\n        (data: CmsContentEntry | null) => {\n            if (!data) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing whole entry.`\n                );\n                return;\n            } else if (!data.id) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing \"id\" value.`\n                );\n                return;\n            } else if (!data.modelId) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing \"modelId\" value.`\n                );\n                return;\n            }\n            storeValues([\n                {\n                    id: data.id,\n                    modelId: data.modelId\n                }\n            ]);\n        },\n        [storeValues]\n    );\n\n    const initialValue = useMemo(() => {\n        if (entries.length === 0 || loadedModels.length === 0) {\n            return null;\n        }\n        const entry = entries[0];\n        if (!entry) {\n            return null;\n        }\n        const model = loadedModels.find(model => model.modelId === entry.model.modelId);\n        if (!model) {\n            return null;\n        }\n        return {\n            entry,\n            model\n        };\n    }, [entries, loadedModels]);\n\n    const { validation } = bind;\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    const disabled = !rules.canEdit || rules.disabled;\n\n    return (\n        <div className={\"@container\"}>\n            <FormComponentLabel text={field.label} invalid={invalid} disabled={disabled} />\n            <div className={\"webiny_ref-field-container\"}>\n                {loading && <OverlayLoader size={\"md\"} />}\n                {initialValue && (\n                    <Entry\n                        model={initialValue.model}\n                        placement=\"singleRefField\"\n                        index={0}\n                        entry={initialValue.entry}\n                        onRemove={onRemove}\n                    />\n                )}\n            </div>\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            {initialValue && <div className=\"mb-md\" />}\n            <CanEditField>\n                <Options\n                    models={models}\n                    onNewRecord={onNewRecord}\n                    onLinkExistingRecord={onExistingRecord}\n                />\n            </CanEditField>\n\n            {newEntryDialogModel && (\n                <NewReferencedEntryDialog\n                    model={newEntryDialogModel}\n                    onClose={onNewEntryDialogClose}\n                    onChange={onNewEntryCreate}\n                />\n            )}\n\n            {linkEntryDialogModel && (\n                <ReferencesDialog\n                    {...props}\n                    multiple={false}\n                    values={bind.value ? [bind.value] : []}\n                    contentModel={linkEntryDialogModel}\n                    storeValues={storeValues}\n                    onDialogClose={onLinkEntryDialogClose}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["AdvancedSingleReferenceField","props","bind","showSnackbar","useSnackbar","field","useModelField","rules","useFieldEffectiveRules","linkEntryDialogModel","setLinkEntryDialogModel","useState","newEntryDialogModel","setNewEntryDialogModel","loadedModels","setLoadedModels","requestContext","useModelFieldGraphqlContext","data","loadingModels","useQuery","GQL","useEffect","onNewRecord","useCallback","modelId","model","console","onNewEntryDialogClose","onExistingRecord","onLinkEntryDialogClose","entries","loadingEntries","useReferences","onRemove","models","useMemo","Boolean","loading","storeValues","values","onNewEntryCreate","initialValue","entry","validation","validationIsValid","validationMessage","invalid","disabled","FormComponentLabel","OverlayLoader","Entry","FormComponentErrorMessage","CanEditField","Options","NewReferencedEntryDialog","ReferencesDialog"],"mappings":"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"}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.js","sources":["../../../../../../../src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type {\n    BindComponentRenderProp,\n    CmsContentEntry,\n    CmsModelFieldRendererProps,\n    CmsModel\n} from \"~/types.js\";\nimport { Options } from \"./Options.js\";\nimport { useReferences } from \"../hooks/useReferences.js\";\nimport { Entry } from \"./Entry.js\";\nimport { ReferencesDialog } from \"./ReferencesDialog.js\";\nimport { useQuery, useModelFieldGraphqlContext, useModelField } from \"~/admin/hooks/index.js\";\nimport type { ListCmsModelsQueryResponse } from \"~/admin/viewsGraphql.js\";\nimport * as GQL from \"~/admin/viewsGraphql.js\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport type { CmsReferenceValue } from \"~/admin/plugins/fieldRenderers/ref/components/types.js\";\nimport { NewReferencedEntryDialog } from \"~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.js\";\nimport { FormComponentErrorMessage, FormComponentLabel, OverlayLoader } from \"@webiny/admin-ui\";\nimport { CanEditField, useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\n\ninterface AdvancedSingleReferenceFieldProps extends CmsModelFieldRendererProps {\n    bind: BindComponentRenderProp<CmsReferenceValue | null>;\n}\n\nexport const AdvancedSingleReferenceField = (props: AdvancedSingleReferenceFieldProps) => {\n    const { bind } = props;\n    const { showSnackbar } = useSnackbar();\n    const { field } = useModelField();\n    const rules = useFieldEffectiveRules(field);\n\n    const [linkEntryDialogModel, setLinkEntryDialogModel] = useState<CmsModel | null>(null);\n    const [newEntryDialogModel, setNewEntryDialogModel] = useState<CmsModel | null>(null);\n    const [loadedModels, setLoadedModels] = useState<CmsModel[]>([]);\n    const requestContext = useModelFieldGraphqlContext();\n\n    const { data, loading: loadingModels } = useQuery<ListCmsModelsQueryResponse>(\n        GQL.LIST_CONTENT_MODELS,\n        {\n            context: requestContext\n        }\n    );\n\n    useEffect(() => {\n        if (loadingModels || !data?.listContentModels?.data) {\n            return;\n        } else if (data.listContentModels.error) {\n            setLoadedModels([]);\n            showSnackbar(data.listContentModels.error.message);\n            return;\n        }\n        setLoadedModels(data.listContentModels.data);\n    }, [data]);\n\n    const onNewRecord = useCallback(\n        (modelId: string) => {\n            const model = loadedModels.find(model => model.modelId === modelId);\n            if (!model) {\n                console.log(`Cannot find model by modelId \"${modelId}\".`);\n                return;\n            }\n            setNewEntryDialogModel(model);\n        },\n        [loadedModels, linkEntryDialogModel]\n    );\n\n    const onNewEntryDialogClose = useCallback(() => {\n        setNewEntryDialogModel(null);\n    }, [linkEntryDialogModel]);\n\n    const onExistingRecord = useCallback(\n        (modelId: string) => {\n            const model = loadedModels.find(model => model.modelId === modelId);\n            if (!model) {\n                console.log(`Cannot find model by modelId \"${modelId}\".`);\n                return;\n            }\n            setLinkEntryDialogModel(model);\n        },\n        [loadedModels, linkEntryDialogModel]\n    );\n\n    const onLinkEntryDialogClose = useCallback(() => {\n        setLinkEntryDialogModel(null);\n    }, []);\n\n    const { entries, loading: loadingEntries } = useReferences({\n        values: bind.value,\n        requestContext\n    });\n\n    const onRemove = useCallback(() => {\n        bind.onChange(null);\n    }, [entries]);\n\n    const models = useMemo(() => {\n        if (!loadedModels || !field.settings?.models) {\n            return [];\n        }\n\n        return (field.settings?.models || [])\n            .map(({ modelId }) => {\n                return loadedModels.find(model => model.modelId === modelId);\n            })\n            .filter(Boolean) as CmsModel[];\n    }, [loadedModels, entries]);\n\n    const loading = loadingEntries || loadingModels;\n\n    const storeValues = useCallback(\n        (values: CmsReferenceValue[]) => {\n            if (values.length > 1) {\n                console.log(\"More than one value selected. This should never happen.\");\n                return;\n            } else if (values.length === 0 || !values[0]?.id) {\n                bind.onChange(null);\n                return;\n            }\n            bind.onChange(values[0]);\n        },\n        [bind.value, bind.onChange, entries]\n    );\n\n    const onNewEntryCreate = useCallback(\n        (data: CmsContentEntry | null) => {\n            if (!data) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing whole entry.`\n                );\n                return;\n            } else if (!data.id) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing \"id\" value.`\n                );\n                return;\n            } else if (!data.modelId) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing \"modelId\" value.`\n                );\n                return;\n            }\n            storeValues([\n                {\n                    id: data.id,\n                    modelId: data.modelId\n                }\n            ]);\n        },\n        [storeValues]\n    );\n\n    const initialValue = useMemo(() => {\n        if (entries.length === 0 || loadedModels.length === 0) {\n            return null;\n        }\n        const entry = entries[0];\n        if (!entry) {\n            return null;\n        }\n        const model = loadedModels.find(model => model.modelId === entry.model.modelId);\n        if (!model) {\n            return null;\n        }\n        return {\n            entry,\n            model\n        };\n    }, [entries, loadedModels]);\n\n    const { validation } = bind;\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    const disabled = !rules.canEdit || rules.disabled;\n\n    return (\n        <div className={\"@container\"}>\n            <FormComponentLabel text={field.label} invalid={invalid} disabled={disabled} />\n            <div className={\"webiny_ref-field-container\"}>\n                {loading && <OverlayLoader size={\"md\"} />}\n                {initialValue && (\n                    <Entry\n                        model={initialValue.model}\n                        placement=\"singleRefField\"\n                        index={0}\n                        entry={initialValue.entry}\n                        onRemove={onRemove}\n                    />\n                )}\n            </div>\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            {initialValue && <div className=\"mb-md\" />}\n            <CanEditField>\n                <Options\n                    models={models}\n                    onNewRecord={onNewRecord}\n                    onLinkExistingRecord={onExistingRecord}\n                />\n            </CanEditField>\n\n            {newEntryDialogModel && (\n                <NewReferencedEntryDialog\n                    model={newEntryDialogModel}\n                    onClose={onNewEntryDialogClose}\n                    onChange={onNewEntryCreate}\n                />\n            )}\n\n            {linkEntryDialogModel && (\n                <ReferencesDialog\n                    {...props}\n                    multiple={false}\n                    values={bind.value ? [bind.value] : []}\n                    contentModel={linkEntryDialogModel}\n                    storeValues={storeValues}\n                    onDialogClose={onLinkEntryDialogClose}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["AdvancedSingleReferenceField","props","bind","showSnackbar","useSnackbar","field","useModelField","rules","useFieldEffectiveRules","linkEntryDialogModel","setLinkEntryDialogModel","useState","newEntryDialogModel","setNewEntryDialogModel","loadedModels","setLoadedModels","requestContext","useModelFieldGraphqlContext","data","loadingModels","useQuery","GQL","useEffect","onNewRecord","useCallback","modelId","model","console","onNewEntryDialogClose","onExistingRecord","onLinkEntryDialogClose","entries","loadingEntries","useReferences","onRemove","models","useMemo","Boolean","loading","storeValues","values","onNewEntryCreate","initialValue","entry","validation","validationIsValid","validationMessage","invalid","disabled","FormComponentLabel","OverlayLoader","Entry","FormComponentErrorMessage","CanEditField","Options","NewReferencedEntryDialog","ReferencesDialog"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/advanced/hooks/useEntries.js

@@ -55,8 +55,7 @@ const useEntries = (params)=>{
                 setEntries([]);
                 setError(result.data.content.error.message);
                 return;
-            }
-            if (result.data.content.data) {
+            } else if (result.data.content.data) {
                 const newItems = result.data.content.data.map((entry)=>({
                         id: entry.id,
                         entryId: entry.entryId,
@@ -111,7 +110,7 @@ const useEntries = (params)=>{
     ]);
     const loadMore = useCallback(()=>{
         if (loading) return void console.log("Please wait until the loading finishes to start a new one.");
-        if (!cursor) return void console.log("Trying to load more results but there is no cursor defined. Probably there are no more results.");
+        else if (!cursor) return void console.log("Trying to load more results but there is no cursor defined. Probably there are no more results.");
         executeQuery({
             query: searchQuery,
             items: entries,

package/admin/plugins/fieldRenderers/ref/advanced/hooks/useEntries.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/plugins/fieldRenderers/ref/advanced/hooks/useEntries.js","sources":["../../../../../../../src/admin/plugins/fieldRenderers/ref/advanced/hooks/useEntries.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport type { CmsModel, CmsModelField } from \"~/types.js\";\nimport type { CmsReferenceContentEntry } from \"~/admin/plugins/fieldRenderers/ref/components/types.js\";\nimport { useApolloClient } from \"~/admin/hooks/index.js\";\nimport type {\n    SearchQueryResponse,\n    SearchQueryVariables\n} from \"~/admin/plugins/fieldRenderers/ref/advanced/hooks/graphql.js\";\nimport { createSearchQuery } from \"~/admin/plugins/fieldRenderers/ref/advanced/hooks/graphql.js\";\n\nconst searchableFieldTypes = [\"text\", \"long-text\"];\nconst isFieldSearchable = (field: CmsModelField): boolean => {\n    return searchableFieldTypes.includes(field.type);\n};\n\ninterface ExecuteQueryParams {\n    items: CmsReferenceContentEntry[];\n    query?: string;\n    after?: string;\n}\n\ninterface Params {\n    model: CmsModel;\n    limit: number;\n}\n\nexport const useEntries = (params: Params) => {\n    const client = useApolloClient();\n    const { model, limit } = params;\n\n    const [entries, setEntries] = useState<CmsReferenceContentEntry[]>([]);\n    const [loading, setLoading] = useState<boolean>(false);\n    const [error, setError] = useState<string | null>(null);\n    const [searchQuery, setSearchQuery] = useState<string | undefined>(undefined);\n    const [cursor, setCursor] = useState<string | undefined>();\n\n    const SEARCH_QUERY = useMemo(() => {\n        return createSearchQuery(model);\n    }, [model.modelId]);\n\n    const createWhere = useCallback(\n        (query?: string) => {\n            if (!query) {\n                return {};\n            }\n            const conditions = model.fields\n                .map(field => {\n                    if (!isFieldSearchable(field)) {\n                        return null;\n                    }\n                    return {\n                        values: {\n                            [`${field.fieldId}_contains`]: query\n                        }\n                    };\n                })\n                .filter(Boolean);\n            if (conditions.length === 0) {\n                return {};\n            }\n            return {\n                OR: conditions\n            };\n        },\n        [model.modelId]\n    );\n\n    const executeQuery = useCallback(\n        async (params: ExecuteQueryParams) => {\n            const { query, items, after } = params;\n            if (loading) {\n                console.log(`Cannot run a new search. Please wait for the previous one to finish.`);\n                return;\n            }\n            setLoading(true);\n\n            const where = createWhere(query);\n\n            try {\n                const result = await client.query<SearchQueryResponse, SearchQueryVariables>({\n                    query: SEARCH_QUERY,\n                    variables: {\n                        where,\n                        sort: [\"savedOn_DESC\"],\n                        limit,\n                        after\n                    }\n                });\n\n                if (result.data.content.error) {\n                    setEntries([]);\n                    setError(result.data.content.error.message);\n                    return;\n                } else if (!result.data.content.data) {\n                    setEntries([]);\n                    setError(\n                        `Unknown error while fetching entries for model ${model.modelId}. Please check your network requests tab.`\n                    );\n                    return;\n                } else {\n                    const newItems = result.data.content.data.map(entry => {\n                        return {\n                            id: entry.id,\n                            entryId: entry.entryId,\n                            title: entry.meta.title,\n                            description: entry.meta.description,\n                            image: entry.meta.image,\n                            status: entry.meta.status,\n                            model: {\n                                modelId: model.modelId,\n                                name: model.name\n                            },\n                            createdBy: entry.createdBy,\n                            modifiedBy: entry.modifiedBy,\n                            createdOn: entry.createdOn,\n                            savedOn: entry.savedOn,\n                            location: {\n                                folderId: entry.wbyAco_location?.folderId\n                            }\n                        };\n                    });\n                    setEntries(items.concat(newItems));\n                    setCursor(result.data.content.meta.cursor || undefined);\n                    setError(null);\n                }\n            } catch (ex) {\n                setEntries([]);\n                console.log(`Error while fetching entries for model ${model.modelId}.`);\n                console.log(JSON.stringify(ex));\n                setError(ex.message);\n            } finally {\n                setLoading(false);\n            }\n        },\n        [model.modelId, entries, loading, error]\n    );\n\n    const runSearch = useCallback(\n        (query?: string) => {\n            if (searchQuery === query) {\n                console.log(`Skipping search as it is the same as the previous one.`);\n                return;\n            }\n            setSearchQuery(query);\n            executeQuery({\n                query,\n                items: []\n            });\n        },\n        [executeQuery, searchQuery]\n    );\n\n    const loadMore = useCallback(() => {\n        if (loading) {\n            console.log(`Please wait until the loading finishes to start a new one.`);\n            return;\n        } else if (!cursor) {\n            console.log(\n                `Trying to load more results but there is no cursor defined. Probably there are no more results.`\n            );\n            return;\n        }\n        executeQuery({\n            query: searchQuery,\n            items: entries,\n            after: cursor\n        });\n    }, [searchQuery, loading, cursor, entries]);\n\n    return {\n        runSearch,\n        loadMore,\n        loading,\n        entries,\n        error,\n        hasMore: !!cursor\n    };\n};\n"],"names":["searchableFieldTypes","isFieldSearchable","field","useEntries","params","client","useApolloClient","model","limit","entries","setEntries","useState","loading","setLoading","error","setError","searchQuery","setSearchQuery","undefined","cursor","setCursor","SEARCH_QUERY","useMemo","createSearchQuery","createWhere","useCallback","query","conditions","Boolean","executeQuery","items","after","console","where","result","newItems","entry","ex","JSON","runSearch","loadMore"],"mappings":"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"}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/advanced/hooks/useEntries.js","sources":["../../../../../../../src/admin/plugins/fieldRenderers/ref/advanced/hooks/useEntries.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport type { CmsModel, CmsModelField } from \"~/types.js\";\nimport type { CmsReferenceContentEntry } from \"~/admin/plugins/fieldRenderers/ref/components/types.js\";\nimport { useApolloClient } from \"~/admin/hooks/index.js\";\nimport type {\n    SearchQueryResponse,\n    SearchQueryVariables\n} from \"~/admin/plugins/fieldRenderers/ref/advanced/hooks/graphql.js\";\nimport { createSearchQuery } from \"~/admin/plugins/fieldRenderers/ref/advanced/hooks/graphql.js\";\n\nconst searchableFieldTypes = [\"text\", \"long-text\"];\nconst isFieldSearchable = (field: CmsModelField): boolean => {\n    return searchableFieldTypes.includes(field.type);\n};\n\ninterface ExecuteQueryParams {\n    items: CmsReferenceContentEntry[];\n    query?: string;\n    after?: string;\n}\n\ninterface Params {\n    model: CmsModel;\n    limit: number;\n}\n\nexport const useEntries = (params: Params) => {\n    const client = useApolloClient();\n    const { model, limit } = params;\n\n    const [entries, setEntries] = useState<CmsReferenceContentEntry[]>([]);\n    const [loading, setLoading] = useState<boolean>(false);\n    const [error, setError] = useState<string | null>(null);\n    const [searchQuery, setSearchQuery] = useState<string | undefined>(undefined);\n    const [cursor, setCursor] = useState<string | undefined>();\n\n    const SEARCH_QUERY = useMemo(() => {\n        return createSearchQuery(model);\n    }, [model.modelId]);\n\n    const createWhere = useCallback(\n        (query?: string) => {\n            if (!query) {\n                return {};\n            }\n            const conditions = model.fields\n                .map(field => {\n                    if (!isFieldSearchable(field)) {\n                        return null;\n                    }\n                    return {\n                        values: {\n                            [`${field.fieldId}_contains`]: query\n                        }\n                    };\n                })\n                .filter(Boolean);\n            if (conditions.length === 0) {\n                return {};\n            }\n            return {\n                OR: conditions\n            };\n        },\n        [model.modelId]\n    );\n\n    const executeQuery = useCallback(\n        async (params: ExecuteQueryParams) => {\n            const { query, items, after } = params;\n            if (loading) {\n                console.log(`Cannot run a new search. Please wait for the previous one to finish.`);\n                return;\n            }\n            setLoading(true);\n\n            const where = createWhere(query);\n\n            try {\n                const result = await client.query<SearchQueryResponse, SearchQueryVariables>({\n                    query: SEARCH_QUERY,\n                    variables: {\n                        where,\n                        sort: [\"savedOn_DESC\"],\n                        limit,\n                        after\n                    }\n                });\n\n                if (result.data.content.error) {\n                    setEntries([]);\n                    setError(result.data.content.error.message);\n                    return;\n                } else if (!result.data.content.data) {\n                    setEntries([]);\n                    setError(\n                        `Unknown error while fetching entries for model ${model.modelId}. Please check your network requests tab.`\n                    );\n                    return;\n                } else {\n                    const newItems = result.data.content.data.map(entry => {\n                        return {\n                            id: entry.id,\n                            entryId: entry.entryId,\n                            title: entry.meta.title,\n                            description: entry.meta.description,\n                            image: entry.meta.image,\n                            status: entry.meta.status,\n                            model: {\n                                modelId: model.modelId,\n                                name: model.name\n                            },\n                            createdBy: entry.createdBy,\n                            modifiedBy: entry.modifiedBy,\n                            createdOn: entry.createdOn,\n                            savedOn: entry.savedOn,\n                            location: {\n                                folderId: entry.wbyAco_location?.folderId\n                            }\n                        };\n                    });\n                    setEntries(items.concat(newItems));\n                    setCursor(result.data.content.meta.cursor || undefined);\n                    setError(null);\n                }\n            } catch (ex) {\n                setEntries([]);\n                console.log(`Error while fetching entries for model ${model.modelId}.`);\n                console.log(JSON.stringify(ex));\n                setError(ex.message);\n            } finally {\n                setLoading(false);\n            }\n        },\n        [model.modelId, entries, loading, error]\n    );\n\n    const runSearch = useCallback(\n        (query?: string) => {\n            if (searchQuery === query) {\n                console.log(`Skipping search as it is the same as the previous one.`);\n                return;\n            }\n            setSearchQuery(query);\n            executeQuery({\n                query,\n                items: []\n            });\n        },\n        [executeQuery, searchQuery]\n    );\n\n    const loadMore = useCallback(() => {\n        if (loading) {\n            console.log(`Please wait until the loading finishes to start a new one.`);\n            return;\n        } else if (!cursor) {\n            console.log(\n                `Trying to load more results but there is no cursor defined. Probably there are no more results.`\n            );\n            return;\n        }\n        executeQuery({\n            query: searchQuery,\n            items: entries,\n            after: cursor\n        });\n    }, [searchQuery, loading, cursor, entries]);\n\n    return {\n        runSearch,\n        loadMore,\n        loading,\n        entries,\n        error,\n        hasMore: !!cursor\n    };\n};\n"],"names":["searchableFieldTypes","isFieldSearchable","field","useEntries","params","client","useApolloClient","model","limit","entries","setEntries","useState","loading","setLoading","error","setError","searchQuery","setSearchQuery","undefined","cursor","setCursor","SEARCH_QUERY","useMemo","createSearchQuery","createWhere","useCallback","query","conditions","Boolean","executeQuery","items","after","console","where","result","newItems","entry","ex","JSON","runSearch","loadMore"],"mappings":"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"}

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

@@ -15,7 +15,7 @@ const convertReferenceEntriesToOptionCollection = (entries)=>entries.reduce((col
     }, {});
 const getEntryStatus = (item)=>{
     if ("published" === item.status) return "published";
-    if ("unpublished" === item.status || !item.published && "draft" === item.status) return "unpublished";
+    else if ("unpublished" === item.status || !item.published && "draft" === item.status) return "unpublished";
     return "draft";
 };
 const getItemStatusText = (item)=>{

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

@@ -1 +1 @@
-{"version":3,"file":"admin/plugins/fieldRenderers/ref/components/helpers.js","sources":["../../../../../../src/admin/plugins/fieldRenderers/ref/components/helpers.ts"],"sourcesContent":["import type { CmsReferenceContentEntry, OptionItem, OptionItemCollection } from \"./types.js\";\nimport type { CmsContentEntryStatusType } from \"~/types.js\";\n\nexport const convertReferenceEntryToOption = (entry: CmsReferenceContentEntry): OptionItem => {\n    return {\n        id: entry.id,\n        entryId: entry.entryId,\n        modelId: entry.model.modelId,\n        modelName: entry.model.name,\n        published: entry.published ? entry.published.id : null,\n        latest: entry.id,\n        status: entry.status,\n        name: entry.title,\n        folderId: entry.wbyAco_location?.folderId\n    };\n};\n\nexport const convertReferenceEntriesToOptionCollection = (\n    entries: CmsReferenceContentEntry[]\n): OptionItemCollection => {\n    return entries.reduce((collection, entry) => {\n        collection[entry.entryId] = convertReferenceEntryToOption(entry);\n        return collection;\n    }, {} as OptionItemCollection);\n};\n\nexport const getEntryStatus = (item: OptionItem): CmsContentEntryStatusType => {\n    if (item.status === \"published\") {\n        return \"published\";\n    } else if (item.status === \"unpublished\" || (!item.published && item.status === \"draft\")) {\n        return \"unpublished\";\n    }\n    return \"draft\";\n};\n\nexport const getItemStatusText = (item: OptionItem): string => {\n    const status = getEntryStatus(item);\n    switch (status) {\n        case \"published\":\n            return \"This entry is published.\";\n        case \"unpublished\":\n            return \"This entry has not been published.\";\n        default:\n            return \"Latest revision of this entry is in draft stage.\";\n    }\n};\n"],"names":["convertReferenceEntryToOption","entry","convertReferenceEntriesToOptionCollection","entries","collection","getEntryStatus","item","getItemStatusText","status"],"mappings":"AAGO,MAAMA,gCAAgC,CAACC,QACnC;QACH,IAAIA,MAAM,EAAE;QACZ,SAASA,MAAM,OAAO;QACtB,SAASA,MAAM,KAAK,CAAC,OAAO;QAC5B,WAAWA,MAAM,KAAK,CAAC,IAAI;QAC3B,WAAWA,MAAM,SAAS,GAAGA,MAAM,SAAS,CAAC,EAAE,GAAG;QAClD,QAAQA,MAAM,EAAE;QAChB,QAAQA,MAAM,MAAM;QACpB,MAAMA,MAAM,KAAK;QACjB,UAAUA,MAAM,eAAe,EAAE;IACrC;AAGG,MAAMC,4CAA4C,CACrDC,UAEOA,QAAQ,MAAM,CAAC,CAACC,YAAYH;QAC/BG,UAAU,CAACH,MAAM,OAAO,CAAC,GAAGD,8BAA8BC;QAC1D,OAAOG;IACX,GAAG,CAAC;AAGD,MAAMC,iBAAiB,CAACC;IAC3B,IAAIA,AAAgB,gBAAhBA,KAAK,MAAM,EACX,OAAO;IACJ,IAAIA,AAAgB,kBAAhBA,KAAK,MAAM,IAAuB,CAACA,KAAK,SAAS,IAAIA,AAAgB,YAAhBA,KAAK,MAAM,EACvE,OAAO;IAEX,OAAO;AACX;AAEO,MAAMC,oBAAoB,CAACD;IAC9B,MAAME,SAASH,eAAeC;IAC9B,OAAQE;QACJ,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX;YACI,OAAO;IACf;AACJ"}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/components/helpers.js","sources":["../../../../../../src/admin/plugins/fieldRenderers/ref/components/helpers.ts"],"sourcesContent":["import type { CmsReferenceContentEntry, OptionItem, OptionItemCollection } from \"./types.js\";\nimport type { CmsContentEntryStatusType } from \"~/types.js\";\n\nexport const convertReferenceEntryToOption = (entry: CmsReferenceContentEntry): OptionItem => {\n    return {\n        id: entry.id,\n        entryId: entry.entryId,\n        modelId: entry.model.modelId,\n        modelName: entry.model.name,\n        published: entry.published ? entry.published.id : null,\n        latest: entry.id,\n        status: entry.status,\n        name: entry.title,\n        folderId: entry.wbyAco_location?.folderId\n    };\n};\n\nexport const convertReferenceEntriesToOptionCollection = (\n    entries: CmsReferenceContentEntry[]\n): OptionItemCollection => {\n    return entries.reduce((collection, entry) => {\n        collection[entry.entryId] = convertReferenceEntryToOption(entry);\n        return collection;\n    }, {} as OptionItemCollection);\n};\n\nexport const getEntryStatus = (item: OptionItem): CmsContentEntryStatusType => {\n    if (item.status === \"published\") {\n        return \"published\";\n    } else if (item.status === \"unpublished\" || (!item.published && item.status === \"draft\")) {\n        return \"unpublished\";\n    }\n    return \"draft\";\n};\n\nexport const getItemStatusText = (item: OptionItem): string => {\n    const status = getEntryStatus(item);\n    switch (status) {\n        case \"published\":\n            return \"This entry is published.\";\n        case \"unpublished\":\n            return \"This entry has not been published.\";\n        default:\n            return \"Latest revision of this entry is in draft stage.\";\n    }\n};\n"],"names":["convertReferenceEntryToOption","entry","convertReferenceEntriesToOptionCollection","entries","collection","getEntryStatus","item","getItemStatusText","status"],"mappings":"AAGO,MAAMA,gCAAgC,CAACC,QACnC;QACH,IAAIA,MAAM,EAAE;QACZ,SAASA,MAAM,OAAO;QACtB,SAASA,MAAM,KAAK,CAAC,OAAO;QAC5B,WAAWA,MAAM,KAAK,CAAC,IAAI;QAC3B,WAAWA,MAAM,SAAS,GAAGA,MAAM,SAAS,CAAC,EAAE,GAAG;QAClD,QAAQA,MAAM,EAAE;QAChB,QAAQA,MAAM,MAAM;QACpB,MAAMA,MAAM,KAAK;QACjB,UAAUA,MAAM,eAAe,EAAE;IACrC;AAGG,MAAMC,4CAA4C,CACrDC,UAEOA,QAAQ,MAAM,CAAC,CAACC,YAAYH;QAC/BG,UAAU,CAACH,MAAM,OAAO,CAAC,GAAGD,8BAA8BC;QAC1D,OAAOG;IACX,GAAG,CAAC;AAGD,MAAMC,iBAAiB,CAACC;IAC3B,IAAIA,AAAgB,gBAAhBA,KAAK,MAAM,EACX,OAAO;SACJ,IAAIA,AAAgB,kBAAhBA,KAAK,MAAM,IAAuB,CAACA,KAAK,SAAS,IAAIA,AAAgB,YAAhBA,KAAK,MAAM,EACvE,OAAO;IAEX,OAAO;AACX;AAEO,MAAMC,oBAAoB,CAACD;IAC9B,MAAME,SAASH,eAAeC;IAC9B,OAAQE;QACJ,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX;YACI,OAAO;IACf;AACJ"}

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

@@ -5,7 +5,7 @@ import { convertReferenceEntriesToOptionCollection, convertReferenceEntryToOptio
 import { parseIdentifier } from "@webiny/utils";
 const getValueHash = (value)=>{
     if (!value || !value.id && !value.entryId) return null;
-    if (value.entryId) return value.entryId;
+    else if (value.entryId) return value.entryId;
     const { id } = parseIdentifier(value.id);
     return id;
 };