@webiny/app-headless-cms 0.0.0-mt-1

package/admin/views/contentEntries/ContentEntry.js

@@ -0,0 +1,99 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import { css } from "emotion";
+import styled from "@emotion/styled";
+import EmptyView from "@webiny/app-admin/components/EmptyView";
+import { ButtonDefault, ButtonIcon } from "@webiny/ui/Button";
+import { ReactComponent as AddIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/add-18px.svg";
+import { i18n } from "@webiny/app/i18n";
+import { Tab, Tabs } from "@webiny/ui/Tabs";
+import { Elevation } from "@webiny/ui/Elevation";
+import { CircularProgress } from "@webiny/ui/Progress";
+import RevisionsList from "./ContentEntry/RevisionsList";
+import Header from "./ContentEntry/header/Header";
+import { useContentEntry } from "./hooks/useContentEntry";
+import { ContentEntryForm } from "../../components/ContentEntryForm/ContentEntryForm";
+var t = i18n.namespace("app-headless-cms/admin/content-model-entries/details");
+var DetailsContainer = /*#__PURE__*/styled("div", {
+  target: "e68rq0j0",
+  label: "DetailsContainer"
+})({
+  height: "calc(100% - 10px)",
+  overflow: "hidden",
+  position: "relative",
+  nav: {
+    backgroundColor: "var(--mdc-theme-surface)"
+  }
+});
+var RenderBlock = /*#__PURE__*/styled("div", {
+  target: "e68rq0j1",
+  label: "RenderBlock"
+})({
+  position: "relative",
+  zIndex: 0,
+  backgroundColor: "var(--mdc-theme-background)",
+  height: "100%",
+
+  /*overflow: "scroll",*/
+  padding: 25
+});
+var elevationStyles = /*#__PURE__*/css({
+  position: "relative"
+}, "label:elevationStyles;");
+
+var ContentEntry = function ContentEntry() {
+  var _useContentEntry = useContentEntry(),
+      contentModel = _useContentEntry.contentModel,
+      loading = _useContentEntry.loading,
+      entry = _useContentEntry.entry,
+      showEmptyView = _useContentEntry.showEmptyView,
+      canCreate = _useContentEntry.canCreate,
+      createEntry = _useContentEntry.createEntry,
+      setTabsRef = _useContentEntry.setTabsRef,
+      setFormRef = _useContentEntry.setFormRef; // Render "No content selected" view.
+
+
+  if (showEmptyView) {
+    return /*#__PURE__*/React.createElement(EmptyView, {
+      title: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Click on the left side list to display entry details {message}"])))({
+        message: canCreate ? "or create a..." : ""
+      }),
+      action: canCreate ? /*#__PURE__*/React.createElement(ButtonDefault, {
+        "data-testid": "new-record-button",
+        onClick: createEntry
+      }, /*#__PURE__*/React.createElement(ButtonIcon, {
+        icon: /*#__PURE__*/React.createElement(AddIcon, null)
+      }), " ", t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["New Entry"])))) : null
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(DetailsContainer, null, /*#__PURE__*/React.createElement("test-id", {
+    "data-testid": "cms-content-details"
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    ref: function ref(tabs) {
+      return setTabsRef(tabs);
+    }
+  }, /*#__PURE__*/React.createElement(Tab, {
+    label: "Content",
+    disabled: loading,
+    "data-testid": "cms.content-form.tabs.content"
+  }, /*#__PURE__*/React.createElement(RenderBlock, null, /*#__PURE__*/React.createElement(Elevation, {
+    z: 2,
+    className: elevationStyles
+  }, loading && /*#__PURE__*/React.createElement(CircularProgress, null), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(ContentEntryForm, {
+    contentModel: contentModel,
+    entry: entry,
+    onForm: function onForm(form) {
+      return setFormRef(form);
+    }
+  })))), /*#__PURE__*/React.createElement(Tab, {
+    label: "Revisions",
+    disabled: loading,
+    "data-testid": "cms.content-form.tabs.revisions"
+  }, /*#__PURE__*/React.createElement(RevisionsList, null)))));
+};
+
+export default ContentEntry;

package/admin/views/contentEntries/hooks/useContentEntries.d.ts

@@ -0,0 +1 @@
+export declare function useContentEntries(): import("../ContentEntriesContext").ContentEntriesContext;

