@webiny/app-headless-cms 6.3.0 → 6.4.0-beta.1

package/admin/views/contentModels/ContentModels.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","useState","CloneContentModelDialog","NewContentModelDialog","ContentModelsDataList","useSecurity","ImportContentModelsDialog","Grid","ContentModels","newContentModelDialogOpened","openNewContentModelDialog","cloneContentModel","setCloneContentModel","identity","getPermission","canCreate","permission","rwd","includes","closeCloneModal","onCreate","onClose","onClone","contentModel","onCloneClose","importModels","setImportModels","showImportModelModal","closeImportModelModal","createElement","className","Column","span","offset","open","closeModal"],"sources":["ContentModels.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { CloneContentModelDialog } from \"./CloneContentModelDialog.js\";\nimport NewContentModelDialog from \"./NewContentModelDialog.js\";\nimport ContentModelsDataList from \"./ContentModelsDataList.js\";\nimport { useSecurity } from \"@webiny/app-admin\";\nimport type { CmsModel, CmsSecurityPermission } from \"~/types.js\";\nimport { ImportContentModelsDialog } from \"./importing/ImportContentModelsDialog.js\";\nimport { Grid } from \"@webiny/admin-ui\";\n\nconst ContentModels = () => {\n    const [newContentModelDialogOpened, openNewContentModelDialog] = React.useState(false);\n\n    const [cloneContentModel, setCloneContentModel] = React.useState<CmsModel | null>(null);\n\n    const { identity, getPermission } = useSecurity();\n\n    const canCreate = useMemo((): boolean => {\n        const permission = getPermission<CmsSecurityPermission>(\"cms.contentModel\");\n        if (!permission) {\n            return false;\n        }\n\n        if (typeof permission.rwd !== \"string\") {\n            return true;\n        }\n\n        return permission.rwd.includes(\"w\");\n    }, [identity]);\n\n    const closeCloneModal = useCallback(() => {\n        setCloneContentModel(null);\n    }, []);\n\n    const onCreate = useCallback((): void => openNewContentModelDialog(true), []);\n    const onClose = useCallback((): void => openNewContentModelDialog(false), []);\n    const onClone = useCallback(\n        (contentModel: CmsModel): void => setCloneContentModel(contentModel),\n        []\n    );\n    const onCloneClose = useCallback((): void => setCloneContentModel(null), []);\n\n    const [importModels, setImportModels] = useState(false);\n    const showImportModelModal = useCallback(() => {\n        setImportModels(true);\n    }, []);\n    const closeImportModelModal = useCallback(() => {\n        setImportModels(false);\n    }, []);\n\n    return (\n        <div className={\"container h-main-content\"}>\n            <Grid className=\"h-full pt-lg\">\n                <Grid.Column span={10} offset={1}>\n                    <div className=\"h-full border-sm border-b-none border-neutral-dimmed-darker rounded-t-3xl\">\n                        <ContentModelsDataList\n                            showImportModelModal={showImportModelModal}\n                            canCreate={canCreate}\n                            onCreate={onCreate}\n                            onClone={onClone}\n                        />\n                    </div>\n                </Grid.Column>\n            </Grid>\n            <NewContentModelDialog open={newContentModelDialogOpened} onClose={onClose} />\n            {cloneContentModel ? (\n                <CloneContentModelDialog\n                    contentModel={cloneContentModel}\n                    onClose={onCloneClose}\n                    closeModal={closeCloneModal}\n                />\n            ) : null}\n            {importModels ? <ImportContentModelsDialog onClose={closeImportModelModal} /> : null}\n        </div>\n    );\n};\n\nexport default ContentModels;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/views/contentModels/ContentModels.js","sources":["../../../../src/admin/views/contentModels/ContentModels.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { CloneContentModelDialog } from \"./CloneContentModelDialog.js\";\nimport NewContentModelDialog from \"./NewContentModelDialog.js\";\nimport ContentModelsDataList from \"./ContentModelsDataList.js\";\nimport { useSecurity } from \"@webiny/app-admin\";\nimport type { CmsModel, CmsSecurityPermission } from \"~/types.js\";\nimport { ImportContentModelsDialog } from \"./importing/ImportContentModelsDialog.js\";\nimport { Grid } from \"@webiny/admin-ui\";\n\nconst ContentModels = () => {\n    const [newContentModelDialogOpened, openNewContentModelDialog] = React.useState(false);\n\n    const [cloneContentModel, setCloneContentModel] = React.useState<CmsModel | null>(null);\n\n    const { identity, getPermission } = useSecurity();\n\n    const canCreate = useMemo((): boolean => {\n        const permission = getPermission<CmsSecurityPermission>(\"cms.contentModel\");\n        if (!permission) {\n            return false;\n        }\n\n        if (typeof permission.rwd !== \"string\") {\n            return true;\n        }\n\n        return permission.rwd.includes(\"w\");\n    }, [identity]);\n\n    const closeCloneModal = useCallback(() => {\n        setCloneContentModel(null);\n    }, []);\n\n    const onCreate = useCallback((): void => openNewContentModelDialog(true), []);\n    const onClose = useCallback((): void => openNewContentModelDialog(false), []);\n    const onClone = useCallback(\n        (contentModel: CmsModel): void => setCloneContentModel(contentModel),\n        []\n    );\n    const onCloneClose = useCallback((): void => setCloneContentModel(null), []);\n\n    const [importModels, setImportModels] = useState(false);\n    const showImportModelModal = useCallback(() => {\n        setImportModels(true);\n    }, []);\n    const closeImportModelModal = useCallback(() => {\n        setImportModels(false);\n    }, []);\n\n    return (\n        <div className={\"container h-main-content\"}>\n            <Grid className=\"h-full pt-lg\">\n                <Grid.Column span={10} offset={1}>\n                    <div className=\"h-full border-sm border-b-none border-neutral-dimmed-darker rounded-t-3xl\">\n                        <ContentModelsDataList\n                            showImportModelModal={showImportModelModal}\n                            canCreate={canCreate}\n                            onCreate={onCreate}\n                            onClone={onClone}\n                        />\n                    </div>\n                </Grid.Column>\n            </Grid>\n            <NewContentModelDialog open={newContentModelDialogOpened} onClose={onClose} />\n            {cloneContentModel ? (\n                <CloneContentModelDialog\n                    contentModel={cloneContentModel}\n                    onClose={onCloneClose}\n                    closeModal={closeCloneModal}\n                />\n            ) : null}\n            {importModels ? <ImportContentModelsDialog onClose={closeImportModelModal} /> : null}\n        </div>\n    );\n};\n\nexport default ContentModels;\n"],"names":["ContentModels","newContentModelDialogOpened","openNewContentModelDialog","React","cloneContentModel","setCloneContentModel","identity","getPermission","useSecurity","canCreate","useMemo","permission","closeCloneModal","useCallback","onCreate","onClose","onClone","contentModel","onCloneClose","importModels","setImportModels","useState","showImportModelModal","closeImportModelModal","Grid","ContentModelsDataList","NewContentModelDialog","CloneContentModelDialog","ImportContentModelsDialog"],"mappings":";;;;;;;AASA,MAAMA,gBAAgB;IAClB,MAAM,CAACC,6BAA6BC,0BAA0B,GAAGC,MAAAA,QAAc,CAAC;IAEhF,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGF,MAAAA,QAAc,CAAkB;IAElF,MAAM,EAAEG,QAAQ,EAAEC,aAAa,EAAE,GAAGC;IAEpC,MAAMC,YAAYC,QAAQ;QACtB,MAAMC,aAAaJ,cAAqC;QACxD,IAAI,CAACI,YACD,OAAO;QAGX,IAAI,AAA0B,YAA1B,OAAOA,WAAW,GAAG,EACrB,OAAO;QAGX,OAAOA,WAAW,GAAG,CAAC,QAAQ,CAAC;IACnC,GAAG;QAACL;KAAS;IAEb,MAAMM,kBAAkBC,YAAY;QAChCR,qBAAqB;IACzB,GAAG,EAAE;IAEL,MAAMS,WAAWD,YAAY,IAAYX,0BAA0B,OAAO,EAAE;IAC5E,MAAMa,UAAUF,YAAY,IAAYX,0BAA0B,QAAQ,EAAE;IAC5E,MAAMc,UAAUH,YACZ,CAACI,eAAiCZ,qBAAqBY,eACvD,EAAE;IAEN,MAAMC,eAAeL,YAAY,IAAYR,qBAAqB,OAAO,EAAE;IAE3E,MAAM,CAACc,cAAcC,gBAAgB,GAAGC,SAAS;IACjD,MAAMC,uBAAuBT,YAAY;QACrCO,gBAAgB;IACpB,GAAG,EAAE;IACL,MAAMG,wBAAwBV,YAAY;QACtCO,gBAAgB;IACpB,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACI,MAAIA;QAAC,WAAU;qBACZ,oBAACA,KAAK,MAAM;QAAC,MAAM;QAAI,QAAQ;qBAC3B,oBAAC;QAAI,WAAU;qBACX,oBAACC,uBAAqBA;QAClB,sBAAsBH;QACtB,WAAWb;QACX,UAAUK;QACV,SAASE;yBAKzB,oBAACU,uBAAqBA;QAAC,MAAMzB;QAA6B,SAASc;QAClEX,oBAAoB,WAApBA,GACG,oBAACuB,yBAAuBA;QACpB,cAAcvB;QACd,SAASc;QACT,YAAYN;SAEhB,MACHO,eAAe,WAAfA,GAAe,oBAACS,2BAAyBA;QAAC,SAASL;SAA4B;AAG5F;AAEA,oCAAevB"}

