@abtnode/ux 1.16.11-next-069c3537 → 1.16.11-next-3d2b39f7

package/lib/actions.js

@@ -56,7 +56,7 @@ function Actions(_ref) {
       "aria-haspopup": "true",
       "data-cy": "actions-menu-icon",
       onClick: onOpen,
-      size: "large",
+      size: "small",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreHoriz.default, {})
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
       id: "actions-menu",
@@ -82,13 +82,14 @@ function Actions(_ref) {
         return /*#__PURE__*/(0, _react.createElement)(_MenuItem.default, _objectSpread(_objectSpread({}, opts), {}, {
           disabled: disabled,
           dense: true,
-          onClick: e => {
+          onClick: async e => {
+            await _onClick(e);
             onClose();
-            _onClick(e);
           }
           // eslint-disable-next-line react/no-array-index-key
           ,
-          key: index
+          key: index,
+          "data-cy": "actions-menu-".concat(index)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
           style: {
             minWidth: 24,

package/lib/blocklet/access/config-access.js

@@ -26,10 +26,10 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _node = require("../../contexts/node");
 var _team = require("../../contexts/team");
 var _util2 = require("../../util");
-var _toast = _interopRequireDefault(require("../../toast"));
 var _config = _interopRequireDefault(require("../../who-can-access/config"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
@@ -160,12 +160,12 @@ function ConfigAccess(_ref) {
           whoCanAccess: value
         }
       });
-      _toast.default.success(t('blocklet.config.access.updatedTip'));
+      _Toast.default.success(t('blocklet.config.access.updatedTip'));
       onClose();
       setLoading(false);
     } catch (err) {
       setLoading(false);
-      _toast.default.error((0, _util2.formatError)(err));
+      _Toast.default.error((0, _util2.formatError)(err));
     }
   };
   const disabled = loading || whoCanAccess === CONFIG_ROLE && !roles.length;

package/lib/blocklet/actions.js

@@ -28,7 +28,7 @@ var _util = require("@blocklet/meta/lib/util");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _constant = require("@blocklet/constant");
 var _constant2 = require("@abtnode/constant");
-var _toast = _interopRequireDefault(require("../toast"));
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _util2 = require("../util");
 var _util3 = require("./util");
 var _node = require("../contexts/node");
@@ -93,6 +93,10 @@ function BlockletActions(_ref) {
             await fn(params);
           } else if (action === 'start') {
             var _blocklet$settings;
+            if (!(0, _util.hasRunnableComponent)(blocklet)) {
+              _Toast.default.error(t('blocklet.noComponent'));
+              return;
+            }
             if (!inService && !skipSetup && !((_blocklet$settings = blocklet.settings) !== null && _blocklet$settings !== void 0 && _blocklet$settings.initialized)) {
               // 跳转到 setup 流程界面时携带 serverUrl 查询参数
               const serverUrl = (0, _util3.getServerUrl)(node.info);
@@ -105,10 +109,6 @@ function BlockletActions(_ref) {
               });
               return;
             }
-            if (!(0, _util.hasRunnableComponent)(blocklet)) {
-              _toast.default.error(t('blocklet.noComponent'));
-              return;
-            }
             const input = {
               did: blocklet.meta.did
             };
@@ -130,7 +130,7 @@ function BlockletActions(_ref) {
           }
 
           if (action === 'reload') {
-            _toast.default.success(t('blocklet.reloadSuccess'));
+            _Toast.default.success(t('blocklet.reloadSuccess'));
           }
           onComplete({
             action,

package/lib/blocklet/add-cert.js

@@ -12,7 +12,7 @@ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularPr
 var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _constant = require("@blocklet/constant");
-var _toast = _interopRequireDefault(require("../toast"));
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _confirm = _interopRequireDefault(require("../confirm"));
 var _node = require("../contexts/node");
 var _blocklet = require("../contexts/blocklet");
@@ -68,9 +68,9 @@ function Add(props) {
     if (cert.domain === domain) {
       setIssuing(false);
       if (type === 'success') {
-        _toast.default.success("The ".concat(cert.domain, " certificate is issued successfully"));
+        _Toast.default.success("The ".concat(cert.domain, " certificate is issued successfully"));
       } else if (type === 'error') {
-        _toast.default.error("Failed to issue certificate for ".concat(cert.domain));
+        _Toast.default.error("Failed to issue certificate for ".concat(cert.domain));
       }
     }
   };

package/lib/blocklet/component/add.js

@@ -33,9 +33,9 @@ var _AnimationWaiter = _interopRequireDefault(require("@arcblock/ux/lib/Animatio
 var _launchResultMessage = _interopRequireDefault(require("@blocklet/launcher-layout/lib/launch-result-message"));
 var _util = require("@blocklet/meta/lib/util");
 var _urlPathFriendly = _interopRequireDefault(require("@blocklet/meta/lib/url-path-friendly"));
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _node = require("../../contexts/node");
 var _util2 = require("../../util");
-var _toast = _interopRequireDefault(require("../../toast"));
 var _schemaForm = _interopRequireDefault(require("../../schema-form"));
 var _required = _interopRequireDefault(require("../../form/required"));
 var _purchase = require("../purchase");
@@ -334,7 +334,7 @@ function AddComponent(_ref2) {
       }
     } catch (err) {
       const errMsg = (0, _util2.formatError)(err);
-      _toast.default.error(errMsg);
+      _Toast.default.error(errMsg);
       console.error('installComponent error: ', err);
       setInstallErrorResult(errMsg);
     } finally {

package/lib/blocklet/component/delete.js

@@ -30,7 +30,10 @@ function DeleteComponent(_ref) {
     component,
     remove,
     disabled,
-    tip
+    tip,
+    showConfirm,
+    hideBtn,
+    onCancel: _onCancel
   } = _ref;
   const {
     t
@@ -44,9 +47,8 @@ function DeleteComponent(_ref) {
     setDeleteSetting(null);
   };
   const componentDisabled = disabled || loading;
-  const btn = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, {
-    disabled: componentDisabled,
-    onClick: () => setDeleteSetting({
+  const doShowConfirm = () => {
+    setDeleteSetting({
       title: "".concat(t('common.delete'), " ").concat(component.meta.title || component.meta.name),
       // eslint-disable-next-line react/no-unstable-nested-components
       description: (params, setParams) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
@@ -78,8 +80,25 @@ function DeleteComponent(_ref) {
         removeType: 'keepData'
       },
       onConfirm: deleteComponent,
-      onCancel: () => setDeleteSetting(null)
-    }),
+      onCancel: () => {
+        setDeleteSetting(null);
+        _onCancel();
+      }
+    });
+  };
+  (0, _react.useEffect)(() => {
+    if (showConfirm) {
+      doShowConfirm();
+    } else {
+      setLoading(false);
+      setDeleteSetting(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showConfirm]);
+  const btn = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, {
+    size: "small",
+    disabled: componentDisabled,
+    onClick: () => doShowConfirm,
     "data-cy": "delete-component-btn",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {
       disabled: componentDisabled
@@ -92,7 +111,7 @@ function DeleteComponent(_ref) {
     })
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [btnWithToolTip, deleteSetting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+    children: [!hideBtn && btnWithToolTip, deleteSetting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
       title: deleteSetting.title,
       description: deleteSetting.description,
       confirm: deleteSetting.confirm,
@@ -106,12 +125,18 @@ function DeleteComponent(_ref) {
 DeleteComponent.propTypes = {
   component: _propTypes.default.object.isRequired,
   remove: _propTypes.default.func,
+  onCancel: _propTypes.default.func,
   disabled: _propTypes.default.bool,
+  showConfirm: _propTypes.default.bool,
+  hideBtn: _propTypes.default.bool,
   tip: _propTypes.default.string
 };
 DeleteComponent.defaultProps = {
   remove: async () => {},
   disabled: false,
+  showConfirm: false,
+  hideBtn: false,
+  onCancel: () => {},
   tip: ''
 };
 const StyledButton = (0, _styled.default)(_IconButton.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.Mui-disabled {\n    opacity: 0.5;\n  }\n"])));

package/lib/blocklet/component/environment.js

@@ -13,8 +13,8 @@ var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
 var _constant = require("@blocklet/constant");
 var _util = require("@blocklet/meta/lib/util");
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _clickToCopy = _interopRequireDefault(require("../../click-to-copy"));
-var _toast = _interopRequireDefault(require("../../toast"));
 var _node = require("../../contexts/node");
 var _tableIcons = _interopRequireDefault(require("../../table-icons"));
 var _table = _interopRequireDefault(require("../../table"));
@@ -61,7 +61,7 @@ function ComponentEnvironment(_ref) {
     t
   } = (0, _react.useContext)(_context.LocaleContext);
   const dids = [...ancestors.map(x => x.meta.did), blocklet.meta.did];
-  const onConfigChanged = () => _toast.default.success(t('blocklet.config.changedTip'));
+  const onConfigChanged = () => _Toast.default.success(t('blocklet.config.changedTip'));
   const isConfigEditable = x => x.custom;
   if ((0, _util2.isInstalling)(blocklet.status)) {
     return null;
@@ -71,11 +71,11 @@ function ComponentEnvironment(_ref) {
   }
   const onAddConfig = async data => {
     if (!data.key.trim() || !data.value.trim()) {
-      _toast.default.error(t('blocklet.config.environment.keyValueRequired'));
+      _Toast.default.error(t('blocklet.config.environment.keyValueRequired'));
       return;
     }
     if (data.key.startsWith('BLOCKLET_') || data.key.startsWith('COMPONENT_')) {
-      _toast.default.error(t('blocklet.config.environment.invalidKey'));
+      _Toast.default.error(t('blocklet.config.environment.invalidKey'));
       return;
     }
     data.custom = true;
@@ -92,24 +92,24 @@ function ComponentEnvironment(_ref) {
   const onEditConfig = async (newData, oldData) => {
     // only required field can't be empty
     if (newData.required && (!newData.key.trim() || !newData.value.trim())) {
-      _toast.default.error(t('blocklet.config.environment.keyValueRequired'));
+      _Toast.default.error(t('blocklet.config.environment.keyValueRequired'));
       return;
     }
     if (newData.key.startsWith('BLOCKLET_') && !_constant.BLOCKLET_CONFIGURABLE_KEY[newData.key]) {
-      _toast.default.error(t('blocklet.config.environment.invalidKey'));
+      _Toast.default.error(t('blocklet.config.environment.invalidKey'));
       return;
     }
     if (newData.key === _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE) {
       const errMessage = (0, _util2.isValidClusterSize)(newData);
       if (errMessage) {
-        _toast.default.error(errMessage);
+        _Toast.default.error(errMessage);
         return;
       }
     }
     const configs = [newData];
     if (newData.key !== oldData.key) {
       if (!newData.custom) {
-        _toast.default.error('Only key of custom env can be changed');
+        _Toast.default.error('Only key of custom env can be changed');
         return;
       }
       configs.push({
@@ -128,16 +128,16 @@ function ComponentEnvironment(_ref) {
         onConfigChanged(result.blocklet);
       }
     } catch (err) {
-      _toast.default.error((0, _util2.formatError)(err));
+      _Toast.default.error((0, _util2.formatError)(err));
     }
   };
   const onDeleteConfig = async data => {
     if (data.required) {
-      _toast.default.error(t('blocklet.config.environment.deleteForbidden'));
+      _Toast.default.error(t('blocklet.config.environment.deleteForbidden'));
       return;
     }
     if (!data.custom) {
-      _toast.default.error('Only key of custom env can be changed');
+      _Toast.default.error('Only key of custom env can be changed');
       return;
     }
     const result = await node.api.configBlocklet({

package/lib/blocklet/component/index.js

@@ -26,6 +26,9 @@ var _ArrowForward = _interopRequireDefault(require("@mui/icons-material/ArrowFor
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
 var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _Replay = _interopRequireDefault(require("@mui/icons-material/Replay"));
+var _Autorenew = _interopRequireDefault(require("@mui/icons-material/Autorenew"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
 var _react2 = require("@iconify/react");
 var _constant = require("@abtnode/constant");
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
@@ -35,10 +38,10 @@ var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 var _util = require("@blocklet/meta/lib/util");
 var _normalizePathPrefix = _interopRequireDefault(require("@abtnode/util/lib/normalize-path-prefix"));
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _deletingBlocklets = require("../../contexts/deleting-blocklets");
 var _didAddress = _interopRequireDefault(require("../../did-address"));
 var _tag = _interopRequireDefault(require("../../tag"));
-var _toast = _interopRequireDefault(require("../../toast"));
 var _blockletSource = _interopRequireDefault(require("../blocklet-source"));
 var _status = _interopRequireDefault(require("../status"));
 var _version = _interopRequireDefault(require("../version"));
@@ -49,13 +52,15 @@ var _bundleAvatar = _interopRequireDefault(require("../bundle-avatar"));
 var _mode = _interopRequireDefault(require("../mode"));
 var _configuration = _interopRequireDefault(require("./configuration"));
 var _delete = _interopRequireDefault(require("./delete"));
+var _start = _interopRequireDefault(require("./start"));
 var _line = _interopRequireDefault(require("./line"));
 var _add = _interopRequireDefault(require("./add"));
 var _addRule = _interopRequireDefault(require("../router/action/add-rule"));
 var _ruleList = _interopRequireDefault(require("../router/rule-list"));
+var _actions = _interopRequireDefault(require("../../actions"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["blocklet", "onUpdate", "getComponentUrl"];
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -137,6 +142,10 @@ function ComponentItem(_ref) {
     ancestors,
     depth,
     onRemove,
+    onStart,
+    onStop,
+    onRestart,
+    onReload,
     getComponentUrl,
     app
   } = _ref;
@@ -145,6 +154,8 @@ function ComponentItem(_ref) {
   } = (0, _react.useContext)(_context.LocaleContext);
   const [expand, setExpand] = (0, _react.useState)(true);
   const [componentInfo, setComponentInfo] = (0, _react.useState)();
+  const [showDeleteConfirm, setShowDeleteConfirm] = (0, _react.useState)(false);
+  const [loading, setLoading] = (0, _react.useState)(false);
   const {
     deletingBlocklets: deletingComponents
   } = (0, _deletingBlocklets.useDeletingBlockletContext)();
@@ -156,9 +167,6 @@ function ComponentItem(_ref) {
   }
   const mountPoint = "/".concat(ancestors.slice(1) // ignore mountPoint of root component
   .map(x => x.mountPoint || '/').join('/'), "/").concat(blocklet.mountPoint || '/').replace(/\/+/g, '/');
-
-  // hide root's status and only display specific status
-  const showStatus = !!ancestors.length && ['downloading', 'deleting', 'starting'].includes(status);
   const canExpand = depth > 0 && blocklet.children.length > 0;
   const expandIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
     size: "small",
@@ -203,7 +211,13 @@ function ComponentItem(_ref) {
       status: status,
       source: componentInfo.source
     })
-  }, {
+  }, blocklet.status === 'running' ? {
+    name: t('blocklet.startedAt'),
+    value: (0, _util2.formatToDatetime)(blocklet.startedAt)
+  } : null, blocklet.status !== 'running' ? {
+    name: t('blocklet.stoppedAt'),
+    value: (0, _util2.formatToDatetime)(blocklet.stoppedAt)
+  } : null, {
     name: t('common.mountPoint'),
     value: mountPoint
   }, {
@@ -267,7 +281,9 @@ function ComponentItem(_ref) {
       });
     }
   }
-  return [(depth > 0 || blocklet.meta.group !== 'gateway') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+  const appInProgress = (0, _util.isInProgress)(root.status);
+  const componentInProgress = (0, _util.isInProgress)(blocklet.status);
+  return [(depth > 0 || blocklet.meta.group !== 'gateway') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledComponentRow, {
     display: "flex",
     py: 2,
     className: "component-item",
@@ -293,10 +309,8 @@ function ComponentItem(_ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         ml: "16px",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-          style: {
-            color: '#222',
-            fontSize: 18
-          },
+          className: "component-name",
+          onClick: () => setComponentInfo(blocklet),
           children: (0, _util.getDisplayName)(blocklet, true)
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
           display: "flex",
@@ -309,7 +323,7 @@ function ComponentItem(_ref) {
               marginLeft: 4
             },
             mode: blocklet.mode || ''
-          }), showStatus && /*#__PURE__*/(0, _jsxRuntime.jsx)(_status.default, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_status.default, {
             style: {
               marginLeft: 4
             },
@@ -359,6 +373,8 @@ function ComponentItem(_ref) {
         })
       })
     }, mountPoint), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      display: "flex",
+      alignItems: "center",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
         title: t('common.visit'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
@@ -366,15 +382,10 @@ function ComponentItem(_ref) {
           href: href,
           rel: "noopener noreferrer",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            size: "small",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Launch.default, {})
           })
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-        title: t('common.overview'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-          onClick: () => setComponentInfo(blocklet),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoOutlined.default, {})
-        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_configuration.default, {
         blocklet: blocklet,
         ancestors: ancestors,
@@ -391,17 +402,53 @@ function ComponentItem(_ref) {
               invisible: !(0, _util.getComponentMissingConfigs)(blocklet, ancestors).length,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
                 onClick: open,
+                size: "small",
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsOutlined.default, {})
               })
             })
           }, "config");
         }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_start.default, {
         blocklet: root,
         component: blocklet,
-        remove: onRemove,
+        onStart: onStart,
+        onStop: onStop,
         disabled: !!deleteDisabledTip,
         tip: deleteDisabledTip
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_actions.default, {
+        "data-cy": "component-actions",
+        actions: [{
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoOutlined.default, {}),
+          text: t('common.detail'),
+          onClick: () => {
+            setComponentInfo(blocklet);
+          }
+        }, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Replay.default, {}),
+          text: t('common.restart'),
+          onClick: async () => {
+            setLoading(true);
+            await onRestart(blocklet);
+            setLoading(false);
+          },
+          disabled: appInProgress || componentInProgress || blocklet.status !== 'running'
+        }, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autorenew.default, {}),
+          text: t('common.reload'),
+          onClick: async () => {
+            setLoading(true);
+            await onReload(blocklet);
+            setLoading(false);
+          },
+          disabled: loading || appInProgress || componentInProgress || blocklet.status !== 'running'
+        }, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {}),
+          text: t('common.delete'),
+          onClick: () => {
+            setShowDeleteConfirm(true);
+          },
+          disabled: appInProgress || componentInProgress
+        }]
       })]
     }, "actions")]
   }, "group-not-gateway-box"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_line.default, {
@@ -413,6 +460,10 @@ function ComponentItem(_ref) {
       ancestors: [...ancestors, blocklet],
       depth: depth + 1,
       onRemove: onRemove,
+      onStart: onStart,
+      onStop: onStop,
+      onRestart: onRestart,
+      onReload: onReload,
       getComponentUrl: getComponentUrl,
       app: app
     }, "".concat(depth + 1, "-").concat(x.meta.did)))
@@ -431,13 +482,35 @@ function ComponentItem(_ref) {
         children: renderRows(componentRows)
       })]
     }, "dialog-wrapper")
-  }, "base-info-dialog")];
+  }, "base-info-dialog"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.default, {
+    blocklet: root,
+    component: blocklet,
+    remove: async function remove() {
+      setLoading(true);
+      try {
+        await onRemove(...arguments);
+      } catch (_unused) {
+        // ignore
+      }
+      setLoading(false);
+      setShowDeleteConfirm(false);
+    },
+    onCancel: () => setShowDeleteConfirm(false),
+    disabled: !!deleteDisabledTip,
+    tip: deleteDisabledTip,
+    hideBtn: true,
+    showConfirm: showDeleteConfirm
+  })];
 }
 ComponentItem.propTypes = {
   blocklet: _propTypes.default.object.isRequired,
   ancestors: _propTypes.default.array,
   depth: _propTypes.default.number,
   onRemove: _propTypes.default.func,
+  onStart: _propTypes.default.func,
+  onStop: _propTypes.default.func,
+  onRestart: _propTypes.default.func,
+  onReload: _propTypes.default.func,
   getComponentUrl: _propTypes.default.func,
   app: _propTypes.default.object
 };
