@abtnode/ux 1.8.25 → 1.8.27

package/lib/team/members/invitations.js

@@ -0,0 +1,229 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Invitations;
+
+var _react = require("react");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+
+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 _Datatable = _interopRequireDefault(require("@arcblock/ux/lib/Datatable"));
+
+var _RelativeTime = _interopRequireDefault(require("@arcblock/ux/lib/RelativeTime"));
+
+var _node = require("../../contexts/node");
+
+var _team = require("../../contexts/team");
+
+var _confirm = _interopRequireDefault(require("../../confirm"));
+
+var _permission = _interopRequireDefault(require("../../permission"));
+
+var _clickToCopy = _interopRequireDefault(require("../../click-to-copy"));
+
+var _util = require("../../util");
+
+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 Invitations() {
+  const {
+    api: client,
+    inService
+  } = (0, _node.useNodeContext)();
+  const {
+    t,
+    locale
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const {
+    teamDid,
+    invitations,
+    refresh,
+    endpoint
+  } = (0, _team.useTeamContext)();
+  const [delConfirm, setDelConfirm] = (0, _react.useState)(null);
+  const [loading, setLoading] = (0, _react.useState)(false);
+
+  const deleteInvitation = async _ref => {
+    let {
+      inviteId
+    } = _ref;
+
+    if (loading) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await client.deleteInvitation({
+        input: {
+          teamDid,
+          inviteId
+        }
+      });
+      refresh();
+      await (0, _util.sleep)(800);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+      setDelConfirm(null);
+    }
+  };
+
+  const onCancel = () => {
+    setLoading(false);
+    setDelConfirm(null);
+  };
+
+  const getLink = column => {
+    if (!endpoint) {
+      return '';
+    }
+
+    return (0, _util.getInviteLink)({
+      inviteId: column.inviteId,
+      endpoint
+    });
+  };
+
+  const columns = [{
+    label: t('team.inviting.link'),
+    name: 'inviteId',
+    options: {
+      sort: false,
+      customBodyRenderLite: rawIndex => {
+        const d = invitations[rawIndex];
+
+        if (!endpoint) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+            size: 16
+          });
+        }
+
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickToCopy.default, {
+          children: getLink(d)
+        });
+      }
+    }
+  }, {
+    label: t('common.role'),
+    name: 'role',
+    widtn: 70
+  }, {
+    label: t('common.remark'),
+    name: 'remark',
+    options: {
+      customBodyRender: e => {
+        return e || '--';
+      }
+    }
+  }, {
+    label: t('team.inviting.inviter'),
+    name: 'inviter.fullName',
+    options: {
+      sort: false,
+      customBodyRender: (e, _ref2) => {
+        var _d$inviter;
+
+        let {
+          rowIndex
+        } = _ref2;
+        const d = invitations[rowIndex];
+        return d === null || d === void 0 ? void 0 : (_d$inviter = d.inviter) === null || _d$inviter === void 0 ? void 0 : _d$inviter.fullName;
+      }
+    }
+  }, {
+    label: t('common.expires'),
+    name: 'expireDate',
+    options: {
+      customBodyRender: e => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RelativeTime.default, {
+          value: e,
+          locale: locale
+        });
+      }
+    }
+  }, {
+    label: t('common.actions'),
+    name: '',
+    width: 100,
+    align: 'center',
+    options: {
+      sort: false,
+      customBodyRenderLite: rawIndex => {
+        const item = invitations[rawIndex];
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+          permission: inService ? '' : 'mutate_team',
+          role: inService ? _util.BlockletAdminRoles : [],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+            onClick: () => setDelConfirm({
+              title: t('team.inviting.delete.title'),
+              description: t('team.inviting.delete.description', {
+                link: getLink(item)
+              }),
+              confirm: t('common.delConfirm'),
+              cancel: t('common.cancel'),
+              onConfirm: () => deleteInvitation(item),
+              onCancel
+            }),
+            size: "small",
+            color: "error",
+            variant: "text",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {
+              style: {
+                fontSize: '1.2em'
+              }
+            }), t('common.delete')]
+          })
+        });
+      }
+    }
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+    children: [invitations.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datatable.default, {
+      locale: locale,
+      data: [...invitations],
+      columns: columns,
+      verticalKeyWidth: 100,
+      options: {
+        download: false,
+        filter: false,
+        print: false
+      }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+      children: t('common.empty')
+    }), 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 Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: -20px;\n"])));
+
+Invitations.propTypes = {};
+Invitations.defaultProps = {};

package/lib/team/members/invite-member.js

