@abtnode/ux 1.16.28-beta-8acda0e6 → 1.16.28-beta-6917161a

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/add-component/add-component-core.js

@@ -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,

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 {