@webiny/app-headless-cms 6.4.5-beta.0 → 6.6.0-alpha.0

package/admin/components/ContentEntries/BulkActions/BulkActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/ContentEntries/BulkActions/BulkActions.js","sources":["../../../../../src/admin/components/ContentEntries/BulkActions/BulkActions.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Text, IconButton, Button } from \"@webiny/admin-ui\";\nimport { ReactComponent as Close } from \"@webiny/icons/close.svg\";\nimport { Buttons } from \"@webiny/app-admin\";\n\nimport { useContentEntryListConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { useContentEntriesList } from \"~/admin/views/contentEntries/hooks/index.js\";\n\nimport { i18n } from \"@webiny/app/i18n/index.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-entries/bulk-actions\");\n\nexport const getEntriesLabel = (): string => {\n    const { selected, isSelectedAll } = useContentEntriesList();\n\n    if (isSelectedAll) {\n        return \"all entries\";\n    }\n\n    return `${selected.length} ${selected.length === 1 ? \"entry\" : \"entries\"}`;\n};\n\nexport const SelectAll = () => {\n    const list = useContentEntriesList();\n\n    if (!list.showingSelectAll) {\n        return null;\n    }\n\n    return (\n        <div data-testid={\"select-all-container\"}>\n            {list.isSelectedAll ? (\n                <Button\n                    text={\"Clear selection\"}\n                    onClick={list.unselectAll}\n                    size={\"sm\"}\n                    variant={\"ghost\"}\n                />\n            ) : (\n                <Button\n                    text={\"Select all remaining entries\"}\n                    onClick={list.selectAll}\n                    size={\"sm\"}\n                    variant={\"secondary\"}\n                />\n            )}\n        </div>\n    );\n};\n\nexport const BulkActions = () => {\n    const { browser } = useContentEntryListConfig();\n    const { selected, setSelected, isSelectedAll } = useContentEntriesList();\n\n    const headline = useMemo((): string => {\n        if (isSelectedAll) {\n            return t(\"All entries selected\");\n        }\n\n        return t`{count|count:1:entry:default:entries} selected`({\n            count: selected.length\n        });\n    }, [selected.length, isSelectedAll]);\n\n    if (!selected.length) {\n        return null;\n    }\n\n    return (\n        <div className={\"w-full bg-neutral-disabled px-md py-sm\"}>\n            <div className={\"flex items-center justify-between gap-sm\"}>\n                <div className={\"flex items-center gap-sm\"}>\n                    <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                        {headline}\n                    </Text>\n                    <SelectAll />\n                </div>\n\n                <div className={\"flex items-center gap-sm\"}>\n                    <Buttons actions={browser.bulkActions} />\n                    <IconButton\n                        variant={\"ghost\"}\n                        size={\"sm\"}\n                        icon={<Close />}\n                        onClick={() => setSelected([])}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["t","i18n","getEntriesLabel","selected","isSelectedAll","useContentEntriesList","SelectAll","list","Button","BulkActions","browser","useContentEntryListConfig","setSelected","headline","useMemo","Text","Buttons","IconButton","Close"],"mappings":";;;;;;;AAUA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAEX,MAAMC,kBAAkB;IAC3B,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGC;IAEpC,IAAID,eACA,OAAO;IAGX,OAAO,GAAGD,SAAS,MAAM,CAAC,CAAC,EAAEA,AAAoB,MAApBA,SAAS,MAAM,GAAS,UAAU,WAAW;AAC9E;AAEO,MAAMG,YAAY;IACrB,MAAMC,OAAOF;IAEb,IAAI,CAACE,KAAK,gBAAgB,EACtB,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,eAAa;OACbA,KAAK,aAAa,GAAG,WAAH,GACf,oBAACC,QAAMA;QACH,MAAM;QACN,SAASD,KAAK,WAAW;QACzB,MAAM;QACN,SAAS;uBAGb,oBAACC,QAAMA;QACH,MAAM;QACN,SAASD,KAAK,SAAS;QACvB,MAAM;QACN,SAAS;;AAK7B;AAEO,MAAME,cAAc;IACvB,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAER,QAAQ,EAAES,WAAW,EAAER,aAAa,EAAE,GAAGC;IAEjD,MAAMQ,WAAWC,QAAQ;QACrB,IAAIV,eACA,OAAOJ,EAAE;QAGb,OAAOA,CAAC,CAAC,8CAA8C,CAAC,CAAC;YACrD,OAAOG,SAAS,MAAM;QAC1B;IACJ,GAAG;QAACA,SAAS,MAAM;QAAEC;KAAc;IAEnC,IAAI,CAACD,SAAS,MAAM,EAChB,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACY,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBF,WAAAA,WAAAA,GAEL,oBAACP,WAASA,QAAAA,WAAAA,GAGd,oBAAC;QAAI,WAAW;qBACZ,oBAACU,SAAOA;QAAC,SAASN,QAAQ,WAAW;sBACrC,oBAACO,YAAUA;QACP,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,gBAAKA;QACZ,SAAS,IAAMN,YAAY,EAAE;;AAMrD"}
+{"version":3,"file":"admin/components/ContentEntries/BulkActions/BulkActions.js","sources":["../../../../../src/admin/components/ContentEntries/BulkActions/BulkActions.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Text, IconButton, Button } from \"@webiny/admin-ui\";\nimport { ReactComponent as Close } from \"@webiny/icons/close.svg\";\nimport { Buttons, useListView } from \"@webiny/app-admin\";\n\nimport { useContentEntryListConfig } from \"~/admin/config/contentEntries/index.js\";\n\nimport { i18n } from \"@webiny/app/i18n/index.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-entries/bulk-actions\");\n\nexport const SelectAll = () => {\n    const { list, actions } = useListView();\n\n    if (list.selection.selectedCount === 0) {\n        return null;\n    }\n\n    return (\n        <div data-testid={\"select-all-container\"}>\n            {list.selection.allSelected ? (\n                <Button\n                    text={\"Clear selection\"}\n                    onClick={() => actions.selection.deselectAll()}\n                    size={\"sm\"}\n                    variant={\"ghost\"}\n                />\n            ) : (\n                <Button\n                    text={\"Select all remaining entries\"}\n                    onClick={() => actions.selection.selectAll()}\n                    size={\"sm\"}\n                    variant={\"secondary\"}\n                />\n            )}\n        </div>\n    );\n};\n\nexport const BulkActions = () => {\n    const { browser } = useContentEntryListConfig();\n    const { list, actions } = useListView();\n\n    const count = list.selection.selectedCount;\n    const isAll = list.selection.allSelected;\n\n    const headline = useMemo((): string => {\n        if (isAll) {\n            return t(\"All entries selected\");\n        }\n\n        return t`{count|count:1:entry:default:entries} selected`({\n            count\n        });\n    }, [count, isAll]);\n\n    if (count === 0) {\n        return null;\n    }\n\n    return (\n        <div className={\"w-full bg-neutral-disabled px-md py-sm\"}>\n            <div className={\"flex items-center justify-between gap-sm\"}>\n                <div className={\"flex items-center gap-sm\"}>\n                    <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                        {headline}\n                    </Text>\n                    <SelectAll />\n                </div>\n\n                <div className={\"flex items-center gap-sm\"}>\n                    <Buttons actions={browser.bulkActions} />\n                    <IconButton\n                        variant={\"ghost\"}\n                        size={\"sm\"}\n                        icon={<Close />}\n                        onClick={() => actions.selection.deselectAll()}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["t","i18n","SelectAll","list","actions","useListView","Button","BulkActions","browser","useContentEntryListConfig","count","isAll","headline","useMemo","Text","Buttons","IconButton","Close"],"mappings":";;;;;;AASA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAEX,MAAMC,YAAY;IACrB,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC;IAE1B,IAAIF,AAAiC,MAAjCA,KAAK,SAAS,CAAC,aAAa,EAC5B,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,eAAa;OACbA,KAAK,SAAS,CAAC,WAAW,GAAG,WAAH,GACvB,oBAACG,QAAMA;QACH,MAAM;QACN,SAAS,IAAMF,QAAQ,SAAS,CAAC,WAAW;QAC5C,MAAM;QACN,SAAS;uBAGb,oBAACE,QAAMA;QACH,MAAM;QACN,SAAS,IAAMF,QAAQ,SAAS,CAAC,SAAS;QAC1C,MAAM;QACN,SAAS;;AAK7B;AAEO,MAAMG,cAAc;IACvB,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEN,IAAI,EAAEC,OAAO,EAAE,GAAGC;IAE1B,MAAMK,QAAQP,KAAK,SAAS,CAAC,aAAa;IAC1C,MAAMQ,QAAQR,KAAK,SAAS,CAAC,WAAW;IAExC,MAAMS,WAAWC,QAAQ;QACrB,IAAIF,OACA,OAAOX,EAAE;QAGb,OAAOA,CAAC,CAAC,8CAA8C,CAAC,CAAC;YACrDU;QACJ;IACJ,GAAG;QAACA;QAAOC;KAAM;IAEjB,IAAID,AAAU,MAAVA,OACA,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACI,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBF,WAAAA,WAAAA,GAEL,oBAACV,WAASA,QAAAA,WAAAA,GAGd,oBAAC;QAAI,WAAW;qBACZ,oBAACa,SAAOA;QAAC,SAASP,QAAQ,WAAW;sBACrC,oBAACQ,YAAUA;QACP,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,gBAAKA;QACZ,SAAS,IAAMb,QAAQ,SAAS,CAAC,WAAW;;AAMpE"}

package/admin/components/ContentEntries/FilterByStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/ContentEntries/FilterByStatus.js","sources":["../../../../src/admin/components/ContentEntries/FilterByStatus.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Select } from \"@webiny/admin-ui\";\nimport { useBind } from \"@webiny/form\";\nimport { plugins } from \"@webiny/plugins\";\nimport type { CmsEntryFilterStatusPlugin } from \"@webiny/app-headless-cms-common/types/index.js\";\n\nconst getValidFilterValue = (value: string): string | undefined => {\n    if (value === \"all\" || value === \"\") {\n        return undefined;\n    }\n    return value;\n};\n\nexport const FilterByStatus = () => {\n    const bind = useBind({\n        name: \"status\",\n        beforeChange(value, cb) {\n            cb(getValidFilterValue(value));\n        }\n    });\n\n    const options = useMemo(() => {\n        const options = [\n            { label: \"All\", value: \"all\" },\n            { label: \"Draft\", value: \"draft\" },\n            { label: \"Published\", value: \"published\" },\n            { label: \"Unpublished\", value: \"unpublished\" }\n        ];\n\n        const filterStatusPlugins =\n            plugins.byType<CmsEntryFilterStatusPlugin>(\"cms.entry.filter.status\");\n\n        filterStatusPlugins.forEach(plugin => {\n            options.push({ label: plugin.label, value: plugin.value });\n        });\n\n        return options;\n    }, []);\n\n    return <Select {...bind} size={\"md\"} placeholder={\"Filter by status\"} options={options} />;\n};\n"],"names":["getValidFilterValue","value","FilterByStatus","bind","useBind","cb","options","useMemo","filterStatusPlugins","plugins","plugin","Select"],"mappings":";;;;AAMA,MAAMA,sBAAsB,CAACC;IACzB,IAAIA,AAAU,UAAVA,SAAmBA,AAAU,OAAVA,OACnB;IAEJ,OAAOA;AACX;AAEO,MAAMC,iBAAiB;IAC1B,MAAMC,OAAOC,QAAQ;QACjB,MAAM;QACN,cAAaH,KAAK,EAAEI,EAAE;YAClBA,GAAGL,oBAAoBC;QAC3B;IACJ;IAEA,MAAMK,UAAUC,QAAQ;QACpB,MAAMD,UAAU;YACZ;gBAAE,OAAO;gBAAO,OAAO;YAAM;YAC7B;gBAAE,OAAO;gBAAS,OAAO;YAAQ;YACjC;gBAAE,OAAO;gBAAa,OAAO;YAAY;YACzC;gBAAE,OAAO;gBAAe,OAAO;YAAc;SAChD;QAED,MAAME,sBACFC,QAAQ,MAAM,CAA6B;QAE/CD,oBAAoB,OAAO,CAACE,CAAAA;YACxBJ,QAAQ,IAAI,CAAC;gBAAE,OAAOI,OAAO,KAAK;gBAAE,OAAOA,OAAO,KAAK;YAAC;QAC5D;QAEA,OAAOJ;IACX,GAAG,EAAE;IAEL,OAAO,WAAP,GAAO,oBAACK,QAAMA;QAAE,GAAGR,IAAI;QAAE,MAAM;QAAM,aAAa;QAAoB,SAASG;;AACnF"}