package/admin/views/contentModels/ContentModelsDataList.js

@@ -1,19 +1,15 @@
-/**
- * TODO remove regular model delete at some point.
- */
-import React, { useCallback, useMemo, useState } from "react";
-import { TimeAgo } from "@webiny/ui/TimeAgo/index.js";
+import react, { useCallback, useMemo, useState } from "react";
+import { Button, DataList, DataListModal, DropdownMenu, Icon, IconButton, List, Select, TimeAgo, Tooltip } from "@webiny/admin-ui";
 import { SearchUI, useRouter } from "@webiny/app-admin";
-import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
-import { ReactComponent as DownloadFileIcon, ReactComponent as ExportIcon } from "@webiny/icons/file_download.svg";
-import { ReactComponent as UploadFileIcon } from "@webiny/icons/file_upload.svg";
-import { ReactComponent as ListIcon } from "@webiny/icons/list.svg";
-import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
-import { ReactComponent as MoreVertIcon } from "@webiny/icons/more_vert.svg";
-import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
-import { ReactComponent as CloneIcon } from "@webiny/icons/flip_to_front.svg";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as file_download_svg_ReactComponent } from "@webiny/icons/file_download.svg";
+import { ReactComponent as file_upload_svg_ReactComponent } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as list_svg_ReactComponent } from "@webiny/icons/list.svg";
+import { ReactComponent as edit_svg_ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as more_vert_svg_ReactComponent } from "@webiny/icons/more_vert.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as flip_to_front_svg_ReactComponent } from "@webiny/icons/flip_to_front.svg";
 import { useModels } from "../../hooks/index.js";
