@abtnode/ux 1.16.21-beta-420f105a → 1.16.21-beta-93c6e42b

package/es/blocklet/component/index.js

@@ -39,6 +39,7 @@ import BlockletSource from '../blocklet-source';
 import BlockletStatus from '../status';
 import BlockletVersion from '../version';
 import Confirm from '../../confirm';
+import AutoCheckUpdate from '../storage/auto-check-update';
 import { useNodeContext } from '../../contexts/node';
 import { formatPerson, formatError, sleep, BlockletAdminRoles, formatToDatetime } from '../../util';
 import Permission from '../../permission';
@@ -52,6 +53,7 @@ import AddComponent from './add';
 import AddRule from '../router/action/add-rule';
 import RuleList from '../router/rule-list';
 import Actions from '../../actions';
+import { useCheckUpdateByUrl } from '../../hooks/use-check-update-by-url';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getEngineRows = (engine, t) => {
@@ -182,7 +184,8 @@ function ComponentItem({
     name: t('common.status'),
     value: /*#__PURE__*/_jsx(BlockletStatus, {
       status: status,
-      source: componentInfo.source
+      source: componentInfo.source,
+      progress: blocklet.progress
     })
   }, blocklet.status === 'running' ? {
     name: t('blocklet.startedAt'),
@@ -298,7 +301,8 @@ function ComponentItem({
               marginLeft: 4
             },
             status: status,
-            source: blocklet.source
+            source: blocklet.source,
+            progress: blocklet.progress
           }), /*#__PURE__*/_jsx(BlockletMode, {
             style: {
               marginLeft: 4
@@ -724,6 +728,7 @@ export default function BlockletComponent({
       };
     });
   };
+  useCheckUpdateByUrl(checkForUpdates);
   return /*#__PURE__*/_jsxs(Div, {
     component: "div",
     ...rest,
@@ -731,36 +736,44 @@ export default function BlockletComponent({
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsxs(Box, {
         className: "title",
+        flexDirection: "row",
+        display: "flex",
+        alignItems: "center",
+        style: {
+          marginLeft: '1em'
+        },
         children: [t('common.components'), !needMigration && /*#__PURE__*/_jsx(Permission, {
           permission: inService ? '' : 'mutate_blocklets',
           role: inService ? BlockletAdminRoles : [],
-          children: /*#__PURE__*/_jsx(StyledBadge, {
-            top: 1.2,
-            right: 0.4,
-            color: "error",
-            badgeContent: "",
-            variant: "dot",
-            invisible: !showUpdateDot,
-            children: /*#__PURE__*/_jsxs(Button, {
-              disabled: loading || isInProgress(blocklet.status),
-              color: "secondary",
-              onClick: () => {
-                checkForUpdates();
-              },
-              "data-cy": "check-for-updates",
-              children: [/*#__PURE__*/_jsx(Box, {
-                mr: 0.5,
-                display: "flex",
-                children: loading ? /*#__PURE__*/_jsx(Spinner, {
-                  size: 16
-                }) : /*#__PURE__*/_jsx(UpdateIcon, {
-                  style: {
-                    fontSize: '1em'
-                  }
-                })
-              }), t('blocklet.component.checkUpdateTitle')]
+          children: /*#__PURE__*/_jsx(AutoCheckUpdate, {
+            children: /*#__PURE__*/_jsx(StyledBadge, {
+              top: 1.2,
+              right: 0.4,
+              color: "error",
+              badgeContent: "",
+              variant: "dot",
+              invisible: !showUpdateDot,
+              children: /*#__PURE__*/_jsxs(Button, {
+                disabled: loading || isInProgress(blocklet.status),
+                color: "secondary",
+                onClick: () => {
+                  checkForUpdates();
+                },
+                "data-cy": "check-for-updates",
+                children: [/*#__PURE__*/_jsx(Box, {
+                  mr: 0.5,
+                  display: "flex",
+                  children: loading ? /*#__PURE__*/_jsx(Spinner, {
+                    size: 16
+                  }) : /*#__PURE__*/_jsx(UpdateIcon, {
+                    style: {
+                      fontSize: '1em'
+                    }
+                  })
+                }), t('blocklet.component.checkUpdateTitle')]
+              })
             })
           })
         })]

package/es/blocklet/overview.js

@@ -71,7 +71,8 @@ export default function BlockletOverview() {
     name: t('common.status'),
     value: /*#__PURE__*/_jsx(BlockletStatus, {
       status: blocklet.status,
-      source: blocklet.source
+      source: blocklet.source,
+      progress: blocklet.progress
     })
   }, isServerless(blocklet) ? {
     name: 'NFT',

package/es/blocklet/status.js

@@ -16,6 +16,7 @@ export default function BlockletStatus({
   status,
   variant,
   source,
+  progress,
   ...rest
 }) {
   const {
@@ -25,6 +26,7 @@ export default function BlockletStatus({
     added: 'primary',
     waiting: 'warning',
     downloading: 'warning',
+    extracting: 'warning',
     downloaded: 'primary',
     installing: 'warning',
     installed: 'primary',
@@ -42,6 +44,7 @@ export default function BlockletStatus({
     added: colors.grey,
     waiting: colors.yellow,
     downloading: colors.yellow,
+    extracting: colors.yellow,
     downloaded: colors.grey,
     installing: colors.yellow,
     installed: colors.grey,
@@ -77,15 +80,22 @@ export default function BlockletStatus({
       style: {
         marginRight: 5
       }
-    }), statusTxt]
+    }), statusTxt, status === 'downloading' && progress ? /*#__PURE__*/_jsx("div", {
+      style: {
+        marginLeft: 5
+      },
+      children: `${progress} %`
+    }) : null]
   });
 }
 BlockletStatus.propTypes = {
   status: PropTypes.string.isRequired,
   variant: PropTypes.oneOf(['dot', 'tag']),
-  source: PropTypes.string
+  source: PropTypes.string,
+  progress: PropTypes.number
 };
 BlockletStatus.defaultProps = {
   variant: 'tag',
-  source: ''
+  source: '',
+  progress: 0
 };

package/es/blocklet/storage/auto-check-update.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import PropTypes from 'prop-types';
+import Tooltip from '@mui/material/Tooltip';
+import SwitchControl from '../component/switch-control';
+import { useBlockletStorageContext } from '../../contexts/blocklet-storage';
+
+/**
+ * @description
+ * @param {{
+ *  style: import('react').CSSProperties
+ * }} {...rest}
+ * @return {*}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function AutoCheckUpdate({
+  children,
+  ...rest
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    updateAutoCheckUpdate,
+    autoCheckUpdate
+  } = useBlockletStorageContext();
+  const configAutoBackup = async () => {
+    try {
+      const enabled = !autoCheckUpdate?.enabled;
+      await updateAutoCheckUpdate({
+        enabled
+      });
+      Toast.success(enabled ? t('storage.spaces.autoCheckUpdate.enabled') : t('storage.spaces.autoCheckUpdate.disabled'));
+    } catch (error) {
+      Toast.error(error.message);
+    }
+  };
+  const enabled = Boolean(autoCheckUpdate?.enabled);
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    children: [children, /*#__PURE__*/_jsx(Tooltip, {
+      title: t('storage.spaces.autoCheckUpdate.title'),
+      arrow: true,
+      placement: "right",
+      children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(SwitchControl, {
+          checked: enabled,
+          onChange: configAutoBackup,
+          name: "enableWelcomePage",
+          style: {
+            ...rest.style,
+            zoom: 0.8
+          }
+        })
+      })
+    })]
+  });
+}
+AutoCheckUpdate.propTypes = {
+  children: PropTypes.any
+};
+AutoCheckUpdate.defaultProps = {
+  children: null
+};
+export default AutoCheckUpdate;

package/es/contexts/blocklet-storage.js

@@ -10,6 +10,7 @@ import { useNodeContext } from './node';
 import useBackupProgress from '../hooks/use-backup-progress';
 import useBackups from '../hooks/use-backups';
 import { useAutoBackup } from '../hooks/use-auto-backup';
+import { useAutoCheckUpdate } from '../hooks/use-auto-check-update';
 
 /**
  * @typedef {import('../blocklet/storage/connected').SpaceGateway} SpaceGateway
@@ -86,6 +87,10 @@ function BlockletStorageProvider({
   const autoBackup = useAutoBackup({
     deps: [autoBackupRefresh]
   });
+  const [autoCheckUpdateRefresh, setAutoCheckUpdateRefresh] = useState(false);
+  const autoCheckUpdate = useAutoCheckUpdate({
+    deps: [autoCheckUpdateRefresh]
+  });
   const refreshSpaceGateways = () => {
     setSpaceGatewaysRefresh(p => !p);
   };
@@ -95,6 +100,9 @@ function BlockletStorageProvider({
   const refreshAutoBackup = () => {
     setAutoBackupRefresh(x => !x);
   };
+  const refreshAutoCheckUpdate = () => {
+    setAutoCheckUpdateRefresh(x => !x);
+  };
 
   /**
    * @description
@@ -200,6 +208,15 @@ function BlockletStorageProvider({
     });
     refreshAutoBackup();
   };
+  const updateAutoCheckUpdate = async value => {
+    await api.updateAutoCheckUpdate({
+      input: {
+        did: blocklet.meta.did,
+        autoCheckUpdate: value
+      }
+    });
+    refreshAutoCheckUpdate();
+  };
   return /*#__PURE__*/_jsx(Provider, {
     value: {
       spaceGateways,
@@ -211,6 +228,8 @@ function BlockletStorageProvider({
       spaceGatewaysLoading,
       spaceGatewayIsSelected,
       updateAutoBackup,
+      updateAutoCheckUpdate,
+      autoCheckUpdate,
       backupEndpoint,
       backupProgress,
       backups,

package/es/hooks/blocklet.js

@@ -6,6 +6,18 @@ import Toast from '@arcblock/ux/lib/Toast';
 import { toSlotDomain, getBlockletUrlParams, getBlockletUrl } from '../util';
 import { fixBlocklet } from '../blocklet/util';
 import { useDomainsAccessibility } from './url-evaluation';
+import parseProgress from '../util/parse-progress';
+const excludeDownloadingStatus = {
+  waiting: 1,
+  installing: 1,
+  installed: 1,
+  starting: 1,
+  running: 1,
+  stopped: 1,
+  upgrading: 1,
+  restarting: 1,
+  deleting: 1
+};
 
 // eslint-disable-next-line import/prefer-default-export
 export function useBlocklet({
@@ -104,6 +116,12 @@ export function useBlocklet({
             fixRuntime: 'merge-old',
             oldBlocklet
           });
+          if (oldBlocklet && excludeDownloadingStatus[data.status]) {
+            oldBlocklet?.children?.forEach(item => {
+              delete item.progress;
+            });
+            delete oldBlocklet.progress;
+          }
           return data;
         });
         setLoading(false);
@@ -137,6 +155,62 @@ export function useBlocklet({
       });
     }
   };
+  const handleProgress = data => {
+    if (!data || data.meta?.did !== blocklet?.meta?.did) {
+      return;
+    }
+    if (data.status === 'extracting') {
+      setBlocklet(oldBlocklet => {
+        if (!oldBlocklet) {
+          return oldBlocklet;
+        }
+        const children = oldBlocklet.children || [];
+        children.forEach(x => {
+          if (x.meta?.bundleDid === data.component?.did) {
+            x.status = data.status;
+          }
+        });
+
+        // 判断当前下载的 children 是否都处于 extracting
+        const extracting = children.every(x => {
+          if (excludeDownloadingStatus[x.status]) {
+            return true;
+          }
+          return x.status === 'extracting';
+        });
+        return {
+          ...oldBlocklet,
+          children,
+          status: extracting ? 'extracting' : oldBlocklet.status
+        };
+      });
+    }
+    if (data.status === 'downloading' && data.total) {
+      setBlocklet(oldBlocklet => {
+        if (!oldBlocklet) {
+          return oldBlocklet;
+        }
+
+        // keep largest files as progress
+        const children = oldBlocklet.children || [];
+        let progress = 100;
+        children.forEach(item => {
+          if (item.meta?.bundleDid === data.component?.did) {
+            item.progress = parseProgress(data.current, data.total);
+            item.status = data.status;
+            if (item.progress < progress) {
+              progress = item.progress;
+            }
+          }
+        });
+        return {
+          ...oldBlocklet,
+          children,
+          progress
+        };
+      });
+    }
+  };
   const refreshDomainStatus = () => {
     if (did && domainListStr) {
       client.checkDomains({
@@ -196,6 +270,7 @@ export function useBlocklet({
   useSubscription(BlockletEvents.installed, handleRefresh, [blocklet?.meta?.did, !disableSubscription]);
   useSubscription(BlockletEvents.upgraded, handleRefresh, [blocklet?.meta?.did, !disableSubscription]);
   useSubscription(BlockletEvents.updated, handleRefresh, [blocklet?.meta?.did, !disableSubscription]);
+  useSubscription(BlockletEvents.downloadBundleProgress, handleProgress, [blocklet?.meta?.did, !disableSubscription]);
   const data = blocklet ? merge(blocklet, {
     site: {
       domainAliases: blocklet.site.domainAliases.map(x => {

package/es/hooks/use-auto-check-update.js

@@ -0,0 +1,33 @@
+/* eslint-disable import/prefer-default-export */
+import { useAsyncEffect } from 'ahooks';
+import { useState } from 'react';
+import { useBlockletContext } from '../contexts/blocklet';
+import { useNodeContext } from '../contexts/node';
+export function useAutoCheckUpdate({
+  deps
+} = {
+  deps: []
+}) {
+  /** @type {{ blocklet: import('@abtnode/client').BlockletState }} */
+  const {
+    blocklet
+  } = useBlockletContext();
+  /** @type {{api: import('@abtnode/client')}} */
+  const {
+    api
+  } = useNodeContext();
+  const [autoCheckUpdate, setAutoCheckUpdate] = useState(null);
+  useAsyncEffect(async () => {
+    if (blocklet?.meta?.did) {
+      const {
+        autoCheckUpdate: data
+      } = await api.getAutoCheckUpdate({
+        input: {
+          did: blocklet.meta.did
+        }
+      });
+      setAutoCheckUpdate(data);
+    }
+  }, [blocklet?.meta?.did].concat(deps));
+  return autoCheckUpdate;
+}

package/es/hooks/use-check-update-by-url.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNavigate } from 'react-router-dom';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import useEventListen from './use-event-listen';
+export function dispatchCheckUpdate() {
+  window.dispatchEvent(new CustomEvent('checkUpdate'));
+}
+export function useCheckUpdateByUrl(event) {
+  const navigate = useNavigate();
+  const {
+    t
+  } = useLocaleContext();
+  const handle = () => {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('checkUpdate')) {
+      params.delete('checkUpdate');
+      navigate(params.toString());
+      event();
+      Toast.success(t('notification.checkingForUpdates'));
+    }
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(handle, []);
+  useEventListen('checkUpdate', handle);
+}
+export default useCheckUpdateByUrl;

package/es/hooks/use-event-listen.js

@@ -0,0 +1,11 @@
+import { useRef, useEffect } from 'react';
+function useEventListen(key, callback) {
+  // reduce rerender
+  const ref = useRef(callback);
+  useEffect(() => {
+    const event = e => ref.current(e.detail);
+    window.addEventListener(key, event);
+    return () => window.removeEventListener(key, event);
+  }, [key]);
+}
+export default useEventListen;

package/es/locales/en.js

@@ -509,6 +509,7 @@ export default {
       added: 'Added',
       waiting: 'Waiting',
       downloading: 'Downloading',
+      extracting: 'Extracting',
       installing: 'Installing',
       upgrading: 'Upgrading',
       installed: 'Installed',
@@ -841,6 +842,8 @@ export default {
     showRead: 'Show Read',
     markAllAsRead: 'Mark All as Read',
     markAsRead: 'Mark As Read',
+    proceed: 'Proceed',
+    checkingForUpdates: 'Checking for updates...',
     email: {
       enable: 'Enable email notification',
       from: 'Email sender',
@@ -1523,6 +1526,11 @@ export default {
         enabled: 'Automatic backup is on',
         disabled: 'Automatic backup is off'
       },
+      autoCheckUpdate: {
+        title: 'Automatically check for new version notification',
+        enabled: 'Automatically check for new version is on',
+        disabled: 'Automatically check for new version is off'
+      },
       backupSuccessfully: 'Backup successfully',
       restore: 'Restore',
       restoreSuccessfully: 'Restore successfully',

package/es/locales/zh.js

@@ -516,6 +516,7 @@ export default {
       added: '已添加',
       waiting: '等待中',
       downloading: '下载中',
+      extracting: '提取中',
       installing: '安装中',
       upgrading: '升级中',
       installed: '已安装',
@@ -844,6 +845,8 @@ export default {
     showRead: '显示已读',
     markAllAsRead: '全部标记为已读',
     markAsRead: '标记为已读',
+    proceed: '处理',
+    checkingForUpdates: '正在检查更新...',
     email: {
       enable: '是否开启 Email 通知',
       from: '发件人邮箱',
@@ -1528,6 +1531,11 @@ export default {
         enabled: '自动备份已开启',
         disabled: '自动备份已关闭'
       },
+      autoCheckUpdate: {
+        title: '自动检测新版本提醒',
+        enabled: '自动检测新版本提醒已开启',
+        disabled: '自动检测新版本提醒已关闭'
+      },
       backupSuccessfully: '备份成功',
       restore: '还原',
       restoreSuccessfully: '还原成功',

package/es/notifications/list.js

@@ -22,6 +22,7 @@ import Permission from '../permission';
 import RelativeTime from '../relative-time';
 import { useNodeContext } from '../contexts/node';
 import { BlockletAdminRoles } from '../util';
+import { dispatchCheckUpdate } from '../hooks/use-check-update-by-url';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -87,6 +88,12 @@ export default function NotificationsList({
     onHide(e);
     navigate(viewAllUrl);
   };
+  const handleCheckForUpdates = (event, action) => {
+    event.preventDefault();
+    event.stopPropagation();
+    navigate(action);
+    dispatchCheckUpdate();
+  };
   return /*#__PURE__*/_jsxs(Div, {
     children: [/*#__PURE__*/_jsxs(Typography, {
       component: "h3",
@@ -142,14 +149,30 @@ export default function NotificationsList({
                 'text-overflow': 'ellipsis'
               },
               children: x.description
-            }), /*#__PURE__*/_jsx(RelativeTime, {
-              value: x.createdAt,
-              locale: locale,
-              style: {
-                color: theme.palette.text.secondary,
-                fontSize: '0.875rem',
-                marginTop: '4px'
-              }
+            }), /*#__PURE__*/_jsxs(Box, {
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              children: [/*#__PURE__*/_jsx(RelativeTime, {
+                value: x.createdAt,
+                locale: locale,
+                style: {
+                  color: theme.palette.text.secondary,
+                  fontSize: '0.875rem',
+                  marginTop: '4px'
+                }
+              }), x.action && !x.read ? /*#__PURE__*/_jsx(Button, {
+                color: "primary",
+                variant: "outlined",
+                onPointerDown: event => {
+                  event.stopPropagation();
+                  event.preventDefault();
+                },
+                onClick: e => handleCheckForUpdates(e, x.action),
+                "data-cy": "check-for-updates",
+                children: t('notification.proceed')
+              }) : null]
             })]
           })
         })]

package/es/util/parse-progress.js

@@ -0,0 +1,10 @@
+// 0~100
+const parseProgress = (current, total) => {
+  const totalNumber = typeof total !== 'number' ? Number(total) : total;
+  if (Number.isNaN(totalNumber) || totalNumber <= 0) {
+    return 0;
+  }
+  const value = Math.floor(current / totalNumber * 100);
+  return Math.min(Math.max(value, 0), 100);
+};
+export default parseProgress;