package/admin/components/ContentEntries/Table/Actions/ChangeEntryStatus.js

@@ -2,27 +2,36 @@ import react from "react";
 import { ReactComponent } from "@webiny/icons/visibility.svg";
 import { ReactComponent as visibility_off_svg_ReactComponent } from "@webiny/icons/visibility_off.svg";
 import { ContentEntryListConfig } from "../../../../config/contentEntries/index.js";
-import { useContentEntry, useEntry, usePermission } from "../../../../hooks/index.js";
+import { useEntry, usePermission } from "../../../../hooks/index.js";
+import { useToast } from "@webiny/admin-ui";
+import { useContentEntriesPresenter } from "../../../../../presentation/contentEntries/list/useContentEntriesPresenter.js";
 const ChangeEntryStatus = ()=>{
     const { entry } = useEntry();
+    const toast = useToast();
     const { canPublish, canUnpublish } = usePermission();
-    const { publishEntryRevision, unpublishEntryRevision } = useContentEntry();
+    const presenter = useContentEntriesPresenter();
     const { OptionsMenuItem } = ContentEntryListConfig.Browser.Entry.Action;
     if ("published" === entry.meta.status && canUnpublish("cms.contentEntry")) return /*#__PURE__*/ react.createElement(OptionsMenuItem, {
         icon: /*#__PURE__*/ react.createElement(visibility_off_svg_ReactComponent, null),
         label: "Unpublish",
-        onAction: ()=>unpublishEntryRevision({
-                id: entry.id
-            }),
+        onAction: async ()=>{
+            const success = await presenter.unpublishEntry(entry.id);
+            if (success) toast.showSuccessToast({
+                title: `${entry.meta.title} was unpublished successfully!`
+            });
+        },
         "data-testid": "aco.actions.entry.unpublish"
     });
     if (!canPublish("cms.contentEntry")) return null;
     return /*#__PURE__*/ react.createElement(OptionsMenuItem, {
         icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
         label: "Publish",
-        onAction: ()=>publishEntryRevision({
-                id: entry.id
-            }),
+        onAction: async ()=>{
+            const success = await presenter.publishEntry(entry.id);
+            if (success) toast.showSuccessToast({
+                title: `${entry.meta.title} was published successfully!`
+            });
+        },
         "data-testid": "aco.actions.entry.publish"
     });
 };

