@abtnode/ux 1.8.26 → 1.8.28

package/lib/team/passports/trusted-issuer.js

@@ -0,0 +1,295 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TrustedIssuer;
+var _react = _interopRequireWildcard(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 _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _ArrowBack = _interopRequireDefault(require("@mui/icons-material/ArrowBack"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _DeleteIcon = _interopRequireDefault(require("@arcblock/icons/lib/DeleteIcon"));
+var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+var _constant = require("@abtnode/constant");
+var _toast = _interopRequireDefault(require("../../toast"));
+var _node = require("../../contexts/node");
+var _team = require("../../contexts/team");
+var _util = require("../../util");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var LongArrow = function LongArrow(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M64.707 8.707a1 1 0 0 0 0-1.414L58.343.929a1 1 0 1 0-1.414 1.414L62.586 8l-5.657 5.657a1 1 0 0 0 1.414 1.414l6.364-6.364zM0 9h64V7H0v2z",
+      fill: "#666"
+    })
+  }));
+};
+LongArrow.defaultProps = {
+  width: "65",
+  height: "16",
+  viewBox: "0 0 65 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const canSave = (issuerDid, mappings) => {
+  if (!issuerDid) {
+    return false;
+  }
+  return !mappings.some(x => !x.from.passport || !x.to.role);
+};
+function TrustedIssuer(_ref) {
+  let {
+    onCancel,
+    onSuccess,
+    data,
+    trustedPassports
+  } = _ref;
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const {
+    roles,
+    teamDid
+  } = (0, _team.useTeamContext)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [issuerDid, setIssuerDid] = (0, _react.useState)(data.issuerDid || '');
+  const [remark, setRemark] = (0, _react.useState)(data.remark || '');
+  const [mappings, setMappings] = (0, _react.useState)((0, _cloneDeep.default)(data.mappings) || []);
+  const editIndex = trustedPassports.findIndex(x => x.issuerDid === data.issuerDid);
+  const configTrustedPassports = async () => {
+    if (loading) {
+      return;
+    }
+    const item = {
+      issuerDid,
+      remark,
+      mappings
+    };
+    const trustedList = [...trustedPassports];
+    if (editIndex === -1) {
+      trustedList.unshift(item);
+    } else {
+      trustedList[editIndex] = item;
+    }
+    try {
+      setLoading(true);
+      await api.configTrustedPassports({
+        input: {
+          teamDid,
+          trustedPassports: trustedList
+        }
+      });
+      await (0, _util.sleep)(800);
+      setLoading(false);
+      _toast.default.success(t('common.saveSuccess'));
+      onSuccess();
+    } catch (err) {
+      setLoading(false);
+      _toast.default.error(err.message);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+    title: t('team.passport.trustedIssuers'),
+    open: true,
+    showCloseButton: false,
+    PaperProps: {
+      style: {
+        minHeight: '80vh'
+      }
+    },
+    fullWidth: true,
+    prepend: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      onClick: onCancel,
+      "data-cy": "trusted-issuer-close",
+      size: "large",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowBack.default, {})
+    }),
+    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: () => configTrustedPassports(),
+        color: "primary",
+        disabled: !canSave(issuerDid, mappings) || loading,
+        variant: "contained",
+        autoFocus: true,
+        "data-cy": "save-mapping",
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          size: [16, 10]
+        }), t('common.save')]
+      })]
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dialog-content",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          fullWidth: true,
+          "data-cy": "input-issuer-did",
+          placeholder: t('team.passport.issuerDid'),
+          value: issuerDid,
+          onChange: event => {
+            setIssuerDid(event.target.value);
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          style: {
+            marginTop: 16
+          },
+          fullWidth: true,
+          "data-cy": "input-issuer-remark",
+          placeholder: t('common.remark'),
+          value: remark,
+          onChange: event => {
+            setRemark(event.target.value);
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          mt: "30px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            className: "dialog-h1",
+            children: t('team.passport.mappingRule')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              variant: "outlined",
+              color: "primary",
+              "data-cy": "add-mapping",
+              onClick: () => {
+                setMappings(d => {
+                  const res = [...d];
+                  res.unshift({
+                    from: {
+                      passport: ''
+                    },
+                    to: {
+                      role: _constant.ROLES.GUEST
+                    }
+                  });
+                  return res;
+                });
+              },
+              children: t('team.add')
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          className: "list",
+          mt: -0.5,
+          children: [mappings.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            my: 3,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+              display: "flex",
+              alignItems: "center",
+              flexGrow: 1,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                flexGrow: 1,
+                flexBasis: 1,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+                  fullWidth: true,
+                  size: "small",
+                  "data-cy": "input-".concat(index, "-from"),
+                  placeholder: "Issuer\u2019s Passport Name/ID",
+                  value: item.from.passport,
+                  onChange: event => {
+                    const {
+                      value
+                    } = event.target;
+                    setMappings(d => {
+                      const res = [...d];
+                      res[index].from.passport = value;
+                      return res;
+                    });
+                  }
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                flexShrink: 0,
+                mx: 4,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LongArrow, {})
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                flexGrow: 1,
+                flexBasis: 1,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+                  fullWidth: true,
+                  size: "small",
+                  select: true,
+                  value: item.to.role,
+                  onChange: e => {
+                    setMappings(d => {
+                      const res = [...d];
+                      res[index].to.role = e.target.value;
+                      return res;
+                    });
+                  },
+                  variant: "outlined",
+                  children: roles.filter(d => d.name !== 'owner').map(r => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+                    value: r.name,
+                    "data-cy": "passport-mapping-select-option-".concat(r.name),
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      children: r.title || r.name
+                    })
+                  }, r.name))
+                })
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              flexShrink: 0,
+              ml: 4,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                onClick: () => {
+                  setMappings(d => {
+                    const res = [...d];
+                    res.splice(index, 1);
+                    return res;
+                  });
+                },
+                size: "large",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteIcon.default, {})
+              })
+            })]
+          })), !mappings.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            my: 2,
+            color: "text.secondary",
+            fontSize: "16px",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+              children: t('common.empty')
+            })
+          })]
+        })]
+      })
+    })
+  });
+}
+TrustedIssuer.propTypes = {
+  onCancel: _propTypes.default.func.isRequired,
+  onSuccess: _propTypes.default.func.isRequired,
+  trustedPassports: _propTypes.default.array,
+  data: _propTypes.default.object
+};
+TrustedIssuer.defaultProps = {
+  data: {},
+  trustedPassports: []
+};
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .dialog-h1 {\n    font-size: 18px;\n  }\n\n  .MuiOutlinedInput-root {\n    border-radius: 36px;\n    .MuiSelect-root.MuiOutlinedInput-input {\n      padding-top: 8.5px;\n      padding-bottom: 8.5px;\n    }\n  }\n\n  .list {\n    .MuiIconButton-root {\n      svg {\n        fill: #bfbfbf;\n      }\n    }\n  }\n"])));

package/lib/team/passports/trusted-issuers.js

@@ -0,0 +1,238 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TrustedIssuersWithPermission;
+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 _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
+var _EditIcon = _interopRequireDefault(require("@arcblock/icons/lib/EditIcon"));
+var _DeleteIcon = _interopRequireDefault(require("@arcblock/icons/lib/DeleteIcon"));
+var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+var _toast = _interopRequireDefault(require("../../toast"));
+var _permission = require("../../permission");
+var _node = require("../../contexts/node");
+var _team = require("../../contexts/team");
+var _util = require("../../util");
+var _confirm = _interopRequireDefault(require("../../confirm"));
+var _listHeader = _interopRequireDefault(require("../styles/list-header"));
+var _searchInput = _interopRequireDefault(require("../search-input"));
+var _trustedIssuer = _interopRequireDefault(require("./trusted-issuer"));
+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 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function TrustedIssuers(_ref) {
+  let {
+    onCancel,
+    hasPermission
+  } = _ref;
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const {
+    teamDid,
+    trustedPassports
+  } = (0, _team.useTeamContext)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [delConfirm, setDelConfirm] = (0, _react.useState)(null);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [trustedIssuer, setTrustedIssuer] = (0, _react.useState)(false);
+  const [search, setSearch] = (0, _react.useState)('');
+  const deleteTrustedIssuer = async did => {
+    if (loading) {
+      return;
+    }
+    const index = trustedPassports.findIndex(x => x.issuerDid === did);
+    if (index === -1) {
+      // should not be here
+      _toast.default.error('Cannot find passports');
+    }
+    const trustedList = [...trustedPassports];
+    trustedList.splice(index, 1);
+    try {
+      setLoading(true);
+      await api.configTrustedPassports({
+        input: {
+          teamDid,
+          trustedPassports: trustedList
+        }
+      });
+      await (0, _util.sleep)(800);
+      setLoading(false);
+      _toast.default.success(t('common.saveSuccess'));
+      setDelConfirm(false);
+    } catch (err) {
+      setLoading(false);
+      _toast.default.error(err.message);
+    }
+  };
+  const filteredIssuers = trustedPassports.filter(x => !search || x.issuerDid.toLowerCase().includes(search.toLowerCase()));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+    title: t('team.passport.trustedIssuers'),
+    open: true,
+    onClose: onCancel,
+    fullWidth: true,
+    PaperProps: {
+      style: {
+        minHeight: '80vh'
+      }
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Div, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dialog-content",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "dialog-h1",
+          children: t('team.passport.trustedPassportIssuers')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          component: _listHeader.default,
+          mt: 3,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "left",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_searchInput.default, {
+              placeholder: t('team.passport.searchIssuerDid'),
+              value: search,
+              onChange: e => setSearch(e.target.value)
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "right",
+            children: hasPermission && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+              variant: "contained",
+              color: "primary",
+              "data-cy": "add-trusted-issuer",
+              onClick: () => setTrustedIssuer({
+                mode: 'add'
+              }),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+                style: {
+                  fontSize: 16,
+                  marginRight: 4
+                }
+              }), t('team.add')]
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "list",
+          children: [filteredIssuers.map(x => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            mt: "20px",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+              flexShrink: 0,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+                copyable: false,
+                prepend: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                  display: "flex",
+                  alignItems: "center",
+                  mr: 1,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+                    did: x.issuerDid,
+                    size: 20
+                  })
+                }),
+                showDidLogo: false,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  style: {
+                    fontSize: 16
+                  },
+                  children: x.issuerDid
+                })
+              }), !!x.remark && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                pl: 3.5,
+                fontSize: 12,
+                maxWidth: "300px",
+                children: x.remark
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              color: "gray",
+              ml: "28px",
+              flexGrow: 1,
+              children: x.mappings && x.mappings.length ? "".concat(x.mappings.length, " ").concat(t('team.passport.mappingRule')) : t('team.passport.defaultRule')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                onClick: () => setTrustedIssuer({
+                  mode: 'update',
+                  data: (0, _cloneDeep.default)(x)
+                }),
+                "data-cy": "edit-mapping-rule",
+                size: "large",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditIcon.default, {})
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                "data-cy": "delete-mapping-rule",
+                onClick: () => setDelConfirm({
+                  title: t('common.delete'),
+                  description: t('common.delConfirmDescription'),
+                  confirm: t('common.delConfirm'),
+                  cancel: t('common.cancel'),
+                  onConfirm: () => deleteTrustedIssuer(x.issuerDid),
+                  onCancel: () => {
+                    setLoading(false);
+                    setDelConfirm(null);
+                  }
+                }),
+                size: "large",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteIcon.default, {})
+              })]
+            })]
+          })), !trustedPassports.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+            children: t('common.empty')
+          })]
+        })]
+      })
+    }), trustedIssuer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_trustedIssuer.default, {
+      mode: trustedIssuer.mode,
+      data: trustedIssuer.data,
+      trustedPassports: (0, _cloneDeep.default)(trustedPassports),
+      onCancel: () => setTrustedIssuer(null),
+      onSuccess: () => {
+        setTrustedIssuer(null);
+      }
+    }), 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
+    })]
+  });
+}
+TrustedIssuers.propTypes = {
+  onCancel: _propTypes.default.func.isRequired,
+  hasPermission: _propTypes.default.bool
+};
+TrustedIssuers.defaultProps = {
+  hasPermission: false
+};
+const TrustedIssuersInDaemon = (0, _permission.withPermission)(TrustedIssuers, 'mutate_team');
+const TrustedIssuersInService = (0, _permission.withPermission)(TrustedIssuers, '', _util.BlockletAdminRoles);
+function TrustedIssuersWithPermission(props) {
+  const {
+    inService
+  } = (0, _node.useNodeContext)();
+  if (inService) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(TrustedIssuersInService, _objectSpread({}, props));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TrustedIssuersInDaemon, _objectSpread({}, props));
+}
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .list {\n    .MuiIconButton-root {\n      svg {\n        fill: #bfbfbf;\n      }\n    }\n  }\n"])));

package/lib/team/search-input.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children"];
+var _templateObject;
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const SearchInput = (0, _styled.default)(_ref => {
+  let {
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, _objectSpread(_objectSpread({}, props), {}, {
+    id: "outlined-basic",
+    variant: "outlined",
+    InputProps: {
+      startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
+    },
+    size: "small",
+    children: children
+  }));
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiOutlinedInput-root {\n    color: #999;\n    &.MuiInputBase-adornedStart .MuiSvgIcon-root {\n      color: #bfbfbf;\n    }\n    opacity: 1;\n    border-radius: 36px;\n    background: #f8f8f8;\n    padding-left: 16px;\n    input {\n      padding-left: 8px;\n      font-weight: bold;\n      &::placeholder {\n        opacity: 1;\n        color: #bfbfbf;\n      }\n      padding-top: 8.5px;\n      padding-bottom: 8.5px;\n    }\n  }\n\n  .MuiOutlinedInput-notchedOutline,\n  .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,\n  .Mui-focused .MuiOutlinedInput-notchedOutline {\n    border-color: #eee;\n    border-width: 1px;\n  }\n"])));
+var _default = SearchInput;
+exports.default = _default;

package/lib/team/styles/dialog.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+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) } })); }
+const DialogStyle = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 632px;\n  height: 90vh;\n  overflow: auto;\n  @media (max-width: ", "px) {\n    width: 100%;\n    height: 100%;\n  }\n  display: flex;\n  flex-direction: column;\n\n  .dialog-header {\n    flex-shrink: 0;\n    position: sticky;\n    top: 0;\n    background: #fff;\n    z-index: 30;\n    flex: 0;\n    box-sizing: border-box;\n    width: 100%;\n    padding: 0 12px;\n    min-height: 72px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-bottom: 1px solid #f8f8f8;\n    .title {\n      color: #222;\n      font-size: 16px;\n    }\n    .left,\n    .right {\n      flex-shrink: 0;\n      flex-basis: auto;\n      width: 120px;\n    }\n    .right {\n      text-align: right;\n      svg {\n        fill: #bfbfbf;\n      }\n    }\n  }\n  .dialog-content {\n    flex-grow: 1;\n    padding: 16px 24px;\n  }\n  .dialog-actions {\n    flex-shrink: 0;\n    border-top: 1px solid #f8f8f8;\n    padding 24px;\n    position: sticky;\n    bottom: 0;\n    z-index: 20;\n    background: #fff;\n    display: flex;\n    justify-content: flex-end;\n    .MuiButton-root {\n      padding-left: 3em;\n      padding-right: 3em;\n    }\n  }\n  .dialog-h1 {\n    font-style: normal;\n    font-weight: 400;\n    font-size: 24px;\n    line-height: 28px;\n    color: #222222;\n  }\n"])), props => props.theme.breakpoints.values.md - 1);
+var _default = DialogStyle;
+exports.default = _default;

package/lib/team/styles/list-header.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+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) } })); }
+const ListHeader = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 14px;\n  .left,\n  .right {\n  }\n  .right {\n    display: flex;\n    align-items: center;\n  }\n  .tabs {\n    .MuiButton-root {\n      border: none;\n      color: #999;\n      &.active {\n        color: #222;\n      }\n    }\n  }\n\n  @media (max-width: 600px) {\n    display: block;\n    .right {\n      margin-top: 12px;\n    }\n  }\n"])));
+var _default = ListHeader;
+exports.default = _default;