@@ -445,10 +518,15 @@ ComponentItem.defaultProps = {
   ancestors: [],
   depth: 0,
   onRemove: () => {},
+  onStart: () => {},
+  onStop: () => {},
+  onRestart: () => {},
+  onReload: () => {},
   getComponentUrl: () => window.location.origin,
   app: null
 };
 const StyledBadge = (0, _styled.default)(_Badge.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .BaseBadge-badge {\n    top: ", "px;\n    right: ", "px;\n  }\n"])), props => props.top * 8 || 6, props => props.right * 8 || 6);
+const StyledComponentRow = (0, _styled.default)(_Box.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .component-name {\n    color: #222;\n    font-size: 16px;\n    cursor: pointer;\n  }\n"])));
 function BlockletComponent(_ref4) {
   let {
       blocklet,
@@ -498,7 +576,7 @@ function BlockletComponent(_ref4) {
       })).preUpdateInfo || {};
       setLoading(false);
       if (!updateId) {
-        _toast.default.info(t('blocklet.component.noUpdate'));
+        _Toast.default.info(t('blocklet.component.noUpdate'));
         return;
       }
       const list = [];
@@ -539,7 +617,7 @@ function BlockletComponent(_ref4) {
       });
     } catch (err) {
       setLoading(false);
-      _toast.default.error((0, _util2.formatError)(err));
+      _Toast.default.error((0, _util2.formatError)(err));
     }
   };
   const onConfirmUpdate = async () => {
@@ -562,7 +640,7 @@ function BlockletComponent(_ref4) {
       setShowUpdateDot(null);
     } catch (error) {
       setLoading(false);
-      _toast.default.error((0, _util2.formatError)(error));
+      _Toast.default.error((0, _util2.formatError)(error));
     }
   };
   const removeComponent = async (d, type) => {
@@ -577,10 +655,63 @@ function BlockletComponent(_ref4) {
       });
       await (0, _util2.sleep)(800);
     } catch (err) {
-      _toast.default.error((0, _util2.formatError)(err));
+      _Toast.default.error((0, _util2.formatError)(err));
       removeDeletingDid(d.meta.did);
     }
   };