-import * as UIL from "@webiny/ui/List/index.js";
 import { i18n } from "@webiny/app/i18n/index.js";
 import { deserializeSorters } from "../utils.js";
 import orderBy from "lodash/orderBy.js";
@@ -22,254 +18,232 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useModelExport } from "./exporting/useModelExport.js";
 import { ModelIsBeingDeleted } from "./fullDelete/ModelIsBeingDeleted.js";
 import { FullyDeleteModelDialog } from "./fullDelete/FullyDeleteModelDialog.js";
-import { Button, DropdownMenu, Icon, IconButton, Select, Tooltip } from "@webiny/admin-ui";
 import { CMS_MODEL_SINGLETON_TAG } from "@webiny/app-headless-cms-common";
 import { Routes } from "../../../routes.js";
 import { normalizeIcon } from "../../../utils/normalizeIcon.js";
 const t = i18n.namespace("FormsApp.ContentModelsDataList");
-const SORTERS = [{
-  label: t`Newest to oldest`,
-  sorters: "savedOn_DESC"
-}, {
-  label: t`Oldest to newest`,
-  sorters: "savedOn_ASC"
-}, {
-  label: t`Name A-Z`,
-  sorters: "name_ASC"
-}, {
-  label: t`Name Z-A`,
-  sorters: "name_DESC"
-}];
-const DisplayIcon = ({
-  model
-}) => {
-  if (!model.icon) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(UIL.ListItemGraphic, null, /*#__PURE__*/React.createElement("div", {
-    className: "text-neutral-muted"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    size: "lg",
-    color: "inherit",
-    label: "Content model icon",
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: normalizeIcon(model.icon)
-    })
-  })));
+const SORTERS = [
+    {
+        label: t`Newest to oldest`,
+        sorters: "savedOn_DESC"
+    },
+    {
+        label: t`Oldest to newest`,
+        sorters: "savedOn_ASC"
+    },
+    {
+        label: t`Name A-Z`,
+        sorters: "name_ASC"
+    },
+    {
+        label: t`Name Z-A`,
+        sorters: "name_DESC"
+    }
+];
+const DisplayIcon = ({ model })=>{
+    if (!model.icon) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "text-neutral-muted"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        size: "lg",
+        color: "inherit",
+        label: "Content model icon",
+        icon: /*#__PURE__*/ react.createElement(FontAwesomeIcon, {
+            icon: normalizeIcon(model.icon)
+        })
+    }));
 };
