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

package/lib/blocklet/configuration.js

@@ -0,0 +1,574 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockletEnvironmentWithPermission;
+var _react = _interopRequireWildcard(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme"));
+var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
+var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+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 _LockIcon = _interopRequireDefault(require("@arcblock/icons/lib/LockIcon"));
+var _constant = require("@abtnode/constant");
+var _constant2 = require("@blocklet/constant");
+var _util = require("@blocklet/meta/lib/util");
+var _toast = _interopRequireDefault(require("../toast"));
+var _schemaForm = _interopRequireDefault(require("../schema-form"));
+var _formTextInput = _interopRequireDefault(require("../form/form-text-input"));
+var _node = require("../contexts/node");
+var _util2 = require("../util");
+var _permission = require("../permission");
+var _addDomainAlias = _interopRequireDefault(require("./router/action/add-domain-alias"));
+var _domainStatus = _interopRequireDefault(require("./router/domain-status"));
+var _domainActions = _interopRequireDefault(require("./router/domain-actions"));
+var _walletType = _interopRequireDefault(require("./preferences/wallet-type"));
+var _appSk = _interopRequireDefault(require("./preferences/app-sk"));
+var _addCert = _interopRequireDefault(require("./add-cert"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["blocklet", "onUpdate", "hasPermission"],
+  _excluded2 = ["value"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+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 BlockletEnvironment(_ref) {
+  var _blocklet$settings;
+  let {
+      blocklet,
+      onUpdate,
+      hasPermission
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const node = (0, _node.useNodeContext)();
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const [cpuCores, setCpuCores] = (0, _react.useState)('');
+  const [loading, setLoading] = (0, _react.useState)('');
+  const whoCanAccess = (0, _util.getWhoCanAccess)(blocklet);
+  const publicToStore = blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 ? void 0 : _blocklet$settings.publicToStore;
+  const theme = (0, _useTheme.default)();
+  const [editingItem, setEditingItem] = (0, _react.useState)(null);
+  const disabled = loading || !hasPermission;
+  const {
+    inService,
+    ws: {
+      useSubscription
+    }
+  } = node;
+  const {
+    did
+  } = blocklet.meta;
+  const {
+    site
+  } = blocklet;
+  const domains = (0, _util2.sortDomains)(site === null || site === void 0 ? void 0 : site.domainAliases);
+  const clusterMode = (0, _get.default)(blocklet.meta, 'capabilities.clusterMode', false);
+  useSubscription(_constant.EVENTS.NODE_RUNTIME_INFO, res => {
+    if (clusterMode) {
+      setCpuCores((0, _get.default)(res, 'cpu.physicalCores', ''));
+    }
+  });
+  if ((0, _util2.isInstalling)(blocklet.status)) {
+    return null;
+  }
+
+  // configurable blocklet environment
+  const customType = blocklet.environments.find(x => x.key === 'BLOCKLET_WALLET_TYPE');
+  const customDelete = blocklet.environments.find(x => x.key === 'BLOCKLET_DELETABLE');
+  const deletable = !customDelete || customDelete.value === 'yes';
+  const customUrl = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_URL');
+  const customLogoSquare = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_LOGO_SQUARE');
+  const customLogoRect = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_LOGO_RECT');
+  const customLogoFavicon = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_LOGO_FAVICON');
+  const customLogoDeprecated = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_LOGO');
+  const configurableEnvs = [{
+    key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_NAME,
+    description: t('blocklet.config.name'),
+    value: blocklet.environments.find(x => x.key === 'BLOCKLET_APP_NAME').value
+  }, {
+    key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_DESCRIPTION,
+    description: t('blocklet.config.description'),
+    value: blocklet.environments.find(x => x.key === 'BLOCKLET_APP_DESCRIPTION').value
+  }, {
+    key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_URL,
+    description: t('blocklet.config.appUrl'),
+    value: customUrl ? customUrl.value : ''
+  }, {
+    key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_SQUARE,
+    description: t('blocklet.config.logoSquare'),
+    value: customLogoSquare ? customLogoSquare.value : ''
+  }, {
+    key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_RECT,
+    description: t('blocklet.config.logoRect'),
+    value: customLogoRect ? customLogoRect.value : ''
+  }, {
+    key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_FAVICON,
+    description: t('blocklet.config.logoFavicon'),
+    value: customLogoFavicon ? customLogoFavicon.value : ''
+  }, {
+    key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO,
+    description: t('blocklet.config.logo'),
+    value: customLogoDeprecated ? customLogoDeprecated.value : ''
+  }];
+  if (clusterMode) {
+    const exist = blocklet.configs.find(x => x.key === _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE);
+    const value = exist ? exist.value : cpuCores;
+    configurableEnvs.push({
+      key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE,
+      description: t('blocklet.config.clusterSize'),
+      value,
+      cpuCores
+    });
+  }
+  const defaultValue = {};
+  const schemaList = configurableEnvs.map(item => {
+    const {
+        value
+      } = item,
+      props = _objectWithoutProperties(item, _excluded2);
+    defaultValue[item.key] = value;
+    return _objectSpread({}, props);
+  });
+  const onPublicToStoreChange = async e => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      const {
+        checked
+      } = e.target;
+      const {
+        blocklet: data
+      } = await node.api.configPublicToStore({
+        input: {
+          did: blocklet.meta.did,
+          publicToStore: checked
+        }
+      });
+      onUpdate(data);
+    } catch (err) {
+      _toast.default.error(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const onSubmitConfig = async value => {
+    if (value.key === _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE) {
+      const errMessage = (0, _util2.isValidClusterSize)(value);
+      if (errMessage) {
+        _toast.default.error(errMessage);
+        return;
+      }
+    }
+    const params = [_objectSpread(_objectSpread({}, (0, _omit.default)(editingItem, ['childDid', 'componentType', 'componentProps'])), {}, {
+      value
+    })];
+    try {
+      setLoading(true);
+      const {
+        blocklet: data
+      } = await node.api.configBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          configs: params
+        }
+      });
+      onUpdate(data);
+    } catch (err) {
+      _toast.default.error(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const onDeletableChange = async e => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      const {
+        checked
+      } = e.target;
+      const {
+        blocklet: data
+      } = await node.api.configBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          configs: [{
+            key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_DELETABLE,
+            value: checked ? 'no' : 'yes'
+          }]
+        }
+      });
+      onUpdate(data);
+    } catch (err) {
+      _toast.default.error(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const onWalletTypeChange = async value => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      const {
+        blocklet: data
+      } = await node.api.configBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          configs: [{
+            key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_WALLET_TYPE,
+            value
+          }]
+        }
+      });
+      onUpdate(data);
+    } catch (err) {
+      _toast.default.error(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const onUpdateCors = async value => {
+    const oldValue = site.corsAllowedOrigins || [];
+    const newValue = value.split(',').map(x => x.trim()).filter(Boolean);
+    if ((0, _isEqual.default)(oldValue, newValue)) {
+      return false;
+    }
+    try {
+      setLoading(true);
+      const corsAllowedOrigins = newValue.length ? newValue : ['__none__'];
+      await node.api.updateRoutingSite({
+        input: {
+          id: site.id,
+          corsAllowedOrigins,
+          teamDid: blocklet.meta.did
+        }
+      });
+      setLoading(false);
+    } catch (err) {
+      _toast.default.error(err.message);
+      setLoading(false);
+      return false;
+    }
+    return true;
+  };
+  const onAppSkChange = async value => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      const {
+        blocklet: data
+      } = await node.api.configBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          configs: [{
+            key: _constant2.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SK,
+            value
+          }]
+        }
+      });
+      onUpdate(data);
+    } catch (err) {
+      _toast.default.error(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_schemaForm.default, {
+      disabled: disabled,
+      style: {
+        marginTop: -24
+      },
+      loading: loading,
+      schema: schemaList,
+      defaultValue: defaultValue,
+      onChange: (changeValue, _ref2) => {
+        let {
+          action,
+          currentItem
+        } = _ref2;
+        if (action === 'edit') {
+          setEditingItem(currentItem);
+        } else if (['cancel', 'confirm'].includes(action)) {
+          setEditingItem(null);
+        }
+        if (action === 'confirm') {
+          onSubmitConfig(changeValue[currentItem.key]);
+        }
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      className: "config-form",
+      children: [whoCanAccess === 'all' && blocklet.source === 'registry' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "config-item",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          className: "config-label",
+          children: [t('blocklet.config.access.publicToStore'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            className: "config-desc",
+            children: t('blocklet.config.access.publicInstanceTip')
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, {
+          disabled: disabled,
+          checked: publicToStore,
+          defaultChecked: true,
+          onChange: onPublicToStoreChange
+        })]
+      }), !inService && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "config-item",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          className: "config-label",
+          children: [t('blocklet.config.deletable.name'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            className: "config-desc",
+            children: deletable ? t('blocklet.config.deletable.disable') : t('blocklet.config.deletable.enable')
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, {
+          disabled: disabled,
+          checked: !deletable,
+          defaultChecked: true,
+          onChange: onDeletableChange
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: "config-form",
+      component: _Divider.default,
+      my: 3
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      className: "config-form",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "config-label",
+          children: t('common.domain')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          display: "flex",
+          alignItems: "center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_addDomainAlias.default, {
+            id: site.id,
+            title: t('router.domain.add.title'),
+            teamDid: did,
+            children: _ref3 => {
+              let {
+                open
+              } = _ref3;
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+                style: {
+                  marginLeft: 16
+                },
+                variant: "contained",
+                color: "primary",
+                "data-cy": "add-domain-alias",
+                onClick: open,
+                disabled: (0, _util2.isInProgress)(blocklet.status),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+                  style: {
+                    fontSize: '1.3em',
+                    marginRight: 4
+                  }
+                }), t('common.add')]
+              });
+            }
+          })
+        })]
+      }), domains.map((domain, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        mt: index ? 0 : 1,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_domainStatus.default, {
+            domain: domain,
+            filters: ['domain']
+          }, "".concat(domain.value, "-domain")), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            ml: 2,
+            mr: 0.5,
+            children: domain.value
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_domainStatus.default, {
+            domain: domain,
+            filters: ['http']
+          }, "".concat(domain.value, "-http")), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            style: {
+              marginLeft: 12
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_addCert.default, {
+            domain: domain.value,
+            domainStatus: domain.domainStatus,
+            did: blocklet.meta.did,
+            children: _ref4 => {
+              let {
+                open
+              } = _ref4;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+                size: "small",
+                onClick: e => open(e),
+                children: t('router.cert.genLetsEncryptCert.title')
+              });
+            }
+          })]
+        }), hasPermission && !domain.isProtected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_domainActions.default, {
+          site: site,
+          domain: domain,
+          blocklet: blocklet
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+          title: t('blocklet.router.domainLockTooltip'),
+          placement: "top",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            disabled: true,
+            size: "large",
+            style: {
+              pointerEvents: 'auto',
+              // padding replace to margin, fix the tooltip position
+              paddingTop: 0,
+              paddingBottom: 0,
+              margin: '12px 0'
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LockIcon.default, {
+              style: {
+                fill: theme.palette.text.disabled
+              }
+            })
+          })
+        })]
+      }, domain.value)), !domains.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        mt: 4,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+          children: t('common.empty')
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: "config-form",
+      component: _Divider.default,
+      my: 3
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: "config-form",
+      mt: 2,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        className: "config-label",
+        mb: 0,
+        children: t('common.security')
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      className: "config-form",
+      mt: 2,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        className: "config-label",
+        fontSize: 14,
+        mb: 0,
+        children: t('router.domainSecurity.cors.title')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        mb: 1.5,
+        className: "config-desc",
+        children: t('router.domainSecurity.cors.description', {
+          name: 'the blocklet'
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_formTextInput.default, {
+        style: {
+          marginTop: 0
+        },
+        disabled: loading || disabled,
+        loading: loading,
+        initialValue: (site.corsAllowedOrigins || []).join(', '),
+        onSubmit: onUpdateCors
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: "config-form",
+      component: _Divider.default,
+      my: 3
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mb: 2,
+      className: "config-label",
+      fontSize: 20,
+      children: t('blocklet.config.dangerZone')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      px: 2,
+      py: 1,
+      sx: {
+        border: '1px solid red',
+        borderRadius: 2
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        className: "config-form",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          className: "config-item",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            className: "config-label",
+            children: [t('blocklet.config.walletType.name'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              className: "config-desc",
+              children: t('blocklet.config.walletType.description')
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_walletType.default, {
+            value: (customType === null || customType === void 0 ? void 0 : customType.value) || 'default',
+            disabled: disabled,
+            onChange: onWalletTypeChange
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "config-form",
+        mt: 2,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          className: "config-label",
+          fontSize: 14,
+          mb: 0,
+          children: t('blocklet.config.sk')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_appSk.default, {
+          disabled: loading || disabled,
+          loading: loading,
+          initialValue: blocklet.environments.find(x => x.key === 'BLOCKLET_APP_SK').value,
+          onChange: onAppSkChange
+        })]
+      })]
+    })]
+  }));
+}
+const BlockletEnvironmentInDaemon = (0, _permission.withPermission)(BlockletEnvironment, 'mutate_blocklets');
+const BlockletEnvironmentInService = (0, _permission.withPermission)(BlockletEnvironment, '', _util2.BlockletAdminRoles);
+function BlockletEnvironmentWithPermission(props) {
+  const {
+    inService
+  } = (0, _node.useNodeContext)();
+  if (inService) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockletEnvironmentInService, _objectSpread({}, props));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockletEnvironmentInDaemon, _objectSpread({}, props));
+}
+BlockletEnvironment.propTypes = {
+  blocklet: _propTypes.default.object.isRequired,
+  onUpdate: _propTypes.default.func,
+  hasPermission: _propTypes.default.bool
+};
+BlockletEnvironment.defaultProps = {
+  onUpdate: () => {},
+  hasPermission: false
+};
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 24px;\n  .config-form {\n    flex-grow: 1;\n    overflow-y: auto;\n    ", " {\n      width: 100%;\n      flex-shrink: 0;\n      padding: 0 24px;\n      transform: translate(0, 0);\n      max-height: 60vh;\n    }\n  }\n\n  .config-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 16px 0;\n  }\n\n  .config-label {\n    font-weight: bold;\n  }\n\n  .config-desc {\n    font-weight: normal;\n    font-size: 12px;\n    color: #666;\n  }\n\n  .form-item {\n    margin-top: 0;\n  }\n"])), props => props.theme.breakpoints.down('md'));

package/lib/blocklet/disk-info.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockletDiskInfo;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _filesize = _interopRequireDefault(require("filesize"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
+var _InfoRow = _interopRequireDefault(require("@arcblock/ux/lib/InfoRow"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["blocklet"];
+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 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 BlockletDiskInfo(_ref) {
+  let {
+      blocklet
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  if (!blocklet.diskInfo) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      children: t('blocklet.diskInfo.empty')
+    });
+  }
+  const renderDiskInfo = (dir, size, handler) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+    children: [handler ?
+    /*#__PURE__*/
+    /* eslint-disable-next-line no-script-url, jsx-a11y/anchor-is-valid */
+    (0, _jsxRuntime.jsx)(_Link.default, {
+      style: {
+        cursor: 'pointer'
+      },
+      onClick: handler,
+      underline: "hover",
+      children: dir
+    }) : dir, ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+      children: size ? (0, _filesize.default)(size) : 'empty'
+    })]
+  });
+  const env = blocklet.environments.reduce((acc, x) => {
+    acc[x.key] = x.value;
+    return acc;
+  }, {});
+  const rows = [{
+    key: 'appDir',
+    name: t('blocklet.diskInfo.appDir'),
+    value: renderDiskInfo(env.BLOCKLET_APP_DIR, blocklet.diskInfo.app)
+  }, {
+    key: 'dataDir',
+    name: t('blocklet.diskInfo.dataDir'),
+    value: renderDiskInfo(env.BLOCKLET_DATA_DIR, blocklet.diskInfo.data)
+  }, {
+    key: 'logDir',
+    name: t('blocklet.diskInfo.logDir'),
+    value: renderDiskInfo(env.BLOCKLET_LOG_DIR, blocklet.diskInfo.log)
+  }, {
+    key: 'cacheDir',
+    name: t('blocklet.diskInfo.cacheDir'),
+    value: renderDiskInfo(env.BLOCKLET_CACHE_DIR, blocklet.diskInfo.cache)
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, _objectSpread(_objectSpread({
+    component: "div"
+  }, rest), {}, {
+    children: rows.map(row => /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoRow.default, {
+      valueComponent: "div",
+      nameWidth: 120,
+      name: row.name,
+      children: row.value
+    }, row.key))
+  }));
+}
+BlockletDiskInfo.propTypes = {
+  blocklet: _propTypes.default.object.isRequired
+};
+BlockletDiskInfo.defaultProps = {};
+const Div = (0, _styled.default)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));