@abtnode/ux 1.16.11-next-a232f5fb → 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/actions.js

@@ -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
             };

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/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"));
@@ -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,
@@ -581,6 +659,59 @@ function BlockletComponent(_ref4) {
       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));

package/lib/blocklet/component/start.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = StartComponent;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _PlayArrow = _interopRequireDefault(require("@mui/icons-material/PlayArrow"));
+var _Stop = _interopRequireDefault(require("@mui/icons-material/Stop"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _confirm = _interopRequireDefault(require("../../confirm"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function StartComponent(_ref) {
+  let {
+    component,
+    onStart,
+    onStop,
+    disabled,
+    tip
+  } = _ref;
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [confirmSetting, setConfirmSetting] = (0, _react.useState)();
+  const startComponent = async () => {
+    setLoading(true);
+    try {
+      await onStart(component);
+    } catch (error) {
+      _Toast.default.error(error.message);
+    }
+    setLoading(false);
+  };
+  const stopComponent = async () => {
+    setLoading(true);
+    try {
+      await onStop(component);
+    } catch (error) {
+      _Toast.default.error(error.message);
+    }
+    setLoading(false);
+  };
+  const componentDisabled = disabled || loading;
+  const isStop = component.status === 'running';
+  const Icon = isStop ? _Stop.default : _PlayArrow.default;
+  const btn = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, {
+    disabled: componentDisabled,
+    onClick: () => {
+      if (isStop) {
+        var _component$meta;
+        setConfirmSetting({
+          title: "".concat(t('common.stop'), " ").concat(component === null || component === void 0 ? void 0 : (_component$meta = component.meta) === null || _component$meta === void 0 ? void 0 : _component$meta.title),
+          description: t('blocklet.action.stopComponentDescription'),
+          confirm: t('blocklet.action.confirmStop'),
+          cancel: t('common.cancel'),
+          onConfirm: () => {
+            setConfirmSetting(null);
+            return stopComponent();
+          },
+          onCancel: () => setConfirmSetting(null)
+        });
+      } else {
+        startComponent();
+      }
+    },
+    "data-cy": "".concat(isStop ? 'stop' : 'start', "-component-btn"),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+      disabled: componentDisabled
+    })
+  });
+  return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+    title: tip || t("common.".concat(isStop ? 'stop' : 'start')),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: btn
+    })
+  }), confirmSetting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+    title: confirmSetting.title,
+    description: confirmSetting.description,
+    confirm: confirmSetting.confirm,
+    cancel: confirmSetting.cancel,
+    params: confirmSetting.params,
+    onConfirm: confirmSetting.onConfirm,
+    onCancel: confirmSetting.onCancel
+  })];
+}
+StartComponent.propTypes = {
+  component: _propTypes.default.object.isRequired,
+  onStart: _propTypes.default.func,
+  onStop: _propTypes.default.func,
+  disabled: _propTypes.default.bool,
+  tip: _propTypes.default.string
+};
+StartComponent.defaultProps = {
+  onStart: async () => {},
+  onStop: async () => {},
+  disabled: false,
+  tip: ''
+};
+const StyledButton = (0, _styled.default)(_IconButton.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.Mui-disabled {\n    opacity: 0.5;\n  }\n"])));

package/lib/blocklet/overview.js

@@ -155,13 +155,7 @@ function BlockletOverview() {
   } : null, {
     name: t('blocklet.installedAt'),
     value: (0, _util2.formatToDatetime)(blocklet.installedAt)
-  }, 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('blocklet.overview.accessControl'),
     value: t("team.whoCanAccess.".concat((0, _util.getWhoCanAccess)(blocklet), ".title"))
   }, {

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

@@ -40,6 +40,7 @@ function RuleActions(rule) {
       rel: "noopener noreferrer",
       title: href,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        size: "small",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Launch.default, {})
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_updateRule.default, _objectSpread(_objectSpread({}, rule), {}, {
@@ -48,6 +49,7 @@ function RuleActions(rule) {
           open: o
         } = _ref;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+          size: "small",
           onClick: o,
           disabled: rule.isProtected,
           "data-cy": "action-update-rule",
@@ -60,6 +62,7 @@ function RuleActions(rule) {
           open
         } = _ref2;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+          size: "small",
           onClick: open,
           disabled: rule.isProtected,
           "data-cy": "action-delete-rule",

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

@@ -83,7 +83,7 @@ function RuleList(_ref2) {
       placement: "top",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
         disabled: true,
-        size: "large",
+        size: "small",
         style: {
           pointerEvents: 'auto',
           // padding replace to margin, fix the tooltip position

package/lib/locales/en.js

@@ -343,6 +343,7 @@ module.exports = {
     },
     action: {
       stopDescription: 'Stopping the blocklet will make its public interfaces unaccessible, which may cause end user failures',
+      stopComponentDescription: 'Stopping the component will make its public interfaces unaccessible, which may cause end user failures',
       confirmStop: 'Yes, Stop It',
       cancelDownloadDescription: 'Cancel download {name} ?',
       removeApplicationDescription: 'Removing the application will erase code and data generated by this application, which is not recoverable if you do not have any backups',

package/lib/locales/zh.js

@@ -338,6 +338,7 @@ module.exports = {
     noComponent: '应用没有组件，无法启动',
     action: {
       stopDescription: '停止该基石程序将会使页面不可以访问，可能会导致使用它的用户出现错误',
+      stopComponentDescription: '停止该组件将会使页面不可以访问，可能会导致使用它的用户出现错误',
       confirmStop: '是的，停止',
       cancelDownloadDescription: '取消下载 {name} ？',
       removeApplicationDescription: '如果没有备份数据，删除应用将会删除所有数据，包括应用运行时产生的所有数据',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abtnode/ux",
-  "version": "1.16.11-next-a232f5fb",
+  "version": "1.16.11-next-3d2b39f7",
   "description": "UX components shared across abtnode packages",
   "publishConfig": {
     "access": "public"
@@ -23,9 +23,9 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@abtnode/auth": "1.16.11-next-a232f5fb",
-    "@abtnode/constant": "1.16.11-next-a232f5fb",
-    "@abtnode/util": "1.16.11-next-a232f5fb",
+    "@abtnode/auth": "1.16.11-next-3d2b39f7",
+    "@abtnode/constant": "1.16.11-next-3d2b39f7",
+    "@abtnode/util": "1.16.11-next-3d2b39f7",
     "@ahooksjs/use-url-state": "^3.5.1",
     "@arcblock/did": "^1.18.80",
     "@arcblock/did-connect": "^2.5.47",
@@ -34,10 +34,10 @@
     "@arcblock/react-hooks": "^2.5.47",
     "@arcblock/terminal": "^2.5.47",
     "@arcblock/ux": "^2.5.47",
-    "@blocklet/constant": "1.16.11-next-a232f5fb",
+    "@blocklet/constant": "1.16.11-next-3d2b39f7",
     "@blocklet/launcher-layout": "2.1.0",
     "@blocklet/list": "^0.11.28",
-    "@blocklet/meta": "1.16.11-next-a232f5fb",
+    "@blocklet/meta": "1.16.11-next-3d2b39f7",
     "@blocklet/ui-react": "^2.5.47",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -93,5 +93,5 @@
     "@babel/preset-react": "^7.18.6",
     "babel-plugin-inline-react-svg": "^1.1.2"
   },
-  "gitHead": "1af264e9b6648aa191fbf23c67717262ac717697"
+  "gitHead": "d0142bd2d1e49b94dcb5542d78e294a7b2258faa"
 }