package/admin/views/contentEntries/hooks/useContentEntries.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { Context } from "../ContentEntriesContext";
+export function useContentEntries() {
+  return useContext(Context);
+}

package/admin/views/contentEntries/hooks/useContentEntriesList.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { CmsEditorContentEntry } from "../../../../types";
+export declare function useContentEntriesList(): {
+    contentModel: import("../../../../types").CmsEditorContentModel;
+    listQueryVariables: import("../ContentEntriesContext").ListQueryVariables;
+    setListQueryVariables: import("react").Dispatch<import("react").SetStateAction<import("../ContentEntriesContext").ListQueryVariables>>;
+    sorters: {
+        label: string;
+        value: string;
+    }[];
+    entryId: string;
+    loading: boolean;
+    data: any;
+    loadMore: () => void;
+    loadMoreLoading: boolean;
+    canCreate: boolean;
+    onCreate: () => void;
+    filter: string;
+    setFilter: import("react").Dispatch<import("react").SetStateAction<string>>;
+    editEntry: (entry: CmsEditorContentEntry) => () => void;
+};

package/admin/views/contentEntries/hooks/useContentEntriesList.js

@@ -0,0 +1,152 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import get from "lodash/get";
+import set from "lodash/set";
+import unset from "lodash/unset";
+import cloneDeep from "lodash/cloneDeep";
+import debounce from "lodash/debounce";
+import { useRouter } from "@webiny/react-router";
+import { createListQuery } from "../../../graphql/contentEntries";
+import { useQuery } from "../../../hooks";
+import { useContentEntries } from "./useContentEntries";
+export function useContentEntriesList() {
+  var _useContentEntries = useContentEntries(),
+      contentModel = _useContentEntries.contentModel,
+      listQueryVariables = _useContentEntries.listQueryVariables,
+      setListQueryVariables = _useContentEntries.setListQueryVariables,
+      sorters = _useContentEntries.sorters,
+      canCreate = _useContentEntries.canCreate;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      loadMoreLoading = _useState2[0],
+      setLoadMoreLoading = _useState2[1];
+
+  var _useState3 = useState(""),
+      _useState4 = _slicedToArray(_useState3, 2),
+      filter = _useState4[0],
+      setFilter = _useState4[1];
+
+  var _useRouter = useRouter(),
+      history = _useRouter.history;
+
+  var baseUrl = "/cms/content-entries/".concat(contentModel.modelId); // Get entry ID and search query (if any)
+
+  var query = new URLSearchParams(location.search);
+  var entryId = query.get("id");
+  var searchQuery = query.get("search");
+  var updateSearch = useCallback(debounce(function (_ref) {
+    var filter = _ref.filter,
+        query = _ref.query;
+    var search = query.get("search");
+
+    if (typeof search !== "string" && !filter) {
+      return;
+    } // We use the title field with the "contains" operator for doing basic searches.
+
+
+    var searchField = contentModel.titleFieldId + "_contains";
+    setListQueryVariables(function (prev) {
+      var next = cloneDeep(prev);
+
+      if (filter) {
+        set(next, "where.".concat(searchField), filter);
+      } else {
+        unset(next, "where.".concat(searchField));
+      }
+
+      return next;
+    });
+
+    if (search !== filter) {
+      query.set("search", filter);
+      history.push("".concat(baseUrl, "?").concat(query.toString()));
+    }
+  }, 250), [baseUrl]); // Set "filter" from search "query" on page load.
+
+  useEffect(function () {
+    if (searchQuery) {
+      setFilter(searchQuery);
+    }
+  }, [baseUrl, searchQuery]); // When filter changes, run GQL query
+
+  useEffect(function () {
+    return updateSearch({
+      filter: filter,
+      query: query
+    });
+  }, [baseUrl, filter]); // Generate a query based on current content model
+
+  var LIST_QUERY = useMemo(function () {
+    return createListQuery(contentModel);
+  }, [contentModel.modelId]);
+
+  var _useQuery = useQuery(LIST_QUERY, {
+    variables: listQueryVariables
+  }),
+      data = _useQuery.data,
+      loading = _useQuery.loading,
+      fetchMore = _useQuery.fetchMore;
+
+  var onCreate = useCallback(function () {
+    history.push("/cms/content-entries/".concat(contentModel.modelId, "?new=true"));
+  }, [contentModel]);
+  var filterByStatus = useCallback(function (entries, status) {
+    if (!status || status === "all") {
+      return entries;
+    }
+
+    return entries.filter(function (item) {
+      return item.meta.status === status;
+    });
+  }, []); // Load more entries on scroll
+
+  var loadMore = useCallback(function () {
+    var meta = get(data, "content.meta", {});
+
+    if (meta.hasMoreItems) {
+      setLoadMoreLoading(true);
+      fetchMore({
+        variables: {
+          after: meta.cursor
+        },
+        updateQuery: function updateQuery(prev, _ref2) {
+          var fetchMoreResult = _ref2.fetchMoreResult;
+
+          if (!fetchMoreResult) {
+            return prev;
+          }
+
+          var next = _objectSpread({}, fetchMoreResult);
+
+          next.content.data = [].concat(_toConsumableArray(prev.content.data), _toConsumableArray(fetchMoreResult.content.data));
+          setLoadMoreLoading(false);
+          return next;
+        }
+      });
+    }
+  }, [data]);
+  var editEntry = useCallback(function (entry) {
+    return function () {
+      history.push("/cms/content-entries/".concat(contentModel.modelId, "?id=").concat(encodeURIComponent(entry.id)));
+    };
+  }, [contentModel.modelId]);
+  return {
+    contentModel: contentModel,
+    listQueryVariables: listQueryVariables,
+    setListQueryVariables: setListQueryVariables,
+    sorters: sorters,
+    entryId: entryId,
+    loading: loading,
+    data: filterByStatus(get(data, "content.data", []), listQueryVariables.status),
+    loadMore: loadMore,
+    loadMoreLoading: loadMoreLoading,
+    canCreate: canCreate,
+    onCreate: onCreate,
+    filter: filter,
+    setFilter: setFilter,
+    editEntry: editEntry
+  };
+}