package/admin/components/ContentEntries/Table/Actions/ChangeEntryStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/ContentEntries/Table/Actions/ChangeEntryStatus.js","sources":["../../../../../../src/admin/components/ContentEntries/Table/Actions/ChangeEntryStatus.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as Publish } from \"@webiny/icons/visibility.svg\";\nimport { ReactComponent as Unpublish } from \"@webiny/icons/visibility_off.svg\";\nimport { ContentEntryListConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { useContentEntry, useEntry, usePermission } from \"~/admin/hooks/index.js\";\n\nexport const ChangeEntryStatus = () => {\n    const { entry } = useEntry();\n    const { canPublish, canUnpublish } = usePermission();\n    const { publishEntryRevision, unpublishEntryRevision } = useContentEntry();\n    const { OptionsMenuItem } = ContentEntryListConfig.Browser.Entry.Action;\n\n    if (entry.meta.status === \"published\" && canUnpublish(\"cms.contentEntry\")) {\n        return (\n            <OptionsMenuItem\n                icon={<Unpublish />}\n                label={\"Unpublish\"}\n                onAction={() => unpublishEntryRevision({ id: entry.id })}\n                data-testid={\"aco.actions.entry.unpublish\"}\n            />\n        );\n    }\n\n    if (!canPublish(\"cms.contentEntry\")) {\n        return null;\n    }\n\n    return (\n        <OptionsMenuItem\n            icon={<Publish />}\n            label={\"Publish\"}\n            onAction={() => publishEntryRevision({ id: entry.id })}\n            data-testid={\"aco.actions.entry.publish\"}\n        />\n    );\n};\n"],"names":["ChangeEntryStatus","entry","useEntry","canPublish","canUnpublish","usePermission","publishEntryRevision","unpublishEntryRevision","useContentEntry","OptionsMenuItem","ContentEntryListConfig","Unpublish","Publish"],"mappings":";;;;;AAMO,MAAMA,oBAAoB;IAC7B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGC;IACrC,MAAM,EAAEC,oBAAoB,EAAEC,sBAAsB,EAAE,GAAGC;IACzD,MAAM,EAAEC,eAAe,EAAE,GAAGC,uBAAuB,OAAO,CAAC,KAAK,CAAC,MAAM;IAEvE,IAAIT,AAAsB,gBAAtBA,MAAM,IAAI,CAAC,MAAM,IAAoBG,aAAa,qBAClD,OAAO,WAAP,GACI,oBAACK,iBAAAA;QACG,oBAAM,oBAACE,mCAASA;QAChB,OAAO;QACP,UAAU,IAAMJ,uBAAuB;gBAAE,IAAIN,MAAM,EAAE;YAAC;QACtD,eAAa;;IAKzB,IAAI,CAACE,WAAW,qBACZ,OAAO;IAGX,OAAO,WAAP,GACI,oBAACM,iBAAAA;QACG,oBAAM,oBAACG,gBAAOA;QACd,OAAO;QACP,UAAU,IAAMN,qBAAqB;gBAAE,IAAIL,MAAM,EAAE;YAAC;QACpD,eAAa;;AAGzB"}
+{"version":3,"file":"admin/components/ContentEntries/Table/Actions/ChangeEntryStatus.js","sources":["../../../../../../src/admin/components/ContentEntries/Table/Actions/ChangeEntryStatus.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as Publish } from \"@webiny/icons/visibility.svg\";\nimport { ReactComponent as Unpublish } from \"@webiny/icons/visibility_off.svg\";\nimport { ContentEntryListConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { useEntry, usePermission } from \"~/admin/hooks/index.js\";\nimport { useToast } from \"@webiny/admin-ui\";\nimport { useContentEntriesPresenter } from \"~/presentation/contentEntries/list/useContentEntriesPresenter.js\";\n\nexport const ChangeEntryStatus = () => {\n    const { entry } = useEntry();\n    const toast = useToast();\n    const { canPublish, canUnpublish } = usePermission();\n    const presenter = useContentEntriesPresenter();\n\n    const { OptionsMenuItem } = ContentEntryListConfig.Browser.Entry.Action;\n\n    if (entry.meta.status === \"published\" && canUnpublish(\"cms.contentEntry\")) {\n        return (\n            <OptionsMenuItem\n                icon={<Unpublish />}\n                label={\"Unpublish\"}\n                onAction={async () => {\n                    const success = await presenter.unpublishEntry(entry.id);\n                    if (success) {\n                        toast.showSuccessToast({\n                            title: `${entry.meta.title} was unpublished successfully!`\n                        });\n                    }\n                }}\n                data-testid={\"aco.actions.entry.unpublish\"}\n            />\n        );\n    }\n\n    if (!canPublish(\"cms.contentEntry\")) {\n        return null;\n    }\n\n    return (\n        <OptionsMenuItem\n            icon={<Publish />}\n            label={\"Publish\"}\n            onAction={async () => {\n                const success = await presenter.publishEntry(entry.id);\n                if (success) {\n                    toast.showSuccessToast({\n                        title: `${entry.meta.title} was published successfully!`\n                    });\n                }\n            }}\n            data-testid={\"aco.actions.entry.publish\"}\n        />\n    );\n};\n"],"names":["ChangeEntryStatus","entry","useEntry","toast","useToast","canPublish","canUnpublish","usePermission","presenter","useContentEntriesPresenter","OptionsMenuItem","ContentEntryListConfig","Unpublish","success","Publish"],"mappings":";;;;;;;AAQO,MAAMA,oBAAoB;IAC7B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAMC,QAAQC;IACd,MAAM,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGC;IACrC,MAAMC,YAAYC;IAElB,MAAM,EAAEC,eAAe,EAAE,GAAGC,uBAAuB,OAAO,CAAC,KAAK,CAAC,MAAM;IAEvE,IAAIV,AAAsB,gBAAtBA,MAAM,IAAI,CAAC,MAAM,IAAoBK,aAAa,qBAClD,OAAO,WAAP,GACI,oBAACI,iBAAAA;QACG,oBAAM,oBAACE,mCAASA;QAChB,OAAO;QACP,UAAU;YACN,MAAMC,UAAU,MAAML,UAAU,cAAc,CAACP,MAAM,EAAE;YACvD,IAAIY,SACAV,MAAM,gBAAgB,CAAC;gBACnB,OAAO,GAAGF,MAAM,IAAI,CAAC,KAAK,CAAC,8BAA8B,CAAC;YAC9D;QAER;QACA,eAAa;;IAKzB,IAAI,CAACI,WAAW,qBACZ,OAAO;IAGX,OAAO,WAAP,GACI,oBAACK,iBAAAA;QACG,oBAAM,oBAACI,gBAAOA;QACd,OAAO;QACP,UAAU;YACN,MAAMD,UAAU,MAAML,UAAU,YAAY,CAACP,MAAM,EAAE;YACrD,IAAIY,SACAV,MAAM,gBAAgB,CAAC;gBACnB,OAAO,GAAGF,MAAM,IAAI,CAAC,KAAK,CAAC,4BAA4B,CAAC;YAC5D;QAER;QACA,eAAa;;AAGzB"}

package/admin/components/ContentEntries/Table/Actions/DeleteEntry.js

@@ -1,24 +1,28 @@
 import react from "react";
 import { ReactComponent } from "@webiny/icons/delete.svg";
+import { useToast } from "@webiny/admin-ui";
 import { ContentEntryListConfig } from "../../../../config/contentEntries/index.js";
