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

package/es/contexts/audit-log.js

@@ -0,0 +1,152 @@
+import { createContext, useState, useContext, useEffect } from 'react';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from './node';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AuditLogContext = /*#__PURE__*/createContext({});
+const {
+  Provider,
+  Consumer
+} = AuditLogContext;
+
+// eslint-disable-next-line react/prop-types
+function AuditLogProvider({
+  children,
+  scope = '',
+  categories = [],
+  showScope,
+  scopeFormatter
+}) {
+  const {
+    api: client,
+    info: nodeInfo
+  } = useNodeContext();
+  const [auditLogs, setAuditLogs] = useState([]);
+  const [paging, setPaging] = useState({
+    total: 0,
+    pageSize: 20,
+    pageCount: 0,
+    page: 1
+  });
+  const [loading, setLoading] = useState(false);
+  const [category, setCategory] = useLocalStorage(`audit-log-category-${scope}`, 'all');
+  const categoryList = [{
+    value: 'all',
+    label: 'All',
+    description: ''
+  }, {
+    value: 'blocklet',
+    label: 'Blocklet Management',
+    description: ''
+  }, {
+    value: 'server',
+    label: 'Server Management',
+    description: ''
+  }, {
+    value: 'team',
+    label: 'Team Management',
+    description: ''
+  }, {
+    value: 'security',
+    label: 'Security',
+    description: ''
+  }, {
+    value: 'certificates',
+    label: 'Certificate Management',
+    description: ''
+  }, {
+    value: 'integrations',
+    label: 'Integration Management',
+    description: ''
+  }, {
+    value: 'gateway',
+    label: 'Gateway',
+    description: ''
+  }];
+  const filterCategories = categoryList.filter(item => {
+    if (categories.length) {
+      return item.value === 'all' || categories.includes(item.value);
+    }
+    return true;
+  });
+  const fetchLogs = async ({
+    page = 1,
+    silent = true
+  } = {}) => {
+    if (loading) {
+      return;
+    }
+    if (!silent) {
+      setLoading(true);
+    }
+    try {
+      // eslint-disable-next-line no-shadow
+      const res = await client.getAuditLogs({
+        // 由于 blocklet 中的 audit-log 本身就不包含 server 类型的，所以这里的 category 查询不需要对 server 类型的做额外的处理
+        input: {
+          paging: {
+            page
+          },
+          category: category === 'all' ? '' : category,
+          scope
+        }
+      });
+
+      // add link for blocklet audit logs
+      if (showScope) {
+        (res.list || []).forEach(x => {
+          if (x.scope !== nodeInfo.did) {
+            x.link = `/blocklets/${x.scope}/components`;
+          }
+        });
+      }
+      setAuditLogs(res.list);
+      setPaging(res.paging);
+      setLoading(false);
+    } catch (err) {
+      Toast.error(err.message);
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    fetchLogs({
+      page: 1,
+      silent: false
+    });
+  }, []); // eslint-disable-line
+
+  useEffect(() => {
+    fetchLogs({
+      page: 1,
+      silent: false
+    });
+  }, [category]); // eslint-disable-line
+
+  const value = {
+    loading,
+    fetch: fetchLogs,
+    filter: {
+      category,
+      scope
+    },
+    categories: filterCategories,
+    setCategory,
+    data: auditLogs,
+    paging,
+    showScope,
+    scopeFormatter
+  };
+  return /*#__PURE__*/_jsx(Provider, {
+    value: {
+      auditLogs: value
+    },
+    children: children
+  });
+}
+function useAuditLogContext() {
+  const {
+    auditLogs
+  } = useContext(AuditLogContext);
+  return auditLogs;
+}
+export { AuditLogContext, AuditLogProvider, Consumer as AuditLogConsumer, useAuditLogContext };