package/admin/views/contentEntries/hooks/useContentEntry.d.ts

@@ -0,0 +1 @@
+export declare function useContentEntry(): import("../ContentEntry/ContentEntryContext").ContentEntryContext;

package/admin/views/contentEntries/hooks/useContentEntry.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { Context } from "../ContentEntry/ContentEntryContext";
+export function useContentEntry() {
+  return useContext(Context);
+}

package/admin/views/contentModelGroups/ContentModelGroups.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function ContentModelGroups(): JSX.Element;
+export default ContentModelGroups;

package/admin/views/contentModelGroups/ContentModelGroups.js

@@ -0,0 +1,35 @@
+import React, { useMemo } from "react";
+import { useSecurity } from "@webiny/app-security";
+import { SplitView, LeftPanel, RightPanel } from "@webiny/app-admin/components/SplitView";
+import ContentModelGroupsDataList from "./ContentModelGroupsDataList";
+import ContentModelGroupsForm from "./ContentModelGroupsForm";
+
+function ContentModelGroups() {
+  var _useSecurity = useSecurity(),
+      identity = _useSecurity.identity;
+
+  var canCreate = useMemo(function () {
+    var permission = identity.getPermission("cms.contentModelGroup");
+
+    if (!permission) {
+      return false;
+    }
+
+    if (typeof permission.rwd !== "string") {
+      return true;
+    }
+
+    return permission.rwd.includes("w");
+  }, []);
+  return /*#__PURE__*/React.createElement(SplitView, null, /*#__PURE__*/React.createElement(LeftPanel, {
+    span: 4
+  }, /*#__PURE__*/React.createElement(ContentModelGroupsDataList, {
+    canCreate: canCreate
+  })), /*#__PURE__*/React.createElement(RightPanel, {
+    span: 8
+  }, /*#__PURE__*/React.createElement(ContentModelGroupsForm, {
+    canCreate: canCreate
+  })));
+}
+
+export default ContentModelGroups;

package/admin/views/contentModelGroups/ContentModelGroupsDataList.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type ContentModelGroupsDataListProps = {
+    canCreate: boolean;
+};
+declare const ContentModelGroupsDataList: ({ canCreate }: ContentModelGroupsDataListProps) => JSX.Element;
+export default ContentModelGroupsDataList;

package/admin/views/contentModelGroups/ContentModelGroupsDataList.js