@@ -0,0 +1,241 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = InviteMember;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+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 _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+
+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 _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 InviteMember(_ref) {
+  let {
+    teamDid,
+    roles,
+    onCancel,
+    onSuccess,
+    onError,
+    endpoint
+  } = _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 [activeStep, setActiveStep] = (0, _react.useState)(0);
+  const [inviteInfo, setInviteInfo] = (0, _react.useState)('');
+  const [role, setRole] = (0, _react.useState)('');
+  const [remark, setRemark] = (0, _react.useState)('');
+
+  const onCreate = async () => {
+    if (!role) {
+      setError(t('team.member.error.passportEmpty'));
+      return;
+    }
+
+    const trimRemark = remark.trim();
+    setError(null);
+    setLoading(true);
+
+    try {
+      const {
+        inviteInfo: info
+      } = await api.createMemberInvitation({
+        input: {
+          teamDid,
+          role,
+          remark: trimRemark
+        }
+      });
+      setInviteInfo(info);
+      setActiveStep(1);
+    } catch (err) {
+      const errMsg = (0, _util.formatError)(err);
+      setError(errMsg);
+      onError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const steps = [{
+    body: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+      component: "div",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
+        style: {
+          width: '100%'
+        },
+        variant: "outlined",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+          children: t('common.passport')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+          "data-cy": "invite-member-select-role",
+          value: role,
+          onChange: e => {
+            setError(null);
+            setRole(e.target.value);
+          },
+          fullWidth: true,
+          label: t('common.passport'),
+          disabled: loading,
+          onKeyPress: e => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              onCreate();
+            }
+          },
+          children: roles.filter(d => d.name !== 'owner').map(r => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+            value: r.name,
+            "data-cy": "invite-member-select-option-".concat(r.name),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: r.title || r.name
+            })
+          }, r.name))
+        })]
+      }), /*#__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": "invite-member-input-remark"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginTop: 20,
+          marginBottom: 10
+        }
+      })]
+    }),
+    cancel: t('common.cancel'),
+    confirm: t('team.member.inviteDialog.createInviteLink'),
+    onCancel,
+    onConfirm: onCreate
+  }, {
+    // eslint-disable-next-line react/no-unstable-nested-components
+    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.member.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('common.invite'),
+    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 || !role,
+        variant: "contained",
+        autoFocus: true,
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          size: [16, 10]
+        }), 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
+    })]
+  });
+}
+
+InviteMember.propTypes = {
+  teamDid: _propTypes.default.string.isRequired,
+  onCancel: _propTypes.default.func.isRequired,
+  onSuccess: _propTypes.default.func.isRequired,
+  onError: _propTypes.default.func,
+  roles: _propTypes.default.array,
+  endpoint: _propTypes.default.string
+};
+InviteMember.defaultProps = {
+  onError: () => {},
+  roles: [],
+  endpoint: ''
+};
+
+const Bold = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 16px;\n  font-weight: bold;\n"])));

package/lib/team/members/issue-passport.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IssuePassport;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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 _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+
+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 IssuePassport(_ref) {
+  let {
+    teamDid,
+    ownerDid,
+    roles,
+    onCancel,
+    onSuccess,
+    onError,
+    showOwnerPassport
+  } = _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 [role, setRole] = (0, _react.useState)('');
+
+  const onCreate = async () => {
+    if (!role) {
+      setError(t('team.member.error.passportEmpty'));
+      return;
+    }
+
+    setError(null);
+    setLoading(true);
+
+    try {
+      await api.createPassportIssuance({
+        input: {
+          teamDid,
+          name: role,
+          ownerDid
+        }
+      });
+      onSuccess();
+    } catch (err) {
+      const errMsg = (0, _util.formatError)(err);
+      setError(errMsg);
+      onError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+    title: t('team.passport.issue'),
+    fullWidth: true,
+    open: true,
+    onClick: e => e.stopPropagation(),
+    onClose: onCancel,
+    disableEscapeKeyDown: true,
+    PaperProps: {
+      style: {
+        minHeight: 'auto'
+      }
+    },
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: onCancel,
+        color: "inherit",
+        size: "small",
+        children: t('common.cancel')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        onClick: onCreate,
+        color: "primary",
+        size: "small",
+        disabled: loading || !role,
+        variant: "contained",
+        autoFocus: true,
+        "data-cy": "issue-passport-create-btn",
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          size: [16, 10]
+        }), t('team.passport.issuance.create.title')]
+      })]
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+      component: "div",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        component: "div",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
+          style: {
+            width: '100%'
+          },
+          variant: "outlined",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+            children: t('common.passport')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+            "data-cy": "issue-passport-select-passport",
+            value: role,
+            onChange: e => {
+              setError(null);
+              setRole(e.target.value);
+            },
+            fullWidth: true,
+            label: t('common.passport'),
+            disabled: loading,
+            onKeyPress: e => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                onCreate();
+              }
+            },
+            children: roles.filter(d => showOwnerPassport || d.name !== 'owner').map(r => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+              value: r.name,
+              "data-cy": "issue-passport-select-option-".concat(r.name),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: r.title || r.name
+              })
+            }, r.name))
+          })]
+        })
+      })
+    }), !!error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+      type: "error",
+      variant: "icon",
+      children: error
+    })]
+  });
+}
+
+IssuePassport.propTypes = {
+  teamDid: _propTypes.default.string.isRequired,
+  ownerDid: _propTypes.default.string.isRequired,
+  onCancel: _propTypes.default.func.isRequired,
+  onSuccess: _propTypes.default.func.isRequired,
+  onError: _propTypes.default.func,
+  roles: _propTypes.default.array,
+  showOwnerPassport: _propTypes.default.bool
+};
+IssuePassport.defaultProps = {
+  onError: () => {},
+  roles: [],
+  showOwnerPassport: false
+};