@abtnode/ux 1.16.14-beta-c308dc3b → 1.16.14-beta-963cb583

package/es/team/members/invitations.js

@@ -0,0 +1,188 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useContext, useState } from 'react';
+import styled from '@emotion/styled';
+import DeleteIcon from '@mui/icons-material/Delete';
+import CircularProgress from '@mui/material/CircularProgress';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import Empty from '@arcblock/ux/lib/Empty';
+import Datatable from '@arcblock/ux/lib/Datatable';
+import RelativeTime from '@arcblock/ux/lib/RelativeTime';
+import { useNodeContext } from '../../contexts/node';
+import { useTeamContext } from '../../contexts/team';
+import Confirm from '../../confirm';
+import Permission from '../../permission';
+import ClickToCopy from '../../click-to-copy';
+import { sleep, getInviteLink, BlockletAdminRoles } from '../../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Invitations() {
+  const {
+    api: client,
+    inService
+  } = useNodeContext();
+  const {
+    t,
+    locale
+  } = useContext(LocaleContext);
+  const {
+    teamDid,
+    invitations,
+    refresh,
+    endpoint
+  } = useTeamContext();
+  const [delConfirm, setDelConfirm] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const deleteInvitation = async ({
+    inviteId
+  }) => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      await client.deleteInvitation({
+        input: {
+          teamDid,
+          inviteId
+        }
+      });
+      refresh();
+      await 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 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__*/_jsx(CircularProgress, {
+            size: 16
+          });
+        }
+        return /*#__PURE__*/_jsx(ClickToCopy, {
+          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, {
+        rowIndex
+      }) => {
+        const d = invitations[rowIndex];
+        return d?.inviter?.fullName;
+      }
+    }
+  }, {
+    label: t('common.expires'),
+    name: 'expireDate',
+    options: {
+      customBodyRender: e => {
+        return /*#__PURE__*/_jsx(RelativeTime, {
+          value: e,
+          locale: locale
+        });
+      }
+    }
+  }, {
+    label: t('common.actions'),
+    name: '',
+    width: 100,
+    align: 'center',
+    options: {
+      sort: false,
+      customBodyRenderLite: rawIndex => {
+        const item = invitations[rawIndex];
+        return /*#__PURE__*/_jsx(Permission, {
+          permission: inService ? '' : 'mutate_team',
+          role: inService ? BlockletAdminRoles : [],
+          children: /*#__PURE__*/_jsxs(Button, {
+            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__*/_jsx(DeleteIcon, {
+              style: {
+                fontSize: '1.2em'
+              }
+            }), t('common.delete')]
+          })
+        });
+      }
+    }
+  }];
+  return /*#__PURE__*/_jsxs(Div, {
+    children: [invitations.length ? /*#__PURE__*/_jsx(Datatable, {
+      locale: locale,
+      data: [...invitations],
+      columns: columns,
+      verticalKeyWidth: 100,
+      options: {
+        download: false,
+        filter: false,
+        print: false
+      }
+    }) : /*#__PURE__*/_jsx(Empty, {
+      children: t('common.empty')
+    }), delConfirm && /*#__PURE__*/_jsx(Confirm, {
+      title: delConfirm.title,
+      description: delConfirm.description,
+      confirm: delConfirm.confirm,
+      cancel: delConfirm.cancel,
+      params: delConfirm.params,
+      onConfirm: delConfirm.onConfirm,
+      onCancel: delConfirm.onCancel
+    })]
+  });
+}
+const Div = styled.div`
+  margin-top: -20px;
+`;
+Invitations.propTypes = {};
+Invitations.defaultProps = {};

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

