@abtnode/ux 1.16.28-beta-b30865b3 → 1.16.28-next-5a717317

package/lib/actions.js

@@ -1,8 +1,12 @@
 import { useState, createElement as _createElement } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { IconButton, Menu, MenuItem, ListItemIcon, ListItemText, Divider } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 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,
@@ -53,14 +57,9 @@ 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
@@ -70,8 +69,7 @@ export default function Actions({
           disabled: disabled,
           dense: true,
           onClick: async e => {
-            e.stopPropagation();
-            await onClick?.(e);
+            await onClick(e);
             onClose();
           }
           // eslint-disable-next-line react/no-array-index-key

package/lib/analytics/traffic.js

@@ -3,10 +3,16 @@
 import { useEffect, useState } from 'react';
 import dayjs from '@abtnode/util/lib/dayjs';
 import nthArg from 'lodash/nthArg';
-import { joinURL } from 'ufo';
+import joinUrl from 'url-join';
 import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import Iframe from 'react-iframe';
-import { Alert, CircularProgress, Grid, Typography, Button, IconButton, Popover } from '@mui/material';
+import Alert from '@mui/material/Alert';
+import Spinner from '@mui/material/CircularProgress';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import Popover from '@mui/material/Popover';
 import ViewIcon from '@mui/icons-material/LaunchOutlined';
 import { DateRangePicker } from 'mui-daterange-picker';
 import { DatePicker } from '@mui/x-date-pickers';
@@ -108,7 +114,7 @@ export default function TrafficInsights({
     error
   } = data;
   if (!list.length && loading) {
-    return /*#__PURE__*/_jsx(CircularProgress, {});
+    return /*#__PURE__*/_jsx(Spinner, {});
   }
   if (error) {
     return /*#__PURE__*/_jsx(Alert, {
@@ -144,7 +150,7 @@ export default function TrafficInsights({
 
   // eslint-disable-next-line no-nested-ternary
   const pathPrefix = inService ? WELLKNOWN_SERVICE_PATH_PREFIX : process.env.NODE_ENV === 'production' ? info.routing.adminPath : '';
-  const breakdownUrl = joinURL(window.location.origin, pathPrefix, `/api/analytics/traffic?date=${dayjs(date).format('YYYY-MM-DD')}&did=${did}`);
+  const breakdownUrl = joinUrl(window.location.origin, pathPrefix, `/api/analytics/traffic?date=${dayjs(date).format('YYYY-MM-DD')}&did=${did}`);
   const onRangeChange = range => {
     setDateRange(range);
     setAnchorEl(null);

package/lib/blocklet/authentication/federated/federated-detail-dialog.js

@@ -11,7 +11,7 @@ import { Address } from '@arcblock/did-connect';
 import Dialog from '@arcblock/ux/lib/Dialog';
 import StarsIcon from '@mui/icons-material/Stars';
 import isUrl from 'is-url';
-import { joinURL } from 'ufo';
+import joinUrl from 'url-join';
 import { useBlockletContext } from '../../../contexts/blocklet';
 import { useNodeContext } from '../../../contexts/node';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -95,7 +95,7 @@ const FederatedDetailDialog = /*#__PURE__*/forwardRef((props, ref) => {
         });
       }
       if (['appLogo'].includes(key)) {
-        const logoUrl = isUrl(value) ? value : joinURL(state.data.appUrl || '', value || '');
+        const logoUrl = isUrl(value) ? value : joinUrl(state.data.appUrl || '', value || '');
         try {
           const logoUrlInstance = new URL(logoUrl);
           logoUrlInstance.searchParams.set('imageFilter', 'resize');

package/lib/blocklet/blocklet-source.js

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { joinURL } from 'ufo';
+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';
@@ -21,7 +21,7 @@ export default function BlockletSource({
       type: "success",
       children: toUpper(sourceInfo.source)
     }, "source"), sourceInfo.source === 'registry' && /*#__PURE__*/_jsx(ExternalLink, {
-      href: joinURL(sourceInfo.deployedFrom, 'blocklets', blocklet?.meta?.bundleDid || ''),
+      href: joinUrl(sourceInfo.deployedFrom, 'blocklets', blocklet?.meta?.bundleDid || ''),
       target: "_blank",
       className: "page-link",
       underline: "hover",

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

@@ -11,6 +11,7 @@ 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';
@@ -25,7 +26,6 @@ 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,7 +62,6 @@ 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();
@@ -163,11 +162,33 @@ export default function ComponentCell({
             })]
           })]
         })]
-      }, blocklet), hasMountPoint(blocklet.meta) && /*#__PURE__*/_jsx(ComponentCellMountPoint, {
-        blocklet: blocklet,
-        ancestors: ancestors,
-        mountPoint: mountPoint,
-        href: href
+      }, 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)
+          })
+        })
       }, mountPoint), /*#__PURE__*/_jsx("div", {
         style: {
           flex: 1
@@ -177,14 +198,7 @@ export default function ComponentCell({
         alignItems: "center",
         children: [hasStartEngine(blocklet.meta) && /*#__PURE__*/_jsx(Tooltip, {
           title: t('common.visit'),
-          children: /*#__PURE__*/_jsx(Box, {
-            component: "a",
-            sx: {
-              display: {
-                xs: 'flex',
-                md: 'none'
-              }
-            },
+          children: /*#__PURE__*/_jsx("a", {
             target: "_blank",
             href: href,
             rel: "noopener noreferrer",
@@ -193,73 +207,66 @@ 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(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)
-          })
+        }), /*#__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)
         })]
       }, "actions")]
     }, "group-not-gateway-box"), /*#__PURE__*/_jsx(Line, {}, "line"), /*#__PURE__*/_jsx(ComponentInfoDialog, {
@@ -283,13 +290,7 @@ export default function ComponentCell({
       params: confirmSetting.params,
       onConfirm: confirmSetting.onConfirm,
       onCancel: confirmSetting.onCancel
-    }, "confirm-setting"), showComponentConfiguration && /*#__PURE__*/_jsx(ComponentConfiguration, {
-      open: true,
-      hiddenChildren: true,
-      onClose: () => setShowComponentConfiguration(false),
-      blocklet: blocklet,
-      ancestors: ancestors
-    })]
+    }, "confirm-setting")]
   });
 }
 ComponentCell.propTypes = {

package/lib/blocklet/component/configuration.js

@@ -12,16 +12,13 @@ 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, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function ComponentConfiguration({
-  open,
-  onClose,
-  hiddenChildren,
   blocklet,
   ancestors,
   children
 }) {
-  const [showDialog, setShowDialog] = useState(false);
+  const [showDialog, setShowDialog] = useState('');
   const {
     t
   } = useLocaleContext();
@@ -34,11 +31,10 @@ export default function ComponentConfiguration({
   if (blocklet.status === 'unknown' && isInstalling(blocklet.status)) {
     return null;
   }
-  const handleClose = () => {
-    onClose?.();
+  const onClose = () => {
     setShowDialog(false);
   };
-  const handleOpen = e => {
+  const onOpen = e => {
     e.stopPropagation();
     // eslint-disable-next-line no-unused-expressions
     setShowDialog(true);
@@ -73,57 +69,45 @@ export default function ComponentConfiguration({
     setTab(newTab);
   };
   const tabConfig = tabConfigs[tab] || tabConfigsArr[0];
-  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
-      })
-    })]
-  });
+  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
+    })
+  })];
 }
 ComponentConfiguration.propTypes = {
   blocklet: PropTypes.object.isRequired,
   ancestors: PropTypes.array,
-  children: PropTypes.any,
-  open: PropTypes.bool,
-  onClose: PropTypes.func,
-  hiddenChildren: PropTypes.bool
+  children: PropTypes.any
 };
 ComponentConfiguration.defaultProps = {
   ancestors: [],
-  children: null,
-  open: false,
-  onClose: null,
-  hiddenChildren: false
+  children: null
 };
 const StyledDialog = styled(Dialog)`
   .MuiDialogContent-root {

package/lib/blocklet/component/did-space/connect-to.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import DidConnect from '@arcblock/did-connect/lib/Connect';
-import { joinURL } from 'ufo';
+import joinUrl from 'url-join';
 import toast from '@arcblock/ux/lib/Toast';
 import SplitButton from '@arcblock/ux/lib/SplitButton';
 import Dialog from '@arcblock/ux/lib/Dialog';
@@ -62,7 +62,7 @@ function ConnectTo({
     checkTimeout: 1000 * 300,
     prefix: '/api/did',
     checkFn: axios.create({
-      baseURL: joinURL(window.location.origin, getPathPrefix())
+      baseURL: joinUrl(window.location.origin, getPathPrefix())
     }).get,
     messages: {
       title: t('storage.spaces.provideNFT.title', {
@@ -191,10 +191,10 @@ function ConnectTo({
       setAuthorizeConnect(preValue => ({
         ...preValue,
         open: true,
-        prefix: joinURL(didSpacesCoreUrl, 'space/api/did'),
+        prefix: joinUrl(didSpacesCoreUrl, 'space/api/did'),
         baseUrl: new URL(didSpacesCoreUrl).origin,
         checkFn: axios.create({
-          baseURL: joinURL(didSpacesCoreUrl, 'space')
+          baseURL: joinUrl(didSpacesCoreUrl, 'space')
         }).get,
         extraParams: {
           appDid: blockletInfo.appDid,

package/lib/blocklet/component/index.js

@@ -7,10 +7,11 @@ 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';
@@ -36,7 +37,6 @@ 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,8 +61,6 @@ 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;
 
@@ -285,7 +283,24 @@ export default function BlockletComponent({
         children: /*#__PURE__*/_jsxs(Box, {
           display: "flex",
           alignItems: "center",
-          children: [!needMigration && /*#__PURE__*/_jsx(AddComponentButton, {
+          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, {
             blocklet: blocklet,
             serverVersion: info.version,
             children: ({
@@ -304,20 +319,24 @@ export default function BlockletComponent({
                 }
               }), t('blocklet.component.add')]
             })
-          }), /*#__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)
+          }), !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")
           })]
         })
       })]
@@ -471,16 +490,6 @@ 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/component/navigation/navigation-dialog.js

@@ -23,7 +23,8 @@ import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRe
 import { Controller, useForm } from 'react-hook-form';
 import { Icon, loadIcon } from '@iconify/react';
 import { isMatchSection, checkLink, flattenNavigation } from '@blocklet/meta/lib/parse-navigation-from-blocklet';
-import { joinURL, withoutTrailingSlash } from 'ufo';
+import urljoin from 'url-join';
+import { withoutTrailingSlash } from 'ufo/dist/index.mjs';
 import isAbsoluteUrl from 'is-absolute-url';
 import { SUPPORTED_LANGUAGES } from '@blocklet/constant';
 import LocaleTabs from './locale-tabs';
@@ -168,7 +169,7 @@ const NavigationDialog = /*#__PURE__*/forwardRef(function NavigationDialog({
         return withoutTrailingSlash(stringLink);
       }
       const selectedLink = isObject(selectedOption.link) ? selectedOption.link[state.locale] : selectedOption.link;
-      return withoutTrailingSlash(joinURL(stringLink, selectedLink || '/'));
+      return withoutTrailingSlash(urljoin(stringLink, selectedLink || '/'));
     }
     return null;
   }, [components, state.locale, selectedOption, watchComponent]);

package/lib/blocklet/component/space-connector.js

@@ -4,7 +4,7 @@ import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { BLOCKLET_CONFIGURABLE_KEY, DID_SPACES } from '@blocklet/constant';
 import axios from 'axios';
 import PropTypes from 'prop-types';
-import { joinURL } from 'ufo';
+import joinUrl from 'url-join';
 import { isEmpty } from 'lodash';
 import Typography from '@mui/material/Typography';
 import Toast from '@arcblock/ux/lib/Toast';
@@ -118,10 +118,10 @@ const SpaceConnector = /*#__PURE__*/forwardRef(({
       ...preValue,
       action: 'one-click-authorization',
       checkTimeout: 1000 * 300,
-      prefix: joinURL(gatewayUrl, 'space/api/did'),
+      prefix: joinUrl(gatewayUrl, 'space/api/did'),
       baseUrl: new URL(gatewayUrl).origin,
       checkFn: axios.create({
-        baseURL: joinURL(gatewayUrl, 'space')
+        baseURL: joinUrl(gatewayUrl, 'space')
       }).get,
       extraParams: {
         appDid: blocklet.appDid,

package/lib/blocklet/component/space-selector.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { joinURL } from 'ufo';
+import joinUrl from 'url-join';
 import isUrl from 'is-url';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 import Button from '@arcblock/ux/lib/Button';
@@ -40,7 +40,7 @@ function SpaceSelector({
   } = useSessionContext();
   useEffect(() => {
     if (gatewayUrl && !gatewayList.find(x => x.value === gatewayUrl)) {
-      api.get(joinURL(gatewayUrl, '/__blocklet__.js?type=json')).then(res => {
+      api.get(joinUrl(gatewayUrl, '/__blocklet__.js?type=json')).then(res => {
         // FIXME: @wangshijun handle mountPoint
         setGatewayList([...gatewayList, {
           value: gatewayUrl,