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

package/admin/plugins/permissionRenderer/CmsPermissions.js

@@ -0,0 +1,340 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+import React, { Fragment, useCallback, useMemo } from "react";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { Select } from "@webiny/ui/Select";
+import { i18n } from "@webiny/app/i18n";
+import { PermissionInfo, gridNoPaddingClass } from "@webiny/app-admin/components/Permissions";
+import { Form } from "@webiny/form";
+import ContentModelGroupPermission from "./components/ContentModelGroupPermission";
+import { ContentModelPermission } from "./components/ContentModelPermission";
+import { ContentEntryPermission } from "./components/ContentEntryPermission";
+import { Checkbox, CheckboxGroup } from "@webiny/ui/Checkbox";
+import { useI18N } from "@webiny/app-i18n/hooks/useI18N";
+import { Link } from "@webiny/react-router";
+var t = i18n.ns("app-headless-cms/admin/plugins/permissionRenderer");
+var CMS_PERMISSION = "cms";
+var CMS_PERMISSION_FULL_ACCESS = "cms.*";
+var FULL_ACCESS = "full";
+var NO_ACCESS = "no";
+var CUSTOM_ACCESS = "custom";
+var ENTITIES = ["contentModel", "contentModelGroup", "contentEntry"];
+var API_ENDPOINTS = [{
+  id: "read",
+  name: "Read"
+}, {
+  id: "manage",
+  name: "Manage"
+}, {
+  id: "preview",
+  name: "Preview"
+}];
+var GRAPHQL_API_TYPES_LINK = "https://www.webiny.com/docs/key-topics/webiny-applications/headless-cms/graphql-api/#graphql-api-types";
+export var CMSPermissions = function CMSPermissions(_ref) {
+  var value = _ref.value,
+      onChange = _ref.onChange;
+
+  var _useI18N = useI18N(),
+      getLocales = _useI18N.getLocales;
+
+  var canRead = useCallback(function (value, permissionName) {
+    var permission = value.find(function (item) {
+      return item.name === permissionName;
+    });
+
+    if (!permission) {
+      return false;
+    }
+
+    if (typeof permission.rwd !== "string") {
+      return true;
+    }
+
+    return permission.rwd.includes("r");
+  }, []);
+
+  var getFormLocales = function getFormLocales() {
+    var localePermission = (value || []).find(function (item) {
+      return item.name.startsWith("content.i18n");
+    });
+
+    if (!localePermission) {
+      return getLocales().map(function (l) {
+        return l.code;
+      });
+    }
+
+    return Array.isArray(localePermission.locales) ? localePermission.locales : getLocales().map(function (l) {
+      return l.code;
+    });
+  };
+
+  var onFormChange = useCallback(function (data) {
+    var newValue = [];
+
+    if (Array.isArray(value)) {
+      // Let's just filter out the `cms*` permission objects.
+      // Based on the `data` we rebuild new permission object from scratch.
+      newValue = value.filter(function (item) {
+        return !item.name.startsWith(CMS_PERMISSION);
+      });
+    }
+
+    if (data.accessLevel === NO_ACCESS) {
+      onChange(newValue);
+      return;
+    }
+
+    if (data.accessLevel === FULL_ACCESS) {
+      newValue.push({
+        name: CMS_PERMISSION_FULL_ACCESS
+      });
+      onChange(newValue);
+      return;
+    } // Handling custom access level.
+
+
+    if (Array.isArray(data.endpoints)) {
+      API_ENDPOINTS.forEach(function (api) {
+        if (data.endpoints.includes(api.id)) {
+          newValue.push({
+            name: "".concat(CMS_PERMISSION, ".endpoint.").concat(api.id)
+          });
+        }
+      });
+    }
+
+    var locales = getFormLocales(); // Content models, content model groups, content entries
+
+    ENTITIES.forEach(function (entity) {
+      var accessScope = data["".concat(entity, "AccessScope")];
+
+      if (accessScope && accessScope !== NO_ACCESS) {
+        var permission = {
+          name: "".concat(CMS_PERMISSION, ".").concat(entity),
+          own: false,
+          rwd: "r",
+          pw: "",
+          groups: undefined,
+          models: undefined
+        };
+
+        if (accessScope === "own") {
+          permission.own = true;
+          permission.rwd = "rwd";
+        } else {
+          permission.rwd = data["".concat(entity, "RWD")] || "r";
+        }
+
+        permission.pw = (data["".concat(entity, "PW")] || []).join("");
+
+        if (accessScope === "models") {
+          permission.models = {};
+        }
+
+        if (accessScope === "groups") {
+          permission.groups = {};
+        }
+
+        var props = data["".concat(entity, "Props")];
+
+        if (props) {
+          ["models", "groups"].forEach(function (entity) {
+            if (accessScope === entity && props[entity]) {
+              permission[entity] = locales.reduce(function (acc, locale) {
+                if (props[entity][locale]) {
+                  acc[locale] = props[entity][locale];
+                }
+
+                return acc;
+              }, {});
+            }
+          });
+        }
+
+        newValue.push(permission);
+      }
+    }); // Remove dependent permissions.
+    // The "cms.contentModel" permission can only be assigned if the user has the "read" access for the "cms.contentModelGroup".
+
+    if (!canRead(newValue, "cms.contentModelGroup")) {
+      newValue = newValue.filter(function (item) {
+        return item.name !== "cms.contentModel";
+      });
+    } // The "cms.contentEntry" permission can only be assigned if the user has the "read" access for the "cms.contentModel".
+
+
+    if (!canRead(newValue, "cms.contentModel")) {
+      newValue = newValue.filter(function (item) {
+        return item.name !== "cms.contentEntry";
+      });
+    }
+
+    onChange(newValue);
+  }, [value]);
+  var formData = useMemo(function () {
+    // This function only runs once on Form mount
+    if (!Array.isArray(value)) {
+      return {
+        accessLevel: NO_ACCESS,
+        endpoints: []
+      };
+    }
+
+    var hasFullAccess = value.find(function (item) {
+      return item.name === CMS_PERMISSION_FULL_ACCESS || item.name === "*";
+    });
+
+    if (hasFullAccess) {
+      return {
+        accessLevel: FULL_ACCESS,
+        endpoints: API_ENDPOINTS.map(function (item) {
+          return item.id;
+        })
+      };
+    }
+
+    var permissions = value.filter(function (item) {
+      return item.name.startsWith(CMS_PERMISSION);
+    });
+
+    if (!permissions.length) {
+      return {
+        accessLevel: NO_ACCESS,
+        endpoints: []
+      };
+    } // We're dealing with custom permissions. Let's first prepare data for "content models", "content model groups", "content entries" and "environments".
+
+
+    var returnData = {
+      accessLevel: CUSTOM_ACCESS,
+      endpoints: permissions.filter(function (p) {
+        return p.name.startsWith("cms.endpoint.");
+      }).map(function (p) {
+        return p.name.replace("cms.endpoint.", "");
+      })
+    };
+    ENTITIES.forEach(function (entity) {
+      var _data;
+
+      var data = (_data = {}, _defineProperty(_data, "".concat(entity, "AccessScope"), FULL_ACCESS), _defineProperty(_data, "".concat(entity, "RWD"), "r"), _defineProperty(_data, "".concat(entity, "Props"), {}), _data);
+      var entityPermission = permissions.find(function (item) {
+        return item.name === "".concat(CMS_PERMISSION, ".").concat(entity);
+      });
+
+      if (entityPermission) {
+        data["".concat(entity, "AccessScope")] = entityPermission.own ? "own" : FULL_ACCESS;
+
+        if (data["".concat(entity, "AccessScope")] === "own") {
+          data["".concat(entity, "RWD")] = "rwd";
+        } else {
+          data["".concat(entity, "RWD")] = entityPermission.rwd;
+        } // If there are any non-empty props we'll set "AccessScope" to that prop.
+
+
+        if (entityPermission.models) {
+          data["".concat(entity, "AccessScope")] = "models";
+          data["".concat(entity, "Props")] = {
+            models: entityPermission.models
+          };
+        }
+
+        if (entityPermission.groups) {
+          data["".concat(entity, "AccessScope")] = "groups";
+          data["".concat(entity, "Props")] = {
+            groups: entityPermission.groups
+          };
+        }
+
+        if (entity === "contentEntry") {
+          data["".concat(entity, "PW")] = entityPermission.pw ? entityPermission.pw.split("") : [];
+        }
+      }
+
+      Object.assign(returnData, data);
+    });
+    return returnData;
+  }, []);
+  var locales = getFormLocales();
+  var getSelectedContentModelGroups = useCallback(function (data) {
+    if (data && data.contentModelGroupAccessScope === "groups" && data.contentModelGroupProps) {
+      return data.contentModelGroupProps.groups;
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(Form, {
+    data: formData,
+    onChange: onFormChange
+  }, function (_ref2) {
+    var data = _ref2.data,
+        Bind = _ref2.Bind,
+        setValue = _ref2.setValue;
+    var graphQLEndpointAccess = data.endpoints.includes("read") || data.endpoints.includes("manage") || data.endpoints.includes("preview");
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Grid, {
+      className: gridNoPaddingClass
+    }, /*#__PURE__*/React.createElement(Cell, {
+      span: 6
+    }, /*#__PURE__*/React.createElement(PermissionInfo, {
+      title: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Access Level"])))
+    })), /*#__PURE__*/React.createElement(Cell, {
+      span: 6
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "accessLevel"
+    }, /*#__PURE__*/React.createElement(Select, {
+      label: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Access Level"])))
+    }, /*#__PURE__*/React.createElement("option", {
+      value: NO_ACCESS
+    }, t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["No access"])))), /*#__PURE__*/React.createElement("option", {
+      value: FULL_ACCESS
+    }, t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Full access"])))), /*#__PURE__*/React.createElement("option", {
+      value: CUSTOM_ACCESS
+    }, t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Custom access"])))))))), data.accessLevel === CUSTOM_ACCESS && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "endpoints"
+    }, /*#__PURE__*/React.createElement(CheckboxGroup, {
+      label: t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["GraphQL API types"]))),
+      description: t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Each type has a separate URL and a specific purpose.\n                                                 Check out the {link} key topic to learn more."])))({
+        link: /*#__PURE__*/React.createElement(Link, {
+          to: GRAPHQL_API_TYPES_LINK,
+          target: "_blank"
+        }, "Headless CMS GraphQL API")
+      })
+    }, function (_ref3) {
+      var getValue = _ref3.getValue,
+          onChange = _ref3.onChange;
+      return API_ENDPOINTS.map(function (_ref4) {
+        var id = _ref4.id,
+            name = _ref4.name;
+        return /*#__PURE__*/React.createElement(Checkbox, {
+          key: id,
+          label: name,
+          value: getValue(id),
+          onChange: onChange(id)
+        });
+      });
+    })))), graphQLEndpointAccess && /*#__PURE__*/React.createElement(ContentModelGroupPermission, {
+      data: data,
+      Bind: Bind,
+      entity: "contentModelGroup",
+      title: "Content Model Groups",
+      locales: locales
+    }), graphQLEndpointAccess && canRead(value, "cms.contentModelGroup") && /*#__PURE__*/React.createElement(ContentModelPermission, {
+      locales: locales,
+      data: data,
+      setValue: setValue,
+      Bind: Bind,
+      entity: "contentModel",
+      title: "Content Models",
+      selectedContentModelGroups: getSelectedContentModelGroups(data)
+    }), graphQLEndpointAccess && canRead(value, "cms.contentModel") && /*#__PURE__*/React.createElement(ContentEntryPermission, {
+      data: data,
+      Bind: Bind,
+      setValue: setValue,
+      entity: "contentEntry",
+      title: "Content Entries"
+    })));
+  });
+};

