@abtnode/ux 1.15.17 → 1.16.0-beta-8ee536d7

package/lib/team/members/transfer-node.js

@@ -0,0 +1,262 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TransferMember;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
+var _clickToCopy = _interopRequireDefault(require("../../click-to-copy"));
+var _node = require("../../contexts/node");
+var _util = require("../../util");
+var _session = require("../../contexts/session");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+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 TransferMember(_ref) {
+  let {
+    teamDid,
+    onCancel,
+    onSuccess,
+    onError,
+    endpoint
+  } = _ref;
+  const {
+    api,
+    info
+  } = (0, _node.useNodeContext)();
+  const {
+    api: sessionAPI
+  } = (0, _react.useContext)(_session.SessionContext);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const {
+    locale
+  } = (0, _context.useLocaleContext)();
+  const [error, setError] = (0, _react.useState)('');
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [openTransferNFTAuth, setOpenTransferNFTAuth] = (0, _react.useState)(false);
+  const [activeStep, setActiveStep] = (0, _react.useState)(0);
+  const [inviteInfo, setInviteInfo] = (0, _react.useState)('');
+  const [remark, setRemark] = (0, _react.useState)('');
+  const needTransferNFT = !!(0, _get.default)(info, 'ownerNft.did');
+  const delegationState = (0, _useAsync.default)(async () => {
+    if (needTransferNFT) {
+      const {
+        state
+      } = await api.getDelegationState();
+      return state;
+    }
+    return {
+      delegated: true
+    };
+  });
+  if (delegationState.loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+      title: t('team.transferNode.inviteDialog.title'),
+      fullWidth: true,
+      open: true,
+      onClose: onCancel,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'center'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
+      })
+    });
+  }
+  if (delegationState.error) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+      title: t('team.transferNode.inviteDialog.title'),
+      fullWidth: true,
+      open: true,
+      onClose: onCancel,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+        type: "error",
+        variant: "icon",
+        children: (0, _util.formatError)(delegationState.error)
+      })
+    });
+  }
+  const onCreate = async () => {
+    setError(null);
+    setLoading(true);
+    try {
+      const {
+        inviteInfo: tmpInviteInfo
+      } = await api.createTransferInvitation({
+        input: {
+          teamDid,
+          role: 'owner',
+          remark: remark.trim()
+        }
+      });
+      setInviteInfo(tmpInviteInfo);
+      setActiveStep(steps.length - 1); // 跳转到最后一步
+    } catch (err) {
+      const errMsg = (0, _util.formatError)(err);
+      setError(errMsg);
+      onError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleTransferNFT = () => {
+    setOpenTransferNFTAuth(true);
+    setActiveStep(1);
+  };
+  const handleCancelTransferNFT = () => {
+    setOpenTransferNFTAuth(false);
+    setActiveStep(0);
+  };
+  const steps = [{
+    body: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+      component: "div",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Alert.default, {
+        type: "warning",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          children: t('team.transferNode.inviteDialog.tips.progress')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          children: t('team.transferNode.inviteDialog.tips.newOwnerPermissions')
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+        type: "warning",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          children: t('team.transferNode.inviteDialog.tips.revoke')
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginTop: 20,
+          marginBottom: 10
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        label: t('common.remark'),
+        autoComplete: "off",
+        variant: "outlined",
+        fullWidth: true,
+        style: {
+          marginBottom: 8
+        },
+        value: remark,
+        onChange: e => {
+          setError(null);
+          setRemark(e.target.value);
+        },
+        disabled: loading,
+        "data-cy": "transfer-node-input-remark"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginTop: 20,
+          marginBottom: 10
+        }
+      })]
+    }),
+    cancel: t('common.cancel'),
+    confirm: t('team.transferNode.inviteDialog.createInviteLink'),
+    onCancel,
+    onConfirm: needTransferNFT && !(0, _get.default)(delegationState, 'value.delegated') ? handleTransferNFT : onCreate
+  }, {
+    body: () => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
+        action: "delegate-transfer-nft",
+        open: openTransferNFTAuth,
+        locale: locale,
+        checkFn: sessionAPI.get,
+        onClose: handleCancelTransferNFT,
+        onSuccess: onCreate,
+        checkTimeout: 5 * 60 * 1000,
+        webWalletUrl: (0, _util.getWebWalletUrl)(info),
+        extraParams: {
+          targetDID: info.did
+        },
+        messages: {
+          title: t('team.transferNode.delegateDialog.title'),
+          scan: t('team.transferNode.delegateDialog.scan'),
+          confirm: t('team.transferNode.delegateDialog.confirm'),
+          success: t('team.transferNode.delegateDialog.success')
+        },
+        popup: true
+      });
+    }
+  }, {
+    body: () => {
+      const link = (0, _util.getInviteLink)({
+        inviteId: inviteInfo.inviteId,
+        endpoint
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Bold, {
+          children: t('team.transferNode.inviteDialog.createSuccessTip', {
+            expireDate: (0, _util.formatToDatetime)(inviteInfo.expireDate)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            marginTop: '40px'
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickToCopy.default, {
+          children: link
+        })]
+      });
+    },
+    confirm: t('common.confirm'),
+    onConfirm: onSuccess
+  }];
+  const step = steps[activeStep];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+    title: t('team.transferNode.inviteDialog.title'),
+    fullWidth: true,
+    open: true,
+    showCloseButton: false,
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [step.cancel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: step.onCancel,
+        color: "inherit",
+        children: step.cancel
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        onClick: step.onConfirm,
+        color: "primary",
+        disabled: loading,
+        variant: "contained",
+        autoFocus: true,
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+          size: 16
+        }), step.confirm]
+      })]
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+      component: "div",
+      children: typeof step.body === 'function' ? step.body() : step.body
+    }), !!error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+      type: "error",
+      variant: "icon",
+      children: error
+    })]
+  });
+}
+TransferMember.propTypes = {
+  teamDid: _propTypes.default.string.isRequired,
+  onCancel: _propTypes.default.func.isRequired,
+  onSuccess: _propTypes.default.func.isRequired,
+  onError: _propTypes.default.func,
+  endpoint: _propTypes.default.string
+};
+TransferMember.defaultProps = {
+  onError: () => {},
+  endpoint: ''
+};
+const Bold = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 16px;\n  font-weight: bold;\n"])));