+  const startComponent = async d => {
+    try {
+      await api.startBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          componentDids: [d.meta.did]
+        }
+      });
+      await (0, _util2.sleep)(800);
+    } catch (err) {
+      _Toast.default.error((0, _util2.formatError)(err));
+    }
+  };
+  const stopComponent = async d => {
+    try {
+      await api.stopBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          componentDids: [d.meta.did]
+        }
+      });
+      await (0, _util2.sleep)(800);
+    } catch (err) {
+      _Toast.default.error((0, _util2.formatError)(err));
+    }
+  };
+  const restartComponent = async d => {
+    try {
+      await api.restartBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          componentDids: [d.meta.did]
+        }
+      });
+      await (0, _util2.sleep)(800);
+    } catch (err) {
+      _Toast.default.error((0, _util2.formatError)(err));
+    }
+  };
+  const reloadComponent = async d => {
+    try {
+      await api.reloadBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          componentDids: [d.meta.did]
+        }
+      });
+      await (0, _util2.sleep)(800);
+      _Toast.default.success(t('blocklet.reloadSuccess'));
+    } catch (err) {
+      _Toast.default.error((0, _util2.formatError)(err));
+    }
+  };
   const onUpdateChecksChange = (e, groupId) => {
     const {
       checked: newValue
@@ -697,6 +828,10 @@ function BlockletComponent(_ref4) {
         blocklet: blocklet,
         app: blocklet,
         onRemove: removeComponent,
+        onStart: startComponent,
+        onStop: stopComponent,
+        onReload: reloadComponent,
+        onRestart: restartComponent,
         getComponentUrl: getComponentUrl
       }, "0-".concat(blocklet.meta.did))
     }, "top-blocklet-".concat(blocklet.meta.did))] : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
@@ -803,4 +938,4 @@ BlockletComponent.defaultProps = {
   onUpdate: () => {},
   getComponentUrl: () => window.location.origin
 };
-const Div = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .title {\n    font-size: 1.2rem;\n    font-weight: bold;\n    margin-bottom: ", ";\n  }\n\n  @keyframes showDelay {\n    0% {\n      opacity: 0;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n\n  .component-item {\n    animation: showDelay 0.75s ease 1;\n  }\n"])), props => props.theme.spacing(1));
+const Div = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .title {\n    font-size: 1.2rem;\n    font-weight: bold;\n    margin-bottom: ", ";\n  }\n\n  @keyframes showDelay {\n    0% {\n      opacity: 0;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n\n  .component-item {\n    animation: showDelay 0.75s ease 1;\n  }\n"])), props => props.theme.spacing(1));