@abtnode/ux 1.16.26-beta-351de484 → 1.16.26-beta-63f52a83

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

@@ -16,24 +16,15 @@ var _Replay = _interopRequireDefault(require("@mui/icons-material/Replay"));
 var _Autorenew = _interopRequireDefault(require("@mui/icons-material/Autorenew"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
-var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
-var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
-var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
 var _react2 = require("@iconify/react");
-var _InfoRow = _interopRequireDefault(require("@arcblock/ux/lib/InfoRow"));
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _normalizePathPrefix = _interopRequireDefault(require("@abtnode/util/lib/normalize-path-prefix"));
 var _util = require("@blocklet/meta/lib/util");
 var _SettingsOutlined = _interopRequireDefault(require("@mui/icons-material/SettingsOutlined"));
 var _deletingBlocklets = require("../../contexts/deleting-blocklets");
-var _tag = _interopRequireDefault(require("../../tag"));
 var _configuration = _interopRequireDefault(require("./configuration"));
-var _util2 = require("../../util");
-var _didAddress = _interopRequireDefault(require("../../did-address"));
-var _blockletSource = _interopRequireDefault(require("../blocklet-source"));
 var _status = _interopRequireDefault(require("../status"));
-var _version = _interopRequireDefault(require("../version"));
 var _confirm = _interopRequireDefault(require("../../confirm"));
 var _bundleAvatar = _interopRequireDefault(require("../bundle-avatar"));
 var _mode = _interopRequireDefault(require("../mode"));
@@ -41,58 +32,14 @@ var _delete = _interopRequireDefault(require("./delete"));
 var _start = _interopRequireDefault(require("./start"));
 var _line = _interopRequireDefault(require("./line"));
 var _actions = _interopRequireDefault(require("../../actions"));
+var _componentInfoDialog = _interopRequireDefault(require("./component-info-dialog"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
 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) } })); }