@@ -0,0 +1,242 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useMemo, useState } from "react";
+import get from "lodash/get";
+import orderBy from "lodash/orderBy";
+import dotProp from "dot-prop-immutable";
+import { i18n } from "@webiny/app/i18n";
+import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
+import { DataList, List, ListItem, ListItemText, ListItemTextSecondary, ListItemMeta, ListActions, DataListModalOverlay, DataListModalOverlayAction } from "@webiny/ui/List";
+import { useRouter } from "@webiny/react-router";
+import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import { useQuery, useApolloClient } from "../../hooks";
+import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
+import * as GQL from "./graphql";
+import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
+import { Cell, Grid } from "@webiny/ui/Grid";
+import { Select } from "@webiny/ui/Select";
+import SearchUI from "@webiny/app-admin/components/SearchUI";
+import { ReactComponent as AddIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/add-18px.svg";
+import { ReactComponent as FilterIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/filter-24px.svg";
+import { serializeSorters, deserializeSorters } from "../utils";
+import usePermission from "../../hooks/usePermission";
+import { Tooltip } from "@webiny/ui/Tooltip";
+var t = i18n.ns("app-headless-cms/admin/content-model-groups/data-list");
+var SORTERS = [{
+  label: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Newest to oldest"]))),
+  sorters: {
+    createdOn: "desc"
+  }
+}, {
+  label: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Oldest to newest"]))),
+  sorters: {
+    createdOn: "asc"
+  }
+}, {
+  label: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Name A-Z"]))),
+  sorters: {
+    name: "asc"
+  }
+}, {
+  label: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Name Z-A"]))),
+  sorters: {
+    name: "desc"
+  }
+}];
+
+var ContentModelGroupsDataList = function ContentModelGroupsDataList(_ref) {
+  var canCreate = _ref.canCreate;
+
+  var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      filter = _useState2[0],
+      setFilter = _useState2[1];
+
+  var _useState3 = useState(serializeSorters(SORTERS[0].sorters)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      sort = _useState4[0],
+      setSort = _useState4[1];
+
+  var _useRouter = useRouter(),
+      history = _useRouter.history;
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var client = useApolloClient();
+  var listQuery = useQuery(GQL.LIST_CONTENT_MODEL_GROUPS);
+
+  var _useConfirmationDialo = useConfirmationDialog({
+    dataTestId: "cms.contentModelGroup.list-item.delete-dialog"
+  }),
+      showConfirmation = _useConfirmationDialo.showConfirmation;
+
+  var _usePermission = usePermission(),
+      canDelete = _usePermission.canDelete;
+
+  var filterData = useCallback(function (_ref2) {
+    var name = _ref2.name;
+    return name.toLowerCase().includes(filter);
+  }, [filter]);
+  var sortData = useCallback(function (list) {
+    if (!sort) {
+      return list;
+    }
+
+    var _Object$entries = Object.entries(deserializeSorters(sort)),
+        _Object$entries2 = _slicedToArray(_Object$entries, 1),
+        _Object$entries2$ = _slicedToArray(_Object$entries2[0], 2),
+        key = _Object$entries2$[0],
+        value = _Object$entries2$[1];
+
+    return orderBy(list, [key], [value]);
+  }, [sort]);
+  var data = listQuery.loading ? [] : get(listQuery, "data.listContentModelGroups.data", []);
+  var groupId = new URLSearchParams(location.search).get("id");
+  var deleteItem = useCallback(function (group) {
+    showConfirmation( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var response, error;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return client.mutate({
+                mutation: GQL.DELETE_CONTENT_MODEL_GROUP,
+                variables: {
+                  id: group.id
+                },
+                update: function update(cache, _ref4) {
+                  var data = _ref4.data;
+                  var error = data.deleteContentModelGroup.error;
+
+                  if (error) {
+                    return;
+                  } // Delete the item from list cache
+
+
+                  // Delete the item from list cache
+                  var gqlParams = {
+                    query: GQL.LIST_CONTENT_MODEL_GROUPS
+                  };
+
+                  var _cache$readQuery = cache.readQuery(gqlParams),
+                      listContentModelGroups = _cache$readQuery.listContentModelGroups;
+
+                  var index = listContentModelGroups.data.findIndex(function (item) {
+                    return item.id === group.id;
+                  });
+                  cache.writeQuery(_objectSpread(_objectSpread({}, gqlParams), {}, {
+                    data: {
+                      listContentModelGroups: dotProp.delete(listContentModelGroups, "data.".concat(index))
+                    }
+                  }));
+                }
+              });
+
+            case 2:
+              response = _context.sent;
+              error = response.data.deleteContentModelGroup.error;
+
+              if (!error) {
+                _context.next = 6;
+                break;
+              }
+
+              return _context.abrupt("return", showSnackbar(error.message));
+
+            case 6:
+              showSnackbar(t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Content model group \"{name}\" deleted."])))({
+                name: group.name
+              }));
+
+              if (groupId === group.id) {
+                history.push("/cms/content-model-groups");
+              }
+
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+  }, [groupId]);
+  var contentModelGroupsDataListModalOverlay = useMemo(function () {
+    return /*#__PURE__*/React.createElement(DataListModalOverlay, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Select, {
+      value: sort,
+      onChange: setSort,
+      label: t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Sort by"]))),
+      description: "Sort pages by"
+    }, SORTERS.map(function (_ref5) {
+      var label = _ref5.label,
+          sorters = _ref5.sorters;
+      return /*#__PURE__*/React.createElement("option", {
+        key: label,
+        value: serializeSorters(sorters)
+      }, label);
+    })))));
+  }, [sort]);
+  var filteredData = filter === "" ? data : data.filter(filterData);
+  var contentModelGroups = sortData(filteredData);
+  return /*#__PURE__*/React.createElement(DataList, {
+    loading: listQuery.loading,
+    data: contentModelGroups,
+    title: t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Content Model Groups"]))),
+    actions: canCreate ? /*#__PURE__*/React.createElement(ButtonSecondary, {
+      "data-testid": "new-record-button",
+      onClick: function onClick() {
+        return history.push("/cms/content-model-groups?new=true");
+      }
+    }, /*#__PURE__*/React.createElement(ButtonIcon, {
+      icon: /*#__PURE__*/React.createElement(AddIcon, null)
+    }), " ", t(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["New Group"])))) : null,
+    search: /*#__PURE__*/React.createElement(SearchUI, {
+      value: filter,
+      onChange: setFilter,
+      inputPlaceholder: t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["Search content model group"])))
+    }),
+    modalOverlay: contentModelGroupsDataListModalOverlay,
+    modalOverlayAction: /*#__PURE__*/React.createElement(DataListModalOverlayAction, {
+      icon: /*#__PURE__*/React.createElement(FilterIcon, null),
+      "data-testid": "default-data-list.filter"
+    })
+  }, function (_ref6) {
+    var data = _ref6.data;
+    return /*#__PURE__*/React.createElement(List, {
+      "data-testid": "default-data-list"
+    }, data.map(function (item) {
+      return /*#__PURE__*/React.createElement(ListItem, {
+        key: item.id,
+        selected: item.id === groupId
+      }, /*#__PURE__*/React.createElement(ListItemText, {
+        onClick: function onClick() {
+          return history.push("/cms/content-model-groups?id=".concat(item.id));
+        }
+      }, item.name, /*#__PURE__*/React.createElement(ListItemTextSecondary, null, item.contentModels.length ? t(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["{contentModels|count:1:content model:default:content models}"])))({
+        contentModels: item.contentModels.length
+      }) : t(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["No content models"]))))), canDelete(item, "cms.contentModelGroup") && /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(ListActions, null, item.plugin ? /*#__PURE__*/React.createElement(Tooltip, {
+        content: "Content model group is registered via a plugin.",
+        placement: "bottom"
+      }, /*#__PURE__*/React.createElement(DeleteIcon, {
+        disabled: true,
+        "data-testid": "cms.contentModelGroup.list-item.delete"
+      })) : /*#__PURE__*/React.createElement(DeleteIcon, {
+        onClick: function onClick() {
+          return deleteItem(item);
+        },
+        "data-testid": "cms.contentModelGroup.list-item.delete"
+      }))));
+    }));
+  });
+};
+
+export default ContentModelGroupsDataList;

package/admin/views/contentModelGroups/ContentModelGroupsForm.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type ContentModelGroupsFormProps = {
+    canCreate: boolean;
+};
+declare function ContentModelGroupsForm({ canCreate }: ContentModelGroupsFormProps): JSX.Element;
+export default ContentModelGroupsForm;