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

package/es/blocklet/add-cert.js

@@ -0,0 +1,177 @@
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import useAsyncRetry from 'react-use/lib/useAsyncRetry';
+import Tooltip from '@mui/material/Tooltip';
+import CircularProgress from '@mui/material/CircularProgress';
+import Alert from '@arcblock/ux/lib/Alert';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { BlockletEvents } from '@blocklet/constant';
+import Toast from '@arcblock/ux/lib/Toast';
+import Confirm from '../confirm';
+import { useNodeContext } from '../contexts/node';
+import { useBlockletContext } from '../contexts/blocklet';
+import { shouldCheckDomainStatus } 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";
+const isCertInProgress = status => ['waiting', 'creating', 'renewaling'].includes(status);
+function Add(props) {
+  const {
+    t
+  } = useLocaleContext();
+  const [loading, setLoading] = useState(false);
+  const [confirmSetting, setConfirmSetting] = useState(null);
+  const {
+    domain,
+    onAdd,
+    children,
+    did
+  } = props;
+  const {
+    api,
+    ws: {
+      useSubscription
+    }
+  } = useNodeContext();
+  const [issuing, setIssuing] = useState(false);
+  const {
+    actions: {
+      refreshDomainStatus
+    }
+  } = useBlockletContext();
+  const certState = useAsyncRetry(async () => {
+    const {
+      cert
+    } = await api.findCertificateByDomain({
+      input: {
+        domain,
+        did
+      }
+    });
+    return cert;
+  });
+  const handleIssueComplete = (cert, type) => {
+    if (cert.domain === domain) {
+      setIssuing(false);
+      if (type === 'success') {
+        Toast.success(`The ${cert.domain} certificate is issued successfully`);
+      } else if (type === 'error') {
+        Toast.error(`Failed to issue certificate for ${cert.domain}`);
+      }
+    }
+  };
+  useEffect(() => {
+    if (!certState.loading && isCertInProgress(certState.value?.status)) {
+      setIssuing(true);
+    }
+  }, [certState]);
+  useSubscription(BlockletEvents.certError, cert => handleIssueComplete(cert, 'error'));
+  useSubscription(BlockletEvents.certIssued, cert => {
+    certState.retry();
+    refreshDomainStatus(cert.domain);
+    handleIssueComplete(cert, 'success');
+  });
+  if (certState.loading) {
+    return ''; // 如果正在加载证书的状态，则不渲染任何元素
+  }
+
+  if (certState.value?.status === 'normal') {
+    return ''; // 如果证书已经生成，则不渲染任何元素
+  }
+
+  const onCancel = () => {
+    setLoading(false);
+    setConfirmSetting(null);
+  };
+  const onConfirm = async () => {
+    setLoading(true);
+    try {
+      await api.issueLetsEncryptCert({
+        input: {
+          domain,
+          did
+        }
+      });
+      onAdd();
+      setIssuing(true);
+    } catch (error) {
+      console.error(error);
+      setIssuing(false);
+    } finally {
+      setLoading(false);
+      setConfirmSetting(null);
+    }
+  };
+  const setting = {
+    title: t('router.cert.genLetsEncryptCert.title'),
+    description: /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx(Alert, {
+        type: "success",
+        children: t('router.cert.genLetsEncryptCert.dnsTip')
+      }), t('router.cert.genLetsEncryptCert.description')]
+    }),
+    confirm: t('common.confirm'),
+    onConfirm,
+    onCancel
+  };
+  const onClick = e => {
+    e.stopPropagation();
+    setConfirmSetting(setting);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [issuing ? /*#__PURE__*/_jsx(Tooltip, {
+      title: t('router.cert.issuing'),
+      children: /*#__PURE__*/_jsx(CircularProgress, {
+        size: 12
+      })
+    }) : children({
+      loading,
+      open: onClick
+    }), confirmSetting && /*#__PURE__*/_jsx(Confirm, {
+      color: "primary",
+      title: confirmSetting.title,
+      description: confirmSetting.description,
+      confirm: confirmSetting.confirm,
+      params: confirmSetting.params,
+      onConfirm: confirmSetting.onConfirm,
+      onCancel: confirmSetting.onCancel
+    })]
+  });
+}
+Add.propTypes = {
+  domain: PropTypes.string.isRequired,
+  did: PropTypes.string.isRequired,
+  onAdd: PropTypes.func,
+  children: PropTypes.any
+};
+Add.defaultProps = {
+  onAdd: () => {},
+  children: null
+};
+export default function AddCert(props) {
+  const {
+    domain,
+    domainStatus,
+    ...others
+  } = props;
+  if (!shouldCheckDomainStatus(domain) || domainStatus?.isHttps) {
+    return '';
+  }
+  return /*#__PURE__*/_jsx(Add, {
+    domain,
+    ...others
+  });
+}
+AddCert.propTypes = {
+  domain: PropTypes.string.isRequired,
+  domainStatus: PropTypes.shape({
+    isHttps: PropTypes.bool
+  }).isRequired,
+  did: PropTypes.string.isRequired,
+  onAdd: PropTypes.func,
+  children: PropTypes.any
+};
+AddCert.defaultProps = {
+  onAdd: () => {},
+  children: null
+};