-import { useContentEntry, useEntry, usePermission } from "../../../../hooks/index.js";
+import { useEntry, usePermission } from "../../../../hooks/index.js";
+import { useContentEntriesPresenter } from "../../../../../presentation/contentEntries/list/useContentEntriesPresenter.js";
 const DeleteEntry = ()=>{
     const { entry } = useEntry();
-    const contentEntry = useContentEntry();
+    const toast = useToast();
     const { canDelete } = usePermission();
+    const presenter = useContentEntriesPresenter();
     const { OptionsMenuItem } = ContentEntryListConfig.Browser.Entry.Action;
-    const deleteEntry = async ()=>{
-        await contentEntry.deleteEntry({
-            id: entry.entryId
+    const handleDelete = async ()=>{
+        const success = await presenter.deleteEntry(entry.entryId);
+        if (success) toast.showSuccessToast({
+            title: `${entry.meta.title} was trashed successfully!`
         });
     };
     if (!canDelete(entry, "cms.contentEntry")) return null;
     return /*#__PURE__*/ react.createElement(OptionsMenuItem, {
         icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
         label: "Trash",
-        onAction: deleteEntry,
+        onAction: handleDelete,
         "data-testid": "aco.actions.entry.delete",
-        className: "text-destructive-primary! [&_svg]:fill-destructive"
+        variant: "destructive"
     });
 };
 export { DeleteEntry };

package/admin/components/ContentEntries/Table/Actions/DeleteEntry.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/ContentEntries/Table/Actions/DeleteEntry.js","sources":["../../../../../../src/admin/components/ContentEntries/Table/Actions/DeleteEntry.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as Delete } from \"@webiny/icons/delete.svg\";\nimport { ContentEntryListConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { useContentEntry, useEntry, usePermission } from \"~/admin/hooks/index.js\";\n\nexport const DeleteEntry = () => {\n    const { entry } = useEntry();\n    const contentEntry = useContentEntry();\n    const { canDelete } = usePermission();\n    const { OptionsMenuItem } = ContentEntryListConfig.Browser.Entry.Action;\n\n    const deleteEntry = async () => {\n        await contentEntry.deleteEntry({ id: entry.entryId });\n    };\n\n    if (!canDelete(entry, \"cms.contentEntry\")) {\n        return null;\n    }\n\n    return (\n        <OptionsMenuItem\n            icon={<Delete />}\n            label={\"Trash\"}\n            onAction={deleteEntry}\n            data-testid={\"aco.actions.entry.delete\"}\n            className={\"text-destructive-primary! [&_svg]:fill-destructive\"}\n        />\n    );\n};\n"],"names":["DeleteEntry","entry","useEntry","contentEntry","useContentEntry","canDelete","usePermission","OptionsMenuItem","ContentEntryListConfig","deleteEntry","Delete"],"mappings":";;;;AAKO,MAAMA,cAAc;IACvB,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAMC,eAAeC;IACrB,MAAM,EAAEC,SAAS,EAAE,GAAGC;IACtB,MAAM,EAAEC,eAAe,EAAE,GAAGC,uBAAuB,OAAO,CAAC,KAAK,CAAC,MAAM;IAEvE,MAAMC,cAAc;QAChB,MAAMN,aAAa,WAAW,CAAC;YAAE,IAAIF,MAAM,OAAO;QAAC;IACvD;IAEA,IAAI,CAACI,UAAUJ,OAAO,qBAClB,OAAO;IAGX,OAAO,WAAP,GACI,oBAACM,iBAAAA;QACG,oBAAM,oBAACG,gBAAMA;QACb,OAAO;QACP,UAAUD;QACV,eAAa;QACb,WAAW;;AAGvB"}
+{"version":3,"file":"admin/components/ContentEntries/Table/Actions/DeleteEntry.js","sources":["../../../../../../src/admin/components/ContentEntries/Table/Actions/DeleteEntry.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as Delete } from \"@webiny/icons/delete.svg\";\nimport { useToast } from \"@webiny/admin-ui\";\nimport { ContentEntryListConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { useEntry, usePermission } from \"~/admin/hooks/index.js\";\nimport { useContentEntriesPresenter } from \"~/presentation/contentEntries/list/useContentEntriesPresenter.js\";\n\nexport const DeleteEntry = () => {\n    const { entry } = useEntry();\n    const toast = useToast();\n    const { canDelete } = usePermission();\n    const presenter = useContentEntriesPresenter();\n    const { OptionsMenuItem } = ContentEntryListConfig.Browser.Entry.Action;\n\n    const handleDelete = async () => {\n        const success = await presenter.deleteEntry(entry.entryId);\n        if (success) {\n            toast.showSuccessToast({\n                title: `${entry.meta.title} was trashed successfully!`\n            });\n        }\n    };\n\n    if (!canDelete(entry, \"cms.contentEntry\")) {\n        return null;\n    }\n\n    return (\n        <OptionsMenuItem\n            icon={<Delete />}\n            label={\"Trash\"}\n            onAction={handleDelete}\n            data-testid={\"aco.actions.entry.delete\"}\n            variant={\"destructive\"}\n        />\n    );\n};\n"],"names":["DeleteEntry","entry","useEntry","toast","useToast","canDelete","usePermission","presenter","useContentEntriesPresenter","OptionsMenuItem","ContentEntryListConfig","handleDelete","success","Delete"],"mappings":";;;;;;AAOO,MAAMA,cAAc;IACvB,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAMC,QAAQC;IACd,MAAM,EAAEC,SAAS,EAAE,GAAGC;IACtB,MAAMC,YAAYC;IAClB,MAAM,EAAEC,eAAe,EAAE,GAAGC,uBAAuB,OAAO,CAAC,KAAK,CAAC,MAAM;IAEvE,MAAMC,eAAe;QACjB,MAAMC,UAAU,MAAML,UAAU,WAAW,CAACN,MAAM,OAAO;QACzD,IAAIW,SACAT,MAAM,gBAAgB,CAAC;YACnB,OAAO,GAAGF,MAAM,IAAI,CAAC,KAAK,CAAC,0BAA0B,CAAC;QAC1D;IAER;IAEA,IAAI,CAACI,UAAUJ,OAAO,qBAClB,OAAO;IAGX,OAAO,WAAP,GACI,oBAACQ,iBAAAA;QACG,oBAAM,oBAACI,gBAAMA;QACb,OAAO;QACP,UAAUF;QACV,eAAa;QACb,SAAS;;AAGrB"}

package/admin/components/ContentEntries/Table/Actions/EditEntry.js

@@ -1,17 +1,17 @@
 import react from "react";
 import { ReactComponent } from "@webiny/icons/edit.svg";
-import { ContentEntryListConfig } from "../../../../config/contentEntries/index.js";
-import { useContentEntriesList, useEntry, usePermission } from "../../../../hooks/index.js";
+import { useEntry, usePermission } from "../../../../hooks/index.js";
+import { useContentEntriesPresenter } from "../../../../../presentation/contentEntries/list/useContentEntriesPresenter.js";
+import { OptionsMenuItem } from "@webiny/app-admin";
 const EditEntry = ()=>{
     const { entry } = useEntry();
     const { canEdit } = usePermission();
-    const { getEntryEditUrl } = useContentEntriesList();
-    const { OptionsMenuLink } = ContentEntryListConfig.Browser.Entry.Action;
+    const presenter = useContentEntriesPresenter();
     if (!canEdit(entry, "cms.contentEntry")) return null;
-    return /*#__PURE__*/ react.createElement(OptionsMenuLink, {
+    return /*#__PURE__*/ react.createElement(OptionsMenuItem, {
         icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
         label: "Edit",
-        to: getEntryEditUrl(entry),
+        onAction: ()=>presenter.selectEntry(entry.id),
         "data-testid": "aco.actions.entry.edit"
     });
 };

package/admin/components/ContentEntries/Table/Actions/EditEntry.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/ContentEntries/Table/Actions/EditEntry.js","sources":["../../../../../../src/admin/components/ContentEntries/Table/Actions/EditEntry.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as Edit } from \"@webiny/icons/edit.svg\";\nimport { ContentEntryListConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { useContentEntriesList, useEntry, usePermission } from \"~/admin/hooks/index.js\";\n\nexport const EditEntry = () => {\n    const { entry } = useEntry();\n    const { canEdit } = usePermission();\n    const { getEntryEditUrl } = useContentEntriesList();\n    const { OptionsMenuLink } = ContentEntryListConfig.Browser.Entry.Action;\n\n    if (!canEdit(entry, \"cms.contentEntry\")) {\n        return null;\n    }\n\n    return (\n        <OptionsMenuLink\n            icon={<Edit />}\n            label={\"Edit\"}\n            to={getEntryEditUrl(entry)}\n            data-testid={\"aco.actions.entry.edit\"}\n        />\n    );\n};\n"],"names":["EditEntry","entry","useEntry","canEdit","usePermission","getEntryEditUrl","useContentEntriesList","OptionsMenuLink","ContentEntryListConfig","Edit"],"mappings":";;;;AAKO,MAAMA,YAAY;IACrB,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,eAAe,EAAE,GAAGC;IAC5B,MAAM,EAAEC,eAAe,EAAE,GAAGC,uBAAuB,OAAO,CAAC,KAAK,CAAC,MAAM;IAEvE,IAAI,CAACL,QAAQF,OAAO,qBAChB,OAAO;IAGX,OAAO,WAAP,GACI,oBAACM,iBAAAA;QACG,oBAAM,oBAACE,gBAAIA;QACX,OAAO;QACP,IAAIJ,gBAAgBJ;QACpB,eAAa;;AAGzB"}
+{"version":3,"file":"admin/components/ContentEntries/Table/Actions/EditEntry.js","sources":["../../../../../../src/admin/components/ContentEntries/Table/Actions/EditEntry.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as Edit } from \"@webiny/icons/edit.svg\";\nimport { useEntry, usePermission } from \"~/admin/hooks/index.js\";\nimport { useContentEntriesPresenter } from \"~/presentation/contentEntries/list/useContentEntriesPresenter.js\";\nimport { OptionsMenuItem } from \"@webiny/app-admin\";\n\nexport const EditEntry = () => {\n    const { entry } = useEntry();\n    const { canEdit } = usePermission();\n    const presenter = useContentEntriesPresenter();\n\n    if (!canEdit(entry, \"cms.contentEntry\")) {\n        return null;\n    }\n\n    return (\n        <OptionsMenuItem\n            icon={<Edit />}\n            label={\"Edit\"}\n            onAction={() => presenter.selectEntry(entry.id)}\n            data-testid={\"aco.actions.entry.edit\"}\n        />\n    );\n};\n"],"names":["EditEntry","entry","useEntry","canEdit","usePermission","presenter","useContentEntriesPresenter","OptionsMenuItem","Edit"],"mappings":";;;;;AAMO,MAAMA,YAAY;IACrB,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAMC,YAAYC;IAElB,IAAI,CAACH,QAAQF,OAAO,qBAChB,OAAO;IAGX,OAAO,WAAP,GACI,oBAACM,iBAAeA;QACZ,oBAAM,oBAACC,gBAAIA;QACX,OAAO;QACP,UAAU,IAAMH,UAAU,WAAW,CAACJ,MAAM,EAAE;QAC9C,eAAa;;AAGzB"}

package/admin/components/ContentEntries/Table/Actions/MoveEntry.js

@@ -1,13 +1,33 @@
-import react from "react";
+import react, { useCallback } from "react";
 import { ReactComponent } from "@webiny/icons/exit_to_app.svg";