package/admin/plugins/permissionRenderer/components/ContentEntryPermission.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const ContentEntryPermission: ({ Bind, data, entity, setValue, title }: {
+    Bind: any;
+    data: any;
+    entity: any;
+    setValue: any;
+    title: any;
+}) => JSX.Element;

package/admin/plugins/permissionRenderer/components/ContentEntryPermission.js

@@ -0,0 +1,117 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+
+import React, { useEffect } from "react";
+import get from "lodash/get";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { Typography } from "@webiny/ui/Typography";
+import { Select } from "@webiny/ui/Select";
+import { i18n } from "@webiny/app/i18n";
+import { Elevation } from "@webiny/ui/Elevation";
+import { Checkbox, CheckboxGroup } from "@webiny/ui/Checkbox";
+import { Note } from "./StyledComponents";
+var t = i18n.ns("app-headless-cms/admin/plugins/permissionRenderer");
+var pwOptions = [{
+  id: "p",
+  name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Publish"])))
+}, {
+  id: "u",
+  name: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Unpublish"])))
+}, {
+  id: "r",
+  name: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Request review"])))
+}, {
+  id: "c",
+  name: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Request changes"])))
+}];
+export var ContentEntryPermission = function ContentEntryPermission(_ref) {
+  var Bind = _ref.Bind,
+      data = _ref.data,
+      entity = _ref.entity,
+      setValue = _ref.setValue,
+      title = _ref.title;
+  // Set "cms.contentEntry" access scope to "own" if "cms.contentModel" === "own".
+  useEffect(function () {
+    if (get(data, "contentModelAccessScope") === "own" && get(data, "".concat(entity, "AccessScope")) !== "own") {
+      setValue("".concat(entity, "AccessScope"), "own");
+    }
+  }, [data]);
+  var disabledPrimaryActions = [undefined, "own", "no"].includes(data["".concat(entity, "AccessScope")]) || !data.endpoints.includes("manage");
+  return /*#__PURE__*/React.createElement(Elevation, {
+    z: 1,
+    style: {
+      marginTop: 10
+    }
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Typography, {
+    use: "overline"
+  }, title)), /*#__PURE__*/React.createElement(Cell, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Grid, {
+    style: {
+      padding: 0,
+      paddingBottom: 24
+    }
+  }, /*#__PURE__*/React.createElement(Cell, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    defaultValue: "full",
+    name: "".concat(entity, "AccessScope"),
+    beforeChange: function beforeChange(value, cb) {
+      if (value === "own") {
+        setValue("".concat(entity, "RWD"), "rwd");
+      }
+
+      cb(value);
+    }
+  }, /*#__PURE__*/React.createElement(Select, {
+    label: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Access Scope"]))),
+    disabled: data["contentModelAccessScope"] === "own"
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "full"
+  }, t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["All entries"])))), data.endpoints.includes("manage") && /*#__PURE__*/React.createElement("option", {
+    value: "own"
+  }, t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Only entries created by the user"])))))), data["contentModelAccessScope"] === "own" && /*#__PURE__*/React.createElement(Note, null, /*#__PURE__*/React.createElement(Typography, {
+    use: "caption"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "highlight"
+  }, "Content Entry"), "\xA0", t(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["access depends upon"]))), "\xA0", /*#__PURE__*/React.createElement("span", {
+    className: "highlight"
+  }, "Content Model")))), /*#__PURE__*/React.createElement(Cell, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "".concat(entity, "RWD")
+  }, /*#__PURE__*/React.createElement(Select, {
+    label: t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["Primary Actions"]))),
+    disabled: disabledPrimaryActions
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "r"
+  }, t(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["Read"])))), data.endpoints.includes("manage") ? /*#__PURE__*/React.createElement("option", {
+    value: "rw"
+  }, t(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["Read, write"])))) : null, data.endpoints.includes("manage") ? /*#__PURE__*/React.createElement("option", {
+    value: "rwd"
+  }, t(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["Read, write, delete"])))) : null))), data.endpoints.includes("manage") ? /*#__PURE__*/React.createElement(Cell, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "".concat(entity, "PW")
+  }, /*#__PURE__*/React.createElement(CheckboxGroup, {
+    label: t(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["Publishing actions"]))),
+    description: t(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["Publishing-related actions that can be performed on content entries."])))
+  }, function (_ref2) {
+    var getValue = _ref2.getValue,
+        onChange = _ref2.onChange;
+    return pwOptions.map(function (_ref3) {
+      var id = _ref3.id,
+          name = _ref3.name;
+      return /*#__PURE__*/React.createElement(Checkbox, {
+        disabled: [undefined, "no"].includes(data["".concat(entity, "AccessScope")]),
+        key: id,
+        label: name,
+        value: getValue(id),
+        onChange: onChange(id)
+      });
+    });
+  }))) : null))));
+};