package/es/contexts/blocklet.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+const BlockletContext = /*#__PURE__*/createContext({});
+const {
+  Provider,
+  Consumer
+} = BlockletContext;
+function useBlockletContext() {
+  return useContext(BlockletContext);
+}
+export { BlockletContext, Provider as BlockletProvider, Consumer as BlockletConsumer, useBlockletContext };

package/es/contexts/deleting-blocklets.js

@@ -0,0 +1,70 @@
+import { createContext, useState, useContext, useRef } from 'react';
+import PropTypes from 'prop-types';
+import xorWith from 'lodash/xorWith';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DeletingBlockletContext = /*#__PURE__*/createContext({});
+function DeletingBlockletProvider({
+  children,
+  type
+}) {
+  const [deletingBlocklets, setDeletingBlocklets] = useState([]);
+  const deletingBlockletsDid = useRef([]); // use in onActionComplete
+
+  /**
+   * 添加删除中的 blocklet did
+   * @param {String} did 删除中的did
+   */
+  const addDeletingDid = did => {
+    if (!deletingBlockletsDid.current.includes(did)) {
+      const reDeleteings = [...deletingBlockletsDid.current, did];
+      setDeletingBlocklets(reDeleteings);
+      deletingBlockletsDid.current = reDeleteings;
+    }
+  };
+
+  /**
+   * 去除删除中的 blocklet did
+   * @param {String} did 删除中的did
+   */
+  const removeDeletingDid = did => {
+    if (deletingBlockletsDid.current.includes(did)) {
+      const reDeleteings = deletingBlockletsDid.current.filter(d => {
+        return d !== did;
+      });
+      setDeletingBlocklets(reDeleteings);
+      deletingBlockletsDid.current = reDeleteings;
+    }
+  };
+
+  /**
+   * 将不在的 blocklet id 移出 deleting 数组
+   * @param {Array} existDids 已存在的 blocklet did 数组集
+   */
+  const matchDeletingDid = existDids => {
+    const inDeleting = deletingBlocklets.filter(did => existDids.find(e => e === did));
+    const needMoveoutDeleting = xorWith(inDeleting, deletingBlocklets);
+    needMoveoutDeleting.forEach(did => removeDeletingDid(did));
+  };
+  return /*#__PURE__*/_jsx(DeletingBlockletContext.Provider, {
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    value: {
+      type,
+      deletingBlocklets,
+      addDeletingDid,
+      removeDeletingDid,
+      matchDeletingDid
+    },
+    children: children
+  });
+}
+DeletingBlockletProvider.propTypes = {
+  type: PropTypes.string,
+  children: PropTypes.node.isRequired
+};
+DeletingBlockletProvider.defaultProps = {
+  type: 'blocklets'
+};
+function useDeletingBlockletContext() {
+  return useContext(DeletingBlockletContext);
+}
+export { DeletingBlockletProvider, useDeletingBlockletContext };

package/es/contexts/node.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+const NodeContext = /*#__PURE__*/createContext({});
+const {
+  Provider,
+  Consumer
+} = NodeContext;
+function useNodeContext() {
+  const {
+    node
+  } = useContext(NodeContext);
+  return {
+    ...node,
+    inService: node.type === 'service',
+    inDaemon: node.type === 'daemon'
+  };
+}
+export { NodeContext, Provider as NodeProvider, Consumer as NodeConsumer, useNodeContext };

package/es/contexts/session.js

@@ -0,0 +1,8 @@
+/* eslint-disable object-curly-newline */
+import { useContext } from 'react';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+function useSessionContext() {
+  const info = useContext(SessionContext);
+  return info;
+}
+export { SessionContext, useSessionContext };

package/es/contexts/team.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+const TeamContext = /*#__PURE__*/createContext({});
+const {
+  Provider,
+  Consumer
+} = TeamContext;
+function useTeamContext() {
+  return useContext(TeamContext);
+}
+export { TeamContext, Provider as TeamProvider, Consumer as TeamConsumer, useTeamContext };