package/lib/team/members/util.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseAvatar = parseAvatar;
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _constant = require("@abtnode/constant");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// eslint-disable-next-line import/prefer-default-export
+function parseAvatar(avatar, teamDid, inService) {
+  if (avatar && avatar.startsWith(_constant.USER_AVATAR_URL_PREFIX)) {
+    const prefix = window.env.apiPrefix || '/';
+    if (inService) {
+      return (0, _urlJoin.default)(prefix, _constant.USER_AVATAR_PATH_PREFIX, avatar.replace(_constant.USER_AVATAR_URL_PREFIX, ''));
+    }
+    return (0, _urlJoin.default)(prefix, _constant.USER_AVATAR_PATH_PREFIX, teamDid, avatar.replace(_constant.USER_AVATAR_URL_PREFIX, ''));
+  }
+  return avatar;
+}

package/lib/team/passports/color.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PassportColorWithPermission;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _reactColor = require("react-color");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _createPassportSvg = _interopRequireDefault(require("@abtnode/auth/lib/util/create-passport-svg"));
+var _util = require("@blocklet/meta/lib/util");
+var _passportColor = require("@abtnode/auth/lib/util/passport-color");
+var _constant = require("@blocklet/constant");
+var _toast = _interopRequireDefault(require("../../toast"));
+var _node = require("../../contexts/node");
+var _blocklet = require("../../contexts/blocklet");
+var _util2 = require("../../util");
+var _permission = require("../../permission");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 PassportColor(_ref) {
+  let {
+    onCancel,
+    onSuccess
+  } = _ref;
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const curColor = (blocklet.environments.find(x => x.key === 'BLOCKLET_PASSPORT_COLOR') || {}).value || 'auto';
+  const defaultColor = curColor === 'auto' ? (0, _passportColor.getPassportColorFromDid)(blocklet.appDid) : curColor;
+  const [color, setColor] = (0, _react.useState)(defaultColor);
+  const onSubmit = async () => {
+    const params = [{
+      key: _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_PASSPORT_COLOR,
+      value: color
+    }];
+    try {
+      setLoading(true);
+      await api.configBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          configs: params
+        }
+      });
+      onSuccess();
+    } catch (err) {
+      _toast.default.error(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+    title: t('team.passport.color'),
+    onClose: onCancel,
+    open: true,
+    fullWidth: true,
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: onCancel,
+        color: "inherit",
+        children: t('common.cancel')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        onClick: onSubmit,
+        color: "primary",
+        disabled: loading,
+        variant: "contained",
+        autoFocus: true,
+        "data-cy": "color-btn-confirm",
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+          size: 16
+        }), t('common.save')]
+      })]
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      className: "dialog-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColor.ChromePicker, {
+        color: color,
+        onChange: c => setColor(c.hex)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        style: {
+          width: 96,
+          marginLeft: 48
+        },
+        alt: "",
+        src: (0, _createPassportSvg.default)({
+          title: 'Owner',
+          issuer: (0, _util.getDisplayName)(blocklet),
+          issuerDid: blocklet.appDid,
+          ownerName: 'Your Name',
+          isDataUrl: true,
+          preferredColor: color
+        })
+      })]
+    })
+  });
+}
+const PassportColorInDaemon = (0, _permission.withPermission)(PassportColor, 'mutate_team');
+const PassportColorInService = (0, _permission.withPermission)(PassportColor, '', _util2.BlockletAdminRoles);
+function PassportColorWithPermission(props) {
+  const {
+    inService
+  } = (0, _node.useNodeContext)();
+  if (inService) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PassportColorInService, _objectSpread({}, props));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PassportColorInDaemon, _objectSpread({}, props));
+}
+PassportColor.propTypes = {
+  onCancel: _propTypes.default.func.isRequired,
+  onSuccess: _propTypes.default.func.isRequired
+};
+PassportColor.defaultProps = {};

