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

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

@@ -0,0 +1,226 @@
+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 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 TrustedIssuer from './trusted-issuer';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function TrustedIssuers({
+  onCancel,
+  hasPermission
+}) {
+  const {
+    api
+  } = useNodeContext();
+  const {
+    teamDid,
+    trustedPassports
+  } = useTeamContext();
+  const {
+    t
+  } = useLocaleContext();
+  const [delConfirm, setDelConfirm] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [trustedIssuer, setTrustedIssuer] = useState(false);
+  const [search, setSearch] = useState('');
+  const deleteTrustedIssuer = async did => {
+    if (loading) {
+      return;
+    }
+    const index = trustedPassports.findIndex(x => x.issuerDid === did);
+    if (index === -1) {
+      // should not be here
+      Toast.error('Cannot find passports');
+    }
+    const trustedList = [...trustedPassports];
+    trustedList.splice(index, 1);
+    try {
+      setLoading(true);
+      await api.configTrustedPassports({
+        input: {
+          teamDid,
+          trustedPassports: trustedList
+        }
+      });
+      await sleep(800);
+      setLoading(false);
+      Toast.success(t('common.saveSuccess'));
+      setDelConfirm(false);
+    } catch (err) {
+      setLoading(false);
+      Toast.error(err.message);
+    }
+  };
+  const filteredIssuers = trustedPassports.filter(x => !search || x.issuerDid.toLowerCase().includes(search.toLowerCase()));
+  return /*#__PURE__*/_jsxs(Dialog, {
+    title: t('team.passport.trustedIssuers'),
+    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.trustedPassportIssuers')
+        }), /*#__PURE__*/_jsxs(Box, {
+          component: ListHeader,
+          mt: 3,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "left",
+            children: /*#__PURE__*/_jsx(SearchInput, {
+              placeholder: t('team.passport.searchIssuerDid'),
+              value: search,
+              onChange: e => setSearch(e.target.value)
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: "right",
+            children: hasPermission && /*#__PURE__*/_jsxs(Button, {
+              variant: "contained",
+              color: "primary",
+              "data-cy": "add-trusted-issuer",
+              onClick: () => setTrustedIssuer({
+                mode: 'add'
+              }),
+              children: [/*#__PURE__*/_jsx(AddIcon, {
+                style: {
+                  fontSize: 16,
+                  marginRight: 4
+                }
+              }), t('team.add')]
+            })
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "list",
+          children: [filteredIssuers.map(x => /*#__PURE__*/_jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            mt: "20px",
+            children: [/*#__PURE__*/_jsxs(Box, {
+              flexShrink: 0,
+              children: [/*#__PURE__*/_jsx(DidAddress, {
+                copyable: false,
+                size: 16,
+                did: x.issuerDid,
+                showDidLogo: false
+              }), !!x.remark && /*#__PURE__*/_jsx(Box, {
+                pl: 3.5,
+                fontSize: 12,
+                maxWidth: "300px",
+                children: x.remark
+              })]
+            }), /*#__PURE__*/_jsx(Box, {
+              color: "gray",
+              ml: "28px",
+              flexGrow: 1,
+              children: x.mappings && x.mappings.length ? `${x.mappings.length} ${t('team.passport.mappingRule')}` : t('team.passport.defaultRule')
+            }), /*#__PURE__*/_jsxs(Box, {
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              children: [/*#__PURE__*/_jsx(IconButton, {
+                onClick: () => setTrustedIssuer({
+                  mode: 'update',
+                  data: cloneDeep(x)
+                }),
+                "data-cy": "edit-mapping-rule",
+                size: "large",
+                children: /*#__PURE__*/_jsx(EditIcon, {})
+              }), /*#__PURE__*/_jsx(IconButton, {
+                "data-cy": "delete-mapping-rule",
+                onClick: () => setDelConfirm({
+                  title: t('common.delete'),
+                  description: t('common.delConfirmDescription', {
+                    data: x.issuerDid
+                  }),
+                  confirm: t('common.delConfirm'),
+                  cancel: t('common.cancel'),
+                  onConfirm: () => deleteTrustedIssuer(x.issuerDid),
+                  onCancel: () => {
+                    setLoading(false);
+                    setDelConfirm(null);
+                  }
+                }),
+                size: "large",
+                children: /*#__PURE__*/_jsx(DeleteIcon, {})
+              })]
+            })]
+          }, x.issuerDid)), !trustedPassports.length && /*#__PURE__*/_jsx(Empty, {
+            children: t('common.empty')
+          })]
+        })]
+      })
+    }), trustedIssuer && /*#__PURE__*/_jsx(TrustedIssuer, {
+      mode: trustedIssuer.mode,
+      data: trustedIssuer.data,
+      trustedPassports: cloneDeep(trustedPassports),
+      onCancel: () => setTrustedIssuer(null),
+      onSuccess: () => {
+        setTrustedIssuer(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
+    })]
+  });
+}
+TrustedIssuers.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  hasPermission: PropTypes.bool
+};
+TrustedIssuers.defaultProps = {
+  hasPermission: false
+};
+const TrustedIssuersInDaemon = withPermission(TrustedIssuers, 'mutate_team');
+const TrustedIssuersInService = withPermission(TrustedIssuers, '', BlockletAdminRoles);
+export default function TrustedIssuersWithPermission(props) {
+  const {
+    inService
+  } = useNodeContext();
+  if (inService) {
+    return /*#__PURE__*/_jsx(TrustedIssuersInService, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(TrustedIssuersInDaemon, {
+    ...props
+  });
+}
+const Div = styled.div`
+  .list {
+    .MuiIconButton-root {
+      svg {
+        fill: #bfbfbf;
+      }
+    }
+  }
+`;

package/es/team/search-input.js

@@ -0,0 +1,46 @@
+import styled from '@emotion/styled';
+import TextField from '@mui/material/TextField';
+import SearchIcon from '@mui/icons-material/Search';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SearchInput = styled(({
+  children,
+  ...props
+}) => /*#__PURE__*/_jsx(TextField, {
+  ...props,
+  id: "outlined-basic",
+  variant: "outlined",
+  InputProps: {
+    startAdornment: /*#__PURE__*/_jsx(SearchIcon, {})
+  },
+  size: "small",
+  children: children
+}))`
+  .MuiOutlinedInput-root {
+    color: #999;
+    &.MuiInputBase-adornedStart .MuiSvgIcon-root {
+      color: #bfbfbf;
+    }
+    opacity: 1;
+    border-radius: 36px;
+    background: #f8f8f8;
+    padding-left: 16px;
+    input {
+      padding-left: 8px;
+      font-weight: bold;
+      &::placeholder {
+        opacity: 1;
+        color: #bfbfbf;
+      }
+      padding-top: 8.5px;
+      padding-bottom: 8.5px;
+    }
+  }
+
+  .MuiOutlinedInput-notchedOutline,
+  .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
+  .Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: #eee;
+    border-width: 1px;
+  }
+`;
+export default SearchInput;

package/es/team/styles/dialog.js

@@ -0,0 +1,72 @@
+import styled from '@emotion/styled';
+const DialogStyle = styled.div`
+  width: 632px;
+  height: 90vh;
+  overflow: auto;
+  @media (max-width: ${props => props.theme.breakpoints.values.md - 1}px) {
+    width: 100%;
+    height: 100%;
+  }
+  display: flex;
+  flex-direction: column;
+
+  .dialog-header {
+    flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 30;
+    flex: 0;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 12px;
+    min-height: 72px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #f8f8f8;
+    .title {
+      color: #222;
+      font-size: 16px;
+    }
+    .left,
+    .right {
+      flex-shrink: 0;
+      flex-basis: auto;
+      width: 120px;
+    }
+    .right {
+      text-align: right;
+      svg {
+        fill: #bfbfbf;
+      }
+    }
+  }
+  .dialog-content {
+    flex-grow: 1;
+    padding: 16px 24px;
+  }
+  .dialog-actions {
+    flex-shrink: 0;
+    border-top: 1px solid #f8f8f8;
+    padding 24px;
+    position: sticky;
+    bottom: 0;
+    z-index: 20;
+    background: #fff;
+    display: flex;
+    justify-content: flex-end;
+    .MuiButton-root {
+      padding-left: 3em;
+      padding-right: 3em;
+    }
+  }
+  .dialog-h1 {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 28px;
+    color: #222222;
+  }
+`;
+export default DialogStyle;

package/es/team/styles/list-header.js

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+const ListHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  .left,
+  .right {
+  }
+  .right {
+    display: flex;
+    align-items: center;
+  }
+  .tabs {
+    .MuiButton-root {
+      border: none;
+      color: #999;
+      &.active {
+        color: #222;
+      }
+    }
+  }
+
+  @media (max-width: 600px) {
+    display: block;
+    .right {
+      margin-top: 12px;
+    }
+  }
+`;
+export default ListHeader;

package/es/util/api.js

@@ -0,0 +1,6 @@
+import axios from 'axios';
+axios.defaults.timeout = 10 * 1000; // 超时时间设为10s
+
+const api = axios.create();
+export { axios, api };
+export default api;

package/es/util/constants.js

@@ -0,0 +1,2 @@
+export const STORAGE_KEY_STORE_BLOCKLET = 'blocklet-add-component-registry';
+export const STORAGE_KEY_STORE_SERVER = 'server-add-registry';