-const getEngineRows = (engine, t) => {
-  if (!engine) {
-    return [];
-  }
-  return [{
-    name: t('common.name'),
-    value: engine.displayName
-  }, {
-    name: t('common.description'),
-    value: engine.description
-  }, {
-    name: t('common.version'),
-    value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tag.default, {
-      children: engine.version
-    })
-  }];
-};
-const getSourceInfo = blocklet => {
-  const {
-    source,
-    deployedFrom,
-    bundleSource
-  } = blocklet;
-  if (source) {
-    return {
-      source,
-      deployedFrom
-    };
-  }
-  if (!bundleSource) {
-    return {
-      source: 'upload',
-      deployedFrom
-    };
-  }
-  if (bundleSource.url) {
-    return {
-      source: 'url',
-      deployedFrom: deployedFrom || Array.isArray(bundleSource.url) ? bundleSource.url[0] : bundleSource.url
-    };
-  }
-  if (bundleSource.store) {
-    return {
-      source: 'registry',
-      deployedFrom: deployedFrom || Array.isArray(bundleSource.store) ? bundleSource.store[0] : bundleSource.store
-    };
-  }
-  return {};
+const isResource = component => {
+  var _component$meta;
+  return !(component !== null && component !== void 0 && (_component$meta = component.meta) !== null && _component$meta !== void 0 && _component$meta.group);
 };
 const getComponentName = (componentId, app) => {
   const ids = componentId.split('/').slice(1);
@@ -110,12 +57,8 @@ const getComponentName = (componentId, app) => {
   }
   return names.join(' / ');
 };
-const isPack = component => {
-  var _component$meta;
-  return (component === null || component === void 0 || (_component$meta = component.meta) === null || _component$meta === void 0 ? void 0 : _component$meta.group) === 'pack';
-};
 function ComponentCell(_ref) {
-  var _blocklet$dependents, _blocklet$meta$resour, _blocklet$dependents2, _blocklet$meta, _blocklet$dependents3;
+  var _blocklet$dependents, _blocklet$meta, _blocklet$dependents2;
   let {
     blocklet,
     ancestors,
@@ -129,8 +72,7 @@ function ComponentCell(_ref) {
     app
   } = _ref;
   const {
-    t,
-    locale
+    t
   } = (0, _react.useContext)(_context.LocaleContext);
   const [componentInfo, setComponentInfo] = (0, _react.useState)();
   const [showDeleteConfirm, setShowDeleteConfirm] = (0, _react.useState)(false);
@@ -147,109 +89,12 @@ function ComponentCell(_ref) {
   }
   const mountPoint = "/".concat(blocklet.mountPoint || '/').replace(/\/+/g, '/');
   const href = getComponentUrl(mountPoint);
-  const renderRows = rows => rows.map(row => {
-    if (row.name === t('common.did') || row.name === t('blocklet.appId')) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoRow.default, {
-        valueComponent: "div",
-        nameWidth: 120,
-        name: row.name,
-        nameFormatter: () => row.name,
-        children: row.value
-      }, row.name);
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoRow.default, {
-      valueComponent: "div",
-      nameWidth: 120,
-      name: row.name,
-      children: row.value
-    }, row.name);
-  });
-  const sourceInfo = componentInfo ? getSourceInfo(componentInfo) : {};
-  const componentRows = componentInfo ? [{
-    name: t('common.name'),
-    value: (0, _util.getDisplayName)(componentInfo, true)
-  }, {
-    name: t('common.version'),
-    value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_version.default, {
-      blocklet: componentInfo,
-      checkUpgrade: false
-    })
-  }, {
-    name: t('common.status'),
-    value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_status.default, {
-      status: status,
-      source: componentInfo.source,
-      progress: blocklet.progress
-    })
-  }, blocklet.status === 'running' ? {
-    name: t('blocklet.startedAt'),
-    value: (0, _util2.formatToDatetime)(blocklet.startedAt, locale)
-  } : null, blocklet.status !== 'running' ? {
-    name: t('blocklet.stoppedAt'),
-    value: (0, _util2.formatToDatetime)(blocklet.stoppedAt, locale)
-  } : null, blocklet.installedAt ? {
-    name: t('blocklet.installedAt'),
-    value: (0, _util2.formatToDatetime)(blocklet.installedAt, locale)
-  } : null, (0, _util.hasStartEngine)(blocklet.meta) ? {
-    name: t('common.mountPoint'),
-    value: mountPoint
-  } : null, componentInfo.meta.group ? {
-    name: t('common.group'),
-    value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tag.default, {
-      type: "success",
-      children: componentInfo.meta.group
-    })
-  } : null, {
-    name: t('blocklet.overview.source'),
-    value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockletSource.default, {
-      sourceInfo: sourceInfo,
-      blocklet: blocklet
-    })
-  }, {
-    name: t('blocklet.overview.deployedFrom'),
-    value: sourceInfo.deployedFrom || '-'
-  }, {
-    name: t('common.did'),
-    value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
-      did: componentInfo.meta.did,
-      showQrcode: true
-    })
-  }, {
-    name: t('common.author'),
-    value: (0, _util2.formatPerson)(componentInfo.meta.author)
-  }, {
-    name: t('common.engine'),
-    value: getEngineRows(componentInfo.engine, t).map(_ref2 => {
-      let {
-        name,
-        value
-      } = _ref2;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoRow.default, {
-        style: {
-          marginBottom: 4
-        },
-        nameWidth: 120,
-        name: name,
-        children: value
-      }, name);
-    })
-  }, (_blocklet$dependents = blocklet.dependents) !== null && _blocklet$dependents !== void 0 && _blocklet$dependents.length ? {
-    name: t('common.dependents'),
-    value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-      children: blocklet.dependents.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-        children: "".concat(getComponentName(x.id, app), " ").concat(x.required ? "(".concat(t('common.required'), ")") : '')
-      }, x.id))
-    })
-  } : null, (_blocklet$meta$resour = blocklet.meta.resources) !== null && _blocklet$meta$resour !== void 0 && _blocklet$meta$resour.length ? {
-    name: t('common.resource'),
-    value: blocklet.meta.resources.join(', ')
-  } : null].filter(Boolean) : [];
   const appInProgress = (0, _util.isInProgress)(app.status);
   const componentInProgress = (0, _util.isInProgress)(blocklet.status);
   let deleteDisabledTip = '';
   if (appInProgress || componentInProgress || depth === 1 && deletingComponents.includes(blocklet.meta.did)) {
     deleteDisabledTip = t('blocklet.component.tip.stopBlocklet');
-  } else if ((_blocklet$dependents2 = blocklet.dependents) !== null && _blocklet$dependents2 !== void 0 && _blocklet$dependents2.length) {
+  } else if ((_blocklet$dependents = blocklet.dependents) !== null && _blocklet$dependents !== void 0 && _blocklet$dependents.length) {
     const requires = blocklet.dependents.filter(x => x.required);
     if (requires.length) {
       const names = requires.map(x => getComponentName(x.id, app));
@@ -258,229 +103,223 @@ function ComponentCell(_ref) {
       });
     }
   }
