@abtnode/ux 1.8.26 → 1.8.27

package/lib/team/passports/index.js

@@ -0,0 +1,256 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PassportList;
+
+var _react = require("react");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+
+var _SplitButton = _interopRequireDefault(require("@arcblock/ux/lib/SplitButton"));
+
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+
+var _EditIcon = _interopRequireDefault(require("@arcblock/icons/lib/EditIcon"));
+
+var _LockIcon = _interopRequireDefault(require("@arcblock/icons/lib/LockIcon"));
+
+var _ExternalIssuerIcon = _interopRequireDefault(require("@arcblock/icons/lib/ExternalIssuerIcon"));
+
+var _createPassportSvg = _interopRequireDefault(require("@abtnode/auth/lib/util/create-passport-svg"));
+
+var _toast = _interopRequireDefault(require("../../toast"));
+
+var _node = require("../../contexts/node");
+
+var _team = require("../../contexts/team");
+
+var _util = require("../../util");
+
+var _permission = _interopRequireDefault(require("../../permission"));
+
+var _searchInput = _interopRequireDefault(require("../search-input"));
+
+var _listHeader = _interopRequireDefault(require("../styles/list-header"));
+
+var _detail = _interopRequireDefault(require("./detail"));
+
+var _mutateRole = _interopRequireDefault(require("./mutate-role"));
+
+var _trustedIssuers = _interopRequireDefault(require("./trusted-issuers"));
+
+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 PassportList() {
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const {
+    api,
+    info: nodeInfo,
+    inService
+  } = (0, _node.useNodeContext)();
+  const {
+    roles,
+    teamDid,
+    teamIssuerDid,
+    teamName,
+    refresh: refreshTeam,
+    enablePassportIssuance,
+    passportColor
+  } = (0, _team.useTeamContext)();
+  const [showCreate, setShowCreate] = (0, _react.useState)(false);
+  const [updateForm, setUpdateForm] = (0, _react.useState)(false);
+  const [showTrustedIssuers, setShowTrustedIssuers] = (0, _react.useState)(null);
+  const [search, setSearch] = (0, _react.useState)('');
+  const [loading, setLoading] = (0, _react.useState)(false);
+
+  const toggleShowIssue = async () => {
+    if (loading) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await api.configPassportIssuance({
+        input: {
+          teamDid,
+          enable: !enablePassportIssuance
+        }
+      });
+      refreshTeam();
+      await (0, _util.sleep)(800);
+
+      _toast.default.success(t('common.configSuccess'));
+
+      setLoading(false);
+    } catch (error) {
+      _toast.default.error(error.message);
+
+      setLoading(false);
+    }
+  };
+
+  const filteredRoles = roles.filter(x => !search || x.title.includes(search) || x.name.includes(search));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_listHeader.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "left",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_searchInput.default, {
+          placeholder: t('team.passport.search'),
+          value: search,
+          onChange: e => setSearch(e.target.value)
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "right",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_permission.default, {
+          permission: inService ? '' : 'mutate_team',
+          role: inService ? _util.BlockletAdminRoles : [],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SplitButton.default, {
+            variant: "outlined",
+            menuButtonProps: {
+              'data-cy': 'trusted-issuers-more'
+            },
+            menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SplitButton.default.Item, {
+              "data-cy": "config-show-issue-passport",
+              onClick: () => {
+                toggleShowIssue();
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+                display: "flex",
+                alignItems: "center",
+                children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+                  size: [16, 10],
+                  style: {
+                    marginRight: 8
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+                  children: [enablePassportIssuance ? t('team.passport.disableIssuance') : t('team.passport.enableIssuance'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                    fontSize: 12,
+                    color: "#888",
+                    children: enablePassportIssuance ? t('team.passport.disableIssuanceTip') : t('team.passport.enableIssuanceTip')
+                  })]
+                })]
+              })
+            }),
+            children: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+              variant: "outlined",
+              "data-cy": "config-trusted-issuers",
+              onClick: () => {
+                setShowTrustedIssuers(true);
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ExternalIssuerIcon.default, {
+                style: {
+                  fontSize: 16,
+                  marginRight: 4
+                }
+              }), t('team.passport.trustedPassportIssuers')]
+            })
+          }), (inService || nodeInfo.did !== teamDid) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+            style: {
+              marginLeft: 16
+            },
+            variant: "contained",
+            edge: "end",
+            color: "primary",
+            "data-cy": "create-role",
+            onClick: () => setShowCreate(true),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+              style: {
+                fontSize: 16,
+                marginRight: 4
+              }
+            }), t('team.add')]
+          })]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: 3
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: "list",
+      children: filteredRoles.map(role => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        "data-cy": "passport-".concat(role.name),
+        className: "item",
+        display: "flex",
+        alignItems: "center",
+        onClick: () => setUpdateForm(role),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          display: "flex",
+          alignItems: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            style: {
+              width: 120
+            },
+            alt: "",
+            src: (0, _createPassportSvg.default)({
+              title: role.title,
+              issuer: teamName,
+              issuerDid: teamIssuerDid,
+              ownerName: 'Your Name',
+              isDataUrl: true,
+              preferredColor: passportColor
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            ml: 3,
+            className: "title",
+            children: role.title
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          className: "description",
+          children: role.description
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+          permission: inService ? '' : 'mutate_team',
+          role: inService ? _util.BlockletAdminRoles : [],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "action",
+            children: (0, _util.isProtectedRole)(role.name) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LockIcon.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditIcon.default, {})
+          })
+        })]
+      }, role.name))
+    }), showCreate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_mutateRole.default, {
+      teamDid: teamDid,
+      onCancel: () => setShowCreate(false),
+      onSuccess: () => {
+        setShowCreate(false);
+        refreshTeam();
+      }
+    }), updateForm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_detail.default, {
+      onCancel: () => setUpdateForm(null),
+      onSuccess: () => {
+        setUpdateForm(null);
+        refreshTeam();
+      },
+      onDelete: () => {
+        setUpdateForm(null);
+        refreshTeam();
+      },
+      mode: "update",
+      roleName: updateForm.name,
+      item: updateForm
+    }), showTrustedIssuers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_trustedIssuers.default, {
+      onCancel: () => setShowTrustedIssuers(false)
+    })]
+  });
+}
+
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .list {\n    .item {\n      padding: 12px;\n      margin: 12px -12px;\n      cursor: pointer;\n      transition: box-shadow 0.4s;\n      &:hover {\n        box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);\n      }\n    }\n\n    .title {\n      font-weight: 400;\n      font-size: 18px;\n      width: 80px;\n      line-height: 21px;\n      color: #222222;\n    }\n\n    .description {\n      flex: 1;\n      margin-left: 64px;\n      color: #999999;\n    }\n\n    .action {\n      color: #bfbfbf;\n      fill: #bfbfbf;\n    }\n  }\n"])));
+
+PassportList.propTypes = {};
+PassportList.defaultProps = {};

package/lib/team/passports/mutate-role.js

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MutateRole;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _md = _interopRequireDefault(require("md5"));
+
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
+
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+
+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 _node = require("../../contexts/node");
+
+var _util = require("../../util");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function MutateRole(_ref) {
+  let {
+    teamDid,
+    onCancel,
+    onSuccess,
+    onError,
+    mode,
+    item
+  } = _ref;
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [error, setError] = (0, _react.useState)('');
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [title, setTitle] = (0, _react.useState)(item.title || '');
+  const [description, setDescription] = (0, _react.useState)(item.description || '');
+
+  const onCreate = async () => {
+    const _title = title.trim();
+
+    if (!_title) {
+      setError(t('team.passport.error.titleEmpty'));
+      return;
+    }
+
+    if (_title.length > 64) {
+      setError(t('team.passport.error.titleTooLong', {
+        length: 64
+      }));
+      return;
+    }
+
+    const desc = description.replace(/\n/g, ' ');
+
+    if (!desc) {
+      setError(t('team.passport.error.descriptionEmpty'));
+      return;
+    }
+
+    const name = mode === 'create' ? (0, _md.default)(_title) : item.name;
+    setError(null);
+    setLoading(true);
+
+    try {
+      if (mode === 'create') {
+        await api.createRole({
+          input: {
+            teamDid,
+            name,
+            title: _title,
+            description: desc
+          }
+        });
+      } else {
+        await api.updateRole({
+          input: {
+            teamDid,
+            role: {
+              name,
+              title: _title,
+              description: desc
+            }
+          }
+        });
+      }
+
+      onSuccess();
+    } catch (err) {
+      const errMsg = (0, _util.formatError)(err);
+      setError(errMsg);
+      onError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const body = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [mode === 'update' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      component: "div",
+      style: {
+        paddingTop: 24
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        label: "ID",
+        autoComplete: "off",
+        variant: "outlined",
+        name: "url",
+        "data-cy": "mutate-role-input-name",
+        fullWidth: true,
+        autoFocus: true,
+        value: item.name,
+        disabled: true
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      component: "div",
+      style: {
+        marginTop: 24
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        label: t('common.title'),
+        autoComplete: "off",
+        variant: "outlined",
+        name: "title",
+        "data-cy": "mutate-role-input-title",
+        fullWidth: true,
+        autoFocus: true,
+        value: title,
+        onChange: e => {
+          setError(null);
+          setTitle(e.target.value);
+        },
+        disabled: mode === 'update' || loading,
+        helperText: t('team.passport.create.titleTip')
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      component: "div",
+      style: {
+        marginTop: 24,
+        marginBottom: 24
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        label: t('common.description'),
+        autoComplete: "off",
+        variant: "outlined",
+        name: "description",
+        "data-cy": "mutate-role-input-description",
+        fullWidth: true,
+        autoFocus: true,
+        value: description,
+        onChange: e => {
+          setError(null);
+          setDescription(e.target.value);
+        },
+        disabled: loading,
+        multiline: true,
+        rows: 3
+      })
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+    title: mode === 'create' ? t('team.passport.create.title') : '',
+    fullWidth: true,
+    open: true,
+    onClose: onCancel,
+    showCloseButton: false,
+    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, {
+        "data-cy": "mutate-role-confirm",
+        onClick: onCreate,
+        color: "primary",
+        disabled: loading,
+        variant: "contained",
+        autoFocus: true,
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          size: [16, 10]
+        }), mode === 'create' ? t('common.create') : t('common.update')]
+      })]
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+      component: "div",
+      children: body
+    }), !!error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+      type: "error",
+      variant: "icon",
+      style: {
+        width: '100%',
+        margin: 0
+      },
+      children: error
+    })]
+  });
+}
+
+MutateRole.propTypes = {
+  teamDid: _propTypes.default.string.isRequired,
+  onCancel: _propTypes.default.func.isRequired,
+  onSuccess: _propTypes.default.func.isRequired,
+  onError: _propTypes.default.func,
+  mode: _propTypes.default.oneOf(['create', 'update']),
+  item: _propTypes.default.object
+};
+MutateRole.defaultProps = {
+  onError: () => {},
+  mode: 'create',
+  item: {}
+};