@abtnode/ux 1.15.17 → 1.16.0-beta-b16cb035

package/lib/actions.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Actions;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _MoreHoriz = _interopRequireDefault(require("@mui/icons-material/MoreHoriz"));
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["actions"],
+  _excluded2 = ["icon", "text", "onClick", "disabled"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function Actions(_ref) {
+  let {
+      actions
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const open = Boolean(anchorEl);
+  const onOpen = e => {
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+      // eslint-disable-next-line no-empty
+    } catch (_unused) {}
+    setAnchorEl(e.currentTarget);
+  };
+  const onClose = e => {
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+      // eslint-disable-next-line no-empty
+    } catch (_unused2) {}
+    setAnchorEl(null);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      "aria-label": "more",
+      "aria-controls": "actions-menu",
+      "aria-haspopup": "true",
+      "data-cy": "actions-menu-icon",
+      onClick: onOpen,
+      size: "large",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreHoriz.default, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+      id: "actions-menu",
+      "data-cy": "actions-menu",
+      anchorEl: anchorEl,
+      keepMounted: true,
+      open: open,
+      onClose: onClose,
+      PaperProps: {},
+      children: actions.map((action, index) => {
+        if (typeof action === 'function') {
+          return action({
+            close: onClose
+          });
+        }
+        const {
+            icon,
+            text,
+            onClick: _onClick,
+            disabled = false
+          } = action,
+          opts = _objectWithoutProperties(action, _excluded2);
+        return /*#__PURE__*/(0, _react.createElement)(_MenuItem.default, _objectSpread(_objectSpread({}, opts), {}, {
+          disabled: disabled,
+          dense: true,
+          onClick: e => {
+            onClose();
+            _onClick(e);
+          }
+          // eslint-disable-next-line react/no-array-index-key
+          ,
+          key: index
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+          style: {
+            minWidth: 24,
+            marginRight: 8
+          },
+          children: icon
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+          primary: text
+        }));
+      })
+    })]
+  }));
+}
+Actions.propTypes = {
+  actions: _propTypes.default.array
+};
+Actions.defaultProps = {
+  actions: []
+};
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));

package/lib/blocklet/access/config-access.js

