@abtnode/ux 1.16.18-beta-aa01bd8e → 1.16.18-beta-bb4ebacc

package/es/blocklet/actions.js

@@ -74,7 +74,6 @@ export default function BlockletActions({
       });
       setLoading(true);
       setCurrentAction(action);
-      setConfirmSetting(null);
       let isRemoved = false;
       try {
         if (action === 'remove') {
@@ -130,6 +129,7 @@ export default function BlockletActions({
         if (action === 'reload') {
           Toast.success(t('blocklet.reloadSuccess'));
         }
+        setConfirmSetting(null);
         onComplete({
           action,
           blocklet
@@ -141,6 +141,7 @@ export default function BlockletActions({
           blocklet,
           error: new Error(errMsg)
         });
+        throw new Error(errMsg);
       } finally {
         if (!isRemoved) {
           setLoading(false);
@@ -256,7 +257,6 @@ export default function BlockletActions({
       e.preventDefault();
       // eslint-disable-next-line no-empty
     } catch {}
-    setAnchorEl(null);
     if (typeof action.handler === 'function') {
       try {
         setLoading(true);
@@ -267,7 +267,10 @@ export default function BlockletActions({
         console.error(`Blocklet ${action.name} failed: `, err);
       } finally {
         setLoading(false);
+        setAnchorEl(null);
       }
+    } else {
+      setAnchorEl(null);
     }
   };
   const removeAction = !inService && isDeletableBlocklet(blocklet) ? {
@@ -392,13 +395,18 @@ export default function BlockletActions({
           return /*#__PURE__*/_jsxs(MenuItem, {
             dense: true,
             onClick: e => onAction(action, e),
-            disabled: action.disabled,
+            disabled: loading || action.disabled,
             "data-cy": `${action.action}-blocklet`,
             children: [/*#__PURE__*/_jsx(ListItemIcon, {
               style: {
                 minWidth: 24
               },
-              children: /*#__PURE__*/_jsx(action.icon, {
+              children: currentAction === action.action && loading ? /*#__PURE__*/_jsx(Spinner, {
+                size: 16,
+                sx: {
+                  marginRight: 1
+                }
+              }) : /*#__PURE__*/_jsx(action.icon, {
                 fontSize: "small"
               })
             }), /*#__PURE__*/_jsx(ListItemText, {
@@ -426,8 +434,11 @@ export default function BlockletActions({
         "data-cy": `${action.action}-blocklet`,
         onClick: () => onAction(action),
         disabled: Boolean(action.disabled) || loading,
-        children: [currentAction === action.action && loading && inProgress ? /*#__PURE__*/_jsx(Spinner, {
-          size: 16
+        children: [currentAction === action.action && loading ? /*#__PURE__*/_jsx(Spinner, {
+          size: 16,
+          sx: {
+            marginRight: 1
+          }
         }) : /*#__PURE__*/_jsx(action.icon, {}), /*#__PURE__*/_jsx("span", {
           className: "blocklet-action-text",
           children: action.name

package/es/blocklet/add-cert.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unused-prop-types */
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import useAsyncRetry from 'react-use/lib/useAsyncRetry';

package/es/blocklet/configuration.js

@@ -1,17 +1,14 @@
-import React, { useState, useContext, lazy, useRef } from 'react';
+import React, { useState, useContext } from 'react';
 import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
-import classnames from 'classnames';
-import joinUrl from 'url-join';
 import Box from '@mui/material/Box';
 import Switch from '@mui/material/Switch';
 import Divider from '@mui/material/Divider';
 import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Button from '@arcblock/ux/lib/Button';
 import LoopIcon from '@mui/icons-material/Loop';
-import Avatar from '@mui/material/Avatar';
 import { EVENTS } from '@abtnode/constant';
 import { BLOCKLET_CONFIGURABLE_KEY, SUPPORTED_LANGUAGES } from '@blocklet/constant';
 import { getWhoCanAccess } from '@blocklet/meta/lib/util';
@@ -26,18 +23,13 @@ import ClearCache from '../clear-cache';
 import AppSk from './preferences/app-sk';
 import TransferOwner from './transfer-owner';
 import useAppLogo from '../hooks/use-app-logo';
+import Uploader from './logo-uploader';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const languages = Object.keys(SUPPORTED_LANGUAGES).map(x => ({
   code: x,
   name: SUPPORTED_LANGUAGES[x].nativeName
 }));
-
-// eslint-disable-next-line import/no-unresolved
-const UploaderComponent = /*#__PURE__*/lazy(() => import('@blocklet/uploader/react').then(res => ({
-  default: res.Uploader
-})));
-const uploadPrefix = '/blocklet/logo/upload';
 function BlockletEnvironment({
   blocklet,
   onUpdate,
@@ -62,7 +54,6 @@ function BlockletEnvironment({
   const whoCanAccess = getWhoCanAccess(blocklet);
   const publicToStore = blocklet?.settings?.publicToStore;
   const disabled = loading || !hasPermission;
-  const uploaderLogoRef = useRef(null);
   const {
     logoUrl,
     rectLogoUrl,
@@ -70,20 +61,6 @@ function BlockletEnvironment({
   } = useAppLogo({
     blocklet
   });
-  const [apiPathProps, setApiPathProps] = useState();
-  const uploadLogoPrefix = joinUrl(prefix, uploadPrefix, 'square', blocklet.meta.did);
-  const uploadLogoRectPrefix = joinUrl(prefix, uploadPrefix, 'rect', blocklet.meta.did);
-  const uploadLogoFaviconPrefix = joinUrl(prefix, uploadPrefix, 'favicon', blocklet.meta.did);
-  const openUploader = uploaderPrefix => {
-    if (!hasPermission) {
-      return;
-    }
-    setApiPathProps({
-      uploader: uploaderPrefix,
-      disableMediaKitPrefix: true
-    });
-    uploaderLogoRef.current.open();
-  };
   const {
     did
   } = blocklet.meta;
@@ -269,11 +246,6 @@ function BlockletEnvironment({
       setLoading(false);
     }
   };
-  const uploaderStyle = {
-    '&::after': {
-      content: `"${t('common.switch')}"`
-    }
-  };
   return /*#__PURE__*/_jsxs(Div, {
     ...rest,
     children: [configurableEnvs.map(item => /*#__PURE__*/_jsxs(Box, {
@@ -306,19 +278,15 @@ function BlockletEnvironment({
         width: 'auto'
       },
       children: t('blocklet.config.logoSquare')
-    }), /*#__PURE__*/_jsx(Box, {
-      className: classnames('uploader-wrapper', hasPermission && 'enabled'),
-      sx: uploaderStyle,
-      onClick: () => openUploader(uploadLogoPrefix),
-      children: /*#__PURE__*/_jsx(Avatar, {
-        sx: {
-          height: 80,
-          width: 80
-        },
-        variant: "square",
-        alt: "Blocklet Logo",
-        src: logoUrl
-      })
+    }), /*#__PURE__*/_jsx(Uploader, {
+      did: blocklet.meta.did,
+      height: 80,
+      width: 80,
+      type: "square",
+      prefix: prefix,
+      url: logoUrl,
+      enabled: hasPermission,
+      headers: getSessionInHeader
     }), /*#__PURE__*/_jsx(Box, {
       className: "config-label",
       fontSize: 14,
@@ -328,17 +296,14 @@ function BlockletEnvironment({
       mb: 1.5,
       className: "config-desc",
       children: t('blocklet.config.logoRectDesc')
-    }), /*#__PURE__*/_jsx(Box, {
-      className: classnames('uploader-wrapper', hasPermission && 'enabled'),
-      sx: uploaderStyle,
-      onClick: () => openUploader(uploadLogoRectPrefix),
-      children: /*#__PURE__*/_jsx("img", {
-        alt: "Blocklet Rect Logo",
-        src: rectLogoUrl,
-        style: {
-          height: '80px'
-        }
-      })
+    }), /*#__PURE__*/_jsx(Uploader, {
+      did: blocklet.meta.did,
+      height: 80,
+      type: "rect",
+      prefix: prefix,
+      url: rectLogoUrl,
+      enabled: hasPermission,
+      headers: getSessionInHeader
     }), /*#__PURE__*/_jsx(Box, {
       className: "config-label",
       fontSize: 14,
@@ -348,41 +313,16 @@ function BlockletEnvironment({
       mb: 1.5,
       className: "config-desc",
       children: t('blocklet.config.logoFaviconDesc')
+    }), /*#__PURE__*/_jsx(Uploader, {
+      did: blocklet.meta.did,
+      height: 25,
+      width: 25,
+      type: "favicon",
+      prefix: prefix,
+      url: faviconUrl,
+      enabled: hasPermission,
+      headers: getSessionInHeader
     }), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        display: 'inline-flex',
-        cursor: hasPermission ? 'pointer' : 'default'
-      },
-      onClick: () => openUploader(uploadLogoFaviconPrefix),
-      children: /*#__PURE__*/_jsx(Avatar, {
-        variant: "square",
-        sx: {
-          width: 20,
-          height: 20
-        },
-        alt: "Blocklet Favicon Logo",
-        src: faviconUrl
-      })
-    }), /*#__PURE__*/_jsx(UploaderComponent, {
-      id: "\u200Buploader-logo",
-      ref: uploaderLogoRef,
-      popup: true,
-      onUploadFinish: () => {
-        uploaderLogoRef.current.close();
-      },
-      plugins: [],
-      apiPathProps: apiPathProps,
-      coreProps: {
-        restrictions: {
-          allowedFileTypes: ['image/*', '.jpg', '.jpeg', '.png', '.gif', '.svg'],
-          maxFileSize: 1024 * 1024 * 10,
-          maxNumberOfFiles: 1
-        }
-      },
-      tusProps: {
-        headers: getSessionInHeader
-      }
-    }, "uploader-logo"), /*#__PURE__*/_jsx(Box, {
       className: "config-form",
       children: whoCanAccess === 'all' && blocklet.source === 'registry' && /*#__PURE__*/_jsxs(Box, {
         className: "config-item",
@@ -617,34 +557,4 @@ const Div = styled.div`
   .form-item {
     margin-top: 0;
   }
-
-  .uploader-wrapper {
-    display: inline-flex;
-    position: relative;
-    font-size: 0px;
-    &.enabled {
-      cursor: pointer;
-    }
-    &::after {
-      display: none;
-    }
-    &.enabled::after {
-      display: block;
-      opacity: 0;
-      position: absolute;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.2);
-      left: 0;
-      right: 0;
-      height: 2.2em;
-      color: white;
-      text-align: center;
-      font-size: 12px;
-      line-height: 2em;
-      transition: opacity 0.3s ease;
-    }
-    &:hover::after {
-      opacity: 1;
-    }
-  }
 `;

package/es/blocklet/logo-uploader.js

@@ -0,0 +1,131 @@
+import React, { lazy, useRef } from 'react';
+import PropTypes from 'prop-types';
+import joinUrl from 'url-join';
+import styled from '@emotion/styled';
+import noop from 'lodash/noop';
+import Box from '@mui/material/Box';
+import classnames from 'classnames';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+// eslint-disable-next-line import/no-unresolved
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Uploader = /*#__PURE__*/lazy(() => import('@blocklet/uploader/react').then(res => ({
+  default: res.Uploader
+})));
+const uploadPrefix = '/blocklet/logo/upload';
+export default function LogoUploader({
+  url,
+  height,
+  width,
+  enabled,
+  type,
+  did,
+  prefix,
+  headers,
+  onUploaded
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const uploaderRef = useRef(null);
+  const onOpen = () => {
+    uploaderRef.current?.open();
+  };
+  const onFinish = () => {
+    onUploaded();
+    uploaderRef.current?.close();
+  };
+  const uploaderStyle = {
+    cursor: enabled ? 'pointer' : 'default',
+    '&::after': {
+      content: `"${t('common.switch')}"`
+    }
+  };
+  return /*#__PURE__*/_jsxs(Div, {
+    id: `uploader-${did}-${type}`,
+    children: [/*#__PURE__*/_jsx(Uploader, {
+      ref: uploaderRef,
+      popup: true,
+      onUploadFinish: onFinish,
+      plugins: ['ImageEditor'],
+      apiPathProps: {
+        uploader: joinUrl(prefix, uploadPrefix, type, did),
+        disableMediaKitPrefix: true
+      },
+      coreProps: {
+        restrictions: {
+          allowedFileTypes: ['image/*', '.jpg', '.jpeg', '.png', '.gif', '.svg'],
+          maxFileSize: 1024 * 1024 * 10,
+          maxNumberOfFiles: 1
+        }
+      },
+      tusProps: {
+        headers
+      }
+    }), /*#__PURE__*/_jsx(Box, {
+      className: classnames('uploader-wrapper', enabled && 'enabled'),
+      sx: uploaderStyle,
+      onClick: onOpen,
+      children: /*#__PURE__*/_jsx("img", {
+        alt: "Logo",
+        src: url,
+        style: {
+          height,
+          width
+        }
+      })
+    })]
+  }, `uploader-${did}-${type}`);
+}
+
+// infer props for Uploader
+LogoUploader.propTypes = {
+  url: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['square', 'rect', 'favicon']).isRequired,
+  did: PropTypes.string.isRequired,
+  prefix: PropTypes.string.isRequired,
+  headers: PropTypes.func,
+  onUploaded: PropTypes.func,
+  height: PropTypes.number,
+  width: PropTypes.any,
+  enabled: PropTypes.bool
+};
+LogoUploader.defaultProps = {
+  height: 80,
+  width: 'auto',
+  enabled: true,
+  headers: () => ({}),
+  onUploaded: noop
+};
+const Div = styled.div`
+  .uploader-wrapper {
+    display: inline-flex;
+    position: relative;
+    font-size: 0px;
+    &.enabled {
+      cursor: pointer;
+    }
+    &::after {
+      display: none;
+    }
+    &.enabled::after {
+      display: block;
+      opacity: 0;
+      position: absolute;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.2);
+      left: 0;
+      right: 0;
+      height: 2.2em;
+      color: white;
+      text-align: center;
+      font-size: 12px;
+      line-height: 2em;
+      transition: opacity 0.3s ease;
+    }
+    &:hover::after {
+      opacity: 1;
+    }
+  }
+`;

package/es/blocklet/oauth/federated-site-list.js

@@ -206,7 +206,7 @@ function FederatedSiteList({
       });
     }
     return list;
-  }, [federatedConfig.appId, federatedSites, isMaster]);
+  }, [federatedConfig.appId, federatedSites, isMaster, t]);
   const tableOptions = useCreation(() => {
     return {
       sort: true,

package/es/blocklet/publish/create-release.js

@@ -571,7 +571,7 @@ export default function CreateRelease({
             });
             uploaderLogoRef.current.close();
           },
-          plugins: [],
+          plugins: ['ImageEditor'],
           apiPathProps: {
             uploader: uploadLogoPrefix,
             disableMediaKitPrefix: true
@@ -595,7 +595,7 @@ export default function CreateRelease({
             });
             uploaderScreenshotRef.current.close();
           },
-          plugins: [],
+          plugins: ['ImageEditor'],
           apiPathProps: {
             uploader: uploadScreenshotPrefix,
             disableMediaKitPrefix: true

package/es/hooks/use-passport-id.js

@@ -1,11 +1,14 @@
-import useLocalStorage from 'react-use/lib/useLocalStorage';
 export default function usePassportId() {
-  const [passportId, setPassportId, clearPassportId] = useLocalStorage('passportId', '');
+  const clearPassportId = () => {
+    localStorage.removeItem('passportId');
+  };
+  const setPassportId = value => {
+    localStorage.setItem('passportId', value);
+  };
   const getPassportId = () => {
-    setTimeout(() => {
-      clearPassportId();
-    }, 0);
-    return passportId || '';
+    const passportId = localStorage.getItem('passportId') || '';
+    clearPassportId();
+    return passportId;
   };
   return {
     getPassportId,

package/es/locales/en.js

@@ -81,6 +81,7 @@ module.exports = {
     instances: 'Number of instances'
   },
   common: {
+    invalid: 'Invalid',
     about: 'About',
     access: 'Access',
     accessKey: 'Access Keys',
@@ -100,6 +101,7 @@ module.exports = {
     back: 'Back',
     basic: 'Basic',
     basicInfo: 'Basic Information',
+    profile: 'Profile',
     bind: 'Bind',
     blocklet: 'Blocklet',
     blocklets: 'Blocklets',
@@ -153,6 +155,7 @@ module.exports = {
     downloading: 'Downloading',
     edit: 'Edit',
     email: 'Email',
+    phone: 'Phone',
     empty: 'Empty',
     emptyData: 'No results found',
     enable: 'Enable',
@@ -394,9 +397,9 @@ module.exports = {
       securityError: 'SecurityError: Can not open the admin url from accessing a cross-origin frame'
     },
     config: {
-      name: 'Blocklet Name',
-      description: 'Blocklet Description',
-      sk: 'Secret key for the blocklet wallet',
+      name: 'App Name',
+      description: 'App Description',
+      sk: 'Secret key for the app wallet',
       logoSquare: 'App Logo',
       logoRect: 'Rect logo',
       logoRectDesc: 'Usually displayed at the top of the page, default to app logo',
@@ -417,7 +420,7 @@ module.exports = {
       languages: 'Supported Languages',
       selectLanguagesTip: 'Adjust the order by removing and re-adding',
       passportColor: 'Passport Color',
-      appUrl: 'Blocklet URL',
+      appUrl: 'App URL',
       access: {
         title: 'Who Can Access',
         description: 'Who can access the blocklet',
@@ -1107,7 +1110,24 @@ module.exports = {
         passportEmpty: 'Passport should not be empty'
       },
       connectedAccounts: 'Connected Accounts',
-      federated: 'Federated'
+      connections: 'Connections',
+      federated: 'Federated',
+      switch: {
+        did: 'Switch DID',
+        profile: 'Switch Profile',
+        passport: 'Switch Passport'
+      },
+      settings: {
+        notification: 'Notifications',
+        email: 'Send email to me when some events happen',
+        wallet: 'Send notification to my wallet when some events happen',
+        phone: 'Send text message to me when some events happen',
+        webhook: 'Webhooks',
+        add: 'Add new webhook',
+        url: 'Custom URL',
+        slack: 'Slack Webhook',
+        tested: 'Test message sent'
+      }
     },
     transferNode: {
       name: 'Transfer Ownership',

package/es/locales/zh.js

@@ -84,6 +84,7 @@ module.exports = {
     instances: '实例数'
   },
   common: {
+    invalid: '无效',
     about: '关于',
     access: '访问',
     accessKey: '访问秘钥',
@@ -103,6 +104,7 @@ module.exports = {
     back: '返回',
     basic: '基础',
     basicInfo: '基础信息',
+    profile: '信息',
     bind: '绑定',
     blocklet: '基石程序',
     blocklets: '基石程序',
@@ -157,6 +159,7 @@ module.exports = {
     downloading: '下载中',
     edit: '编辑',
     email: '邮箱',
+    phone: '电话',
     empty: '暂无',
     emptyData: '未找到结果',
     enable: '启用',
@@ -1110,7 +1113,24 @@ module.exports = {
         passportEmpty: '通行证不能为空'
       },
       connectedAccounts: '已连接账号',
-      federated: '统一登录'
+      connections: '账号绑定',
+      federated: '统一登录',
+      switch: {
+        did: '添加账户',
+        profile: '更新身份',
+        passport: '切换通行证'
+      },
+      settings: {
+        notification: '通知设置',
+        email: '当有动态时给我发送邮件',
+        wallet: '当有动态时给我发送钱包通知',
+        phone: '当有动态时给我发送短信',
+        webhook: '外部钩子',
+        add: '添加新钩子',
+        url: '自定义 URL',
+        slack: 'Slack 通知',
+        tested: '测试消息已经发送'
+      }
     },
     transferNode: {
       name: '转移所有者',

package/es/logs/log-terminal.js

@@ -34,7 +34,8 @@ export function LogTerminalGroup({
     error: 'Error',
     access: 'Access',
     stdout: 'stdout',
-    stderr: 'stderr'
+    stderr: 'stderr',
+    pm2: 'PM2'
   };
   const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
   const [currentType, setCurrentType] = useState(types[defaultTypeIndex || 0]);

package/es/schema-form/index.js

@@ -12,6 +12,7 @@ import TextInput from './text-input';
 import PassportInput from './passport-input';
 import Required from '../form/required';
 import FormWrapper from '../form/form-wrapper';
+import Uploader from '../blocklet/logo-uploader';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -35,7 +36,10 @@ function getComponent(item, {
   const componentMap = {
     input: TextInput,
     color: ColorInput,
-    passport: PassportInput
+    passport: PassportInput,
+    uploader: props => /*#__PURE__*/_jsx(Uploader, {
+      ...props.componentProps
+    })
   };
   return componentMap[componentType?.toLowerCase()];
 }
@@ -119,6 +123,7 @@ export default function SchemaForm({
         key,
         description,
         required,
+        solo = false,
         hidden = false,
         componentProps = {}
       } = x;
@@ -146,7 +151,7 @@ export default function SchemaForm({
       };
       return /*#__PURE__*/_jsxs(Box, {
         className: "form-item",
-        children: [/*#__PURE__*/_jsxs(Box, {
+        children: [!solo && /*#__PURE__*/_jsxs(Box, {
           className: "form-item-label",
           style: {
             color: required && !currentValue ? '#ff0000' : '#333'
@@ -156,10 +161,13 @@ export default function SchemaForm({
           className: "form-item-body",
           children: [/*#__PURE__*/_jsx(Box, {
             className: "form-item-input",
+            sx: {
+              textAlign: solo ? 'center' : 'left'
+            },
             children: /*#__PURE__*/_jsx(CurrentComponent, {
               ...renderComponentProps
             })
-          }), /*#__PURE__*/_jsx(Box, {
+          }), !solo && /*#__PURE__*/_jsx(Box, {
             className: "form-item-action",
             children: editing ? /*#__PURE__*/_jsxs(_Fragment, {
               children: [/*#__PURE__*/_jsx(IconButton, {