package/es/delete-confirm.js

@@ -0,0 +1,121 @@
+/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable react/no-danger */
+/* eslint-disable react/prop-types */
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import Alert from '@mui/material/Alert';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import ClickToCopy from './click-to-copy';
+import Confirm from './confirm';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CancelConfirm({
+  title,
+  description,
+  confirmPlaceholder,
+  cancel,
+  confirm,
+  params: initialParams,
+  onCancel,
+  onConfirm,
+  keyName
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const confirmSetting = {
+    title: () => /*#__PURE__*/_jsxs("div", {
+      children: [title, ` (${keyName})`]
+    }),
+    description: (params, setParams) => {
+      const setValue = value => {
+        // eslint-disable-next-line no-underscore-dangle
+        setParams({
+          ...value,
+          __disableConfirm: value.__disableConfirm
+        });
+      };
+      return /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx(Alert, {
+          severity: "warning",
+          style: {
+            width: '100%'
+          },
+          children: t('common.notice')
+        }), /*#__PURE__*/_jsx("div", {
+          style: {
+            marginTop: 24,
+            marginBottom: 24
+          },
+          dangerouslySetInnerHTML: {
+            __html: description
+          }
+        }), /*#__PURE__*/_jsxs("div", {
+          style: {
+            marginBottom: 24
+          },
+          children: [t('common.click'), "\uFF1A", /*#__PURE__*/_jsx(ClickToCopy, {
+            "data-cy": "click-copy",
+            children: keyName
+          })]
+        }), /*#__PURE__*/_jsx(Typography, {
+          component: "div",
+          children: /*#__PURE__*/_jsx(TextField, {
+            label: confirmPlaceholder,
+            autoComplete: "off",
+            "data-cy": "delete-confirm-input",
+            variant: "outlined",
+            fullWidth: true,
+            autoFocus: true,
+            value: params.inputVal,
+            onChange: e => {
+              setValue({
+                ...params,
+                inputVal: e.target.value,
+                __disableConfirm: keyName !== e.target.value
+              });
+            }
+          })
+        })]
+      });
+    },
+    confirm,
+    cancel,
+    onConfirm,
+    onCancel,
+    params: {
+      inputVal: '',
+      __disableConfirm: true,
+      ...initialParams
+    }
+  };
+  return /*#__PURE__*/_jsx(Confirm, {
+    title: confirmSetting.title,
+    description: confirmSetting.description,
+    confirm: confirmSetting.confirm,
+    cancel: confirmSetting.cancel,
+    params: confirmSetting.params,
+    onConfirm: confirmSetting.onConfirm,
+    onCancel: confirmSetting.onCancel
+  });
+}
+CancelConfirm.propTypes = {
+  title: PropTypes.any.isRequired,
+  keyName: PropTypes.any.isRequired,
+  description: PropTypes.any.isRequired,
+  // can be a function that renders different content based on params
+  confirmPlaceholder: PropTypes.any.isRequired,
+  cancel: PropTypes.string,
+  confirm: PropTypes.string,
+  params: PropTypes.object,
+  // This object holds states managed in the dialog
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func.isRequired
+};
+CancelConfirm.defaultProps = {
+  onCancel: () => {},
+  cancel: '',
+  confirm: 'Confirm',
+  params: {}
+};

package/es/did-address.js

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import ExternalLink from '@mui/material/Link';
+import DidAddress from '@arcblock/ux/lib/DID';
+import { jsx as _jsx } from "react/jsx-runtime";
+function WrappedDidAddress({
+  did,
+  href,
+  external,
+  avatarProps,
+  ...rest
+}) {
+  const content = /*#__PURE__*/_jsx(DidAddress, {
+    did: did,
+    ...rest
+  });
+  if (href) {
+    if (external) {
+      return /*#__PURE__*/_jsx(ExternalLink, {
+        target: "_blank",
+        href: href,
+        underline: "hover",
+        children: content
+      });
+    }
+    return /*#__PURE__*/_jsx(Link, {
+      to: href,
+      children: content
+    });
+  }
+  return content;
+}
+WrappedDidAddress.propTypes = {
+  did: PropTypes.string.isRequired,
+  to: PropTypes.string,
+  href: PropTypes.string,
+  avatarProps: PropTypes.object,
+  external: PropTypes.bool
+};
+WrappedDidAddress.defaultProps = {
+  to: '',
+  href: '',
+  avatarProps: {},
+  external: false
+};
+export default WrappedDidAddress;

