@abtnode/ux 1.16.28-next-5a717317 → 1.16.29-beta-0070353c

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/analytics/traffic.js

@@ -3,16 +3,10 @@
 import { useEffect, useState } from 'react';
 import dayjs from '@abtnode/util/lib/dayjs';
 import nthArg from 'lodash/nthArg';
-import joinUrl from 'url-join';
+import { joinURL } from 'ufo';
 import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import Iframe from 'react-iframe';
-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 { Alert, CircularProgress, Grid, Typography, Button, IconButton, Popover } from '@mui/material';
 import ViewIcon from '@mui/icons-material/LaunchOutlined';
 import { DateRangePicker } from 'mui-daterange-picker';
 import { DatePicker } from '@mui/x-date-pickers';
@@ -114,7 +108,7 @@ export default function TrafficInsights({
     error
   } = data;
   if (!list.length && loading) {
-    return /*#__PURE__*/_jsx(Spinner, {});
+    return /*#__PURE__*/_jsx(CircularProgress, {});
   }
   if (error) {
     return /*#__PURE__*/_jsx(Alert, {
@@ -150,7 +144,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/add-cert.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import Tooltip from '@mui/material/Tooltip';
 import CircularProgress from '@mui/material/CircularProgress';
-import Alert from '@arcblock/ux/lib/Alert';
+import Alert from '@mui/material/Alert';
 import Toast from '@arcblock/ux/lib/Toast';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { BlockletEvents } from '@blocklet/constant';
@@ -121,7 +121,7 @@ function Add(props) {
     title: t('router.cert.genLetsEncryptCert.title'),
     description: /*#__PURE__*/_jsxs("div", {
       children: [/*#__PURE__*/_jsx(Alert, {
-        type: "success",
+        severity: "success",
         children: t('router.cert.genLetsEncryptCert.dnsTip')
       }), t('router.cert.genLetsEncryptCert.description')]
     }),

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 'url-join';
+import { joinURL } from 'ufo';
 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 'url-join';
+import { joinURL } from 'ufo';
 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/add-component/add-component-core.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { isInServerlessMode } from '@abtnode/util/lib/serverless';
-import Alert from '@arcblock/ux/lib/Alert';
+import Alert from '@mui/material/Alert';
 import AnimationWaiter from '@arcblock/ux/lib/AnimationWaiter';
 import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -282,20 +282,21 @@ export default function AddComponentCore({
       componentDid = ''
     } = params;
     // eslint-disable-next-line no-shadow
+    const meta = component.current?.meta || {};
     const {
       configs = [],
       registryUrl,
       inStore,
       inputUrl,
       dist
-    } = component.current?.meta || {};
+    } = meta;
     const downloadTokenList = component.current?.downloadTokenList;
     const url = inStore ? getBlockletMetaUrl(registryUrl, bundleDid, dist) : inputUrl;
     setLoading(true);
     const installInput = {
       rootDid: blocklet.meta.did,
       url,
-      mountPoint: urlPathFriendly(mountPoint),
+      mountPoint: mountPoint ? urlPathFriendly(mountPoint) : `/${urlPathFriendly(meta.title || meta.name)}`,
       title,
       name: componentName,
       did: componentDid,
@@ -886,7 +887,7 @@ export default function AddComponentCore({
             }));
           }
         }), !!error && /*#__PURE__*/_jsx(Alert, {
-          type: "error",
+          severity: "error",
           style: {
             width: '100%',
             marginTop: 8

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 = {