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

package/es/team/passports/index.js

@@ -0,0 +1,282 @@
+import React, { useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import AddIcon from '@mui/icons-material/Add';
+import Box from '@mui/material/Box';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import SplitButton from '@arcblock/ux/lib/SplitButton';
+import Spinner from '@mui/material/CircularProgress';
+import EditIcon from '@arcblock/icons/lib/EditIcon';
+import LockIcon from '@arcblock/icons/lib/LockIcon';
+import ExternalIssuerIcon from '@arcblock/icons/lib/ExternalIssuerIcon';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../../contexts/node';
+import { useTeamContext } from '../../contexts/team';
+import { sleep, isProtectedRole, BlockletAdminRoles } from '../../util';
+import Permission from '../../permission';
+import SearchInput from '../search-input';
+import ListHeader from '../styles/list-header';
+import Detail from './detail';
+import Color from './color';
+import MutateRole from './mutate-role';
+import TrustedIssuers from './trusted-issuers';
+import TrustedFactories from './trusted-factories';
+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 PassportList({
+  createPassportSvg
+}) {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const {
+    api,
+    inService
+  } = useNodeContext();
+  const {
+    roles,
+    teamDid,
+    teamIssuerDid,
+    teamName,
+    refresh: refreshTeam,
+    enablePassportIssuance,
+    passportColor,
+    isNodeTeam
+  } = useTeamContext();
+  const [showCreate, setShowCreate] = useState(false);
+  const [updateForm, setUpdateForm] = useState(false);
+  const [showColor, setShowColor] = useState(false);
+  const [showTrustedIssuers, setShowTrustedIssuers] = useState(false);
+  const [showTrustedFactories, setShowTrustedFactories] = useState(false);
+  const [search, setSearch] = useState('');
+  const [loading, setLoading] = useState(false);
+  const toggleShowIssue = async e => {
+    e.stopPropagation();
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      await api.configPassportIssuance({
+        input: {
+          teamDid,
+          enable: !enablePassportIssuance
+        }
+      });
+      refreshTeam();
+      await sleep(800);
+      Toast.success(t('common.configSuccess'));
+      setLoading(false);
+    } catch (error) {
+      Toast.error(error.message);
+      setLoading(false);
+    }
+  };
+  const filteredRoles = roles.filter(x => !search || x.title.includes(search) || x.name.includes(search));
+  return /*#__PURE__*/_jsxs(Div, {
+    children: [/*#__PURE__*/_jsxs(ListHeader, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "left",
+        children: /*#__PURE__*/_jsx(SearchInput, {
+          placeholder: t('team.passport.search'),
+          value: search,
+          onChange: e => setSearch(e.target.value)
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "right",
+        children: /*#__PURE__*/_jsxs(Permission, {
+          permission: inService ? '' : 'mutate_team',
+          role: inService ? BlockletAdminRoles : [],
+          children: [/*#__PURE__*/_jsx(SplitButton, {
+            variant: "outlined",
+            menuButtonProps: {
+              'data-cy': 'trusted-issuers-more'
+            },
+            menu: /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(SplitButton.Item, {
+                onClick: () => setShowTrustedFactories(true),
+                "data-cy": "config-show-trusted-factories",
+                children: /*#__PURE__*/_jsxs(Box, {
+                  children: [t('team.passport.configFactories'), /*#__PURE__*/_jsx(Box, {
+                    fontSize: 12,
+                    color: "#888",
+                    children: t('team.passport.configFactoriesTip')
+                  })]
+                })
+              }), /*#__PURE__*/_jsx(SplitButton.Item, {
+                "data-cy": "config-show-issue-passport",
+                onClick: toggleShowIssue,
+                children: /*#__PURE__*/_jsxs(Box, {
+                  display: "flex",
+                  alignItems: "center",
+                  children: [loading && /*#__PURE__*/_jsx(Spinner, {
+                    size: 16,
+                    style: {
+                      marginRight: 8
+                    }
+                  }), /*#__PURE__*/_jsxs(Box, {
+                    children: [enablePassportIssuance ? t('team.passport.disableIssuance') : t('team.passport.enableIssuance'), /*#__PURE__*/_jsx(Box, {
+                      fontSize: 12,
+                      color: "#888",
+                      children: enablePassportIssuance ? t('team.passport.disableIssuanceTip') : t('team.passport.enableIssuanceTip')
+                    })]
+                  })]
+                })
+              }), !isNodeTeam && /*#__PURE__*/_jsx(SplitButton.Item, {
+                onClick: () => setShowColor(true),
+                "data-cy": "config-passport-color",
+                children: /*#__PURE__*/_jsxs(Box, {
+                  children: [t('team.passport.configColor'), /*#__PURE__*/_jsx(Box, {
+                    fontSize: 12,
+                    color: "#888",
+                    children: t('team.passport.configColorTip')
+                  })]
+                })
+              })]
+            }),
+            children: () => /*#__PURE__*/_jsxs(Button, {
+              variant: "outlined",
+              "data-cy": "config-trusted-issuers",
+              onClick: () => {
+                setShowTrustedIssuers(true);
+              },
+              children: [/*#__PURE__*/_jsx(ExternalIssuerIcon, {
+                style: {
+                  fontSize: 16,
+                  marginRight: 4
+                }
+              }), t('team.passport.trustedPassportIssuers')]
+            })
+          }), !isNodeTeam && /*#__PURE__*/_jsxs(Button, {
+            style: {
+              marginLeft: 16
+            },
+            variant: "contained",
+            edge: "end",
+            color: "primary",
+            "data-cy": "create-role",
+            onClick: () => setShowCreate(true),
+            children: [/*#__PURE__*/_jsx(AddIcon, {
+              style: {
+                fontSize: 16,
+                marginRight: 4
+              }
+            }), t('team.add')]
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      mt: 3
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "list",
+      children: filteredRoles.map(role => /*#__PURE__*/_jsxs(Box, {
+        "data-cy": `passport-${role.name}`,
+        className: "item",
+        display: "flex",
+        alignItems: "center",
+        onClick: () => setUpdateForm(role),
+        children: [/*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx("div", {
+            style: {
+              width: 150
+            }
+            // eslint-disable-next-line react/no-danger
+            ,
+            dangerouslySetInnerHTML: {
+              __html: createPassportSvg({
+                title: role.title,
+                issuer: teamName,
+                issuerDid: teamIssuerDid,
+                ownerName: 'Your Name',
+                ownerDid: teamIssuerDid,
+                preferredColor: passportColor,
+                width: '150px'
+              })
+            }
+          }), /*#__PURE__*/_jsx(Box, {
+            ml: 3,
+            className: "title",
+            children: role.title
+          })]
+        }), /*#__PURE__*/_jsx(Box, {
+          className: "description",
+          children: role.description
+        }), /*#__PURE__*/_jsx(Permission, {
+          permission: inService ? '' : 'mutate_team',
+          role: inService ? BlockletAdminRoles : [],
+          children: /*#__PURE__*/_jsx("div", {
+            className: "action",
+            children: isProtectedRole(role.name) ? /*#__PURE__*/_jsx(LockIcon, {}) : /*#__PURE__*/_jsx(EditIcon, {})
+          })
+        })]
+      }, role.name))
+    }), showCreate && /*#__PURE__*/_jsx(MutateRole, {
+      teamDid: teamDid,
+      onCancel: () => setShowCreate(false),
+      onSuccess: () => {
+        setShowCreate(false);
+        refreshTeam();
+      }
+    }), updateForm && /*#__PURE__*/_jsx(Detail, {
+      onCancel: () => setUpdateForm(false),
+      onSuccess: () => {
+        setUpdateForm(false);
+        refreshTeam();
+      },
+      onDelete: () => {
+        setUpdateForm(false);
+        refreshTeam();
+      },
+      mode: "update",
+      roleName: updateForm.name,
+      item: updateForm
+    }), showTrustedIssuers && /*#__PURE__*/_jsx(TrustedIssuers, {
+      onCancel: () => setShowTrustedIssuers(false)
+    }), showTrustedFactories && /*#__PURE__*/_jsx(TrustedFactories, {
+      onCancel: () => setShowTrustedFactories(false)
+    }), showColor && /*#__PURE__*/_jsx(Color, {
+      onCancel: () => setShowColor(false),
+      onSuccess: () => setShowColor(false)
+    })]
+  });
+}
+const Div = styled.div`
+  .list {
+    .item {
+      padding: 12px;
+      margin: 12px -12px;
+      cursor: pointer;
+      transition: box-shadow 0.4s;
+      &:hover {
+        box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
+      }
+    }
+
+    .title {
+      font-weight: 400;
+      font-size: 18px;
+      width: 80px;
+      line-height: 21px;
+      color: #222222;
+    }
+
+    .description {
+      flex: 1;
+      margin-left: 64px;
+      color: #999999;
+    }
+
+    .action {
+      color: #bfbfbf;
+      fill: #bfbfbf;
+    }
+  }
+`;
+PassportList.propTypes = {
+  createPassportSvg: PropTypes.func.isRequired
+};
+PassportList.defaultProps = {};

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