-  return [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledComponentRow, {
-    display: "flex",
-    py: 2,
-    className: "component-item",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-      pl: 2,
-      width: {
-        xs: 300,
-        md: 400
-      },
+  const handleRemove = async function handleRemove() {
+    setLoading(true);
+    try {
+      await onRemove(...arguments);
+    } catch (_unused) {
+      // ignore
+    }
+    setLoading(false);
+    setShowDeleteConfirm(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledComponentRow, {
       display: "flex",
+      py: 2,
+      className: "component-item",
+      justifyContent: "flex-start",
       alignItems: "center",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bundleAvatar.default, {
-        blocklet: blocklet,
-        ancestors: ancestors
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-        ml: "16px",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-          className: "component-header",
-          onClick: () => setComponentInfo(blocklet),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-            className: "component-name",
-            children: (0, _util.getDisplayName)(blocklet, true)
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-            className: "component-version",
-            children: blocklet === null || blocklet === void 0 || (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.version
-          })]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        pl: 2,
+        width: {
+          xs: 300,
+          md: 400
+        },
+        display: "flex",
+        alignItems: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bundleAvatar.default, {
+          blocklet: blocklet,
+          ancestors: ancestors
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-          display: "flex",
-          alignItems: "center",
-          sx: {
-            mt: '2px',
-            ml: -0.5
-          },
-          children: [status !== 'unknown' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_status.default, {
-            style: {
-              marginLeft: 4
-            },
-            status: status,
-            source: blocklet.source,
-            progress: blocklet.progress
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mode.default, {
-            style: {
-              marginLeft: 4
+          ml: "16px",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            className: "component-header",
+            onClick: () => setComponentInfo(blocklet),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              className: "component-name",
+              children: (0, _util.getDisplayName)(blocklet, true)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              className: "component-version",
+              children: blocklet === null || blocklet === void 0 || (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.version
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            display: "flex",
+            alignItems: "center",
+            sx: {
+              mt: '2px',
+              ml: -0.5
             },
-            mode: blocklet.mode || ''
-          }), !!((_blocklet$dependents3 = blocklet.dependents) !== null && _blocklet$dependents3 !== void 0 && _blocklet$dependents3.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-            title: ["".concat(t('common.dependents'), ": "), blocklet.dependents.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-              pl: 1,
-              children: "".concat(getComponentName(x.id, app), " ").concat(x.required ? "(".concat(t('common.required'), ")") : '')
-            }, x.id))],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-              display: "flex",
-              color: "primary.main",
-              ml: 1,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
-                icon: "octicon:package-dependents-16"
+            children: [status !== 'unknown' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_status.default, {
+              style: {
+                marginLeft: 4
+              },
+              status: status,
+              source: blocklet.source,
+              progress: blocklet.progress
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mode.default, {
+              style: {
+                marginLeft: 4
+              },
+              mode: blocklet.mode || ''
+            }), !!((_blocklet$dependents2 = blocklet.dependents) !== null && _blocklet$dependents2 !== void 0 && _blocklet$dependents2.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+              title: ["".concat(t('common.dependents'), ": "), blocklet.dependents.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                pl: 1,
+                children: "".concat(getComponentName(x.id, app), " ").concat(x.required ? "(".concat(t('common.required'), ")") : '')
+              }, x.id))],
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                display: "flex",
+                color: "primary.main",
+                ml: 1,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+                  icon: "octicon:package-dependents-16"
+                })
               })
-            })
+            })]
           })]
         })]
-      })]
-    }, blocklet), (0, _util.hasStartEngine)(blocklet.meta) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-      sx: {
-        display: {
-          xs: 'none',
-          md: 'flex'
-        }
-      },
-      alignItems: "center",
-      flexGrow: "1",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-        target: "_blank",
-        href: href,
-        rel: "noopener noreferrer",
-        title: href,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-          maxWidth: 400,
-          sx: {
-            color: 'secondary.main',
-            fontSize: 16,
-            px: 2
-          },
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          textOverflow: "ellipsis",
-          children: (0, _normalizePathPrefix.default)(mountPoint)
-        })
-      })
-    }, mountPoint), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        flex: 1
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-      display: "flex",
-      alignItems: "center",
-      children: [(0, _util.hasStartEngine)(blocklet.meta) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-        title: t('common.visit'),
+      }, blocklet), (0, _util.hasStartEngine)(blocklet.meta) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        sx: {
+          display: {
+            xs: 'none',
+            md: 'flex'
+          }
+        },
+        alignItems: "center",
+        flexGrow: "1",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
           target: "_blank",
           href: href,
           rel: "noopener noreferrer",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-            size: "small",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Launch.default, {})