package/lib/team/passports/detail.js

@@ -0,0 +1,271 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PassportDetailWithPermission;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _EditIcon = _interopRequireDefault(require("@arcblock/icons/lib/EditIcon"));
+var _DeleteIcon = _interopRequireDefault(require("@arcblock/icons/lib/DeleteIcon"));
+var _toast = _interopRequireDefault(require("../../toast"));
+var _node = require("../../contexts/node");
+var _team = require("../../contexts/team");
+var _util = require("../../util");
+var _permission = require("../../permission");
+var _confirm = _interopRequireDefault(require("../../confirm"));
+var _mutateRole = _interopRequireDefault(require("./mutate-role"));
+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) } })); }
+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 PassportDetail(_ref) {
+  let {
+    onCancel,
+    onSuccess,
+    onDelete,
+    roleName,
+    hasPermission
+  } = _ref;
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const {
+    roles,
+    permissions,
+    teamDid,
+    refresh: refreshTeam,
+    isNodeTeam
+  } = (0, _team.useTeamContext)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [binds, setBinds] = (0, _react.useState)([]);
+  const [updateForm, setUpdateForm] = (0, _react.useState)(false);
+  const [delConfirm, setDelConfirm] = (0, _react.useState)(null);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const role = (0, _cloneDeep.default)(roles.find(x => x.name === roleName));
+  const isProtected = (0, _util.isProtectedRole)(roleName);
+  const deletePassport = async name => {
+    if (loading) return;
+    try {
+      setLoading(true);
+      await api.deleteRole({
+        input: {
+          teamDid,
+          name
+        }
+      });
+      onDelete();
+    } catch (err) {
+      _toast.default.error(err.message);
+    } finally {
+      setLoading(false);
+      setDelConfirm(null);
+    }
+  };
+  const getData = async (team, name) => {
+    const res = await api.getPermissionsByRole({
+      input: {
+        teamDid: team,
+        role: {
+          name
+        }
+      }
+    });
+    const permissionList = res.permissions || [];
+    const bindList = permissions.map(x => _objectSpread(_objectSpread({}, x), {}, {
+      bind: permissionList.some(y => y.name === x.name)
+    }));
+    setBinds(bindList);
+  };
+  const onBind = async () => {
+    setLoading(true);
+    const grantNames = binds.filter(x => x.bind).map(x => x.name);
+    try {
+      await api.updatePermissionsForRole({
+        input: {
+          teamDid,
+          roleName: role.name,
+          grantNames
+        }
+      });
+      _toast.default.success(t('common.saveSuccess'));
+      onSuccess();
+    } catch (err) {
+      _toast.default.error((0, _util.formatError)(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    if (teamDid && roleName) {
+      getData(teamDid, roleName);
+    }
+  }, [teamDid, roleName]); // eslint-disable-line
+
+  const readPermissionsOnly = isNodeTeam || !hasPermission;
+  let bindPermission = null;
+  if (isNodeTeam) {
+    bindPermission = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "bind",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "title",
+        children: t('common.permission')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "list",
+        children: binds
+        // if readonly, show obtained permissions only
+        .filter(x => readPermissionsOnly ? x.bind : true).map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "item",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+            control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+              disabled: readPermissionsOnly,
+              checked: x.bind,
+              onChange: () => {
+                setBinds(state => state.map(y => {
+                  if (y.name === x.name) {
+                    y.bind = !y.bind;
+                  }
+                  return y;
+                }));
+              },
+              name: x.name
+            }),
+            label: x.description
+          })
+        }))
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+    title: t('common.passport'),
+    onClose: onCancel,
+    open: true,
+    fullWidth: true,
+    toolbar: hasPermission && !isProtected && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        onClick: () => setUpdateForm(role),
+        "data-cy": "edit-passport-".concat(role.name),
+        size: "large",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditIcon.default, {
+          fill: "#bfbfbf"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        onClick: () => setDelConfirm({
+          title: t('team.passport.delete.title'),
+          description: t('team.passport.delete.description', {
+            name: role.title
+          }),
+          confirm: t('common.delConfirm'),
+          cancel: t('common.cancel'),
+          onConfirm: () => {
+            deletePassport(role.name);
+          },
+          onCancel: () => {
+            setLoading(false);
+            setDelConfirm(null);
+          }
+        }),
+        "data-cy": "delete-passport-".concat(role.name),
+        size: "large",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteIcon.default, {
+          "data-cy": "close-passport-dialog",
+          fill: "#bfbfbf"
+        })
+      })]
+    }),
+    actions: isNodeTeam && !readPermissionsOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: onCancel,
+        color: "inherit",
+        children: t('common.cancel')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        onClick: onBind,
+        color: "primary",
+        disabled: loading || !role,
+        variant: "contained",
+        autoFocus: true,
+        "data-cy": "bind-permission-btn-confirm",
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+          size: 16
+        }), t('common.save')]
+      })]
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+      children: [!role && /*#__PURE__*/(0, _jsxRuntime.jsx)(Center, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
+      }), role && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dialog-content",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "header",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "title",
+            children: role.title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "description",
+            style: {
+              marginTop: isNodeTeam ? 16 : 48
+            },
+            children: role.description
+          })]
+        }), bindPermission]
+      })]
+    }), updateForm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_mutateRole.default, {
+      teamDid: teamDid,
+      onCancel: () => setUpdateForm(null),
+      onSuccess: () => {
+        setUpdateForm(null);
+        refreshTeam();
+      },
+      mode: "update",
+      roleName: updateForm.name,
+      item: updateForm
+    }), delConfirm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+      title: delConfirm.title,
+      description: delConfirm.description,
+      confirm: delConfirm.confirm,
+      cancel: delConfirm.cancel,
+      params: delConfirm.params,
+      onConfirm: delConfirm.onConfirm,
+      onCancel: delConfirm.onCancel
+    })]
+  });
+}
+const PassportDetailInDaemon = (0, _permission.withPermission)(PassportDetail, 'mutate_team');
+const PassportDetailInService = (0, _permission.withPermission)(PassportDetail, '', _util.BlockletAdminRoles);
+function PassportDetailWithPermission(props) {
+  const {
+    inService
+  } = (0, _node.useNodeContext)();
+  if (inService) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PassportDetailInService, _objectSpread({}, props));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PassportDetailInDaemon, _objectSpread({}, props));
+}
+PassportDetail.propTypes = {
+  roleName: _propTypes.default.string.isRequired,
+  onCancel: _propTypes.default.func.isRequired,
+  onSuccess: _propTypes.default.func.isRequired,
+  onDelete: _propTypes.default.func.isRequired,
+  hasPermission: _propTypes.default.bool
+};
+PassportDetail.defaultProps = {
+  hasPermission: false
+};
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .header {\n    .title {\n      font-weight: 400;\n      font-size: 24px;\n      line-height: 28px;\n      color: #222222;\n    }\n\n    .description {\n      margin-top: 16px;\n      font-weight: 400;\n      font-size: 16px;\n      line-height: 19px;\n      color: #999999;\n    }\n  }\n\n  .bind {\n    margin-top: 24px;\n    .title {\n      font-weight: 400;\n      font-size: 16px;\n      line-height: 19px;\n      color: #666666;\n      margin-bottom: 24px;\n    }\n    .item {\n      margin-top: 24px;\n    }\n\n    .MuiFormControlLabel-label {\n      font-weight: 400;\n      font-size: 16px;\n      line-height: 19px;\n      color: #666;\n    }\n\n    .PrivateSwitchBase-root-45 {\n      padding: 0;\n      padding-right: 12px;\n    }\n  }\n"])));
+const Center = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 200px;\n"])));