@abtnode/ux 1.8.26 → 1.8.28

package/lib/blocklet/component/index.js

@@ -0,0 +1,742 @@
+"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 _semver = _interopRequireDefault(require("semver"));
+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 _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+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 _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 _runtimeInfo = _interopRequireDefault(require("../runtime-info"));
+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 _avatar = _interopRequireDefault(require("../avatar"));
+var _mode = _interopRequireDefault(require("../mode"));
+var _configuration = _interopRequireDefault(require("./configuration"));
+var _delete = _interopRequireDefault(require("./delete"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["blocklet", "onUpdate", "getComponentUrl", "AddComponent"];
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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 {};
+};
+function ComponentItem(_ref) {
+  var _blocklet$children;
+  let {
+    blocklet,
+    ancestors,
+    depth,
+    onRemove,
+    getComponentUrl
+  } = _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.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.runtimeInfo'),
+    value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_runtimeInfo.default, {
+      blocklet: componentInfo,
+      noRunningMessage: t('--')
+    })
+  }, {
+    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);
+    })
+  }].filter(Boolean) : [];
+  let deleteDisabledTip = '';
+  if (depth !== 1 || !blocklet.dynamic) {
+    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');
+  }
+  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)(_avatar.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), /*#__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: 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",
+          title: href,
+          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)(_Box.default, {
+    ml: Math.max((depth - 1) * 2, 0),
+    sx: {
+      borderBottom: 1,
+      borderColor: 'rgba(0,0,0,0.12)'
+    }
+  }, "group-collapse-box"), (_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
+    }, "".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
+};
+ComponentItem.defaultProps = {
+  ancestors: [],
+  depth: 0,
+  onRemove: () => {},
+  getComponentUrl: () => window.location.origin
+};
+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) {
+  var _blocklet$meta;
+  let {
+      blocklet,
+      onUpdate,
+      getComponentUrl,
+      AddComponent
+    } = _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 [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));
+  (0, _react.useEffect)(() => {
+    if (blocklet && !(0, _util2.isInProgress)(blocklet.status)) {
+      api.getLatestBlockletVersion({
+        input: {
+          did: blocklet.meta.did,
+          version: blocklet.meta.version
+        }
+      }).then(res => {
+        const {
+          version
+        } = res.data || {};
+        if (version && _semver.default.gt(version, blocklet.meta.version)) {
+          setShowUpdateDot(true);
+        }
+      }).catch(err => {
+        console.error(err.message);
+      });
+    }
+  }, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did]); // eslint-disable-line
+
+  const checkForUpdates = async () => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      // check app version
+      const {
+        version,
+        registryUrl
+      } = (await api.getLatestBlockletVersion({
+        input: {
+          did: blocklet.meta.did,
+          version: blocklet.meta.version
+        }
+      })).data || {};
+      if (version && _semver.default.gt(version, blocklet.meta.version)) {
+        setUpdateConfirm({
+          type: 'app',
+          params: {
+            version,
+            registryUrl
+          },
+          list: [{
+            name: (0, _util.getDisplayName)(blocklet),
+            version: blocklet.meta.version,
+            newVersion: version
+          }]
+        });
+        setLoading(false);
+        return;
+      }
+
+      // 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(' / ');
+          list.push({
+            name,
+            version: b.meta.version,
+            newVersion: updateItem.meta.version
+          });
+        }
+      });
+      setUpdateConfirm({
+        type: 'child',
+        params: {
+          updateId
+        },
+        list
+      });
+    } catch (err) {
+      setLoading(false);
+      _toast.default.error((0, _util2.formatError)(err));
+    }
+  };
+  const onConfirmUpdate = async () => {
+    if (loading) {
+      return;
+    }
+    let fn;
+    let input;
+    if (updateConfirm.type === 'app') {
+      fn = api.upgradeBlocklet.bind(api);
+      input = {
+        did: blocklet.meta.did,
+        version: updateConfirm.params.version,
+        registryUrl: updateConfirm.params.registryUrl || ''
+      };
+    } else {
+      fn = api.upgradeComponents.bind(api);
+      input = {
+        updateId: updateConfirm.params.updateId,
+        rootDid: blocklet.meta.did
+      };
+    }
+    try {
+      setLoading(true);
+      await fn({
+        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);
+    }
+  };
+  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'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+          permission: inService ? '' : 'mutate_blocklet',
+          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)(_Spinner.default, {
+                  size: [16, 10]
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Update.default, {
+                  style: {
+                    fontSize: '1em'
+                  }
+                })
+              }), t('blocklet.component.checkUpdateTitle')]
+            })
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+        permission: "mutate_blocklet",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AddComponent, {
+          blocklet: blocklet,
+          children: _ref6 => {
+            let {
+              open
+            } = _ref6;
+            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: '-16px',
+        md: '-28px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentItem, {
+        blocklet: 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')
+      })
+    }), !!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,
+          ml: 4,
+          children: updateConfirm.list.map(x => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            mt: 3,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              item: true,
+              xs: 5,
+              children: x.name
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+              fontSize: "h6.fontSize",
+              container: true,
+              spacing: 3,
+              alignItems: "center",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+                item: true,
+                xs: 2,
+                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: 2,
+                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,
+            variant: "contained",
+            autoFocus: true,
+            children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+              size: [16, 10]
+            }), t('common.update')]
+          })]
+        })]
+      })
+    })]
+  }));
+}
+BlockletComponent.propTypes = {
+  blocklet: _propTypes.default.object.isRequired,
+  onUpdate: _propTypes.default.func,
+  getComponentUrl: _propTypes.default.func,
+  AddComponent: _propTypes.default.element
+};
+BlockletComponent.defaultProps = {
+  onUpdate: () => {},
+  getComponentUrl: () => window.location.origin,
+  AddComponent: () => {}
+};
+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));