+          title: href,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            maxWidth: 400,
+            sx: {
+              color: 'secondary.main',
+              fontSize: 16,
+              px: 2
+            },
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis",
+            children: (0, _normalizePathPrefix.default)(mountPoint)
           })
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_configuration.default, {
-        blocklet: blocklet,
-        ancestors: ancestors,
-        children: _ref3 => {
-          let {
-            open
-          } = _ref3;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-            title: t('common.config'),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledBadge, {
-              color: "error",
-              badgeContent: "",
-              variant: "dot",
-              invisible: !(0, _util.getComponentMissingConfigs)(blocklet, ancestors[0]).length,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-                onClick: open,
-                size: "small",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsOutlined.default, {})
-              })
-            })
-          }, "config");
+      }, mountPoint), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          flex: 1
         }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_start.default, {
-        blocklet: app,
-        component: blocklet,
-        onStart: onStart,
-        onStop: onStop,
-        disabled: !['starting', 'stopping'].includes(app.status) && (0, _util.isInProgress)(app.status)
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_actions.default, {
-        "data-cy": "component-actions",
-        actions: [(0, _util.hasStartEngine)(blocklet.meta) ? {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoOutlined.default, {}),
-          text: t('common.detail'),
-          onClick: () => {
-            setComponentInfo(blocklet);
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        alignItems: "center",
+        children: [(0, _util.hasStartEngine)(blocklet.meta) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+          title: t('common.visit'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            target: "_blank",
+            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)(_configuration.default, {
+          blocklet: blocklet,
+          ancestors: ancestors,
+          children: _ref2 => {
+            let {
+              open
+            } = _ref2;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+              title: t('common.config'),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledBadge, {
+                color: "error",
+                badgeContent: "",
+                variant: "dot",
+                invisible: !(0, _util.getComponentMissingConfigs)(blocklet, ancestors[0]).length,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                  onClick: open,
+                  size: "small",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsOutlined.default, {})
+                })
+              })
+            }, "config");
           }
-        } : null, !isPack(blocklet) && {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Replay.default, {}),
-          text: t('common.restart'),
-          onClick: () => {
-            setConfirmSetting({
-              title: "".concat(t('common.restart'), " ").concat(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: appInProgress || componentInProgress || blocklet.status !== 'running'
-        }, !isPack(blocklet) && {
-          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 || !!deleteDisabledTip,
-          tip: deleteDisabledTip
-        }].filter(Boolean)
-      })]
-    }, "actions")]
-  }, "group-not-gateway-box"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_line.default, {}, "line"), !!componentInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
-    open: true,
-    fullWidth: true,
-    maxWidth: "md",
-    onClose: () => {
-      setComponentInfo(null);
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-      paddingY: 1.5,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogTitle.default, {
-        children: t('common.componentBasicInfo')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContent.default, {
-        children: renderRows(componentRows)
-      })]
-    }, "dialog-wrapper")
-  }, "base-info-dialog"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.default, {
-    blocklet: app,
-    component: blocklet,
-    remove: async function remove() {
-      setLoading(true);
-      try {
-        await onRemove(...arguments);
-      } catch (_unused) {
-        // ignore
-      }
-      setLoading(false);
-      setShowDeleteConfirm(false);
-    },
-    onCancel: () => setShowDeleteConfirm(false),
-    hideBtn: true,
-    showConfirm: showDeleteConfirm
-  }, "delete-component"), 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
-  }, "confirm-setting")];
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_start.default, {
+          blocklet: app,
+          component: blocklet,
+          onStart: onStart,
+          onStop: onStop,
+          disabled: !['starting', 'stopping'].includes(app.status) && (0, _util.isInProgress)(app.status)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_actions.default, {
+          "data-cy": "component-actions",
+          actions: [(0, _util.hasStartEngine)(blocklet.meta) ? {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoOutlined.default, {}),
+            text: t('common.detail'),
+            onClick: () => {
+              setComponentInfo(blocklet);
+            }
+          } : null, !isResource(blocklet) && {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Replay.default, {}),
+            text: t('common.restart'),
+            onClick: () => {
+              setConfirmSetting({
+                title: "".concat(t('common.restart'), " ").concat(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: appInProgress || componentInProgress || blocklet.status !== 'running'
+          }, !isResource(blocklet) && {
+            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 || !!deleteDisabledTip,
+            tip: deleteDisabledTip
+          }].filter(Boolean)
+        })]
+      }, "actions")]
+    }, "group-not-gateway-box"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_line.default, {}, "line"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentInfoDialog.default, {
+      componentInfo: componentInfo,
+      onClose: setComponentInfo,
+      blocklet: blocklet,
+      app: app,
+      depth: depth
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.default, {
+      blocklet: app,
+      component: blocklet,
+      remove: handleRemove,
+      onCancel: () => setShowDeleteConfirm(false),
+      hideBtn: true,
+      showConfirm: showDeleteConfirm
+    }, "delete-component"), 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
+    }, "confirm-setting")]
+  });
 }
 ComponentCell.propTypes = {
   blocklet: _propTypes.default.object.isRequired,