+import { useMoveToFolderDialog } from "@webiny/app-aco";
+import { useToast } from "@webiny/admin-ui";
 import { ContentEntryListConfig } from "../../../../config/contentEntries/index.js";
-import { useEntry, useMoveContentEntryToFolder } from "../../../../hooks/index.js";
+import { useEntry } from "../../../../hooks/index.js";
+import { useContentEntriesPresenter } from "../../../../../presentation/contentEntries/list/useContentEntriesPresenter.js";
 const MoveEntry = ()=>{
-    const { entry: record } = useEntry();
-    const moveContentEntry = useMoveContentEntryToFolder({
-        record
-    });
+    const { entry } = useEntry();
+    const presenter = useContentEntriesPresenter();
+    const toast = useToast();
+    const { showDialog } = useMoveToFolderDialog();
     const { OptionsMenuItem } = ContentEntryListConfig.Browser.Entry.Action;
+    const moveContentEntry = useCallback(()=>{
+        showDialog({
+            title: "Move entry to a new location",
+            message: "Select a new location for this entry:",
+            loadingLabel: "Moving entry...",
+            acceptLabel: "Move entry",
+            focusedFolderId: entry.wbyAco_location?.folderId,
+            async onAccept ({ folder }) {
+                const success = await presenter.moveEntry(entry.id, folder.id);
+                if (success) toast.showSuccessToast({
+                    title: `Entry "${entry.meta?.title || "unknown"}" was moved to "${folder.label}".`
+                });
+            }
+        });
+    }, [
+        entry.id
+    ]);
     return /*#__PURE__*/ react.createElement(OptionsMenuItem, {
         icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
         label: "Move",

package/admin/components/ContentEntries/Table/Actions/MoveEntry.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/ContentEntries/Table/Actions/MoveEntry.js","sources":["../../../../../../src/admin/components/ContentEntries/Table/Actions/MoveEntry.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as Move } from \"@webiny/icons/exit_to_app.svg\";\nimport { ContentEntryListConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { useEntry, useMoveContentEntryToFolder } from \"~/admin/hooks/index.js\";\n\nexport const MoveEntry = () => {\n    const { entry: record } = useEntry();\n    const moveContentEntry = useMoveContentEntryToFolder({ record });\n    const { OptionsMenuItem } = ContentEntryListConfig.Browser.Entry.Action;\n\n    return (\n        <OptionsMenuItem\n            icon={<Move />}\n            label={\"Move\"}\n            onAction={moveContentEntry}\n            data-testid={\"aco.actions.entry.move\"}\n        />\n    );\n};\n"],"names":["MoveEntry","record","useEntry","moveContentEntry","useMoveContentEntryToFolder","OptionsMenuItem","ContentEntryListConfig","Move"],"mappings":";;;;AAKO,MAAMA,YAAY;IACrB,MAAM,EAAE,OAAOC,MAAM,EAAE,GAAGC;IAC1B,MAAMC,mBAAmBC,4BAA4B;QAAEH;IAAO;IAC9D,MAAM,EAAEI,eAAe,EAAE,GAAGC,uBAAuB,OAAO,CAAC,KAAK,CAAC,MAAM;IAEvE,OAAO,WAAP,GACI,oBAACD,iBAAAA;QACG,oBAAM,oBAACE,gBAAIA;QACX,OAAO;QACP,UAAUJ;QACV,eAAa;;AAGzB"}
+{"version":3,"file":"admin/components/ContentEntries/Table/Actions/MoveEntry.js","sources":["../../../../../../src/admin/components/ContentEntries/Table/Actions/MoveEntry.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as Move } from \"@webiny/icons/exit_to_app.svg\";\nimport { useMoveToFolderDialog } from \"@webiny/app-aco\";\nimport { useToast } from \"@webiny/admin-ui\";\nimport { ContentEntryListConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { useEntry } from \"~/admin/hooks/index.js\";\nimport { useContentEntriesPresenter } from \"~/presentation/contentEntries/list/useContentEntriesPresenter.js\";\n\nexport const MoveEntry = () => {\n    const { entry } = useEntry();\n    const presenter = useContentEntriesPresenter();\n    const toast = useToast();\n\n    const { showDialog } = useMoveToFolderDialog();\n    const { OptionsMenuItem } = ContentEntryListConfig.Browser.Entry.Action;\n\n    const moveContentEntry = useCallback(() => {\n        showDialog({\n            title: \"Move entry to a new location\",\n            message: \"Select a new location for this entry:\",\n            loadingLabel: \"Moving entry...\",\n            acceptLabel: \"Move entry\",\n            focusedFolderId: entry.wbyAco_location?.folderId,\n            async onAccept({ folder }) {\n                const success = await presenter.moveEntry(entry.id, folder.id);\n                if (success) {\n                    toast.showSuccessToast({\n                        title: `Entry \"${entry.meta?.title || \"unknown\"}\" was moved to \"${folder.label}\".`\n                    });\n                }\n            }\n        });\n    }, [entry.id]);\n\n    return (\n        <OptionsMenuItem\n            icon={<Move />}\n            label={\"Move\"}\n            onAction={moveContentEntry}\n            data-testid={\"aco.actions.entry.move\"}\n        />\n    );\n};\n"],"names":["MoveEntry","entry","useEntry","presenter","useContentEntriesPresenter","toast","useToast","showDialog","useMoveToFolderDialog","OptionsMenuItem","ContentEntryListConfig","moveContentEntry","useCallback","folder","success","Move"],"mappings":";;;;;;;AAQO,MAAMA,YAAY;IACrB,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAMC,YAAYC;IAClB,MAAMC,QAAQC;IAEd,MAAM,EAAEC,UAAU,EAAE,GAAGC;IACvB,MAAM,EAAEC,eAAe,EAAE,GAAGC,uBAAuB,OAAO,CAAC,KAAK,CAAC,MAAM;IAEvE,MAAMC,mBAAmBC,YAAY;QACjCL,WAAW;YACP,OAAO;YACP,SAAS;YACT,cAAc;YACd,aAAa;YACb,iBAAiBN,MAAM,eAAe,EAAE;YACxC,MAAM,UAAS,EAAEY,MAAM,EAAE;gBACrB,MAAMC,UAAU,MAAMX,UAAU,SAAS,CAACF,MAAM,EAAE,EAAEY,OAAO,EAAE;gBAC7D,IAAIC,SACAT,MAAM,gBAAgB,CAAC;oBACnB,OAAO,CAAC,OAAO,EAAEJ,MAAM,IAAI,EAAE,SAAS,UAAU,gBAAgB,EAAEY,OAAO,KAAK,CAAC,EAAE,CAAC;gBACtF;YAER;QACJ;IACJ,GAAG;QAACZ,MAAM,EAAE;KAAC;IAEb,OAAO,WAAP,GACI,oBAACQ,iBAAAA;QACG,oBAAM,oBAACM,gBAAIA;QACX,OAAO;QACP,UAAUJ;QACV,eAAa;;AAGzB"}

package/admin/components/ContentEntries/Table/Cells/CellActions.d.ts

@@ -1,20 +1,22 @@
 import React from "react";
