@abtnode/ux 1.16.14-beta-ab7f615e → 1.16.14-beta-cb53c14b

package/es/team/members/index.js

@@ -0,0 +1,636 @@
+/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable jsx-a11y/aria-role */
+import { useContext, useState, useEffect } from 'react';
+import styled from '@emotion/styled';
+import isEmpty from 'lodash/isEmpty';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Tooltip from '@mui/material/Tooltip';
+import Box from '@mui/material/Box';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import AddIcon from '@mui/icons-material/Add';
+import LoopIcon from '@mui/icons-material/Loop';
+import Avatar from '@arcblock/did-connect/lib/Avatar';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import PersonIcon from '@arcblock/icons/lib/PersonIcon';
+import ExternalIssuerIcon from '@arcblock/icons/lib/ExternalIssuerIcon';
+import Datatable, { getDurableData } from '@arcblock/ux/lib/Datatable';
+import RelativeTime from '@arcblock/ux/lib/RelativeTime';
+import { EVENTS, USER_TYPE } from '@abtnode/constant';
+import useUrlState from '@ahooksjs/use-url-state';
+import { useMount } from 'ahooks';
+import Toast from '@arcblock/ux/lib/Toast';
+import DidAddress from '../../did-address';
+import { useNodeContext } from '../../contexts/node';
+import { useTeamContext } from '../../contexts/team';
+import { useBlockletContext } from '../../contexts/blocklet';
+import Permission from '../../permission';
+import { BlockletAdminRoles } from '../../util';
+import InviteMember from './invite-member';
+import TransferMember from './transfer-node';
+import Member from './member';
+import Invitations from './invitations';
+import Actions from './actions';
+import { parseAvatar } from './util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ROLE_ALL = '$all';
+const ROLE_NONE = '$none';
+const getCount = (counts, name) => {
+  const item = counts.find(x => x.key === name);
+  return item?.value || 0;
+};
+const isFromExternal = (user, appIdList) => {
+  const list = user.passports || [];
+  if (!list.length) {
+    return false;
+  }
+  return !list.some(z => appIdList.includes(z.issuer?.id));
+};
+function SimpleInfo({
+  user
+}) {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const main = /*#__PURE__*/_jsxs("div", {
+    className: "member-block",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "member-avatar",
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        src: `${user.avatar}?imageFilter=resize&w=48&h=48`,
+        size: 24,
+        did: user.did,
+        shape: "circle",
+        style: {
+          borderRadius: '100%',
+          overflow: 'hidden'
+        }
+      }), !user.approved && /*#__PURE__*/_jsx("did", {
+        className: "badge-block"
+      }), user.isFromExternal && /*#__PURE__*/_jsx(Tooltip, {
+        title: t('team.passport.externalPassport'),
+        children: /*#__PURE__*/_jsx(Box, {
+          ml: 1,
+          className: "icon",
+          children: /*#__PURE__*/_jsx(ExternalIssuerIcon, {})
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "member-text",
+      children: user.fullName
+    })]
+  });
+  return user.approved ? main : /*#__PURE__*/_jsx(Box, {
+    display: "flex",
+    alignItems: "center",
+    children: /*#__PURE__*/_jsx(Tooltip, {
+      title: t('team.member.forbidLoginDescription'),
+      children: main
+    })
+  });
+}
+SimpleInfo.propTypes = {
+  user: PropTypes.object.isRequired
+};
+export default function MemberList({
+  type,
+  createPassportSvg
+}) {
+  const {
+    appIdList = []
+  } = useBlockletContext();
+  const {
+    teamDid,
+    invitations,
+    teamIssuerDid,
+    roles,
+    refresh,
+    enablePassportIssuance,
+    endpoint,
+    api
+  } = useTeamContext();
+  const {
+    inService,
+    ws: {
+      useSubscription
+    }
+  } = useNodeContext();
+  const {
+    t,
+    locale
+  } = useContext(LocaleContext);
+  const [showInviteMember, setShowInviteMember] = useState(false);
+  const [showTransferMember, setShowTransferMember] = useState(false);
+  const [showInviting, setShowInviting] = useState(false);
+  const [memberDialog, setMemberDialog] = useState(false); // member, inviting
+  const [loading, setLoading] = useState(false);
+  const [users, setUsers] = useState([]);
+  const [rowCount, setRowCount] = useState();
+  const [userCounts, setUserCounts] = useState([]);
+  const [urlState] = useUrlState({
+    did: undefined
+  });
+  const durableKey = `members-${teamDid}`;
+  const tableDurableData = getDurableData(durableKey);
+  const [search, setSearch] = useState({
+    role: ROLE_ALL,
+    searchText: tableDurableData.searchText || '',
+    hideBlocked: false,
+    pageSize: tableDurableData.rowsPerPage || 10,
+    page: tableDurableData.page ? tableDurableData.page + 1 : 1
+  });
+  useMount(async () => {
+    if (urlState.did) {
+      const {
+        user
+      } = await api.getUser({
+        did: urlState.did
+      });
+      if (user) {
+        setMemberDialog(user);
+      }
+    }
+  });
+  const sideList = (roles || []).map(x => ({
+    name: x.name,
+    title: x.title,
+    num: getCount(userCounts, x.name)
+  }));
+  sideList.unshift({
+    name: ROLE_ALL,
+    title: 'All Members',
+    num: getCount(userCounts, ROLE_ALL)
+  });
+  sideList.push({
+    name: ROLE_NONE,
+    title: 'Other',
+    num: getCount(userCounts, ROLE_NONE)
+  });
+  const getUsers = () => {
+    const query = {};
+    if (search.hideBlocked) {
+      query.approved = true;
+    }
+    query.role = search.role;
+    if (search.searchText) {
+      query.search = search.searchText;
+    }
+    setLoading(true);
+    api.getUsers({
+      query,
+      paging: {
+        page: search.page,
+        pageSize: search.pageSize
+      }
+    }).then(res => {
+      setLoading(false);
+      (res.users || []).forEach(x => {
+        x.isFromExternal = isFromExternal(x, isEmpty(appIdList) ? [teamIssuerDid] : appIdList);
+        x.avatar = parseAvatar(x.avatar, teamDid, inService);
+
+        // for backwards compatibility
+        x.passports = (x.passports || []).filter(y => y.issuer);
+      });
+      setUsers(res.users || []);
+      setRowCount(res.paging.total);
+    }).catch(err => {
+      setLoading(false);
+      Toast.error(err.message);
+    });
+  };
+  const getUserCounts = () => {
+    api.getUsersCountPerRole().then(res => {
+      setUserCounts(res.counts || []);
+    }).catch(err => {
+      Toast.error(err.message);
+    });
+  };
+  const handleUserChange = data => {
+    if (data.teamDid === teamDid) {
+      getUsers();
+      getUserCounts();
+    }
+  };
+  useEffect(() => {
+    getUsers();
+  }, [`${search.hideBlocked}-${search.role}-${search.page}-${search.pageSize}-${search.searchText}`]); //eslint-disable-line
+
+  // user counts
+  useEffect(() => {
+    getUserCounts();
+  }, []); //eslint-disable-line
+
+  useSubscription(EVENTS.USER_UPDATED, handleUserChange, [search]);
+  useSubscription(EVENTS.USER_ADDED, handleUserChange, [search]);
+  const isInvitationEnabled = enablePassportIssuance;
+  const columns = [{
+    label: t('common.name'),
+    name: 'fullName',
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const x = users[rawIndex];
+        return /*#__PURE__*/_jsx("div", {
+          "data-cy": `member-name-${x.fullName}`,
+          children: /*#__PURE__*/_jsx(SimpleInfo, {
+            user: x
+          })
+        }, x.did);
+      }
+    }
+  }, {
+    label: t('common.address'),
+    name: 'did',
+    options: {
+      customBodyRender: e => {
+        return /*#__PURE__*/_jsx(DidAddress, {
+          size: 14,
+          responsive: true,
+          copyable: false,
+          did: e
+        });
+      }
+    }
+  }, {
+    label: t('team.member.lastLogin'),
+    name: 'lastLoginAt',
+    options: {
+      customBodyRender: e => {
+        return /*#__PURE__*/_jsx(RelativeTime, {
+          value: e,
+          locale: locale
+        });
+      }
+    }
+  }, {
+    label: t('team.member.lastLoginIp'),
+    name: 'lastLoginIp',
+    options: {
+      customBodyRender: e => {
+        return e || '-';
+      }
+    }
+  }, {
+    label: t('team.member.source'),
+    name: 'sourceProvider',
+    options: {
+      customBodyRender: e => {
+        const source = e || USER_TYPE.WALLET;
+        const providerNameMap = {
+          auth0: 'Auth0',
+          wallet: 'DID wallet',
+          federated: 'Federated'
+        };
+        return providerNameMap[source] || source;
+      }
+    }
+  }, {
+    label: t('common.actions'),
+    name: '',
+    width: 100,
+    align: 'center',
+    verticalKeyAlign: 'center',
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const x = users[rawIndex];
+        return /*#__PURE__*/_jsx(Permission, {
+          permission: inService ? '' : 'mutate_team',
+          role: inService ? BlockletAdminRoles : [],
+          children: /*#__PURE__*/_jsx(Actions, {
+            user: x,
+            onIssuePassport: () => setMemberDialog({
+              ...x,
+              initTab: 'issuances'
+            })
+          })
+        });
+      }
+    }
+  }];
+  const customButtons = [];
+  if (isInvitationEnabled) {
+    customButtons.push( /*#__PURE__*/_jsxs(Button, {
+      variant: "outlined",
+      style: {
+        flexShrink: 0,
+        marginRight: 16
+      },
+      color: "primary",
+      size: "small",
+      onClick: () => {
+        setShowInviting(true);
+      },
+      children: [/*#__PURE__*/_jsx(PersonIcon, {
+        style: {
+          height: '1em',
+          marginRight: 4
+        }
+      }), t('common.inviting'), invitations.length ? ` (${invitations.length})` : '']
+    }), /*#__PURE__*/_jsx(Permission, {
+      permission: inService ? '' : 'mutate_team',
+      role: inService ? BlockletAdminRoles : [],
+      children: /*#__PURE__*/_jsxs(Button, {
+        style: {
+          flexShrink: 0,
+          marginRight: 16
+        },
+        variant: "contained",
+        edge: "end",
+        color: "primary",
+        size: "small",
+        "data-cy": "invite-member",
+        onClick: () => setShowInviteMember(true),
+        children: [/*#__PURE__*/_jsx(AddIcon, {
+          style: {
+            fontSize: '1.3em',
+            marginRight: 4
+          }
+        }), t('team.invite')]
+      })
+    }));
+    if (type === 'server') {
+      customButtons.push( /*#__PURE__*/_jsx(Permission, {
+        role: "owner",
+        children: /*#__PURE__*/_jsxs(Button, {
+          style: {
+            flexShrink: 0
+          },
+          variant: "contained",
+          edge: "end",
+          color: "error",
+          size: "small",
+          "data-cy": "invite-member",
+          onClick: () => setShowTransferMember(true),
+          children: [/*#__PURE__*/_jsx(LoopIcon, {
+            style: {
+              fontSize: '1.3em',
+              marginRight: 4
+            }
+          }), t('team.transferNode.name')]
+        })
+      }));
+    }
+  }
+  const onRoleChange = role => {
+    if (loading) {
+      return;
+    }
+    setSearch(x => ({
+      ...x,
+      role,
+      hideBlocked: false,
+      searchText: '',
+      page: 1
+    }));
+  };
+  const onHideBlockedChange = value => {
+    setSearch(x => ({
+      ...x,
+      hideBlocked: value,
+      page: 1
+    }));
+  };
+  const onTableChange = ({
+    page,
+    rowsPerPage,
+    searchText
+  }) => {
+    if (search.pageSize !== rowsPerPage) {
+      setSearch(x => ({
+        ...x,
+        pageSize: rowsPerPage,
+        page: 1
+      }));
+    } else if (search.page !== page + 1) {
+      setSearch(x => ({
+        ...x,
+        page: page + 1
+      }));
+    } else if (search.searchText !== searchText) {
+      setSearch(x => ({
+        ...x,
+        searchText,
+        page: 1
+      }));
+    }
+  };
+  const tableOptions = {
+    sort: false,
+    download: false,
+    filter: false,
+    print: false,
+    expandableRowsOnClick: true,
+    onRowClick(e, {
+      dataIndex
+    }) {
+      const x = users[dataIndex];
+      setMemberDialog(x);
+    },
+    page: search.page - 1,
+    rowsPerPage: search.pageSize,
+    count: rowCount,
+    searchDebounceTime: 600
+  };
+  return /*#__PURE__*/_jsxs(Div, {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      className: "main",
+      display: "flex",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "left",
+        children: /*#__PURE__*/_jsx("div", {
+          className: "tabs",
+          children: sideList.map(x => /*#__PURE__*/_jsxs("div", {
+            className: `tab ${search.role === x.name ? 'active' : ''}`,
+            onClick: () => onRoleChange(x.name),
+            children: [/*#__PURE__*/_jsx("span", {
+              className: "text",
+              children: x.title
+            }), /*#__PURE__*/_jsx("span", {
+              className: classnames('badge', {
+                'is-rect': x.num > 999
+              }),
+              children: x.num
+            })]
+          }, x.name))
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "right",
+        children: /*#__PURE__*/_jsx(Datatable, {
+          className: "main-table",
+          verticalKeyWidth: 100,
+          locale: locale,
+          durable: durableKey,
+          durableKeys: ['page', 'rowsPerPage'],
+          title: /*#__PURE__*/_jsx("div", {
+            className: "table-toolbar-left",
+            children: /*#__PURE__*/_jsx(FormControlLabel, {
+              control: /*#__PURE__*/_jsx(Checkbox, {
+                sx: {
+                  display: 'flex !important'
+                },
+                disabled: loading,
+                color: "primary",
+                checked: search.hideBlocked,
+                onChange: e => onHideBlockedChange(e.target.checked)
+              }),
+              label: t('team.member.hideBlockedMember')
+            })
+          }),
+          data: users,
+          columns: columns,
+          customButtons: customButtons,
+          options: tableOptions,
+          loading: loading,
+          onChange: onTableChange
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Dialog, {
+      title: t('common.inviting'),
+      onClose: () => setShowInviting(false),
+      open: showInviting,
+      maxWidth: "lg",
+      fullWidth: true,
+      children: /*#__PURE__*/_jsx(Invitations, {})
+    }), memberDialog && /*#__PURE__*/_jsx(Member, {
+      onCancel: () => setMemberDialog(null),
+      userDid: memberDialog.did,
+      createPassportSvg: createPassportSvg,
+      initTab: memberDialog.initTab
+    }), showInviteMember && /*#__PURE__*/_jsx(InviteMember, {
+      teamDid: teamDid,
+      endpoint: endpoint,
+      roles: roles,
+      onCancel: () => setShowInviteMember(false),
+      onSuccess: () => {
+        refresh();
+        setShowInviteMember(false);
+      }
+    }), showTransferMember && /*#__PURE__*/_jsx(TransferMember, {
+      teamDid: teamDid,
+      endpoint: endpoint,
+      roles: roles,
+      onCancel: () => setShowTransferMember(false),
+      onSuccess: () => {
+        refresh();
+        setShowTransferMember(false);
+      }
+    })]
+  });
+}
+const Div = styled.div`
+  .main {
+    .left {
+      width: 168px;
+      flex-shrink: 0;
+      margin-right: 65px;
+      .tabs {
+        padding-top: 16px;
+        .tab {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 8px 16px;
+          transition: background 0.4s;
+
+          width: 168px;
+          height: 36px;
+          border-radius: 8px;
+
+          cursor: pointer;
+          user-select: none;
+
+          &:nth-child(n + 2) {
+            margin-top: 24px;
+          }
+
+          &.active {
+            background: #f2f2f2;
+          }
+
+          &:hover {
+            background: #f2f2f2;
+          }
+
+          .text {
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 19px;
+
+            color: #222222;
+          }
+
+          .badge {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 20px;
+            height: 20px;
+            border-radius: 100%;
+            color: #fff;
+            background: #666666;
+            font-size: 10px;
+            font-weight: 400;
+            &.is-rect {
+              width: auto;
+              border-radius: 8px;
+              padding: 0 4px;
+            }
+          }
+        }
+      }
+      @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
+        display: none;
+      }
+    }
+    .right {
+      flex-grow: 1;
+    }
+  }
+
+  .member-block {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .member-avatar {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .member-text {
+      margin-left: 10px;
+    }
+    .badge-block {
+      width: 14px;
+      height: 14px;
+      position: absolute;
+      right: -4px;
+      top: -4px;
+      background: #ff5757;
+      border-radius: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &::after {
+        content: '';
+        width: 6px;
+        height: 2px;
+        background: #fefefe;
+      }
+    }
+  }
+
+  .table-toolbar-left {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 7px 0;
+  }
+`;
+MemberList.propTypes = {
+  type: PropTypes.oneOf(['server', 'blocklet']).isRequired,
+  createPassportSvg: PropTypes.func.isRequired
+};