package/es/blocklet/agreement-app.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function AgreementApp({
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    style: {
+      width: '100%'
+    },
+    children: [/*#__PURE__*/_jsx("h3", {
+      children: "End User License Agreement for Application"
+    }), /*#__PURE__*/_jsx("p", {
+      children: "Blocklet Server License Agreement ArcBlock, Inc. version 2020-08-28"
+    }), /*#__PURE__*/_jsx("p", {
+      children: "BLOCKLET SERVER LICENSE AGREEMENT"
+    }), /*#__PURE__*/_jsx("p", {
+      children: "\u6682\u65E0"
+    })]
+  });
+}

package/es/blocklet/agreement.js

@@ -0,0 +1,127 @@
+import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import ServerEula from '@blocklet/launcher-layout/lib/wizard/server-eula';
+import WizardDesc from '@blocklet/launcher-layout/lib/wizard/wizard-desc';
+import AgreementApp from './agreement-app';
+
+// TODO: 加载 Blocklet 定义的 Agreement
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Agreement({
+  meta,
+  onClickNext,
+  handleDescEle
+}) {
+  const navigate = useNavigate();
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const clickNext = onClickNext || (() => {
+    navigate(`/launch-blocklet/install${window.location.search}`);
+  });
+  return /*#__PURE__*/_jsxs(Container, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "app-content",
+      children: /*#__PURE__*/_jsx("div", {
+        className: "agreement",
+        children: /*#__PURE__*/_jsx("div", {
+          className: "agreement-content",
+          children: /*#__PURE__*/_jsx(WizardDesc, {
+            blockletMeta: {
+              data: meta
+            },
+            locale: locale,
+            handleDescEle: handleDescEle
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "button-container",
+      "data-cy": "agree-all",
+      children: /*#__PURE__*/_jsx(ServerEula, {
+        onContinue: clickNext,
+        description: /*#__PURE__*/_jsx(AgreementApp, {}),
+        texts: {
+          listenName: t('launchBlocklet.license'),
+          buttonNext: t('launchBlocklet.next')
+        }
+      })
+    })]
+  });
+}
+Agreement.propTypes = {
+  meta: PropTypes.object.isRequired,
+  onClickNext: PropTypes.func,
+  handleDescEle: PropTypes.node
+};
+Agreement.defaultProps = {
+  onClickNext: null,
+  handleDescEle: ''
+};
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  .app-content {
+    padding: 2px 24px 24px;
+    ${props => props.theme.breakpoints.down('md')} {
+      padding-top: 10px;
+    }
+    width: 100%;
+    flex: 1;
+    letter-spacing: normal;
+  }
+  .agreement {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    border: 1px solid ${props => props.theme.palette.grey['100']};
+    border-radius: 12px;
+    ${props => props.theme.breakpoints.up('md')} {
+      margin-top: 24px;
+    }
+    ${props => props.theme.breakpoints.down('md')} {
+      margin-top: 16px;
+    }
+    .agreement-content {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      font-size: 14px;
+      overflow-y: auto;
+      ${props => props.theme.breakpoints.up('md')} {
+        padding: 0 24px;
+      }
+      ${props => props.theme.breakpoints.down('md')} {
+        padding: 0 16px;
+      }
+      &:after {
+        display: block;
+        content: '';
+        height: 24px;
+      }
+    }
+  }
+  .button-container {
+    padding-top: 24px;
+    padding-bottom: 34px;
+    ${props => props.theme.breakpoints.up('md')} {
+      padding-right: 24px;
+      margin-left: auto;
+    }
+    ${props => props.theme.breakpoints.down('md')} {
+      padding-top: 0;
+      padding-bottom: 16px;
+    }
+  }
+`;

package/es/blocklet/app-avatar.js

@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+import Avatar from '@mui/material/Avatar';
+import DiDAvatar from '@arcblock/did-connect/lib/Avatar';
+import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
+import useAppLogo from '../hooks/use-app-logo';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function BlockletAppAvatar({
+  blocklet,
+  style,
+  size,
+  ...rest
+}) {
+  const {
+    logoUrl
+  } = useAppLogo({
+    blocklet
+  });
+  const {
+    variant
+  } = rest;
+  let imgEle = /*#__PURE__*/_jsx("img", {
+    src: logoUrl,
+    alt: "",
+    style: {
+      width: size
+    }
+  });
+  if (!blocklet.meta.logo) {
+    const exist = (blocklet.configs || []).find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_SQUARE)?.value;
+    if (!exist) {
+      imgEle = /*#__PURE__*/_jsx(DiDAvatar, {
+        did: blocklet.meta.did || '',
+        responsive: true
+      });
+    }
+  }
+  return /*#__PURE__*/_jsx(Avatar, {
+    variant: variant || 'square',
+    style: Object.assign({
+      backgroundColor: 'transparent',
+      width: size,
+      height: size,
+      borderRadius: 10
+    }, style),
+    ...rest,
+    children: imgEle
+  });
+}
+BlockletAppAvatar.propTypes = {
+  blocklet: PropTypes.object.isRequired,
+  style: PropTypes.object,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+BlockletAppAvatar.defaultProps = {
+  style: {},
+  size: 40
+};

package/es/blocklet/audit-logs.js

@@ -0,0 +1,259 @@
+/* eslint-disable react/prop-types */
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import DidAvatar from '@arcblock/did-connect/lib/Avatar';
+import Spinner from '@mui/material/CircularProgress';
+import Empty from '@arcblock/ux/lib/Empty';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { WELLKNOWN_BLOCKLET_ADMIN_PATH } from '@abtnode/constant';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Pagination from '@mui/lab/Pagination';
+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 Tag from '@arcblock/ux/lib/Tag';
+import { useAuditLogContext, AuditLogProvider } from '../contexts/audit-log';
+import { useNodeContext } from '../contexts/node';
+import RelativeTime from '../relative-time';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getUserLink = ({
+  log,
+  info,
+  inService
+}) => {
+  if (inService) {
+    // TODO
+    return `${WELLKNOWN_BLOCKLET_ADMIN_PATH}/members?did=${log.actor.did}`;
+  }
+  if (log.scope === info.did) {
+    return `/team/members?did=${log.actor.did}`;
+  }
+  return `/blocklets/${log.scope}/members?did=${log.actor.did}`;
+};
+function AuditLog({
+  log
+}) {
+  const {
+    inService,
+    info
+  } = useNodeContext();
+  const {
+    showScope,
+    scopeFormatter = x => x
+  } = useAuditLogContext();
+  if (!log.actor.did) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Box, {
+    className: "log-entry",
+    "data-cy": "log-entry",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "log-author",
+      children: /*#__PURE__*/_jsx(DidAvatar, {
+        did: log.actor.did,
+        size: 36,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "log-body",
+      children: [/*#__PURE__*/_jsxs(Typography, {
+        className: "log-header",
+        color: "textSecondary",
+        component: "p",
+        gutterBottom: true,
+        display: "flex",
+        alignItems: "center",
+        children: [showScope && /*#__PURE__*/_jsx(Link, {
+          to: log.link,
+          children: /*#__PURE__*/_jsx(Tag, {
+            style: {
+              marginRight: 8
+            },
+            children: scopeFormatter(log.scope)
+          })
+        }), /*#__PURE__*/_jsxs(Link, {
+          to: getUserLink({
+            log,
+            inService,
+            info
+          }),
+          target: "_blank",
+          children: [log.actor.fullName, log.actor.role ? `(${log.actor.role})` : '']
+        }), ' ', "- ", log.action]
+      }), /*#__PURE__*/_jsx(Typography, {
+        className: "log-content",
+        maxWidth: "lg",
+        color: "textPrimary",
+        component: "div",
+        "data-color-mode": "light",
+        gutterBottom: true,
+        children: /*#__PURE__*/_jsx(MarkdownPreview, {
+          source: log.content,
+          linkTarget: "_blank"
+        })
+      }), /*#__PURE__*/_jsxs(Box, {
+        className: "log-meta",
+        variant: "body2",
+        children: [!!log.ip && /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          color: "textSecondary",
+          children: `IP: ${log.ip}`
+        }), !!log.env.os?.name && /*#__PURE__*/_jsxs(Typography, {
+          component: "span",
+          color: "textSecondary",
+          children: [log.env.os.name, "(", log.env.os.version, ")"]
+        }), !!log.env.browser?.name && /*#__PURE__*/_jsxs(Typography, {
+          component: "span",
+          color: "textSecondary",
+          children: [log.env.browser.name, "(", log.env.browser.version, ")"]
+        }), /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          color: "textSecondary",
+          children: /*#__PURE__*/_jsx(RelativeTime, {
+            value: log.createdAt
+          })
+        })]
+      })]
+    })]
+  });
+}
+function AuditLogs() {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    data,
+    loading,
+    paging,
+    filter,
+    categories,
+    setCategory,
+    fetch
+  } = useAuditLogContext();
+  if (loading) {
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        textAlign: 'center',
+        marginTop: '50px'
+      },
+      children: /*#__PURE__*/_jsx(Spinner, {})
+    });
+  }
+  return /*#__PURE__*/_jsxs(Div, {
+    "data-cy": "audit-logs",
+    children: [/*#__PURE__*/_jsx(Box, {
+      className: "log-controls",
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        style: {
+          width: '240px'
+        },
+        variant: "outlined",
+        children: [/*#__PURE__*/_jsx(InputLabel, {
+          children: t('common.filter')
+        }), /*#__PURE__*/_jsx(Select, {
+          "data-cy": "filter-by-category-trigger",
+          value: filter.category,
+          onChange: e => setCategory(e.target.value),
+          fullWidth: true,
+          label: t('common.category'),
+          disabled: loading,
+          children: categories.map(x => /*#__PURE__*/_jsx(MenuItem, {
+            value: x.value,
+            "data-cy": `filter-by-category-${x.value}`,
+            children: /*#__PURE__*/_jsx(Box, {
+              children: /*#__PURE__*/_jsx("span", {
+                children: x.label
+              })
+            })
+          }, x.label))
+        })]
+      })
+    }), data.length === 0 && /*#__PURE__*/_jsx(Empty, {
+      children: t('common.empty')
+    }), data.length > 0 && data.map(x => /*#__PURE__*/_jsx(AuditLog, {
+      log: x
+    }, x.id)), paging.pageCount > 1 && /*#__PURE__*/_jsx(Pagination, {
+      page: paging.page,
+      count: paging.pageCount,
+      onChange: (e, page) => fetch({
+        page
+      }),
+      showFirstButton: true,
+      showLastButton: true
+    })]
+  });
+}
+export default function WrappedAuditLogs({
+  scope,
+  categories,
+  showScope,
+  scopeFormatter
+}) {
+  return /*#__PURE__*/_jsx(AuditLogProvider, {
+    scope: scope,
+    categories: categories,
+    showScope: showScope,
+    scopeFormatter: scopeFormatter,
+    children: /*#__PURE__*/_jsx(AuditLogs, {})
+  });
+}
+const Div = styled.div`
+  .log-controls {
+    display: flex;
+    justify-content: space-between;
+  }
+  .log-entry {
+    display: flex;
+    margin: 16px 0;
+
+    .log-author {
+      margin-right: 8px;
+    }
+
+    .log-body {
+      flex: 1;
+
+      a {
+        color: ${({
+  theme
+}) => theme.palette.primary.main};
+      }
+
+      .log-header {
+      }
+
+      .log-content {
+        p {
+          margin-bottom: 4px;
+        }
+        ul,
+        ol {
+          padding-left: 2rem;
+        }
+        li {
+          list-style-type: disc;
+        }
+      }
+
+      .log-meta {
+        margin-top: 4px;
+
+        span {
+          font-size: 0.8rem;
+          display: inline-block;
+          margin-right: 8px;
+          padding-right: 8px;
+          border-right: 1px solid #ccc;
+
+          &:last-of-type {
+            border-right: none;
+          }
+        }
+      }
+    }
+  }
+`;

package/es/blocklet/blocklet-source.js

@@ -0,0 +1,48 @@
+import { useContext } from 'react';
+import PropTypes from 'prop-types';
+import joinUrl from 'url-join';
+import toUpper from 'lodash/toUpper';
+import Tag from '@arcblock/ux/lib/Tag';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import ExternalLink from '@mui/material/Link';
+import Box from '@mui/material/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function BlockletSource({
+  sourceInfo,
+  blocklet
+}) {
+  const {
+    t
+  } = useContext(LocaleContext);
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    alignItems: "center",
+    children: [/*#__PURE__*/_jsx(Tag, {
+      type: "success",
+      children: toUpper(sourceInfo.source)
+    }, "source"), sourceInfo.source === 'registry' && /*#__PURE__*/_jsx(ExternalLink, {
+      href: joinUrl(sourceInfo.deployedFrom, 'blocklets', blocklet?.meta?.bundleDid || ''),
+      target: "_blank",
+      className: "page-link",
+      underline: "hover",
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 8
+      },
+      children: t('blocklet.overview.viewInStore')
+    })]
+  });
+}
+BlockletSource.propTypes = {
+  sourceInfo: PropTypes.shape({
+    source: PropTypes.string,
+    deployedFrom: PropTypes.string
+  }),
+  blocklet: PropTypes.object
+};
+BlockletSource.defaultProps = {
+  sourceInfo: {},
+  blocklet: {}
+};