@@ -0,0 +1,303 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ConfigAccess;
+exports.getComponentWhoCanAccess = void 0;
+var _react = require("react");
+var _get = _interopRequireDefault(require("lodash/get"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
+var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme"));
+var _Group = _interopRequireDefault(require("@mui/icons-material/Group"));
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _constant = require("@blocklet/constant");
+var _constant2 = require("@abtnode/constant");
+var _util = require("@blocklet/meta/lib/util");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _node = require("../../contexts/node");
+var _team = require("../../contexts/team");
+var _util2 = require("../../util");
+var _toast = _interopRequireDefault(require("../../toast"));
+var _config = _interopRequireDefault(require("../../who-can-access/config"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const CONFIG_ROLE = 'roles';
+const Configs = [..._config.default, {
+  value: CONFIG_ROLE,
+  icon: _Group.default,
+  title: {
+    zh: '指定通行证可访问',
+    en: 'Accessible to selected passports'
+  },
+  description: {
+    zh: '只有指定的通行证可以访问',
+    en: 'Only specified passports can access'
+  }
+}];
+const getAccess = (whoCanAccess, roleStore) => {
+  if (whoCanAccess && whoCanAccess.startsWith(_constant2.WHO_CAN_ACCESS_PREFIX_ROLES)) {
+    const roleNames = (0, _util.getRolesFromAuthConfig)({
+      whoCanAccess
+    });
+    const filterRoles = roleStore.filter(x => roleNames.includes(x.name));
+    return {
+      access: CONFIG_ROLE,
+      roles: filterRoles
+    };
+  }
+  return {
+    access: whoCanAccess,
+    roles: []
+  };
+};
+const getComponentWhoCanAccess = function getComponentWhoCanAccess(component, app) {
+  let {
+    roles = []
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const access = (component.configs || []).find(x => x.key === _constant.BLOCKLET_CONFIGURABLE_KEY.COMPONENT_ACCESS_WHO);
+  if (access) {
+    return getAccess(access.value, roles);
+  }
+  if (app && (0, _get.default)(app, 'settings.whoCanAccess') && (0, _get.default)(app, 'settings.whoCanAccess') !== _constant2.WHO_CAN_ACCESS.ALL) {
+    return getAccess((0, _get.default)(app, 'settings.whoCanAccess'), roles);
+  }
+  const service = (0, _util.findServiceFromMeta)(component.meta, _constant2.NODE_SERVICES.AUTH);
+  if ((0, _get.default)(service, 'config.whoCanAccess')) {
+    return getAccess(service.config.whoCanAccess, roles);
+  }
+  return {
+    access: _constant2.WHO_CAN_ACCESS.ALL,
+    roles: []
+  };
+};
+exports.getComponentWhoCanAccess = getComponentWhoCanAccess;
+function ConfigAccess(_ref) {
+  let {
+    blocklet,
+    ancestors,
+    children
+  } = _ref;
+  const theme = (0, _useTheme.default)();
+  const [showDialog, setShowDialog] = (0, _react.useState)('');
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const {
+    roles: roleList
+  } = (0, _team.useTeamContext)();
+  const [loading, setLoading] = (0, _react.useState)('');
+  const root = ancestors[0] || blocklet;
+  const {
+    access: defaultValue,
+    roles: defaultRoles
+  } = getComponentWhoCanAccess(blocklet, root, {
+    roles: roleList
+  });
+  const [whoCanAccess, setWhoCanAccess] = (0, _react.useState)(defaultValue);
+  const [roles, setRoles] = (0, _react.useState)(defaultRoles);
+  const dids = [...ancestors.map(x => x.meta.did), blocklet.meta.did];
+  const iconStyle = {
+    marginRight: 4,
+    fontSize: 18,
+    verticalAlign: 'text-bottom',
+    color: theme.palette.text.secondary
+  };
+  const componentName = ancestors.concat(blocklet).map(x => (0, _util.getDisplayName)(x, true)).join(' / ');
+  if ((0, _util2.isInstalling)(blocklet.status)) {
+    return null;
+  }
+  if (blocklet.status === 'unknown' && (0, _util2.isInstalling)(blocklet.status)) {
+    return null;
+  }
+  const onClose = () => {
+    setShowDialog(false);
+  };
+  const onOpen = e => {
+    e.stopPropagation();
+    // eslint-disable-next-line no-unused-expressions
+    setShowDialog(true);
+  };
+  const onWhoCanAccessChange = e => {
+    const {
+      value
+    } = e.target;
+    setWhoCanAccess(value);
+  };
+  const onRolesChange = e => {
+    setRoles(roleList.filter(x => (e.target.value || []).includes(x.name)));
+  };
+  const onConfirm = async () => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      let value = whoCanAccess;
+      if (value === CONFIG_ROLE) {
+        value = "".concat(_constant2.WHO_CAN_ACCESS_PREFIX_ROLES).concat(roles.map(x => x.name).join(','));
+      }
+      await api.updateWhoCanAccess({
+        input: {
+          did: dids,
+          whoCanAccess: value
+        }
+      });
+      _toast.default.success(t('blocklet.config.access.updatedTip'));
+      onClose();
+      setLoading(false);
+    } catch (err) {
+      setLoading(false);
+      _toast.default.error((0, _util2.formatError)(err));
+    }
+  };
+  const disabled = loading || whoCanAccess === CONFIG_ROLE && !roles.length;
+  return [typeof children === 'function' ? children({
+    open: onOpen
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    onClick: onOpen,
+    "data-cy": "action-config-component",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Edit.default, {})
+  }), showDialog && /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledDialog, {
+    open: true,
+    fullWidth: true,
+    title: componentName,
+    onClose: onClose,
+    PaperProps: {
+      style: {
+        minHeight: 'auto'
+      }
+    },
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: onClose,
+        color: "inherit",
+        "data-cy": "config-access-cancel",
+        children: t('common.cancel')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        onClick: onConfirm,
+        color: "primary",
+        disabled: disabled,
+        variant: "contained",
+        autoFocus: true,
+        "data-cy": "config-access-confirm",
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+          size: 16
+        }), t('common.confirm')]
+      })]
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: 4,
+      mb: 3,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        label: t('blocklet.config.access.description'),
+        select: true,
+        fullWidth: true,
+        value: whoCanAccess,
+        onChange: onWhoCanAccessChange,
+        "data-cy": "config-access-select",
+        SelectProps: {
+          renderValue: selected => {
+            const d = Configs.find(x => x.value === selected);
+            return d ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(d.icon, {
+                style: iconStyle
+              }), d.title[locale]]
+            }) : null;
+          }
+        },
+        children: Configs.map(d => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledMenuItem, {
+            value: d.value,
+            sx: {
+              display: 'block'
+            },
+            "data-cy": "config-access-opt-".concat(d.value),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+              display: "flex",
+              alignItems: "center",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(d.icon, {
+                style: iconStyle
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                children: d.title[locale]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                className: "tip",
+                children: d.description[locale]
+              })
+            })]
+          });
+        })
+      })
+    }), whoCanAccess === CONFIG_ROLE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: 4,
+      mb: 3,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        label: t('blocklet.config.access.description'),
+        select: true,
+        fullWidth: true,
+        value: roles.map(x => x.name),
+        onChange: onRolesChange,
+        SelectProps: {
+          multiple: true,
+          renderValue: selected => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            sx: {
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 0.5
+            },
+            children: selected.map(value => {
+              const role = roleList.find(x => x.name === value);
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+                label: role.title
+              }, role.text);
+            })
+          })
+        },
+        children: roleList.map(_ref2 => {
+          let {
+            name,
+            title
+          } = _ref2;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+            value: name,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+              checked: roles.some(x => x.name === name)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+              primary: title
+            })]
+          }, name);
+        })
+      })
+    })]
+  })];
+}
+ConfigAccess.propTypes = {
+  blocklet: _propTypes.default.object.isRequired,
+  ancestors: _propTypes.default.array,
+  children: _propTypes.default.any
+};
+ConfigAccess.defaultProps = {
+  ancestors: [],
+  children: null
+};
+const StyledDialog = (0, _styled.default)(_Dialog.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiDialogContent-root {\n    padding-top: 0;\n    margin-top: -32px;\n  }\n  .MuiToolbar-root {\n    padding-right: 12px;\n  }\n  .ux-dialog_right {\n    padding-right: 20px;\n  }\n"])));
+const StyledMenuItem = (0, _styled.default)(_MenuItem.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .tip {\n    font-size: 12px;\n    color: ", ";\n  }\n"])), props => props.theme.palette.text.secondary);

package/lib/blocklet/access/index.js

@@ -0,0 +1,221 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockletAccess;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
+var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
+var _Launch = _interopRequireDefault(require("@mui/icons-material/Launch"));
+var _EditIcon = _interopRequireDefault(require("@arcblock/icons/lib/EditIcon"));
+var _util = require("@blocklet/meta/lib/util");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+var _blocklet = require("../../contexts/blocklet");
+var _team = require("../../contexts/team");
+var _util2 = require("../../util");
+var _line = _interopRequireDefault(require("../component/line"));
+var _bundleAvatar = _interopRequireDefault(require("../bundle-avatar"));
+var _configAccess = _interopRequireWildcard(require("./config-access"));
+var _config = _interopRequireDefault(require("../../who-can-access/config"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ComponentItem(_ref) {
+  var _blocklet$children;
+  let {
+    blocklet,
+    ancestors,
+    depth
+  } = _ref;
+  const theme = (0, _useTheme.default)();
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const {
+    roles: roleList
+  } = (0, _team.useTeamContext)();
+  const [expand, setExpand] = (0, _react.useState)(true);
+  const {
+    recommendedDomain: domain
+  } = (0, _blocklet.useBlockletContext)();
+  const app = ancestors[0] || blocklet;
+  const mountPoint = "/".concat(ancestors.map(x => x.mountPoint || '/').join('/'), "/").concat(blocklet.mountPoint || '/').replace(/\/+/g, '/');
+  const href = (0, _util2.getBlockletUrl)({
+    blocklet: app,
+    domain: {
+      value: domain
+    },
+    mountPoint,
+    params: (0, _util2.getBlockletUrlParams)(app, locale)
+  });
+  const iconStyle = {
+    fill: theme.palette.text.secondary
+  };
+  const canExpand = depth > 0 && blocklet.children.length > 0;
+  const expandIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    size: "small",
+    children: expand ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
+      fontSize: "inherit"
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChevronRight.default, {
+      fontSize: "inherit"
+    })
+  });
+  const {
+    access: whoCanAccess,
+    roles
+  } = (0, _configAccess.getComponentWhoCanAccess)(blocklet, app, {
+    roles: roleList
+  });
+  let accessConfig;
+  if (whoCanAccess !== 'roles') {
+    accessConfig = _config.default.find(x => x.value === whoCanAccess) || _config.default[2];
+  } else {
+    const str = roles.map(x => x.title).join('/');
+    accessConfig = {
+      title: {
+        zh: "\u53EA\u6709 ".concat(str, " \u53EF\u4EE5\u8BBF\u95EE"),
+        en: "Only ".concat(str, " can access")
+      }
+    };
+  }
+  return [(depth > 0 || blocklet.meta.group !== 'gateway') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    display: "flex",
+    py: 2,
+    className: "component-item",
+    justifyContent: "space-between",
+    alignItems: "center",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      pl: Math.max((depth - 1) * 2, 0),
+      width: {
+        xs: 300,
+        md: 400
+      },
+      display: "flex",
+      alignItems: "center",
+      style: {
+        cursor: canExpand ? 'pointer' : 'cursor'
+      },
+      onClick: () => canExpand && setExpand(!expand),
+      children: [canExpand ? expandIcon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        width: 28
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bundleAvatar.default, {
+        blocklet: blocklet,
+        ancestors: ancestors
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        ml: "16px",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          style: {
+            color: '#222',
+            fontSize: 18
+          },
+          children: (0, _util.getDisplayName)(blocklet, true)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          display: "flex",
+          alignItems: "center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            color: "text.secondary",
+            children: accessConfig.title[locale]
+          })
+        })]
+      })]
+    }, blocklet), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        title: t('common.visit'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+          target: "_blank",
+          href: href,
+          rel: "noopener noreferrer",
+          title: href,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Launch.default, {})
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_configAccess.default, {
+        blocklet: blocklet,
+        ancestors: ancestors,
+        children: _ref2 => {
+          let {
+            open
+          } = _ref2;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+            title: t('common.edit'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              onClick: open,
+              "data-cy": "btn-edit-".concat(blocklet.meta.did),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditIcon.default, {
+                style: iconStyle
+              })
+            })
+          });
+        }
+      })]
+    }, "actions")]
+  }, "group-not-gateway-box"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_line.default, {
+    depth: depth
+  }), (_blocklet$children = blocklet.children) !== null && _blocklet$children !== void 0 && _blocklet$children.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Collapse.default, {
+    in: expand,
+    children: blocklet.children.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentItem, {
+      blocklet: x,
+      ancestors: [...ancestors, blocklet],
+      depth: depth + 1
+    }, "".concat(depth + 1, "-").concat(x.meta.did)))
+  }, "blocklet-collapse") : null];
+}
+ComponentItem.propTypes = {
+  blocklet: _propTypes.default.object.isRequired,
+  ancestors: _propTypes.default.array,
+  depth: _propTypes.default.number
+};
+ComponentItem.defaultProps = {
+  ancestors: [],
+  depth: 0
+};
+function BlockletAccess() {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const components = [...blocklet.children] || [];
+  if (blocklet.meta.group !== 'gateway') {
+    // add root blocklet to table list
+    components.unshift(blocklet);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, {
+    component: "div",
+    children: components && components.length ? [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: 2,
+      ml: {
+        xs: '-12px',
+        md: '-24px'
+      },
+      style: {
+        maxWidth: 1080
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentItem, {
+        blocklet: blocklet
+      }, "0-".concat(blocklet.meta.did))
+    }, "top-blocklet-".concat(blocklet.meta.did))] : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: 8,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+        children: t('blocklet.component.noComponent')
+      })
+    })
+  });
+}
+BlockletAccess.propTypes = {};
+const Div = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .title {\n    font-size: 1.2rem;\n    font-weight: bold;\n    margin-top: ", ";\n    margin-bottom: ", ";\n    &.first {\n      margin-top: 0;\n    }\n  }\n"])), props => props.theme.spacing(5), props => props.theme.spacing(3));