-const isHidden = model => {
-  if (!model.tags?.length) {
-    return false;
-  }
-  return model.tags.includes("$hidden:true");
+const isHidden = (model)=>{
+    if (!model.tags?.length) return false;
+    return model.tags.includes("$hidden:true");
 };
-const ContentModelsDataList = ({
-  canCreate,
-  onCreate,
-  onClone,
-  showImportModelModal
-}) => {
-  const [filter, setFilter] = useState("");
-  const [sort, setSort] = useState(SORTERS[0].sorters);
-  const {
-    goToRoute
-  } = useRouter();
-  const {
-    models: initialModels,
-    loading,
-    refresh
-  } = useModels();
-  const {
-    canDelete,
-    canEdit
-  } = usePermission();
-  const models = useMemo(() => {
-    return initialModels.filter(model => {
-      return !isHidden(model);
-    });
-  }, [initialModels]);
-  const [modelToBeDeleted, setModelToBeDeleted] = useState(null);
-  const filterData = useCallback(({
-    name
-  }) => {
-    return name.toLowerCase().includes(filter);
-  }, [filter]);
-  const sortData = useCallback(list => {
-    if (!sort) {
-      return list;
-    }
-    const [sortField, sortOrderBy] = deserializeSorters(sort);
-    return orderBy(list, [sortField], [sortOrderBy]);
-  }, [sort]);
-  const editRecord = contentModel => {
-    goToRoute(Routes.ContentModels.Editor, {
-      modelId: contentModel.modelId
-    });
-  };
-  const viewContentEntries = useCallback(contentModel => {
-    return () => {
-      goToRoute(Routes.ContentEntries.List, {
-        modelId: contentModel.modelId
-      });
+const ContentModelsDataList = ({ canCreate, onCreate, onClone, showImportModelModal })=>{
+    const [filter, setFilter] = useState("");
+    const [sort, setSort] = useState(SORTERS[0].sorters);
+    const { goToRoute } = useRouter();
+    const { models: initialModels, loading, refresh } = useModels();
+    const { canDelete, canEdit } = usePermission();
+    const models = useMemo(()=>initialModels.filter((model)=>!isHidden(model)), [
+        initialModels
+    ]);
+    const [modelToBeDeleted, setModelToBeDeleted] = useState(null);
+    const filterData = useCallback(({ name })=>name.toLowerCase().includes(filter), [
+        filter
+    ]);
+    const sortData = useCallback((list)=>{
+        if (!sort) return list;
+        const [sortField, sortOrderBy] = deserializeSorters(sort);
+        return orderBy(list, [
+            sortField
+        ], [
+            sortOrderBy
+        ]);
+    }, [
+        sort
+    ]);
+    const editRecord = (contentModel)=>{
+        goToRoute(Routes.ContentModels.Editor, {
+            modelId: contentModel.modelId
+        });
     };
-  }, []);
-  const contentModelsDataListModalOverlay = useMemo(() => /*#__PURE__*/React.createElement(UIL.DataListModalOverlay, null, /*#__PURE__*/React.createElement(Select, {
-    value: sort,
-    onChange: setSort,
-    label: t`Sort by`,
-    options: SORTERS.map(sorter => ({
-      label: sorter.label,
-      value: sorter.sorters
-    }))
-  })), [sort]);
-  const filteredData = filter === "" ? models : models.filter(filterData);
-  const contentModels = sortData(filteredData);
-  const {
-    handleModelsExport,
-    handleModelExport
-  } = useModelExport();
-  const onRefreshClick = useCallback(() => {
-    refresh();
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UIL.DataList, {
-    loading: loading,
-    data: contentModels,
-    title: t`Content Models`,
-    actions: /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center justify-end gap-xs"
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      content: "Export all models",
-      trigger: /*#__PURE__*/React.createElement(IconButton, {
-        icon: /*#__PURE__*/React.createElement(DownloadFileIcon, null),
-        size: "sm",
-        variant: "ghost",
-        onClick: () => handleModelsExport()
-      })
-    }), /*#__PURE__*/React.createElement(Tooltip, {
-      content: "Import models",
-      trigger: /*#__PURE__*/React.createElement(IconButton, {
-        icon: /*#__PURE__*/React.createElement(UploadFileIcon, null),
-        size: "sm",
-        variant: "ghost",
-        onClick: () => showImportModelModal()
-      })
-    }), canCreate ? /*#__PURE__*/React.createElement(Button, {
-      "data-testid": "new-record-button",
-      onClick: onCreate,
-      text: t`New`,
-      icon: /*#__PURE__*/React.createElement(AddIcon, null),
-      size: "sm",
-      className: "ml-xs"
-    }) : null),
-    search: /*#__PURE__*/React.createElement(SearchUI, {
-      value: filter,
-      onChange: setFilter,
-      inputPlaceholder: t`Search content model...`
-    }),
-    modalOverlay: contentModelsDataListModalOverlay,
-    modalOverlayAction: /*#__PURE__*/React.createElement(UIL.DataListModalOverlayAction, {
-      "data-testid": "default-data-list.filter"
-    }),
-    refresh: onRefreshClick
-  }, ({
-    data = []
-  }) => {
-    return /*#__PURE__*/React.createElement(UIL.List, {
-      "data-testid": "default-data-list"
-    }, data.map(contentModel => {
-      const disableViewContent = contentModel.fields.length === 0;
-      const getMessage = () => {
-        if (disableViewContent) {
-          return "To view the entries, you first need to add a field and save the model";
-        }
-        if (contentModel.tags.includes(CMS_MODEL_SINGLETON_TAG)) {
-          return "View";
-        }
-        return "View entries";
-      };
-      const canDeleteModel = canDelete(contentModel, "cms.contentModel");
-      const canEditModel = canEdit(contentModel, "cms.contentModel");
-      return /*#__PURE__*/React.createElement(UIL.ListItem, {
-        key: contentModel.modelId,
-        className: "group/item"
-      }, /*#__PURE__*/React.createElement(UIL.ListItemText, null, /*#__PURE__*/React.createElement(DisplayIcon, {
-        model: contentModel
-      }), /*#__PURE__*/React.createElement(UIL.ListItemTextPrimary, null, contentModel.name), /*#__PURE__*/React.createElement(UIL.ListItemTextSecondary, null, t`Last modified: {time}.`({
-        time: contentModel.savedOn ? /*#__PURE__*/React.createElement(TimeAgo, {
-          datetime: contentModel.savedOn
-        }) : "N/A"
-      }))), /*#__PURE__*/React.createElement(UIL.ListItemMeta, null, /*#__PURE__*/React.createElement(UIL.ListActions, null, /*#__PURE__*/React.createElement(ModelIsBeingDeleted, {
-        model: contentModel
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "invisible group-hover/item:visible"
-      }, /*#__PURE__*/React.createElement(Tooltip, {
-        side: "top",
-        content: getMessage(),
-        trigger: /*#__PURE__*/React.createElement(Button, {
-          text: "View entries",
-          icon: /*#__PURE__*/React.createElement(ListIcon, null),
-          variant: "secondary",
-          size: "sm",
-          "data-testid": "cms-view-content-model-button",
-          onClick: viewContentEntries(contentModel),
-          disabled: disableViewContent
-        })
-      })), canEdit(contentModel, "cms.contentModel") && /*#__PURE__*/React.createElement("span", {
-        className: "invisible group-hover/item:visible"
-      }, /*#__PURE__*/React.createElement(Tooltip, {
-        side: "top",
-        content: contentModel.plugin ? t`Content model is registered via a plugin.` : t`Edit content model`,
-        trigger: /*#__PURE__*/React.createElement(Button, {
-          text: "Edit",
-          icon: /*#__PURE__*/React.createElement(EditIcon, null),
-          variant: "secondary",
-          size: "sm",
-          disabled: contentModel.plugin,
-          onClick: () => editRecord(contentModel),
-          "data-testid": "cms-edit-content-model-button"
-        })
-      })), /*#__PURE__*/React.createElement(DropdownMenu, {
-        trigger: /*#__PURE__*/React.createElement(IconButton, {
-          icon: /*#__PURE__*/React.createElement(MoreVertIcon, null),
-          size: "sm",
-          variant: "ghost"
-        })
-      }, canEditModel && /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-        text: "Clone",
-        icon: /*#__PURE__*/React.createElement(DropdownMenu.Item.Icon, {
-          label: "Clone",
-          element: /*#__PURE__*/React.createElement(CloneIcon, null)
-        }),
-        "data-testid": "cms-clone-content-model-button",
-        onClick: () => onClone(contentModel)
-      }), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-        text: "Export",
-        icon: /*#__PURE__*/React.createElement(DropdownMenu.Item.Icon, {
-          label: "Export",
-          element: /*#__PURE__*/React.createElement(ExportIcon, null)
+    const viewContentEntries = useCallback((contentModel)=>()=>{
+            goToRoute(Routes.ContentEntries.List, {
+                modelId: contentModel.modelId
+            });
+        }, []);
+    const contentModelsDataListModalOverlay = useMemo(()=>/*#__PURE__*/ react.createElement(DataListModal.Content, null, /*#__PURE__*/ react.createElement(Select, {
+            value: sort,
+            onChange: setSort,
+            label: t`Sort by`,
+            options: SORTERS.map((sorter)=>({
+                    label: sorter.label,
+                    value: sorter.sorters
+                }))
+        })), [
+        sort
+    ]);
+    const filteredData = "" === filter ? models : models.filter(filterData);
+    const contentModels = sortData(filteredData);
+    const { handleModelsExport, handleModelExport } = useModelExport();
+    const onRefreshClick = useCallback(()=>{
+        refresh();
+    }, []);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DataList, {
+        loading: loading,
+        data: contentModels,
+        title: t`Content Models`,
+        actions: /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center justify-end gap-xs"
+        }, /*#__PURE__*/ react.createElement(Tooltip, {
+            content: "Export all models",
+            trigger: /*#__PURE__*/ react.createElement(IconButton, {
+                icon: /*#__PURE__*/ react.createElement(file_download_svg_ReactComponent, null),
+                size: "sm",
+                variant: "ghost",
+                onClick: ()=>handleModelsExport()
+            })
+        }), /*#__PURE__*/ react.createElement(Tooltip, {
+            content: "Import models",
+            trigger: /*#__PURE__*/ react.createElement(IconButton, {
+                icon: /*#__PURE__*/ react.createElement(file_upload_svg_ReactComponent, null),
+                size: "sm",
+                variant: "ghost",
+                onClick: ()=>showImportModelModal()
+            })
+        }), canCreate ? /*#__PURE__*/ react.createElement(Button, {
+            "data-testid": "new-record-button",
+            onClick: onCreate,
+            text: t`New`,
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "sm",
+            className: "ml-xs"
+        }) : null),
+        search: /*#__PURE__*/ react.createElement(SearchUI, {
+            value: filter,
+            onChange: setFilter,
+            inputPlaceholder: t`Search content model...`
         }),
-        "data-testid": "cms-export-content-model-button",
-        onClick: handleModelExport(contentModel)
-      }), canDeleteModel && /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-        text: "Delete",
-        icon: /*#__PURE__*/React.createElement(DropdownMenu.Item.Icon, {
-          label: "Delete",
-          element: /*#__PURE__*/React.createElement(DeleteIcon, null)
+        modalOverlay: contentModelsDataListModalOverlay,
+        modalOverlayAction: /*#__PURE__*/ react.createElement(DataListModal.Trigger, {
+            "data-testid": "default-data-list.filter"
         }),
-        onClick: () => {
-          setModelToBeDeleted(contentModel);
-        },
-        "data-testid": "cms-delete-content-model-button",
-        className: "text-destructive-primary! [&_svg]:fill-destructive"
-      }))))));
-    }));
-  }), modelToBeDeleted ? /*#__PURE__*/React.createElement(FullyDeleteModelDialog, {
-    model: modelToBeDeleted,
-    onClose: () => {
-      setModelToBeDeleted(null);
-    }
-  }) : null);
+        refresh: onRefreshClick
+    }, ({ data = [] })=>/*#__PURE__*/ react.createElement(List, {
+            "data-testid": "default-data-list"
+        }, data.map((contentModel)=>{
+            const disableViewContent = 0 === contentModel.fields.length;
+            const getMessage = ()=>{
+                if (disableViewContent) return "To view the entries, you first need to add a field and save the model";
+                if (contentModel.tags.includes(CMS_MODEL_SINGLETON_TAG)) return "View";
+                return "View entries";
+            };
+            const canDeleteModel = canDelete(contentModel, "cms.contentModel");
+            const canEditModel = canEdit(contentModel, "cms.contentModel");
+            return /*#__PURE__*/ react.createElement(List.Item, {
+                key: contentModel.modelId,
+                className: "group/item",
+                icon: /*#__PURE__*/ react.createElement(DisplayIcon, {
+                    model: contentModel
+                }),
+                title: contentModel.name,
+                description: t`Last modified: {time}.`({
+                    time: contentModel.savedOn ? /*#__PURE__*/ react.createElement(TimeAgo, {
+                        datetime: contentModel.savedOn
+                    }) : "N/A"
+                }),
+                actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(ModelIsBeingDeleted, {
+                    model: contentModel
+                }, /*#__PURE__*/ react.createElement("span", {
+                    className: "invisible group-hover/item:visible"
+                }, /*#__PURE__*/ react.createElement(Tooltip, {
+                    side: "top",
+                    content: getMessage(),
+                    trigger: /*#__PURE__*/ react.createElement(Button, {
+                        text: "View entries",
+                        icon: /*#__PURE__*/ react.createElement(list_svg_ReactComponent, null),
+                        variant: "secondary",
+                        size: "sm",
+                        "data-testid": "cms-view-content-model-button",
+                        onClick: viewContentEntries(contentModel),
+                        disabled: disableViewContent
+                    })
+                })), canEdit(contentModel, "cms.contentModel") && /*#__PURE__*/ react.createElement("span", {
+                    className: "invisible group-hover/item:visible"
+                }, /*#__PURE__*/ react.createElement(Tooltip, {
+                    side: "top",
+                    content: contentModel.plugin ? t`Content model is registered via a plugin.` : t`Edit content model`,
+                    trigger: /*#__PURE__*/ react.createElement(Button, {
+                        text: "Edit",
+                        icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null),
+                        variant: "secondary",
+                        size: "sm",
+                        disabled: contentModel.plugin,
+                        onClick: ()=>editRecord(contentModel),
+                        "data-testid": "cms-edit-content-model-button"
+                    })
+                })), /*#__PURE__*/ react.createElement(DropdownMenu, {
+                    trigger: /*#__PURE__*/ react.createElement(IconButton, {
+                        icon: /*#__PURE__*/ react.createElement(more_vert_svg_ReactComponent, null),
+                        size: "sm",
+                        variant: "ghost"
+                    })
+                }, canEditModel && /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+                    text: "Clone",
+                    icon: /*#__PURE__*/ react.createElement(DropdownMenu.Item.Icon, {
+                        label: "Clone",
+                        element: /*#__PURE__*/ react.createElement(flip_to_front_svg_ReactComponent, null)
+                    }),
+                    "data-testid": "cms-clone-content-model-button",
+                    onClick: ()=>onClone(contentModel)
+                }), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+                    text: "Export",
+                    icon: /*#__PURE__*/ react.createElement(DropdownMenu.Item.Icon, {
+                        label: "Export",
+                        element: /*#__PURE__*/ react.createElement(file_download_svg_ReactComponent, null)
+                    }),
+                    "data-testid": "cms-export-content-model-button",
+                    onClick: handleModelExport(contentModel)
+                }), canDeleteModel && /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+                    text: "Delete",
+                    icon: /*#__PURE__*/ react.createElement(DropdownMenu.Item.Icon, {
+                        label: "Delete",
+                        element: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null)
+                    }),
+                    onClick: ()=>{
+                        setModelToBeDeleted(contentModel);
+                    },
+                    "data-testid": "cms-delete-content-model-button",
+                    className: "text-destructive-primary! [&_svg]:fill-destructive"
+                }))))
+            });
+        }))), modelToBeDeleted ? /*#__PURE__*/ react.createElement(FullyDeleteModelDialog, {
+        model: modelToBeDeleted,
+        onClose: ()=>{
+            setModelToBeDeleted(null);
+        }
+    }) : null);
 };
-export default ContentModelsDataList;
+const contentModels_ContentModelsDataList = ContentModelsDataList;
+export default contentModels_ContentModelsDataList;
 
 //# sourceMappingURL=ContentModelsDataList.js.map