@@ -0,0 +1,208 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Spinner from '@mui/material/CircularProgress';
+import DialogContentText from '@mui/material/DialogContentText';
+import Typography from '@mui/material/Typography';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import TextField from '@mui/material/TextField';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import Alert from '@arcblock/ux/lib/Alert';
+import ClickToCopy from '../../click-to-copy';
+import { useNodeContext } from '../../contexts/node';
+import { formatError, getInviteLink, formatToDatetime } from '../../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function InviteMember({
+  teamDid,
+  roles,
+  onCancel,
+  onSuccess,
+  onError,
+  endpoint
+}) {
+  const {
+    api
+  } = useNodeContext();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const [activeStep, setActiveStep] = useState(0);
+  const [inviteInfo, setInviteInfo] = useState('');
+  const [role, setRole] = useState('');
+  const [remark, setRemark] = 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 = formatError(err);
+      setError(errMsg);
+      onError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const steps = [{
+    body: /*#__PURE__*/_jsxs(Typography, {
+      component: "div",
+      children: [/*#__PURE__*/_jsxs(FormControl, {
+        style: {
+          width: '100%'
+        },
+        variant: "outlined",
+        children: [/*#__PURE__*/_jsx(InputLabel, {
+          children: t('common.passport')
+        }), /*#__PURE__*/_jsx(Select, {
+          "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__*/_jsx(MenuItem, {
+            value: r.name,
+            "data-cy": `invite-member-select-option-${r.name}`,
+            children: /*#__PURE__*/_jsx("span", {
+              children: r.title || r.name
+            })
+          }, r.name))
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          marginTop: 20,
+          marginBottom: 10
+        }
+      }), /*#__PURE__*/_jsx(TextField, {
+        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__*/_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 = getInviteLink({
+        inviteId: inviteInfo.inviteId,
+        endpoint
+      });
+      return /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx(Bold, {
+          children: t('team.member.inviteDialog.createSuccessTip', {
+            expireDate: formatToDatetime(inviteInfo.expireDate, locale)
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          style: {
+            marginTop: '40px'
+          }
+        }), /*#__PURE__*/_jsx(ClickToCopy, {
+          children: link
+        })]
+      });
+    },
+    confirm: t('common.confirm'),
+    onConfirm: onSuccess
+  }];
+  const step = steps[activeStep];
+  return /*#__PURE__*/_jsxs(Dialog, {
+    title: t('common.invite'),
+    fullWidth: true,
+    open: true,
+    showCloseButton: false,
+    actions: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [step.cancel && /*#__PURE__*/_jsx(Button, {
+        onClick: step.onCancel,
+        color: "inherit",
+        children: step.cancel
+      }), /*#__PURE__*/_jsxs(Button, {
+        onClick: step.onConfirm,
+        color: "primary",
+        disabled: loading || !role,
+        variant: "contained",
+        autoFocus: true,
+        children: [loading && /*#__PURE__*/_jsx(Spinner, {
+          size: 16
+        }), step.confirm]
+      })]
+    }),
+    children: [/*#__PURE__*/_jsx(DialogContentText, {
+      component: "div",
+      children: typeof step.body === 'function' ? step.body() : step.body
+    }), !!error && /*#__PURE__*/_jsx(Alert, {
+      type: "error",
+      variant: "icon",
+      children: error
+    })]
+  });
+}
+InviteMember.propTypes = {
+  teamDid: PropTypes.string.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired,
+  onError: PropTypes.func,
+  roles: PropTypes.array,
+  endpoint: PropTypes.string
+};
+InviteMember.defaultProps = {
+  onError: () => {},
+  roles: [],
+  endpoint: ''
+};
+const Bold = styled.div`
+  font-size: 16px;
+  font-weight: bold;
+`;

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

@@ -0,0 +1,152 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Spinner from '@mui/material/CircularProgress';
+import DialogContentText from '@mui/material/DialogContentText';
+import Typography from '@mui/material/Typography';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import Alert from '@arcblock/ux/lib/Alert';
+import { useNodeContext } from '../../contexts/node';
+import { formatError } from '../../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function IssuePassport({
+  teamDid,
+  ownerDid,
+  needReceive,
+  roles,
+  onCancel,
+  onSuccess,
+  onError,
+  showOwnerPassport
+}) {
+  const {
+    api
+  } = useNodeContext();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const {
+    t
+  } = useLocaleContext();
+  const [role, setRole] = 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 = formatError(err);
+      setError(errMsg);
+      onError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Dialog, {
+    title: t('team.passport.issue'),
+    fullWidth: true,
+    open: true,
+    onClick: e => e.stopPropagation(),
+    onClose: onCancel,
+    disableEscapeKeyDown: true,
+    PaperProps: {
+      style: {
+        minHeight: 'auto'
+      }
+    },
+    actions: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: onCancel,
+        color: "inherit",
+        size: "small",
+        children: t('common.cancel')
+      }), /*#__PURE__*/_jsxs(Button, {
+        onClick: onCreate,
+        color: "primary",
+        size: "small",
+        disabled: loading || !role,
+        variant: "contained",
+        autoFocus: true,
+        "data-cy": "issue-passport-create-btn",
+        children: [loading && /*#__PURE__*/_jsx(Spinner, {
+          size: 16
+        }), needReceive ? t('team.passport.issuance.create.title') : t('oauth.issued')]
+      })]
+    }),
+    children: [/*#__PURE__*/_jsx(DialogContentText, {
+      component: "div",
+      children: /*#__PURE__*/_jsx(Typography, {
+        component: "div",
+        children: /*#__PURE__*/_jsxs(FormControl, {
+          style: {
+            width: '100%'
+          },
+          variant: "outlined",
+          children: [/*#__PURE__*/_jsx(InputLabel, {
+            children: t('common.passport')
+          }), /*#__PURE__*/_jsx(Select, {
+            "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__*/_jsx(MenuItem, {
+              value: r.name,
+              "data-cy": `issue-passport-select-option-${r.name}`,
+              children: /*#__PURE__*/_jsx("span", {
+                children: r.title || r.name
+              })
+            }, r.name))
+          })]
+        })
+      })
+    }), !!error && /*#__PURE__*/_jsx(Alert, {
+      type: "error",
+      variant: "icon",
+      children: error
+    })]
+  });
+}
+IssuePassport.propTypes = {
+  teamDid: PropTypes.string.isRequired,
+  ownerDid: PropTypes.string.isRequired,
+  needReceive: PropTypes.bool,
+  onCancel: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired,
+  onError: PropTypes.func,
+  roles: PropTypes.array,
+  showOwnerPassport: PropTypes.bool
+};
+IssuePassport.defaultProps = {
+  onError: () => {},
+  roles: [],
+  showOwnerPassport: false,
+  needReceive: true
+};