-export declare const CellActions: (() => React.JSX.Element | null) & {
-    original: () => React.JSX.Element | null;
+declare const DefaultCellActions: () => React.JSX.Element | null;
+export declare const CellActions: typeof DefaultCellActions & {
+    original: typeof DefaultCellActions;
     originalName: string;
     displayName: string;
 } & {
-    original: (() => React.JSX.Element | null) & {
-        original: () => React.JSX.Element | null;
+    original: typeof DefaultCellActions & {
+        original: typeof DefaultCellActions;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(() => React.JSX.Element | null) & {
-        original: () => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<typeof DefaultCellActions & {
+        original: typeof DefaultCellActions;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
+export {};

package/admin/components/ContentEntries/Table/Cells/CellName.js

@@ -1,19 +1,20 @@
-import react from "react";
-import { Icon, Link, Text } from "@webiny/admin-ui";
+import react, { useMemo } from "react";
+import { SimpleLink, useRoute, useRouter } from "@webiny/app";
+import { Routes } from "../../../../../routes.js";
+import { Icon, Text } from "@webiny/admin-ui";
 import { ReactComponent } from "@webiny/icons/folder.svg";
 import { ReactComponent as folder_shared_svg_ReactComponent } from "@webiny/icons/folder_shared.svg";
 import { ReactComponent as description_svg_ReactComponent } from "@webiny/icons/description.svg";
-import { useNavigateFolder } from "@webiny/app-aco";
 import { ContentEntryListConfig } from "../../../../config/contentEntries/index.js";
-import { useContentEntriesList } from "../../../../views/contentEntries/hooks/index.js";
 import { usePermission } from "../../../../hooks/index.js";
+import { useContentEntriesPresenter } from "../../../../../presentation/contentEntries/list/useContentEntriesPresenter.js";
 const FolderCellName = ({ folder })=>{
-    const { navigateToFolder } = useNavigateFolder();
+    const presenter = useContentEntriesPresenter();
     let icon = /*#__PURE__*/ react.createElement(ReactComponent, null);
     if (folder.hasNonInheritedPermissions && folder.canManagePermissions) icon = /*#__PURE__*/ react.createElement(folder_shared_svg_ReactComponent, null);
     return /*#__PURE__*/ react.createElement("div", {
         className: "flex items-center gap-sm truncate cursor-pointer font-semibold hover:underline",
-        onClick: ()=>navigateToFolder(folder.id)
+        onClick: ()=>presenter.folders.selectFolder(folder.id)
     }, /*#__PURE__*/ react.createElement(Icon, {
         size: "sm",
         color: "neutral-strong",
@@ -34,16 +35,26 @@ const EntryCellRowTitle = ({ entry })=>/*#__PURE__*/ react.createElement("div",
         className: "truncate min-w-0 shrink"
     }, entry.meta.title));
 const EntryCellName = ({ entry })=>{
-    const { getEntryEditUrl } = useContentEntriesList();
     const { canEdit } = usePermission();
-    const entryEditUrl = getEntryEditUrl(entry);
+    const { getLink } = useRouter();
+    const { route } = useRoute(Routes.ContentEntries.List);
+    const to = useMemo(()=>{
+        if (!route?.params) return "";
+        return getLink(Routes.ContentEntries.List, {
+            ...route.params,
+            id: entry.id
+        });
+    }, [
+        getLink,
+        route?.params,
+        entry.id
+    ]);
     if (!canEdit(entry, "cms.contentEntry")) return /*#__PURE__*/ react.createElement(EntryCellRowTitle, {
         entry: entry
     });
-    return /*#__PURE__*/ react.createElement(Link, {
-        to: entryEditUrl,
-        variant: "secondary",
-        className: "truncate"
+    return /*#__PURE__*/ react.createElement(SimpleLink, {
+        to: to,
+        className: "block truncate cursor-pointer hover:underline text-inherit no-underline"
     }, /*#__PURE__*/ react.createElement(EntryCellRowTitle, {
         entry: entry
     }));

package/admin/components/ContentEntries/Table/Cells/CellName.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/ContentEntries/Table/Cells/CellName.js","sources":["../../../../../../src/admin/components/ContentEntries/Table/Cells/CellName.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FolderDto } from \"@webiny/app-aco\";\n\nimport { Icon, Link, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as Folder } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as FolderShared } from \"@webiny/icons/folder_shared.svg\";\nimport { ReactComponent as File } from \"@webiny/icons/description.svg\";\nimport { useNavigateFolder } from \"@webiny/app-aco\";\n\nimport { ContentEntryListConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { useContentEntriesList } from \"~/admin/views/contentEntries/hooks/index.js\";\nimport { usePermission } from \"~/admin/hooks/index.js\";\n\nimport type { CmsContentEntry } from \"~/types.js\";\n\ninterface FolderCellNameProps {\n    folder: FolderDto;\n}\n\nexport const FolderCellName = ({ folder }: FolderCellNameProps) => {\n    const { navigateToFolder } = useNavigateFolder();\n\n    let icon = <Folder />;\n    if (folder.hasNonInheritedPermissions && folder.canManagePermissions) {\n        icon = <FolderShared />;\n    }\n\n    return (\n        <div\n            className={\n                \"flex items-center gap-sm truncate cursor-pointer font-semibold hover:underline\"\n            }\n            onClick={() => navigateToFolder(folder.id)}\n        >\n            <Icon\n                size={\"sm\"}\n                color={\"neutral-strong\"}\n                icon={icon}\n                label={`Folder - ${folder.title}`}\n            />\n            <Text className={\"truncate min-w-0 shrink\"}>{folder.title}</Text>\n        </div>\n    );\n};\n\ninterface EntryCellRowTitleProps {\n    entry: CmsContentEntry;\n}\n\nconst EntryCellRowTitle = ({ entry }: EntryCellRowTitleProps) => {\n    return (\n        <div className={\"flex items-center gap-sm truncate\"}>\n            <Icon\n                size={\"sm\"}\n                color={\"neutral-strong\"}\n                icon={<File />}\n                label={`Entry - ${entry.meta.title}`}\n            />\n            <Text className={\"truncate min-w-0 shrink\"}>{entry.meta.title}</Text>\n        </div>\n    );\n};\n\ninterface EntryCellNameProps {\n    entry: CmsContentEntry;\n}\n\nexport const EntryCellName = ({ entry }: EntryCellNameProps) => {\n    const { getEntryEditUrl } = useContentEntriesList();\n    const { canEdit } = usePermission();\n\n    const entryEditUrl = getEntryEditUrl(entry);\n\n    if (!canEdit(entry, \"cms.contentEntry\")) {\n        return <EntryCellRowTitle entry={entry} />;\n    }\n\n    return (\n        <Link to={entryEditUrl} variant={\"secondary\"} className={\"truncate\"}>\n            <EntryCellRowTitle entry={entry} />\n        </Link>\n    );\n};\n\nexport const CellName = () => {\n    const { useTableRow, isFolderRow } = ContentEntryListConfig.Browser.Table.Column;\n    const { row } = useTableRow();\n\n    if (isFolderRow(row)) {\n        return <FolderCellName folder={row.data} />;\n    }\n\n    return <EntryCellName entry={row.data} />;\n};\n"],"names":["FolderCellName","folder","navigateToFolder","useNavigateFolder","icon","Folder","FolderShared","Icon","Text","EntryCellRowTitle","entry","File","EntryCellName","getEntryEditUrl","useContentEntriesList","canEdit","usePermission","entryEditUrl","Link","CellName","useTableRow","isFolderRow","ContentEntryListConfig","row"],"mappings":";;;;;;;;;AAmBO,MAAMA,iBAAiB,CAAC,EAAEC,MAAM,EAAuB;IAC1D,MAAM,EAAEC,gBAAgB,EAAE,GAAGC;IAE7B,IAAIC,OAAO,WAAPA,GAAO,oBAACC,gBAAMA;IAClB,IAAIJ,OAAO,0BAA0B,IAAIA,OAAO,oBAAoB,EAChEG,OAAO,WAAPA,GAAO,oBAACE,kCAAYA;IAGxB,OAAO,WAAP,GACI,oBAAC;QACG,WACI;QAEJ,SAAS,IAAMJ,iBAAiBD,OAAO,EAAE;qBAEzC,oBAACM,MAAIA;QACD,MAAM;QACN,OAAO;QACP,MAAMH;QACN,OAAO,CAAC,SAAS,EAAEH,OAAO,KAAK,EAAE;sBAErC,oBAACO,MAAIA;QAAC,WAAW;OAA4BP,OAAO,KAAK;AAGrE;AAMA,MAAMQ,oBAAoB,CAAC,EAAEC,KAAK,EAA0B,GACjD,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACH,MAAIA;QACD,MAAM;QACN,OAAO;QACP,oBAAM,oBAACI,gCAAIA;QACX,OAAO,CAAC,QAAQ,EAAED,MAAM,IAAI,CAAC,KAAK,EAAE;sBAExC,oBAACF,MAAIA;QAAC,WAAW;OAA4BE,MAAM,IAAI,CAAC,KAAK;AASlE,MAAME,gBAAgB,CAAC,EAAEF,KAAK,EAAsB;IACvD,MAAM,EAAEG,eAAe,EAAE,GAAGC;IAC5B,MAAM,EAAEC,OAAO,EAAE,GAAGC;IAEpB,MAAMC,eAAeJ,gBAAgBH;IAErC,IAAI,CAACK,QAAQL,OAAO,qBAChB,OAAO,WAAP,GAAO,oBAACD,mBAAiBA;QAAC,OAAOC;;IAGrC,OAAO,WAAP,GACI,oBAACQ,MAAIA;QAAC,IAAID;QAAc,SAAS;QAAa,WAAW;qBACrD,oBAACR,mBAAiBA;QAAC,OAAOC;;AAGtC;AAEO,MAAMS,WAAW;IACpB,MAAM,EAAEC,WAAW,EAAEC,WAAW,EAAE,GAAGC,uBAAuB,OAAO,CAAC,KAAK,CAAC,MAAM;IAChF,MAAM,EAAEC,GAAG,EAAE,GAAGH;IAEhB,IAAIC,YAAYE,MACZ,OAAO,WAAP,GAAO,oBAACvB,gBAAcA;QAAC,QAAQuB,IAAI,IAAI;;IAG3C,OAAO,WAAP,GAAO,oBAACX,eAAaA;QAAC,OAAOW,IAAI,IAAI;;AACzC"}
+{"version":3,"file":"admin/components/ContentEntries/Table/Cells/CellName.js","sources":["../../../../../../src/admin/components/ContentEntries/Table/Cells/CellName.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { FolderDto } from \"@webiny/app-aco\";\nimport { SimpleLink, useRoute, useRouter } from \"@webiny/app\";\nimport { Routes } from \"~/routes.js\";\n\nimport { Icon, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as Folder } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as FolderShared } from \"@webiny/icons/folder_shared.svg\";\nimport { ReactComponent as File } from \"@webiny/icons/description.svg\";\n\nimport { ContentEntryListConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { usePermission } from \"~/admin/hooks/index.js\";\n\nimport type { CmsContentEntry } from \"~/types.js\";\nimport { useContentEntriesPresenter } from \"~/presentation/contentEntries/list/useContentEntriesPresenter.js\";\n\ninterface FolderCellNameProps {\n    folder: FolderDto;\n}\n\nexport const FolderCellName = ({ folder }: FolderCellNameProps) => {\n    const presenter = useContentEntriesPresenter();\n\n    let icon = <Folder />;\n    if (folder.hasNonInheritedPermissions && folder.canManagePermissions) {\n        icon = <FolderShared />;\n    }\n\n    return (\n        <div\n            className={\n                \"flex items-center gap-sm truncate cursor-pointer font-semibold hover:underline\"\n            }\n            onClick={() => presenter.folders.selectFolder(folder.id)}\n        >\n            <Icon\n                size={\"sm\"}\n                color={\"neutral-strong\"}\n                icon={icon}\n                label={`Folder - ${folder.title}`}\n            />\n            <Text className={\"truncate min-w-0 shrink\"}>{folder.title}</Text>\n        </div>\n    );\n};\n\ninterface EntryCellRowTitleProps {\n    entry: CmsContentEntry;\n}\n\nconst EntryCellRowTitle = ({ entry }: EntryCellRowTitleProps) => {\n    return (\n        <div className={\"flex items-center gap-sm truncate\"}>\n            <Icon\n                size={\"sm\"}\n                color={\"neutral-strong\"}\n                icon={<File />}\n                label={`Entry - ${entry.meta.title}`}\n            />\n            <Text className={\"truncate min-w-0 shrink\"}>{entry.meta.title}</Text>\n        </div>\n    );\n};\n\ninterface EntryCellNameProps {\n    entry: CmsContentEntry;\n}\n\nexport const EntryCellName = ({ entry }: EntryCellNameProps) => {\n    const { canEdit } = usePermission();\n    const { getLink } = useRouter();\n    const { route } = useRoute(Routes.ContentEntries.List);\n\n    // The open entry is represented in the URL via the `id` query param. Build the link\n    // through the router, preserving the current route params (modelId, folderId,\n    // search). SimpleLink then does SPA navigation on plain clicks and lets\n    // Cmd/Ctrl/Shift/middle-click fall through to the browser (open in new tab).\n    const to = useMemo(() => {\n        if (!route?.params) {\n            return \"\";\n        }\n        return getLink(Routes.ContentEntries.List, { ...route.params, id: entry.id });\n    }, [getLink, route?.params, entry.id]);\n\n    if (!canEdit(entry, \"cms.contentEntry\")) {\n        return <EntryCellRowTitle entry={entry} />;\n    }\n\n    return (\n        <SimpleLink\n            to={to}\n            className={\"block truncate cursor-pointer hover:underline text-inherit no-underline\"}\n        >\n            <EntryCellRowTitle entry={entry} />\n        </SimpleLink>\n    );\n};\n\nexport const CellName = () => {\n    const { useTableRow, isFolderRow } = ContentEntryListConfig.Browser.Table.Column;\n    const { row } = useTableRow();\n\n    if (isFolderRow(row)) {\n        return <FolderCellName folder={row.data} />;\n    }\n\n    return <EntryCellName entry={row.data} />;\n};\n"],"names":["FolderCellName","folder","presenter","useContentEntriesPresenter","icon","Folder","FolderShared","Icon","Text","EntryCellRowTitle","entry","File","EntryCellName","canEdit","usePermission","getLink","useRouter","route","useRoute","Routes","to","useMemo","SimpleLink","CellName","useTableRow","isFolderRow","ContentEntryListConfig","row"],"mappings":";;;;;;;;;;AAoBO,MAAMA,iBAAiB,CAAC,EAAEC,MAAM,EAAuB;IAC1D,MAAMC,YAAYC;IAElB,IAAIC,OAAO,WAAPA,GAAO,oBAACC,gBAAMA;IAClB,IAAIJ,OAAO,0BAA0B,IAAIA,OAAO,oBAAoB,EAChEG,OAAO,WAAPA,GAAO,oBAACE,kCAAYA;IAGxB,OAAO,WAAP,GACI,oBAAC;QACG,WACI;QAEJ,SAAS,IAAMJ,UAAU,OAAO,CAAC,YAAY,CAACD,OAAO,EAAE;qBAEvD,oBAACM,MAAIA;QACD,MAAM;QACN,OAAO;QACP,MAAMH;QACN,OAAO,CAAC,SAAS,EAAEH,OAAO,KAAK,EAAE;sBAErC,oBAACO,MAAIA;QAAC,WAAW;OAA4BP,OAAO,KAAK;AAGrE;AAMA,MAAMQ,oBAAoB,CAAC,EAAEC,KAAK,EAA0B,GACjD,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACH,MAAIA;QACD,MAAM;QACN,OAAO;QACP,oBAAM,oBAACI,gCAAIA;QACX,OAAO,CAAC,QAAQ,EAAED,MAAM,IAAI,CAAC,KAAK,EAAE;sBAExC,oBAACF,MAAIA;QAAC,WAAW;OAA4BE,MAAM,IAAI,CAAC,KAAK;AASlE,MAAME,gBAAgB,CAAC,EAAEF,KAAK,EAAsB;IACvD,MAAM,EAAEG,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,KAAK,EAAE,GAAGC,SAASC,OAAO,cAAc,CAAC,IAAI;IAMrD,MAAMC,KAAKC,QAAQ;QACf,IAAI,CAACJ,OAAO,QACR,OAAO;QAEX,OAAOF,QAAQI,OAAO,cAAc,CAAC,IAAI,EAAE;YAAE,GAAGF,MAAM,MAAM;YAAE,IAAIP,MAAM,EAAE;QAAC;IAC/E,GAAG;QAACK;QAASE,OAAO;QAAQP,MAAM,EAAE;KAAC;IAErC,IAAI,CAACG,QAAQH,OAAO,qBAChB,OAAO,WAAP,GAAO,oBAACD,mBAAiBA;QAAC,OAAOC;;IAGrC,OAAO,WAAP,GACI,oBAACY,YAAUA;QACP,IAAIF;QACJ,WAAW;qBAEX,oBAACX,mBAAiBA;QAAC,OAAOC;;AAGtC;AAEO,MAAMa,WAAW;IACpB,MAAM,EAAEC,WAAW,EAAEC,WAAW,EAAE,GAAGC,uBAAuB,OAAO,CAAC,KAAK,CAAC,MAAM;IAChF,MAAM,EAAEC,GAAG,EAAE,GAAGH;IAEhB,IAAIC,YAAYE,MACZ,OAAO,WAAP,GAAO,oBAAC3B,gBAAcA;QAAC,QAAQ2B,IAAI,IAAI;;IAG3C,OAAO,WAAP,GAAO,oBAACf,eAAaA;QAAC,OAAOe,IAAI,IAAI;;AACzC"}

package/admin/components/ContentModelEditor/ContentModelEditor.js

@@ -1,10 +1,11 @@
 import react, { useEffect, useState } from "react";
-import { LeftPanel, RightPanel, SplitView, makeDecoratable, useDialogs } from "@webiny/app-admin";
+import { makeDecoratable, useDialogs } from "@webiny/app-admin";
 import { useRouter } from "@webiny/app";
 import { i18n } from "@webiny/app/i18n/index.js";
-import { Heading, OverlayLoader, Tabs, Text, TimeAgo } from "@webiny/admin-ui";
-import { ReactComponent } from "@webiny/icons/edit.svg";
-import { ReactComponent as fullscreen_svg_ReactComponent } from "@webiny/icons/fullscreen.svg";
+import { IconButton, OverlayLoader, SegmentedControlPrimitive, Tag, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/left_panel_open.svg";
+import { ReactComponent as view_compact_alt_svg_ReactComponent } from "@webiny/icons/view_compact_alt.svg";
+import { ReactComponent as view_day_svg_ReactComponent } from "@webiny/icons/view_day.svg";
 import { FieldsSidebar } from "./FieldsSidebar.js";
 import { FieldEditor } from "../FieldEditor/index.js";
 import { PreviewTab } from "./PreviewTab.js";
@@ -12,13 +13,25 @@ import Header from "./Header.js";
 import DragPreview from "../DragPreview.js";
 import { useModelEditor } from "./useModelEditor.js";
 import { ContentEntryEditorWithConfig } from "../../config/contentEntries/index.js";
-import { ContentEntryProvider } from "../../views/contentEntries/ContentEntry/ContentEntryContext.js";
-import { ContentEntriesProvider } from "../../views/contentEntries/ContentEntriesContext.js";
 import { ModelIsBeingDeletedError } from "./ModelIsBeingDeletedError/index.js";
+const VIEW_ITEMS = [
+    {
+        id: "compact",
+        value: "compact",
+        label: "",
+        icon: /*#__PURE__*/ react.createElement(view_compact_alt_svg_ReactComponent, null)
+    },
+    {
+        id: "full",
+        value: "full",
+        label: "",
+        icon: /*#__PURE__*/ react.createElement(view_day_svg_ReactComponent, null)
+    }
+];
 const t = i18n.ns("app-headless-cms/admin/editor");
 const ContentModelEditor_prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;
 const ContentModelEditor = makeDecoratable("ContentModelEditor", ()=>{
-    const { data, setData, isPristine, contentModel } = useModelEditor();
+    const { data, setData, isPristine } = useModelEditor();
     const router = useRouter();
     const dialogs = useDialogs();
     useEffect(()=>{
@@ -43,6 +56,8 @@ const ContentModelEditor = makeDecoratable("ContentModelEditor", ()=>{
             }
         }), []);
     const [activeTab, setActiveTab] = useState("edit");
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const [activeView, setActiveView] = useState("compact");
     const onChange = ({ fields, layout })=>{
         setData((data)=>({
                 ...data,
@@ -58,68 +73,71 @@ const ContentModelEditor = makeDecoratable("ContentModelEditor", ()=>{
     });
     return /*#__PURE__*/ react.createElement("div", {
         className: "content-model-editor flex-1"
-    }, /*#__PURE__*/ react.createElement(Header, null), /*#__PURE__*/ react.createElement("div", {
+    }, /*#__PURE__*/ react.createElement(Header, {
+        activeTab: activeTab,
+        onTabChange: setActiveTab
+    }), /*#__PURE__*/ react.createElement("div", {
         className: "w-full overflow-y-auto h-main-content"
-    }, /*#__PURE__*/ react.createElement(SplitView, null, /*#__PURE__*/ react.createElement(LeftPanel, {
-        span: 4,
-        className: "bg-neutral-light"
     }, /*#__PURE__*/ react.createElement("div", {
-        className: "px-lg py-md h-[calc(100vh-98px)] overflow-y-scroll"
-    }, /*#__PURE__*/ react.createElement(FieldsSidebar, {
-        onFieldDragStart: ()=>{
-            setActiveTab("edit");
+        className: "flex h-full"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "shrink-0 bg-neutral-base border-r border-neutral-dimmed overflow-hidden h-main-content relative transition-[width] duration-200 ease-in-out",
+        style: {
+            width: isSidebarOpen ? 200 : 45
         }
-    }))), /*#__PURE__*/ react.createElement(RightPanel, {
-        span: 8,
-        className: "bg-neutral-base"
     }, /*#__PURE__*/ react.createElement("div", {
-        className: "h-full overflow-y-scroll"
-    }, contentModel && /*#__PURE__*/ react.createElement("div", {
-        className: "px-xl pt-lg pb-md-extra"
-    }, /*#__PURE__*/ react.createElement(Heading, {
-        level: 4
-    }, contentModel.name), /*#__PURE__*/ react.createElement(Text, {
+        className: "transition-opacity duration-150 " + (isSidebarOpen ? "opacity-100 delay-75" : "opacity-0 pointer-events-none")
+    }, /*#__PURE__*/ react.createElement(FieldsSidebar, {
+        onFieldDragStart: ()=>setActiveTab("edit"),
+        onCollapse: ()=>setIsSidebarOpen(false)
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-0 flex flex-col items-center pt-md gap-md transition-opacity duration-150 " + (isSidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100 delay-75")
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        size: "xs",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: ()=>setIsSidebarOpen(true)
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "text-sm font-semibold text-neutral-strong [writing-mode:vertical-rl]"
+    }, "Fields"))), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 overflow-y-scroll h-main-content " + ("edit" === activeTab ? "fill-grid" : "bg-neutral-subtle")
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "sticky top-0 left-0 z-10 p-md flex items-center justify-between"
+    }, /*#__PURE__*/ react.createElement("div", null, "edit" === activeTab && /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
         size: "sm",
-        className: "text-neutral-muted"
-    }, `Created by ${contentModel.createdBy.displayName}. Last modified: `, /*#__PURE__*/ react.createElement(TimeAgo, {
-        datetime: contentModel.savedOn
-    }), ".")), /*#__PURE__*/ react.createElement(Tabs, {
-        size: "md",
-        spacing: "xl",
-        separator: true,
-        value: String(activeTab),
-        onValueChange: setActiveTab,
-        tabs: [
-            /*#__PURE__*/ react.createElement(Tabs.Tab, {
-                key: "edit",
-                value: "edit",
-                trigger: "Edit",
-                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-                "data-testid": "cms.editor.tab.edit",
-                content: /*#__PURE__*/ react.createElement("div", {
-                    className: "relative mb-lg"
-                }, /*#__PURE__*/ react.createElement(FieldEditor, {
-                    fields: data.fields,
-                    layout: data.layout || [],
-                    onChange: onChange
-                }))
-            }),
-            /*#__PURE__*/ react.createElement(Tabs.Tab, {
-                key: "preview",
-                value: "preview",
-                trigger: "Preview",
-                icon: /*#__PURE__*/ react.createElement(fullscreen_svg_ReactComponent, null),
-                "data-testid": "cms.editor.tab.preview",
-                content: /*#__PURE__*/ react.createElement(ContentEntryEditorWithConfig, null, /*#__PURE__*/ react.createElement(ContentEntriesProvider, {
-                    contentModel: data
-                }, /*#__PURE__*/ react.createElement(ContentEntryProvider, {
-                    readonly: true
-                }, /*#__PURE__*/ react.createElement(PreviewTab, {
-                    activeTab: "preview" === activeTab
-                }))))
-            })
-        ]
-    })))), /*#__PURE__*/ react.createElement(DragPreview, null)));
+        className: "font-semibold text-neutral-primary"
+    }, "Model editor"), "preview" === activeTab && /*#__PURE__*/ react.createElement(Tag, {
+        content: "Preview",
+        variant: "warning"
+    })), /*#__PURE__*/ react.createElement(SegmentedControlPrimitive, {
+        variant: "light",
+        value: activeView,
+        onChange: setActiveView,
+        items: VIEW_ITEMS
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "pb-lg"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: " transition-[width] duration-200 ease-in-out",
+        style: {
+            width: "compact" === activeView ? "704px" : "90%",
+            marginLeft: "auto",
+            marginRight: "auto"
+        }
+    }, "edit" === activeTab && /*#__PURE__*/ react.createElement("div", {
+        className: "relative",
+        "data-testid": "cms.editor.tab.edit"
+    }, /*#__PURE__*/ react.createElement(FieldEditor, {
+        fields: data.fields,
+        layout: data.layout || [],
+        onChange: onChange
+    })), "preview" === activeTab && /*#__PURE__*/ react.createElement("div", {
+        className: "px-xxl py-lg",
+        "data-testid": "cms.editor.tab.preview"
+    }, /*#__PURE__*/ react.createElement(ContentEntryEditorWithConfig, null, /*#__PURE__*/ react.createElement(PreviewTab, {
+        activeTab: true,
+        onSwitchToEdit: ()=>setActiveTab("edit")
+    }))))))), /*#__PURE__*/ react.createElement(DragPreview, null)));
 });
 export { ContentModelEditor };