package/admin/plugins/permissionRenderer/components/ContentModelGroupPermission.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const ContentModelGroupPermission: ({ Bind, data, entity, title, locales }: {
+    Bind: any;
+    data: any;
+    entity: any;
+    title: any;
+    locales: any;
+}) => JSX.Element;
+export default ContentModelGroupPermission;

package/admin/plugins/permissionRenderer/components/ContentModelGroupPermission.js

@@ -0,0 +1,77 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+import React, { useCallback } from "react";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { Select } from "@webiny/ui/Select";
+import { i18n } from "@webiny/app/i18n";
+import { Elevation } from "@webiny/ui/Elevation";
+import { Typography } from "@webiny/ui/Typography";
+import { PermissionSelector, PermissionSelectorWrapper } from "./PermissionSelector";
+import { useCmsData } from "./useCmsData";
+var t = i18n.ns("app-headless-cms/admin/plugins/permissionRenderer");
+
+var ContentModelGroupPermission = function ContentModelGroupPermission(_ref) {
+  var Bind = _ref.Bind,
+      data = _ref.data,
+      entity = _ref.entity,
+      title = _ref.title,
+      locales = _ref.locales;
+  var modelsGroups = useCmsData(locales);
+  var getItems = useCallback(function (code) {
+    return modelsGroups[code]["groups"];
+  }, [modelsGroups]);
+  var disabledPrimaryActions = [undefined, "own", "no"].includes(data["".concat(entity, "AccessScope")]) || !data.endpoints.includes("manage");
+  return /*#__PURE__*/React.createElement(Elevation, {
+    z: 1,
+    style: {
+      marginTop: 10
+    }
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Typography, {
+    use: "overline"
+  }, title)), /*#__PURE__*/React.createElement(Cell, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Grid, {
+    style: {
+      padding: 0,
+      paddingBottom: 24
+    }
+  }, /*#__PURE__*/React.createElement(Cell, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "".concat(entity, "AccessScope"),
+    defaultValue: "full"
+  }, /*#__PURE__*/React.createElement(Select, {
+    label: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Access Scope"])))
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "full"
+  }, t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["All groups"])))), /*#__PURE__*/React.createElement("option", {
+    value: "groups"
+  }, t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Only specific groups"])))), data.endpoints.includes("manage") && /*#__PURE__*/React.createElement("option", {
+    value: "own"
+  }, t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Only groups created by the user"]))))))), data["".concat(entity, "AccessScope")] === "groups" && /*#__PURE__*/React.createElement(PermissionSelectorWrapper, null, /*#__PURE__*/React.createElement(PermissionSelector, {
+    locales: locales,
+    Bind: Bind,
+    entity: entity,
+    selectorKey: "groups",
+    getItems: getItems
+  })), /*#__PURE__*/React.createElement(Cell, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "".concat(entity, "RWD")
+  }, /*#__PURE__*/React.createElement(Select, {
+    label: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Primary Actions"]))),
+    disabled: disabledPrimaryActions
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "r"
+  }, t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Read"])))), data.endpoints.includes("manage") ? /*#__PURE__*/React.createElement("option", {
+    value: "rw"
+  }, t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Read, write"])))) : null, data.endpoints.includes("manage") ? /*#__PURE__*/React.createElement("option", {
+    value: "rwd"
+  }, t(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["Read, write, delete"])))) : null)))))));
+};
+
+export default ContentModelGroupPermission;