@@ -0,0 +1,198 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import md5 from 'md5';
+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 TextField from '@mui/material/TextField';
+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 MutateRole({
+  teamDid,
+  onCancel,
+  onSuccess,
+  onError,
+  mode,
+  item
+}) {
+  const {
+    api
+  } = useNodeContext();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const {
+    t
+  } = useLocaleContext();
+  const [title, setTitle] = useState(item.title || '');
+  const [description, setDescription] = 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' ? md5(_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 = formatError(err);
+      setError(errMsg);
+      onError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const body = /*#__PURE__*/_jsxs("div", {
+    children: [mode === 'update' && /*#__PURE__*/_jsx(Typography, {
+      component: "div",
+      style: {
+        paddingTop: 24
+      },
+      children: /*#__PURE__*/_jsx(TextField, {
+        label: "ID",
+        autoComplete: "off",
+        variant: "outlined",
+        name: "url",
+        "data-cy": "mutate-role-input-name",
+        fullWidth: true,
+        autoFocus: true,
+        value: item.name,
+        disabled: true
+      })
+    }), /*#__PURE__*/_jsx(Typography, {
+      component: "div",
+      style: {
+        marginTop: 24
+      },
+      children: /*#__PURE__*/_jsx(TextField, {
+        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__*/_jsx(Typography, {
+      component: "div",
+      style: {
+        marginTop: 24,
+        marginBottom: 24
+      },
+      children: /*#__PURE__*/_jsx(TextField, {
+        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__*/_jsxs(Dialog, {
+    title: mode === 'create' ? t('team.passport.create.title') : '',
+    fullWidth: true,
+    open: true,
+    onClose: onCancel,
+    showCloseButton: false,
+    actions: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: onCancel,
+        color: "inherit",
+        children: t('common.cancel')
+      }), /*#__PURE__*/_jsxs(Button, {
+        "data-cy": "mutate-role-confirm",
+        onClick: onCreate,
+        color: "primary",
+        disabled: loading,
+        variant: "contained",
+        autoFocus: true,
+        children: [loading && /*#__PURE__*/_jsx(Spinner, {
+          size: 16
+        }), mode === 'create' ? t('common.create') : t('common.update')]
+      })]
+    }),
+    children: [/*#__PURE__*/_jsx(DialogContentText, {
+      component: "div",
+      children: body
+    }), !!error && /*#__PURE__*/_jsx(Alert, {
+      type: "error",
+      variant: "icon",
+      style: {
+        width: '100%',
+        margin: 0
+      },
+      children: error
+    })]
+  });
+}
+MutateRole.propTypes = {
+  teamDid: PropTypes.string.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired,
+  onError: PropTypes.func,
+  mode: PropTypes.oneOf(['create', 'update']),
+  item: PropTypes.object
+};
+MutateRole.defaultProps = {
+  onError: () => {},
+  mode: 'create',
+  item: {}
+};

package/es/team/passports/trusted-factories.js

@@ -0,0 +1,221 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import cloneDeep from 'lodash/cloneDeep';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Box from '@mui/material/Box';
+import AddIcon from '@mui/icons-material/Add';
+import IconButton from '@mui/material/IconButton';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import Empty from '@arcblock/ux/lib/Empty';
+import Tag from '@arcblock/ux/lib/Tag';
+import EditIcon from '@arcblock/icons/lib/EditIcon';
+import DeleteIcon from '@arcblock/icons/lib/DeleteIcon';
+import Toast from '@arcblock/ux/lib/Toast';
+import DidAddress from '../../did-address';
+import { withPermission } from '../../permission';
+import { useNodeContext } from '../../contexts/node';
+import { useTeamContext } from '../../contexts/team';
+import { sleep, BlockletAdminRoles } from '../../util';
+import Confirm from '../../confirm';
+import ListHeader from '../styles/list-header';
+import SearchInput from '../search-input';
+import TrustedFactory from './trusted-factory';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function TrustedFactories({
+  onCancel,
+  hasPermission
+}) {
+  const {
+    api
+  } = useNodeContext();
+  const {
+    teamDid,
+    trustedFactories
+  } = useTeamContext();
+  const {
+    t
+  } = useLocaleContext();
+  const [delConfirm, setDelConfirm] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [trustedFactory, setTrustedFactory] = useState(null);
+  const [search, setSearch] = useState('');
+  const deleteTrustedFactory = async did => {
+    if (loading) {
+      return;
+    }
+    try {
+      setLoading(true);
+      await api.configTrustedFactories({
+        input: {
+          teamDid,
+          trustedFactories: trustedFactories.filter(x => x.factoryAddress !== did)
+        }
+      });
+      await sleep(800);
+      setLoading(false);
+      Toast.success(t('common.saveSuccess'));
+      setDelConfirm(null);
+    } catch (err) {
+      setLoading(false);
+      Toast.error(err.message);
+    }
+  };
+  const filterFactories = trustedFactories.filter(x => !search || x.factoryAddress.toLowerCase().includes(search.toLowerCase()));
+  return /*#__PURE__*/_jsxs(Dialog, {
+    title: t('team.passport.trustedFactories'),
+    open: true,
+    onClose: onCancel,
+    fullWidth: true,
+    PaperProps: {
+      style: {
+        minHeight: '80vh'
+      }
+    },
+    children: [/*#__PURE__*/_jsx(Div, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "dialog-content",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "dialog-h1",
+          children: t('team.passport.trustedFactoriesTip')
+        }), /*#__PURE__*/_jsxs(Box, {
+          component: ListHeader,
+          mt: 3,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "left",
+            children: /*#__PURE__*/_jsx(SearchInput, {
+              placeholder: t('team.passport.searchFactoryAddress'),
+              value: search,
+              onChange: e => setSearch(e.target.value)
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: "right",
+            children: hasPermission && /*#__PURE__*/_jsxs(Button, {
+              variant: "contained",
+              color: "primary",
+              size: "small",
+              "data-cy": "add-trusted-factory",
+              onClick: () => setTrustedFactory({
+                mode: 'add'
+              }),
+              children: [/*#__PURE__*/_jsx(AddIcon, {
+                style: {
+                  fontSize: 16,
+                  marginRight: 4
+                }
+              }), t('team.add')]
+            })
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "list",
+          children: [filterFactories.map(x => /*#__PURE__*/_jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            mt: "20px",
+            children: [/*#__PURE__*/_jsxs(Box, {
+              flexGrow: 1,
+              children: [/*#__PURE__*/_jsx(DidAddress, {
+                copyable: false,
+                did: x.factoryAddress,
+                size: 16,
+                showDidLogo: false
+              }), !!x.remark && /*#__PURE__*/_jsx(Box, {
+                fontSize: 12,
+                maxWidth: "300px",
+                children: x.remark
+              })]
+            }), /*#__PURE__*/_jsx(Box, {
+              color: "gray",
+              mr: "24px",
+              children: /*#__PURE__*/_jsx(Tag, {
+                type: "success",
+                children: x.passport.role
+              })
+            }), /*#__PURE__*/_jsxs(Box, {
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              children: [/*#__PURE__*/_jsx(IconButton, {
+                onClick: () => setTrustedFactory({
+                  mode: 'update',
+                  data: cloneDeep(x)
+                }),
+                "data-cy": "edit-trusted-factory",
+                size: "large",
+                children: /*#__PURE__*/_jsx(EditIcon, {})
+              }), /*#__PURE__*/_jsx(IconButton, {
+                "data-cy": "delete-trusted-factory",
+                onClick: () => setDelConfirm({
+                  title: t('common.delete'),
+                  description: t('common.delConfirmDescription', {
+                    data: x.factoryAddress
+                  }),
+                  confirm: t('common.delConfirm'),
+                  cancel: t('common.cancel'),
+                  onConfirm: () => deleteTrustedFactory(x.factoryAddress),
+                  onCancel: () => {
+                    setLoading(false);
+                    setDelConfirm(null);
+                  }
+                }),
+                size: "large",
+                children: /*#__PURE__*/_jsx(DeleteIcon, {})
+              })]
+            })]
+          }, x.factoryAddress)), !trustedFactories.length && /*#__PURE__*/_jsx(Empty, {
+            children: t('common.empty')
+          })]
+        })]
+      })
+    }), trustedFactory && /*#__PURE__*/_jsx(TrustedFactory, {
+      data: trustedFactory.data,
+      trustedFactories: cloneDeep(trustedFactories),
+      onCancel: () => setTrustedFactory(null),
+      onSuccess: () => {
+        setTrustedFactory(null);
+      }
+    }), 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
+    })]
+  });
+}
+TrustedFactories.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  hasPermission: PropTypes.bool
+};
+TrustedFactories.defaultProps = {
+  hasPermission: false
+};
+const TrustedFactoriesInDaemon = withPermission(TrustedFactories, 'mutate_team');
+const TrustedFactoriesInService = withPermission(TrustedFactories, '', BlockletAdminRoles);
+export default function TrustedFactoriesWithPermission(props) {
+  const {
+    inService
+  } = useNodeContext();
+  if (inService) {
+    return /*#__PURE__*/_jsx(TrustedFactoriesInService, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(TrustedFactoriesInDaemon, {
+    ...props
+  });
+}
+const Div = styled.div`
+  .list {
+    .MuiIconButton-root {
+      svg {
+        fill: #bfbfbf;
+      }
+    }
+  }
+`;