@abtnode/ux 1.16.28-beta-8acda0e6 → 1.16.28-beta-b30865b3

package/lib/actions.js

@@ -1,12 +1,8 @@
 import { useState, createElement as _createElement } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import IconButton from '@mui/material/IconButton';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
+import { IconButton, Menu, MenuItem, ListItemIcon, ListItemText, Divider } from '@mui/material';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Actions({
   actions,
@@ -57,9 +53,14 @@ export default function Actions({
             close: onClose
           });
         }
+        if (action.separator) {
+          // eslint-disable-next-line react/no-array-index-key
+          return /*#__PURE__*/_jsx(Divider, {}, `separator-${index}`);
+        }
         const {
           icon,
           text,
+          render,
           onClick,
           disabled = false,
           ...opts
@@ -69,7 +70,8 @@ export default function Actions({
           disabled: disabled,
           dense: true,
           onClick: async e => {
-            await onClick(e);
+            e.stopPropagation();
+            await onClick?.(e);
             onClose();
           }
           // eslint-disable-next-line react/no-array-index-key

package/lib/blocklet/component/component-cell-mount-poin.js

@@ -0,0 +1,164 @@
+import normalizePathPrefix from '@abtnode/util/lib/normalize-path-prefix';
+import { Icon } from '@iconify/react';
+import { Box, CircularProgress, IconButton, TextField } from '@mui/material';
+import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
+import urlPathFriendly from '@blocklet/meta/lib/url-path-friendly';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../../contexts/node';
+import { formatError } from '../../util';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ComponentCellMountPoint({
+  blocklet,
+  ancestors,
+  mountPoint,
+  href
+}) {
+  const [hover, setHover] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [editValue, setEditValue] = useState(mountPoint);
+  const {
+    api
+  } = useNodeContext();
+  const isRoot = !ancestors.length;
+  const rootDid = isRoot ? blocklet.meta.did : ancestors.map(x => x.meta.did)[0];
+  useEffect(() => {
+    setEditing(false);
+    setHover(false);
+    setLoading(false);
+  }, [mountPoint]);
+  const handleCancel = () => {
+    setHover(false);
+    setEditing(false);
+    setEditValue(mountPoint);
+  };
+  const onSubmitMountPoint = async e => {
+    e.preventDefault();
+    setLoading(true);
+    setHover(false);
+    try {
+      const input = {
+        rootDid,
+        mountPoint: urlPathFriendly(editValue)
+      };
+      if (!isRoot) {
+        input.did = blocklet.meta.did;
+      }
+      await api.updateComponentMountPoint({
+        input
+      });
+    } catch (err) {
+      setLoading(false);
+      err.message = formatError(err);
+      Toast.error(err.message);
+      throw err;
+    }
+  };
+  const tools = editing ? /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      ml: 1
+    },
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      size: "medium",
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      "data-cy": "edit-mount-point-submit",
+      onClick: onSubmitMountPoint,
+      children: /*#__PURE__*/_jsx(Box, {
+        component: Icon,
+        icon: "material-symbols:done",
+        sx: {
+          color: 'primary.main',
+          transition: '0.3s opacity'
+        }
+      })
+    }), /*#__PURE__*/_jsx(IconButton, {
+      size: "medium",
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      onClick: handleCancel,
+      children: /*#__PURE__*/_jsx(Box, {
+        component: Icon,
+        icon: "iconoir:cancel",
+        sx: {
+          color: 'primary.main',
+          transition: '0.3s opacity'
+        }
+      })
+    })]
+  }) : /*#__PURE__*/_jsx(IconButton, {
+    size: "medium",
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    onClick: () => setEditing(true),
+    children: /*#__PURE__*/_jsx(Box, {
+      component: Icon,
+      "data-cy": "edit-mount-point",
+      icon: "lets-icons:edit-light",
+      sx: {
+        opacity: hover ? 1 : 0,
+        color: 'primary.main',
+        transition: '0.3s opacity'
+      }
+    })
+  });
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: {
+        xs: 'none',
+        md: 'flex'
+      }
+    },
+    alignItems: "center",
+    flexGrow: "1",
+    children: [editing ? /*#__PURE__*/_jsx("form", {
+      onSubmit: onSubmitMountPoint,
+      children: /*#__PURE__*/_jsx(TextField, {
+        style: {
+          flex: 1
+        },
+        fullWidth: true,
+        "data-cy": "edit-mount-point-input",
+        value: editValue,
+        onChange: e => setEditValue(e.target.value),
+        autoFocus: true,
+        size: "small",
+        variant: "outlined",
+        placeholder: mountPoint
+      })
+    }) : /*#__PURE__*/_jsx(Box, {
+      component: "a",
+      target: "_blank",
+      href: href,
+      rel: "noopener noreferrer",
+      title: href,
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      children: /*#__PURE__*/_jsx(Box, {
+        maxWidth: 400,
+        sx: {
+          color: 'secondary.main',
+          fontSize: 16,
+          px: 2
+        },
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+        children: normalizePathPrefix(mountPoint)
+      })
+    }), loading ? /*#__PURE__*/_jsx(CircularProgress, {
+      size: 20,
+      sx: {
+        ml: 1
+      }
+    }) : tools]
+  }, mountPoint);
+}
+ComponentCellMountPoint.propTypes = {
+  mountPoint: PropTypes.string.isRequired,
+  href: PropTypes.string.isRequired,
+  blocklet: PropTypes.object.isRequired,
+  ancestors: PropTypes.array.isRequired
+};
+export default ComponentCellMountPoint;