package/admin/plugins/permissionRenderer/components/ContentModelList.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const ContentModelList: ({ items, onChange, getValue }: {
+    items: any;
+    onChange: any;
+    getValue: any;
+}) => JSX.Element;
+export default ContentModelList;

package/admin/plugins/permissionRenderer/components/ContentModelList.js

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import React from "react";
+import { css } from "emotion";
+import groupBy from "lodash/groupBy";
+import get from "lodash/get";
+import { Typography } from "@webiny/ui/Typography";
+import { Checkbox } from "@webiny/ui/Checkbox";
+var groupStyles = /*#__PURE__*/css({
+  marginLeft: 20
+}, "label:groupStyles;");
+var labelStyles = /*#__PURE__*/css({
+  display: "block",
+  color: "var(--mdc-theme-text-secondary-on-light)",
+  fontWeight: "bold"
+}, "label:labelStyles;");
+
+var ContentModelList = function ContentModelList(_ref) {
+  var items = _ref.items,
+      onChange = _ref.onChange,
+      getValue = _ref.getValue;
+  var list = Object.entries(groupBy(items.map(function (i) {
+    return _objectSpread(_objectSpread({}, i), {}, {
+      groupName: get(i, "group.label")
+    });
+  }), "groupName"));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, list.map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: key,
+      className: groupStyles
+    }, /*#__PURE__*/React.createElement(Typography, {
+      use: "caption",
+      className: labelStyles
+    }, key), value.map(function (_ref4) {
+      var id = _ref4.id,
+          label = _ref4.label;
+      return /*#__PURE__*/React.createElement("div", {
+        key: id
+      }, /*#__PURE__*/React.createElement(Checkbox, {
+        key: id,
+        label: label,
+        value: getValue(id),
+        onChange: onChange(id)
+      }));
+    }));
+  }));
+};
+
+export default ContentModelList;

package/admin/plugins/permissionRenderer/components/ContentModelPermission.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const ContentModelPermission: ({ Bind, data, setValue, entity, title, locales, selectedContentModelGroups }: {
+    Bind: any;
+    data: any;
+    setValue: any;
+    entity: any;
+    title: any;
+    locales: any;
+    selectedContentModelGroups: any;
+}) => JSX.Element;