package/es/dot.js

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+const color = {
+  success: '#3ab39d',
+  error: '#D0021B'
+};
+const defaultSize = '10px';
+const Dot = styled.div`
+  display: inline-block;
+  width: ${props => props.size || defaultSize};
+  height: ${props => props.size || defaultSize};
+  background: ${props => color[props.color] || props.color || color.success};
+  border-radius: 100%;
+`;
+export default Dot;

package/es/exchange-passport.js

@@ -0,0 +1,102 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-one-expression-per-line */
+import React, { useContext } from 'react';
+import styled from '@emotion/styled';
+import { useNavigate } from 'react-router-dom';
+import Spinner from '@mui/material/CircularProgress';
+import Center from '@arcblock/ux/lib/Center';
+import Toast from '@arcblock/ux/lib/Toast';
+import DidConnect from '@arcblock/did-connect/lib/Connect';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import wrapLocale from './wrap-locale';
+import { jsx as _jsx } from "react/jsx-runtime";
+function ExchangePassport({
+  SessionContext,
+  webWalletUrl,
+  onSuccess
+}) {
+  const {
+    api,
+    session
+  } = useContext(SessionContext);
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const navigate = useNavigate();
+  const {
+    searchParams
+  } = new URL(window.location.href);
+  const redirect = searchParams.get('redirect');
+  const onDone = async (result, decrypt) => {
+    onSuccess(result, decrypt);
+    await session.refresh();
+    Toast.success(t('exchangePassport.success'));
+    setTimeout(() => {
+      if (redirect) {
+        const url = decodeURIComponent(redirect);
+        if (url.startsWith(WELLKNOWN_SERVICE_PATH_PREFIX)) {
+          navigate(url, {
+            replace: true
+          });
+        } else {
+          window.location = url;
+        }
+      } else {
+        window.location = window.env.pathPrefix || window.env.apiPrefix || '/';
+      }
+    }, 3000);
+  };
+  const onError = err => {
+    Toast.error(err.message);
+  };
+  const extraParams = {};
+  const componentId = searchParams.get('componentId');
+  if (componentId) {
+    extraParams.componentId = componentId;
+  }
+  if (session.loading) {
+    return /*#__PURE__*/_jsx(Center, {
+      children: /*#__PURE__*/_jsx(Spinner, {})
+    });
+  }
+  return /*#__PURE__*/_jsx(Div, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: "connect-wrapper",
+      children: /*#__PURE__*/_jsx(DidConnect, {
+        className: "connect",
+        action: "exchange-passport",
+        checkFn: api.get,
+        checkTimeout: 10 * 60 * 1000,
+        webWalletUrl: webWalletUrl,
+        onSuccess: onDone,
+        onError: onError,
+        locale: locale,
+        messages: {
+          title: t('exchangePassport.dialog.title'),
+          scan: t('exchangePassport.dialog.scan'),
+          confirm: t('exchangePassport.dialog.confirm'),
+          success: t('exchangePassport.dialog.success')
+        },
+        extraParams: extraParams,
+        extraContent: null
+      })
+    })
+  });
+}
+export default wrapLocale(ExchangePassport);
+const Div = styled.div`
+  box-sizing: border-box;
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  .connect-wrapper {
+    flex: 1;
+  }
+  .connect {
+    background: #fafafa;
+  }
+`;