package/lib/blocklet/component/component-cell.js

@@ -11,7 +11,6 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import { Icon } from '@iconify/react';
 import Tooltip from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
-import normalizePathPrefix from '@abtnode/util/lib/normalize-path-prefix';
 import { getComponentMissingConfigs, getDisplayName, isInProgress, hasStartEngine } from '@blocklet/meta/lib/util';
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import { hasMountPoint } from '@blocklet/meta/lib/engine';
@@ -26,6 +25,7 @@ import StartComponent from './start';
 import Line from './line';
 import Actions from '../../actions';
 import ComponentInfoDialog from './component-info-dialog';
+import ComponentCellMountPoint from './component-cell-mount-poin';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const isResource = component => !component?.meta?.group;
 const getComponentName = (componentId, app) => {
@@ -62,6 +62,7 @@ export default function ComponentCell({
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [loading, setLoading] = useState(false);
   const [confirmSetting, setConfirmSetting] = useState(null);
+  const [showComponentConfiguration, setShowComponentConfiguration] = useState(false);
   const {
     deletingBlocklets: deletingComponents
   } = useDeletingBlockletContext();
@@ -162,33 +163,11 @@ export default function ComponentCell({
             })]
           })]
         })]
-      }, blocklet), hasMountPoint(blocklet.meta) && /*#__PURE__*/_jsx(Box, {
-        sx: {
-          display: {
-            xs: 'none',
-            md: 'flex'
-          }
-        },
-        alignItems: "center",
-        flexGrow: "1",
-        children: /*#__PURE__*/_jsx("a", {
-          target: "_blank",
-          href: href,
-          rel: "noopener noreferrer",
-          title: href,
-          children: /*#__PURE__*/_jsx(Box, {
-            maxWidth: 400,
-            sx: {
-              color: 'secondary.main',
-              fontSize: 16,
-              px: 2
-            },
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            textOverflow: "ellipsis",
-            children: normalizePathPrefix(mountPoint)
-          })
-        })
+      }, blocklet), hasMountPoint(blocklet.meta) && /*#__PURE__*/_jsx(ComponentCellMountPoint, {
+        blocklet: blocklet,
+        ancestors: ancestors,
+        mountPoint: mountPoint,
+        href: href
       }, mountPoint), /*#__PURE__*/_jsx("div", {
         style: {
           flex: 1
@@ -198,7 +177,14 @@ export default function ComponentCell({
         alignItems: "center",
         children: [hasStartEngine(blocklet.meta) && /*#__PURE__*/_jsx(Tooltip, {
           title: t('common.visit'),
-          children: /*#__PURE__*/_jsx("a", {
+          children: /*#__PURE__*/_jsx(Box, {
+            component: "a",
+            sx: {
+              display: {
+                xs: 'flex',
+                md: 'none'
+              }
+            },
             target: "_blank",
             href: href,
             rel: "noopener noreferrer",
@@ -207,66 +193,73 @@ export default function ComponentCell({
               children: /*#__PURE__*/_jsx(LaunchIcon, {})
             })
           })
-        }), /*#__PURE__*/_jsx(ComponentConfiguration, {
-          blocklet: blocklet,
-          ancestors: ancestors,
-          children: ({
-            open
-          }) => /*#__PURE__*/_jsx(Tooltip, {
-            title: t('common.config'),
-            children: /*#__PURE__*/_jsx(StyledBadge, {
-              color: "error",
-              badgeContent: "",
-              variant: "dot",
-              invisible: !getComponentMissingConfigs(blocklet, ancestors[0]).length,
-              children: /*#__PURE__*/_jsx(IconButton, {
-                onClick: open,
-                size: "small",
-                children: /*#__PURE__*/_jsx(SettingsOutlinedIcon, {})
-              })
-            })
-          }, "config")
         }), /*#__PURE__*/_jsx(StartComponent, {
           blocklet: app,
           component: blocklet,
           onStart: onStart,
           onStop: onStop,
           disabled: !['starting', 'stopping'].includes(app.status) && isInProgress(app.status)
-        }), /*#__PURE__*/_jsx(Actions, {
-          "data-cy": "component-actions",
-          actions: [hasStartEngine(blocklet.meta) || isResource(blocklet) ? {
-            icon: /*#__PURE__*/_jsx(InfoOutlinedIcon, {}),
-            text: t('common.detail'),
-            onClick: () => {
-              setComponentInfo(blocklet);
-            }
-          } : null, {
-            icon: /*#__PURE__*/_jsx(RestartIcon, {}),
-            text: t('common.restart'),
-            onClick: () => {
-              setConfirmSetting({
-                title: `${t('common.restart')} ${blocklet.meta.title}`,
-                description: t('blocklet.action.restartDescription'),
-                confirm: t('blocklet.action.confirmRestart'),
-                cancel: t('common.cancel'),
-                onConfirm: async () => {
-                  setLoading(true);
-                  await onRestart(blocklet);
-                  setLoading(false);
-                },
-                onCancel: () => setConfirmSetting(null)
-              });
-            },
-            disabled: loading || appInProgress || componentInProgress || blocklet.status !== 'running'
-          }, {
-            icon: /*#__PURE__*/_jsx(DeleteIcon, {}),
-            text: t('common.delete'),
-            onClick: () => {
-              setShowDeleteConfirm(true);
-            },
-            disabled: appInProgress || componentInProgress || !!deleteDisabledTip,
-            tip: deleteDisabledTip
-          }].filter(Boolean)
+        }), /*#__PURE__*/_jsx(StyledBadge, {
+          color: "error",
+          badgeContent: "",
+          variant: "dot",
+          invisible: !getComponentMissingConfigs(blocklet, ancestors[0]).length,
+          children: /*#__PURE__*/_jsx(Actions, {
+            "data-cy": "component-actions",
+            actions: [hasStartEngine(blocklet.meta) || isResource(blocklet) ? {
+              icon: /*#__PURE__*/_jsx(InfoOutlinedIcon, {}),
+              text: t('common.detail'),
+              onClick: () => {
+                setComponentInfo(blocklet);
+              }
+            } : null, {
+              icon: /*#__PURE__*/_jsx(RestartIcon, {}),
+              text: t('common.restart'),
+              onClick: () => {
+                setConfirmSetting({
+                  title: `${t('common.restart')} ${blocklet.meta.title}`,
+                  description: t('blocklet.action.restartDescription'),
+                  confirm: t('blocklet.action.confirmRestart'),
+                  cancel: t('common.cancel'),
+                  onConfirm: async () => {
+                    setLoading(true);
+                    await onRestart(blocklet);
+                    setLoading(false);
+                  },
+                  onCancel: () => setConfirmSetting(null)
+                });
+              },
+              disabled: loading || appInProgress || componentInProgress || blocklet.status !== 'running'
+            }, {
+              icon: /*#__PURE__*/_jsx(DeleteIcon, {}),
+              text: t('common.delete'),
+              onClick: () => {
+                setShowDeleteConfirm(true);
+              },
+              disabled: appInProgress || componentInProgress || !!deleteDisabledTip,
+              tip: deleteDisabledTip
+            }, {
+              separator: true
+            }, {
+              icon: /*#__PURE__*/_jsx(SettingsOutlinedIcon, {}),
+              onClick: () => {
+                setShowComponentConfiguration(true);
+              },
+              text: /*#__PURE__*/_jsx(StyledBadge, {
+                color: "error",
+                badgeContent: "",
+                variant: "dot",
+                invisible: !getComponentMissingConfigs(blocklet, ancestors[0]).length,
+                children: /*#__PURE__*/_jsx(Box, {
+                  sx: {
+                    width: '100%'
+                  },
+                  children: t('common.config')
+                })
+              }),
+              disabled: appInProgress || componentInProgress
+            }].filter(Boolean)
+          })
         })]
       }, "actions")]
     }, "group-not-gateway-box"), /*#__PURE__*/_jsx(Line, {}, "line"), /*#__PURE__*/_jsx(ComponentInfoDialog, {
@@ -290,7 +283,13 @@ export default function ComponentCell({
       params: confirmSetting.params,
       onConfirm: confirmSetting.onConfirm,
       onCancel: confirmSetting.onCancel
-    }, "confirm-setting")]
+    }, "confirm-setting"), showComponentConfiguration && /*#__PURE__*/_jsx(ComponentConfiguration, {
+      open: true,
+      hiddenChildren: true,
+      onClose: () => setShowComponentConfiguration(false),
+      blocklet: blocklet,
+      ancestors: ancestors
+    })]
   });
 }
 ComponentCell.propTypes = {

package/lib/blocklet/component/configuration.js

@@ -12,13 +12,16 @@ import Tabs from '@arcblock/ux/lib/Tabs';
 import { isInstalling } from '../../util';
 import ComponentEnvironment from './environment';
 import ComponentSetting from './setting';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function ComponentConfiguration({
+  open,
+  onClose,
+  hiddenChildren,
   blocklet,
   ancestors,
   children
 }) {
-  const [showDialog, setShowDialog] = useState('');
+  const [showDialog, setShowDialog] = useState(false);
   const {
     t
   } = useLocaleContext();
@@ -31,10 +34,11 @@ export default function ComponentConfiguration({
   if (blocklet.status === 'unknown' && isInstalling(blocklet.status)) {
     return null;
   }
-  const onClose = () => {
+  const handleClose = () => {
+    onClose?.();
     setShowDialog(false);
   };
-  const onOpen = e => {
+  const handleOpen = e => {
     e.stopPropagation();
     // eslint-disable-next-line no-unused-expressions
     setShowDialog(true);
@@ -69,45 +73,57 @@ export default function ComponentConfiguration({
     setTab(newTab);
   };
   const tabConfig = tabConfigs[tab] || tabConfigsArr[0];
-  return [typeof children === 'function' ? children({
-    open: onOpen
-  }) : /*#__PURE__*/_jsx(IconButton, {
-    onClick: onOpen,
-    "data-cy": "action-config-component",
-    children: /*#__PURE__*/_jsx(EditIcon, {})
-  }), showDialog && /*#__PURE__*/_jsx(StyledDialog, {
-    open: true,
-    fullWidth: true,
-    maxWidth: "md",
-    title: name,
-    onClose: onClose,
-    PaperProps: {
-      style: {
-        minHeight: 'auto'
-      }
-    },
-    children: isComponent ? /*#__PURE__*/_jsxs(Box, {
-      mt: 1,
-      children: [/*#__PURE__*/_jsx(Tabs, {
-        tabs: tabs,
-        current: tab,
-        onChange: onTabChange,
-        scrollButtons: "auto"
-      }), tabConfig.component]
-    }) : /*#__PURE__*/_jsx(ComponentEnvironment, {
-      blocklet: blocklet,
-      ancestors: ancestors
-    })
-  })];
+  let child = null;
+  if (!hiddenChildren) {
+    child = typeof children === 'function' ? children({
+      open: handleOpen
+    }) : /*#__PURE__*/_jsx(IconButton, {
+      onClick: handleOpen,
+      "data-cy": "action-config-component",
+      children: /*#__PURE__*/_jsx(EditIcon, {})
+    });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [child, (open || showDialog) && /*#__PURE__*/_jsx(StyledDialog, {
+      open: true,
+      fullWidth: true,
+      maxWidth: "md",
+      title: name,
+      onClose: handleClose,
+      PaperProps: {
+        style: {
+          minHeight: 'auto'
+        }
+      },
+      children: isComponent ? /*#__PURE__*/_jsxs(Box, {
+        mt: 1,
+        children: [/*#__PURE__*/_jsx(Tabs, {
+          tabs: tabs,
+          current: tab,
+          onChange: onTabChange,
+          scrollButtons: "auto"
+        }), tabConfig.component]
+      }) : /*#__PURE__*/_jsx(ComponentEnvironment, {
+        blocklet: blocklet,
+        ancestors: ancestors
+      })
+    })]
+  });
 }
 ComponentConfiguration.propTypes = {
   blocklet: PropTypes.object.isRequired,
   ancestors: PropTypes.array,
-  children: PropTypes.any
+  children: PropTypes.any,
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  hiddenChildren: PropTypes.bool
 };
 ComponentConfiguration.defaultProps = {
   ancestors: [],
-  children: null
+  children: null,
+  open: false,
+  onClose: null,
+  hiddenChildren: false
 };
 const StyledDialog = styled(Dialog)`
   .MuiDialogContent-root {

package/lib/blocklet/component/index.js

@@ -7,11 +7,10 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogActions from '@mui/material/DialogActions';
 import UpdateIcon from '@mui/icons-material/Update';
-import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
+import { Icon } from '@iconify/react';
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import Grid from '@mui/material/Grid';
-import Tooltip from '@mui/material/Tooltip';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -37,6 +36,7 @@ import useGetInstallComponentByUrl from '../../hooks/use-install-component-by-ur
 import ComponentCell, { StyledBadge, StyledComponentRow } from './component-cell';
 import OptionalComponentCell from './optional-component-cell';
 import AddComponentDialog from './add-component/add-component-dialog';
+import Actions from '../../actions';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function BlockletComponent({
   blocklet,
@@ -61,6 +61,8 @@ export default function BlockletComponent({
   const [updateConfirm, setUpdateConfirm] = useState(null);
   const [showSettings, setShowSettings] = useState(null);
   const [showContainer, setShowContainer] = useState(false);
+  const [showAddRule, setShowAddRule] = useState(false);
+  const [showComponentConfiguration, setShowComponentConfiguration] = useState(false);
   const [installComponentMeta, setInstallComponentMeta] = useState(null);
   const needMigration = blocklet && blocklet.structVersion !== APP_STRUCT_VERSION;
 
@@ -283,24 +285,7 @@ export default function BlockletComponent({
         children: /*#__PURE__*/_jsxs(Box, {
           display: "flex",
           alignItems: "center",
-          children: [/*#__PURE__*/_jsx(AddRule, {
-            children: ({
-              open
-            }) => /*#__PURE__*/_jsxs(Button, {
-              disabled: loading || isInProgress(blocklet.status),
-              variant: "text",
-              color: "primary",
-              "data-cy": "add-rule",
-              className: "sm-hide-icon",
-              onClick: open,
-              children: [/*#__PURE__*/_jsx(AddIcon, {
-                style: {
-                  fontSize: '1.3em',
-                  marginRight: 4
-                }
-              }), t('router.rule.add.title')]
-            })
-          }), !needMigration && /*#__PURE__*/_jsx(AddComponentButton, {
+          children: [!needMigration && /*#__PURE__*/_jsx(AddComponentButton, {
             blocklet: blocklet,
             serverVersion: info.version,
             children: ({
@@ -319,24 +304,20 @@ export default function BlockletComponent({
                 }
               }), t('blocklet.component.add')]
             })
-          }), !needMigration && /*#__PURE__*/_jsx(ComponentConfiguration, {
-            blocklet: blocklet,
-            ancestors: [],
-            children: ({
-              open
-            }) => /*#__PURE__*/_jsx(Tooltip, {
-              title: `${t('blocklet.component.container')}${t('common.config')}`,
-              children: /*#__PURE__*/_jsx(IconButton, {
-                onClick: open,
-                size: "small",
-                color: "primary",
-                children: /*#__PURE__*/_jsx(SettingsOutlinedIcon, {
-                  style: {
-                    fontSize: 18
-                  }
-                })
-              })
-            }, "config")
+          }), /*#__PURE__*/_jsx(Actions, {
+            "data-cy": "component-actions",
+            actions: [{
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: "fluent:link-20-filled"
+              }),
+              onClick: () => setShowAddRule(true),
+              text: t('router.rule.add.title'),
+              disabled: loading || isInProgress(blocklet.status)
+            }, !needMigration && {
+              icon: /*#__PURE__*/_jsx(SettingsOutlinedIcon, {}),
+              text: `${t('blocklet.component.container')}`,
+              onClick: () => setShowComponentConfiguration(true)
+            }].filter(Boolean)
           })]
         })
       })]
@@ -490,6 +471,16 @@ export default function BlockletComponent({
       blocklet: blocklet,
       showDialog: !!parseInstallComponentMeta,
       setShowDialog: () => setInstallComponentMeta(null)
+    }), showAddRule && /*#__PURE__*/_jsx(AddRule, {
+      hiddenChildren: true,
+      open: true,
+      onClose: () => setShowAddRule(false)
+    }), showComponentConfiguration && /*#__PURE__*/_jsx(ComponentConfiguration, {
+      open: true,
+      onClose: () => setShowComponentConfiguration(false),
+      hiddenChildren: true,
+      blocklet: blocklet,
+      ancestors: []
     })]
   });
 }

package/lib/blocklet/router/action/add-rule.js

@@ -17,7 +17,10 @@ import ConfigRoutingRule from './config-routing-rule';
 import { formatMountPoint } from '../../../util';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function AddRule({
-  children
+  children,
+  hiddenChildren,
+  open,
+  onClose
 }) {
   const {
     t
@@ -29,12 +32,13 @@ export default function AddRule({
     blocklet
   } = useBlockletContext();
   const [loading, setLoading] = useState(false);
-  const [confirmSetting, setConfirmSetting] = useState(null);
+  const [showConfirm, setShowConfirm] = useState(false);
   const teamDid = blocklet.meta.did;
   const siteId = blocklet.site.id;
   const onCancel = () => {
+    onClose?.();
     setLoading(false);
-    setConfirmSetting(null);
+    setShowConfirm(false);
   };
   const onConfirm = async params => {
     try {
@@ -81,7 +85,7 @@ export default function AddRule({
       Toast.error(error.message);
     } finally {
       setLoading(false);
-      setConfirmSetting(null);
+      setShowConfirm(false);
     }
   };
   const setting = {
@@ -185,11 +189,11 @@ export default function AddRule({
   const onMenuItemClick = e => {
     e.stopPropagation();
     // eslint-disable-next-line no-unused-expressions
-    setConfirmSetting(setting);
+    setShowConfirm(true);
   };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [typeof children === 'function' ? children({
-      loading,
+  let child = null;
+  if (!hiddenChildren) {
+    child = typeof children === 'function' ? children({
       open: onMenuItemClick
     }) : /*#__PURE__*/_jsxs(MenuItem, {
       onClick: onMenuItemClick,
@@ -203,21 +207,30 @@ export default function AddRule({
           marginRight: 5
         }
       }), t('router.rule.add.title')]
-    }), confirmSetting && /*#__PURE__*/_jsx(Confirm, {
-      title: confirmSetting.title,
-      description: confirmSetting.description,
-      confirm: confirmSetting.confirm,
-      cancel: confirmSetting.cancel,
-      params: confirmSetting.params,
-      onConfirm: confirmSetting.onConfirm,
-      onCancel: confirmSetting.onCancel,
+    });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [child, (open || showConfirm) && /*#__PURE__*/_jsx(Confirm, {
+      title: setting.title,
+      description: setting.description,
+      confirm: setting.confirm,
+      cancel: setting.cancel,
+      params: setting.params,
+      onConfirm: setting.onConfirm,
+      onCancel: setting.onCancel,
       color: "primary"
     })]
   });
 }
 AddRule.propTypes = {
-  children: PropTypes.any
+  children: PropTypes.any,
+  onClose: PropTypes.func,
+  hiddenChildren: PropTypes.bool,
+  open: PropTypes.bool
 };
 AddRule.defaultProps = {
-  children: null
+  children: null,
+  open: false,
+  onClose: null,
+  hiddenChildren: false
 };

package/lib/blocklet/router/rule-actions.js

@@ -23,7 +23,14 @@ export default function RuleActions(rule) {
   return /*#__PURE__*/_jsxs(Box, {
     display: "flex",
     alignItems: "center",
-    children: [/*#__PURE__*/_jsx("a", {
+    children: [/*#__PURE__*/_jsx(Box, {
+      component: "a",
+      sx: {
+        display: {
+          xs: 'flex',
+          md: 'none'
+        }
+      },
       target: "_blank",
       href: href,
       rel: "noopener noreferrer",

package/lib/locales/ar.js

@@ -891,6 +891,10 @@ export default {
       monitor: {
         diskThreshold: 'إرسال تنبيه عند تجاوز استخدام القرص (%)',
         diskThresholdPlaceholder: 'يرجى تعيين حد التنبيه لاستخدام القرص'
+      },
+      security: {
+        switchLabel: 'عزل نظام الملفات',
+        switchTips: 'بعد تعطيل هذا الخيار، فإن نظام ملفات البلوكليت لن يكون عزلًا بعد الآن، مما قد يشكل خطرًا من تلف النظام من قبل البرامج الخبيثة.'
       }
     },
     accessKey: {
@@ -1504,7 +1508,7 @@ export default {
       installedButStopped: 'تم تثبيت التطبيق بنجاح ، ولكن لا يمكن تشغيله. يمكنك بدء تشغيله يدويًا بعد حل مشكلة الحجب.',
       installedButError: 'تم تثبيت التطبيق بنجاح ، ولكن فشل في البدء',
       restoreFailed: 'فشل في استعادة التطبيق، يرجى المحاولة مرة أخرى',
-      resourceBlocklet: 'لا يمكن تثبيت الكتلة كتطبيق، يمكنك إضافة هذه الكتلة إلى التطبيقات الحالية.'
+      resourceBlocklet: 'لا يمكن تثبيت بلوكليت الموارد كتطبيق، يمكنك تركيب هذا البلوكليت في التطبيقات الحالية.'
     },
     steps: {
       introduction: 'مقدمة',

package/lib/locales/de.js

@@ -891,6 +891,10 @@ export default {
       monitor: {
         diskThreshold: 'Sende eine Warnung, wenn die Festplattenauslastung (%) überschritten wird',
         diskThresholdPlaceholder: 'Bitte legen Sie die Schwelle für die Festplattenauslastungs-Warnung fest'
+      },
+      security: {
+        switchLabel: 'Dateisystemisolierung',
+        switchTips: 'Nach Deaktivierung dieser Option befindet sich das Dateisystem des Blocklets nicht mehr in Isolation, was ein Risiko darstellen kann, dass bösartige Software das Dateisystem beschädigt.'
       }
     },
     accessKey: {

package/lib/locales/en.js

@@ -1497,7 +1497,7 @@ export default {
       installedButStopped: 'The app is installed successfully, but cannot be started. You can start it manually after resolving blocking issues',
       installedButError: 'The app is successfully installed, but failed to start',
       restoreFailed: 'Failed to restore app, please try again',
-      resourceBlocklet: 'Blocklet cannot be installed as an application, you can add this blocklet into existing applications.'
+      resourceBlocklet: ''
     },
     steps: {
       introduction: 'Introduction',

package/lib/locales/es.js

@@ -891,6 +891,10 @@ export default {
       monitor: {
         diskThreshold: 'Enviar alerta cuando el uso del disco exceda (%)',
         diskThresholdPlaceholder: 'Por favor, establezca el umbral de alerta para el uso del disco'
+      },
+      security: {
+        switchLabel: 'Aislamiento del sistema de archivos',
+        switchTips: 'Después de deshabilitar esta opción, el sistema de archivos del Blocklet ya no estará aislado, lo que podría representar un riesgo de que software malicioso dañe el sistema de archivos.'
       }
     },
     accessKey: {

package/lib/locales/fr.js

@@ -891,6 +891,10 @@ export default {
       monitor: {
         diskThreshold: "Envoyer une alerte lorsque l'utilisation du disque dépasse (%)",
         diskThresholdPlaceholder: "Veuillez définir le seuil d'alerte d'utilisation du disque"
+      },
+      security: {
+        switchLabel: 'Isolation du système de fichiers',
+        switchTips: 'Après avoir désactivé cette option, le système de fichiers du Blocklet ne sera plus isolé, ce qui pourrait présenter un risque de dommages causés par un logiciel malveillant au système de fichiers.'
       }
     },
     accessKey: {

package/lib/locales/hi.js

@@ -891,6 +891,10 @@ export default {
       monitor: {
         diskThreshold: 'जब डिस्क उपयोग (%) से अधिक हो जाए, तो चेतावनी भेजें',
         diskThresholdPlaceholder: 'कृपया डिस्क उपयोग चेतावनी सीमा सेट करें'
+      },
+      security: {
+        switchLabel: 'फ़ाइल सिस्टम विलगनन',
+        switchTips: 'इस विकल्प को निषेधित करने के बाद, ब्लॉकलेट का फ़ाइल सिस्टम अलग नहीं होगा, जिससे किसी हानिकारक सॉफ़्टवेयर को फ़ाइल सिस्टम को नुक़सान पहुँचाने का ख़तरा हो सकता है।'
       }
     },
     accessKey: {

package/lib/locales/id.js

@@ -891,6 +891,10 @@ export default {
       monitor: {
         diskThreshold: 'Kirim peringatan ketika penggunaan disk melebihi (%)',
         diskThresholdPlaceholder: 'Tolong atur ambang batas peringatan penggunaan disk'
+      },
+      security: {
+        switchLabel: 'Pengasingan Sistem File',
+        switchTips: 'Setelah menonaktifkan opsi ini, sistem file dari Blocklet tidak akan lagi dalam isolasi, yang dapat menimbulkan risiko perangkat lunak berbahaya merusak sistem file.'
       }
     },
     accessKey: {

package/lib/locales/ja.js

@@ -891,6 +891,10 @@ export default {
       monitor: {
         diskThreshold: 'ディスク使用率が (%) を超えた場合にアラートを送信する',
         diskThresholdPlaceholder: 'ディスク使用量のアラート閾値を設定してください'
+      },
+      security: {
+        switchLabel: 'ファイルシステムの分離',
+        switchTips: 'このオプションを無効にした後、Blockletのファイルシステムはもはや隔離されず、悪意のあるソフトウェアによってファイルシステムが損傷される可能性があります。'
       }
     },
     accessKey: {

package/lib/locales/ko.js

@@ -891,6 +891,10 @@ export default {
       monitor: {
         diskThreshold: '디스크 사용량이 (%) 이상인 경우 경고 메시지 보내기',
         diskThresholdPlaceholder: '디스크 사용량 경고 임계값을 설정해주세요'
+      },
+      security: {
+        switchLabel: '파일 시스템 격리',
+        switchTips: '이 옵션을 사용 중지 한 후에는 더 이상 Blocklet의 파일 시스템이 격리되지 않아 악성 소프트웨어가 파일 시스템을 손상시킬 수있는 위험이 있습니다.'
       }
     },
     accessKey: {

package/lib/locales/pt.js

@@ -891,6 +891,10 @@ export default {
       monitor: {
         diskThreshold: 'Enviar alerta quando o uso do disco exceder (%)',
         diskThresholdPlaceholder: 'Por favor, defina o limiar de alerta de uso de disco'
+      },
+      security: {
+        switchLabel: 'Isolamento do Sistema de Arquivos',
+        switchTips: 'Após desativar esta opção, o sistema de arquivos do Blocklet não estará mais em isolamento, o que pode representar um risco de software malicioso danificar o sistema de arquivos.'
       }
     },
     accessKey: {

package/lib/locales/ru.js

@@ -891,6 +891,10 @@ export default {
       monitor: {
         diskThreshold: 'Отправить предупреждение, когда использование диска превышает (%)',
         diskThresholdPlaceholder: 'Пожалуйста, установите порог оповещения об использовании диска'
+      },
+      security: {
+        switchLabel: 'Изоляция файловой системы',
+        switchTips: 'После отключения этой опции файловая система блоклета больше не будет находиться в изоляции, что может повлечь за собой риск повреждения файловой системы вредоносным ПО.'
       }
     },
     accessKey: {

package/lib/locales/th.js

@@ -891,6 +891,10 @@ export default {
       monitor: {
         diskThreshold: 'ส่งการแจ้งเตือนเมื่อการใช้งานดิสก์เกิน (%)',
         diskThresholdPlaceholder: 'กรุณาระบุเกณฑ์คำเตือนการใช้ดิสก์'
+      },
+      security: {
+        switchLabel: 'การแยกฟิล์ซัสเต็ม',
+        switchTips: 'หลังจากที่ปิดตัวเลือกนี้ลง ไฟล์ระบบของ Blocklet จะไม่อยู่ในโหมดกักกันอีกต่อไป ซึ่งอาจเสี่ยงต่อซอฟต์แวร์ที่เป็นอันตรายทำให้ระบบไฟล์เสียหาย'
       }
     },
     accessKey: {

package/lib/locales/vi.js

@@ -891,6 +891,10 @@ export default {
       monitor: {
         diskThreshold: 'Gửi cảnh báo khi sử dụng đĩa vượt quá (%)',
         diskThresholdPlaceholder: 'Vui lòng đặt ngưỡng cảnh báo việc sử dụng đĩa'
+      },
+      security: {
+        switchLabel: 'Cách ly Hệ thống Tệp',
+        switchTips: 'Sau khi vô hiệu hóa tùy chọn này, hệ thống tệp của Blocklet sẽ không còn được cách ly nữa, điều này có thể tạo ra nguy cơ phần mềm độc hại làm hỏng hệ thống tệp.'
       }
     },
     accessKey: {

package/lib/locales/zh-tw.js

@@ -891,6 +891,10 @@ export default {
       monitor: {
         diskThreshold: '當磁碟使用量超過 (%) 時發送警示',
         diskThresholdPlaceholder: '請設置磁碟使用警示閾值'
+      },
+      security: {
+        switchLabel: '檔案系統隔離',
+        switchTips: '在停用此選項後，Blocklet的檔案系統將不再處於隔離狀態，這可能會導致惡意軟體損壞檔案系統。'
       }
     },
     accessKey: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abtnode/ux",
-  "version": "1.16.28-beta-8acda0e6",
+  "version": "1.16.28-beta-b30865b3",
   "description": "UX components shared across abtnode packages",
   "publishConfig": {
     "access": "public"
@@ -25,9 +25,9 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@abtnode/auth": "1.16.28-beta-8acda0e6",
-    "@abtnode/constant": "1.16.28-beta-8acda0e6",
-    "@abtnode/util": "1.16.28-beta-8acda0e6",
+    "@abtnode/auth": "1.16.28-beta-b30865b3",
+    "@abtnode/constant": "1.16.28-beta-b30865b3",
+    "@abtnode/util": "1.16.28-beta-b30865b3",
     "@ahooksjs/use-url-state": "^3.5.1",
     "@arcblock/did": "^1.18.123",
     "@arcblock/did-connect": "^2.10.0",
@@ -37,10 +37,10 @@
     "@arcblock/react-hooks": "^2.10.0",
     "@arcblock/terminal": "^2.10.0",
     "@arcblock/ux": "^2.10.0",
-    "@blocklet/constant": "1.16.28-beta-8acda0e6",
+    "@blocklet/constant": "1.16.28-beta-b30865b3",
     "@blocklet/launcher-layout": "2.3.22",
     "@blocklet/list": "^0.12.114",
-    "@blocklet/meta": "1.16.28-beta-8acda0e6",
+    "@blocklet/meta": "1.16.28-beta-b30865b3",
     "@blocklet/ui-react": "^2.10.0",
     "@blocklet/uploader": "^0.1.10",
     "@emotion/react": "^11.10.4",
@@ -107,5 +107,5 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0"
   },
-  "gitHead": "a1a896a7d34abc6a1f24b855524c228c0b0a3ade"
+  "gitHead": "93a071e3074207fa721a2198b1281f74d666cbbd"
 }