@abtnode/ux 1.15.17 → 1.16.0-beta-8ee536d7

package/lib/blocklet/component/index.js

@@ -0,0 +1,804 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockletComponent;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
+var _Update = _interopRequireDefault(require("@mui/icons-material/Update"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
+var _SettingsOutlined = _interopRequireDefault(require("@mui/icons-material/SettingsOutlined"));
+var _InfoOutlined = _interopRequireDefault(require("@mui/icons-material/InfoOutlined"));
+var _Launch = _interopRequireDefault(require("@mui/icons-material/Launch"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _ArrowForward = _interopRequireDefault(require("@mui/icons-material/ArrowForward"));
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _react2 = require("@iconify/react");
+var _constant = require("@abtnode/constant");
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _InfoRow = _interopRequireDefault(require("@arcblock/ux/lib/InfoRow"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+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 _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"));
+var _node = require("../../contexts/node");
+var _util2 = require("../../util");
+var _permission = _interopRequireDefault(require("../../permission"));
+var _bundleAvatar = _interopRequireDefault(require("../bundle-avatar"));
+var _mode = _interopRequireDefault(require("../mode"));
+var _configuration = _interopRequireDefault(require("./configuration"));
+var _delete = _interopRequireDefault(require("./delete"));
+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 _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["blocklet", "onUpdate", "getComponentUrl"];
+var _templateObject, _templateObject2;
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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 getComponentName = (componentId, app) => {
+  const ids = componentId.split('/').slice(1);
+  let parent = app;
+  let index = 0;
+  const names = [];
+  while (parent && index < ids.length) {
+    // eslint-disable-next-line no-loop-func
+    const component = parent.children.find(x => x.meta.did === ids[index]);
+    parent = component;
+    index++;
+    if (component) {
+      names.push(component.meta.title);
+    }
+  }
+  return names.join(' / ');
+};
+function ComponentItem(_ref) {
+  var _blocklet$dependents, _blocklet$dependents2, _blocklet$dependents3, _blocklet$children;
+  let {
+    blocklet,
+    ancestors,
+    depth,
+    onRemove,
+    getComponentUrl,
+    app
+  } = _ref;
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const [expand, setExpand] = (0, _react.useState)(true);
+  const [componentInfo, setComponentInfo] = (0, _react.useState)();
+  const {
+    deletingBlocklets: deletingComponents
+  } = (0, _deletingBlocklets.useDeletingBlockletContext)();
+  let {
+    status
+  } = blocklet;
+  if (depth <= 1 && deletingComponents.includes(blocklet.meta.did)) {
+    status = 'deleting';
+  }
+  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",
+    children: expand ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
+      fontSize: "inherit"
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChevronRight.default, {
+      fontSize: "inherit"
+    })
+  });
+  const root = ancestors[0] || blocklet;
+  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
+    })
+  }, {
+    name: t('common.mountPoint'),
+    value: mountPoint
+  }, {
+    name: t('common.group'),
+    value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tag.default, {
+      type: "success",
+      children: componentInfo.meta.group
+    })
+  }, {
+    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
+    })
+  }, {
+    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'), ")") : '')
+      }))
+    })
+  } : null].filter(Boolean) : [];
+  let deleteDisabledTip = '';
+  if (depth !== 1) {
+    deleteDisabledTip = t('blocklet.component.tip.notDynamic');
+  } else if ((0, _util2.isInProgress)(root.status) || 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) {
+    const requires = blocklet.dependents.filter(x => x.required);
+    if (requires.length) {
+      const names = requires.map(x => getComponentName(x.id, app));
+      deleteDisabledTip = t('blocklet.component.tip.requiredBy', {
+        name: names.join(', ')
+      });
+    }
+  }
+  return [(depth > 0 || blocklet.meta.group !== 'gateway') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    display: "flex",
+    py: 2,
+    className: "component-item",
+    justifyContent: "space-between",
+    alignItems: "center",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      pl: Math.max((depth - 1) * 2, 0),
+      width: {
+        xs: 300,
+        md: 400
+      },
+      display: "flex",
+      alignItems: "center",
+      style: {
+        cursor: canExpand ? 'pointer' : 'cursor'
+      },
+      onClick: () => canExpand && setExpand(!expand),
+      children: [canExpand ? expandIcon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        width: 28
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bundleAvatar.default, {
+        blocklet: blocklet,
+        ancestors: ancestors
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        ml: "16px",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          style: {
+            color: '#222',
+            fontSize: 18
+          },
+          children: (0, _util.getDisplayName)(blocklet, true)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          display: "flex",
+          alignItems: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_version.default, {
+            blocklet: blocklet,
+            checkUpgrade: false
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mode.default, {
+            style: {
+              marginLeft: 4
+            },
+            mode: blocklet.mode || ''
+          }), showStatus && /*#__PURE__*/(0, _jsxRuntime.jsx)(_status.default, {
+            style: {
+              marginLeft: 4
+            },
+            status: status,
+            source: blocklet.source
+          }), !!((_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'), ")") : '')
+            }))],
+            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), /*#__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: 18,
+            px: 2
+          },
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          textOverflow: "ellipsis",
+          children: (0, _normalizePathPrefix.default)(mountPoint)
+        })
+      })
+    }, mountPoint), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      children: [/*#__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, {
+            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,
+        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).length,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                onClick: open,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsOutlined.default, {})
+              })
+            })
+          }, "config");
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.default, {
+        blocklet: root,
+        component: blocklet,
+        remove: onRemove,
+        disabled: !!deleteDisabledTip,
+        tip: deleteDisabledTip
+      })]
+    }, "actions")]
+  }, "group-not-gateway-box"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_line.default, {
+    depth: depth
+  }), (_blocklet$children = blocklet.children) !== null && _blocklet$children !== void 0 && _blocklet$children.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Collapse.default, {
+    in: expand,
+    children: blocklet.children.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentItem, {
+      blocklet: x,
+      ancestors: [...ancestors, blocklet],
+      depth: depth + 1,
+      onRemove: onRemove,
+      getComponentUrl: getComponentUrl,
+      app: app
+    }, "".concat(depth + 1, "-").concat(x.meta.did)))
+  }, "blocklet-collapse") : null, !!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")];
+}
+ComponentItem.propTypes = {
+  blocklet: _propTypes.default.object.isRequired,
+  ancestors: _propTypes.default.array,
+  depth: _propTypes.default.number,
+  onRemove: _propTypes.default.func,
+  getComponentUrl: _propTypes.default.func,
+  app: _propTypes.default.object
+};
+ComponentItem.defaultProps = {
+  ancestors: [],
+  depth: 0,
+  onRemove: () => {},
+  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);
+function BlockletComponent(_ref4) {
+  let {
+      blocklet,
+      onUpdate,
+      getComponentUrl
+    } = _ref4,
+    rest = _objectWithoutProperties(_ref4, _excluded);
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const {
+    api,
+    inService
+  } = (0, _node.useNodeContext)();
+  const {
+    addDeletingDid,
+    removeDeletingDid,
+    matchDeletingDid
+  } = (0, _deletingBlocklets.useDeletingBlockletContext)();
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [updateConfirm, setUpdateConfirm] = (0, _react.useState)(null);
+  const needMigration = blocklet && blocklet.structVersion !== _constant.APP_STRUCT_VERSION;
+
+  // update dot is not used but maybe useful in the further
+  const [showUpdateDot, setShowUpdateDot] = (0, _react.useState)(false);
+  const components = [...blocklet.children] || [];
+  if (blocklet.meta.group !== 'gateway') {
+    // add root blocklet to table list
+    components.unshift(blocklet);
+  }
+  matchDeletingDid(components.map(e => e.meta.did));
+  const checkForUpdates = async () => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      // check child component version
+      const {
+        updateId,
+        updateList
+      } = (await api.checkComponentsForUpdates({
+        input: {
+          did: blocklet.meta.did
+        }
+      })).preUpdateInfo || {};
+      setLoading(false);
+      if (!updateId) {
+        _toast.default.info(t('blocklet.component.noUpdate'));
+        return;
+      }
+      const list = [];
+      (0, _util.forEachChildSync)(blocklet, (b, _ref5) => {
+        let {
+          id,
+          ancestors
+        } = _ref5;
+        const updateItem = updateList.find(x => x.id === id);
+        if (updateItem) {
+          const name = ancestors.slice(1).concat(b).map(x => x.meta.title || x.meta.name).join(' / ');
+
+          // groupId 为一级组件的 id
+          const groupId = (ancestors[1] || b).meta.did;
+          list.push({
+            groupId,
+            name,
+            version: b.meta.version,
+            newVersion: updateItem.meta.version
+          });
+        }
+      });
+      const checks = {};
+      list.forEach(x => {
+        if (!checks[x.groupId]) {
+          checks[x.groupId] = true;
+        } else {
+          x.disabled = true;
+        }
+      });
+      setUpdateConfirm({
+        params: {
+          updateId
+        },
+        list,
+        checks,
+        hasChecks: true
+      });
+    } catch (err) {
+      setLoading(false);
+      _toast.default.error((0, _util2.formatError)(err));
+    }
+  };
+  const onConfirmUpdate = async () => {
+    if (loading) {
+      return;
+    }
+    try {
+      setLoading(true);
+      const selectedComponents = Object.keys(updateConfirm.checks).filter(x => updateConfirm.checks[x]);
+      const input = {
+        updateId: updateConfirm.params.updateId,
+        rootDid: blocklet.meta.did,
+        selectedComponents
+      };
+      await api.upgradeComponents({
+        input
+      });
+      setLoading(false);
+      setUpdateConfirm(null);
+      setShowUpdateDot(null);
+    } catch (error) {
+      setLoading(false);
+      _toast.default.error((0, _util2.formatError)(error));
+    }
+  };
+  const removeComponent = async (d, type) => {
+    addDeletingDid(d.meta.did);
+    try {
+      await api.deleteComponent({
+        input: {
+          did: d.meta.did,
+          keepData: type === 'keepData',
+          rootDid: blocklet.meta.did
+        }
+      });
+      await (0, _util2.sleep)(800);
+    } catch (err) {
+      _toast.default.error((0, _util2.formatError)(err));
+      removeDeletingDid(d.meta.did);
+    }
+  };
+  const onUpdateChecksChange = (e, groupId) => {
+    const {
+      checked: newValue
+    } = e.target;
+    setUpdateConfirm(x => {
+      const checks = Object.entries(x.checks).reduce((o, _ref6) => {
+        let [key, oldValue] = _ref6;
+        o[key] = groupId === key ? newValue : oldValue;
+        return o;
+      }, {});
+      const hasChecks = Object.values(checks).includes(true);
+      return _objectSpread(_objectSpread({}, x), {}, {
+        checks,
+        hasChecks
+      });
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread({
+    component: "div"
+  }, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "title",
+        children: [t('common.components'), !needMigration && /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+          permission: inService ? '' : 'mutate_blocklets',
+          role: inService ? _util2.BlockletAdminRoles : [],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledBadge, {
+            top: 1.2,
+            right: 0.4,
+            color: "error",
+            badgeContent: "",
+            variant: "dot",
+            invisible: !showUpdateDot,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+              disabled: loading || (0, _util2.isInProgress)(blocklet.status),
+              color: "secondary",
+              onClick: () => {
+                checkForUpdates();
+              },
+              "data-cy": "check-for-updates",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                mr: 0.5,
+                display: "flex",
+                children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+                  size: 16
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Update.default, {
+                  style: {
+                    fontSize: '1em'
+                  }
+                })
+              }), t('blocklet.component.checkUpdateTitle')]
+            })
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+        permission: inService ? '' : 'mutate_blocklets',
+        role: inService ? _util2.BlockletAdminRoles : [],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          display: "flex",
+          alignItems: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_addRule.default, {
+            children: _ref7 => {
+              let {
+                open
+              } = _ref7;
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+                disabled: loading || (0, _util2.isInProgress)(blocklet.status),
+                variant: "text",
+                color: "primary",
+                "data-cy": "add-rule",
+                onClick: open,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+                  style: {
+                    fontSize: '1.3em',
+                    marginRight: 4
+                  }
+                }), t('router.rule.add.title')]
+              });
+            }
+          }), !needMigration && /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.default, {
+            blocklet: blocklet,
+            children: _ref8 => {
+              let {
+                open
+              } = _ref8;
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+                disabled: loading || (0, _util2.isInProgress)(blocklet.status),
+                variant: "text",
+                color: "primary",
+                "data-cy": "add-component",
+                onClick: open,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+                  style: {
+                    fontSize: '1.3em',
+                    marginRight: 4
+                  }
+                }), t('blocklet.component.add')]
+              });
+            }
+          })]
+        })
+      })]
+    }), components && components.length ? [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: 2,
+      ml: {
+        xs: '-12px',
+        md: '-24px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentItem, {
+        blocklet: blocklet,
+        app: blocklet,
+        onRemove: removeComponent,
+        getComponentUrl: getComponentUrl
+      }, "0-".concat(blocklet.meta.did))
+    }, "top-blocklet-".concat(blocklet.meta.did))] : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: 8,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+        children: t('blocklet.component.noComponent')
+      })
+    }), !!blocklet.site.rules.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: 0,
+      ml: {
+        xs: '-16px',
+        md: '-28px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ruleList.default, {})
+    }), !!updateConfirm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+      open: true,
+      fullWidth: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        paddingY: 1.5,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogTitle.default, {
+          children: t('blocklet.component.updateTitle')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          component: _DialogContent.default,
+          py: 4,
+          children: updateConfirm.list.map(x => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            display: "flex",
+            alignItems: "center",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+              checked: updateConfirm.checks[x.groupId],
+              onChange: e => onUpdateChecksChange(e, x.groupId),
+              style: {
+                marginLeft: x.disabled ? 16 : 0
+              },
+              defaultChecked: true,
+              disabled: x.disabled
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+              flexGrow: 1,
+              mt: 3,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                item: true,
+                xs: 8,
+                children: x.name
+              }), x.version && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+                fontSize: "h6.fontSize",
+                container: true,
+                spacing: 2,
+                alignItems: "center",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+                  item: true,
+                  xs: 3,
+                  children: x.version
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+                  item: true,
+                  xs: 1,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowForward.default, {
+                    style: {
+                      fontSize: '0.9em'
+                    }
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+                  item: true,
+                  xs: 3,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                    color: "secondary.main",
+                    children: x.newVersion
+                  })
+                })]
+              })]
+            }, "".concat(x.name, "-").concat(x.newVersion))]
+          }))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogActions.default, {
+          style: {
+            padding: '8px 24px 24px'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            onClick: () => {
+              setUpdateConfirm(null);
+            },
+            children: t('common.cancel')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+            onClick: e => {
+              e.stopPropagation();
+              onConfirmUpdate();
+            },
+            color: "primary",
+            disabled: loading || !updateConfirm.hasChecks,
+            variant: "contained",
+            autoFocus: true,
+            children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+              size: 16
+            }), t('common.update')]
+          })]
+        })]
+      })
+    })]
+  }));
+}
+BlockletComponent.propTypes = {
+  blocklet: _propTypes.default.object.isRequired,
+  onUpdate: _propTypes.default.func,
+  getComponentUrl: _propTypes.default.func
+};
+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));