@abtnode/ux 1.8.36 → 1.8.38

package/lib/blocklet/install-from-url.js

@@ -0,0 +1,362 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = InstallFromUrl;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _semver = _interopRequireDefault(require("semver"));
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Stepper = _interopRequireDefault(require("@mui/material/Stepper"));
+var _Step = _interopRequireDefault(require("@mui/material/Step"));
+var _StepLabel = _interopRequireDefault(require("@mui/material/StepLabel"));
+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 _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
+var _Tag = _interopRequireDefault(require("@arcblock/ux/lib/Tag"));
+var _util = require("@blocklet/meta/lib/util");
+var _node = require("../contexts/node");
+var _util2 = require("../util");
+var _didAddress = _interopRequireDefault(require("../did-address"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 InstallFromUrl(_ref) {
+  let {
+    defaultUrl,
+    onCancel: _onCancel,
+    onSuccess,
+    onError,
+    mode,
+    handleText
+  } = _ref;
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [error, setError] = (0, _react.useState)('');
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const initMeta = {
+    dist: {}
+  };
+  const [url, setUrl] = (0, _react.useState)(defaultUrl);
+  const [activeStep, setActiveStep] = (0, _react.useState)(defaultUrl ? 1 : 0);
+  const [meta, setMeta] = (0, _react.useState)(initMeta);
+  const [existingMeta, setExistingMeta] = (0, _react.useState)(null);
+  const [params, setParams] = (0, _react.useState)({});
+  const isComponentMode = mode === 'component';
+  // if mode is component , we need to always show the step, that means the user can return to the previous step
+  const alwayShowSteps = isComponentMode ? true : !defaultUrl;
+  const onGetMeta = async () => {
+    setMeta(initMeta);
+    setError(null);
+    setLoading(true);
+    try {
+      const decoded = decodeURIComponent(url.trim());
+      // validate
+      try {
+        new URL(decoded); // eslint-disable-line no-new
+      } catch (_unused) {
+        throw new Error('Invalid URL');
+      }
+
+      // request
+      const {
+        meta: newer,
+        inStore,
+        registryUrl
+      } = await api.getBlockletMetaFromUrl({
+        input: {
+          url: decoded
+        }
+      });
+
+      // if mode is component, never check existing blocklet
+      if (isComponentMode) {
+        setMeta(newer);
+      } else {
+        const {
+          blocklet: existedBlocklet
+        } = await api.getBlocklet({
+          input: {
+            did: newer.did,
+            attachRuntimeInfo: false
+          }
+        });
+        if (existedBlocklet && _semver.default.gte(existedBlocklet.meta.version, newer.version)) {
+          setExistingMeta(existedBlocklet.meta);
+          setMeta(newer);
+        } else {
+          setMeta(newer);
+        }
+      }
+      setParams({
+        inStore,
+        registryUrl,
+        inputUrl: url.trim()
+      });
+    } catch (err) {
+      console.error(err);
+      const errMsg = "Blocklet Install failed: ".concat((0, _util2.formatError)(err));
+      setError(errMsg);
+      onError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const _onConfirm = async () => {
+    if (isComponentMode) {
+      onSuccess(_objectSpread({
+        meta
+      }, params));
+    } else {
+      await onInstall();
+    }
+    _onCancel();
+  };
+  const onInstall = async () => {
+    setLoading(true);
+    try {
+      await api.installBlocklet({
+        input: {
+          url: decodeURIComponent(url.trim())
+        }
+      });
+      onSuccess(_objectSpread({
+        meta
+      }, params));
+    } catch (err) {
+      const errMsg = "Blocklet Install failed: ".concat((0, _util2.formatError)(err));
+      setError(errMsg);
+    } finally {
+      setLoading(false);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    if (defaultUrl) {
+      onGetMeta();
+    }
+  }, [defaultUrl]); // eslint-disable-line
+
+  const rows = [{
+    name: t('common.name'),
+    value: (0, _util.getDisplayName)({
+      meta
+    }, true)
+  }, {
+    name: t('common.version'),
+    value: meta.version
+  }, {
+    name: t('common.did'),
+    value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
+      did: meta.did
+    })
+  }, {
+    name: t('common.author'),
+    value: (0, _util2.formatPerson)(meta.author)
+  }, {
+    name: t('blocklet.dist.downloadLink'),
+    value: meta.dist.tarball
+  }];
+  const getStep1Body = () => {
+    if (loading) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          height: 200,
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {})
+      });
+    }
+    if (meta.did) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          paddingLeft: '10%'
+        },
+        children: [rows.map(row => {
+          if (row.name === t('common.did')) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoRow.default, {
+              valueComponent: "div",
+              nameWidth: 120,
+              name: row.name,
+              nameFormatter: () => t('common.did'),
+              children: row.value
+            }, row.name);
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoRow.default, {
+            valueComponent: "div",
+            nameWidth: 120,
+            name: row.name,
+            children: row.value
+          }, row.name);
+        }), existingMeta && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+          type: "error",
+          variant: "icon",
+          style: {
+            margin: '15px 0 0 -16px'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [t('blocklet.fromUrl.existTipPrefix'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
+              content: existingMeta.version,
+              style: {
+                margin: '0 5px'
+              }
+            }), t('blocklet.fromUrl.existTipSuffix')]
+          })
+        })]
+      });
+    }
+    return null;
+  };
+  const steps = [{
+    label: t('blocklet.fromUrl.step0'),
+    body: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      component: "div",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        label: t('blocklet.fromUrl.label'),
+        autoComplete: "off",
+        variant: "outlined",
+        name: "url",
+        "data-cy": "blocklet-url-input",
+        fullWidth: true,
+        autoFocus: true,
+        style: {
+          marginBottom: 32
+        },
+        margin: "dense",
+        helperText: t('blocklet.fromUrl.description'),
+        value: url,
+        onChange: e => {
+          setError(null);
+          setUrl(e.target.value);
+        },
+        disabled: loading,
+        onKeyPress: e => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            onGetMeta();
+            setActiveStep(1);
+          }
+        }
+      })
+    }),
+    cancel: t('common.cancel'),
+    confirm: t('common.next'),
+    onCancel: _onCancel,
+    onConfirm: () => {
+      onGetMeta();
+      setActiveStep(1);
+    }
+  }, {
+    label: t('blocklet.fromUrl.step1'),
+    body: getStep1Body(),
+    cancel: alwayShowSteps ? t('common.pre') : t('common.cancel'),
+    confirm: (handleText === null || handleText === void 0 ? void 0 : handleText.confirm) || (existingMeta ? t('common.confirm') : t('blocklet.fromUrl.confirm')),
+    onCancel: () => {
+      if (alwayShowSteps) {
+        setActiveStep(s => s - 1);
+      } else {
+        _onCancel();
+      }
+    },
+    onConfirm: () => {
+      if (existingMeta) {
+        _onCancel();
+      } else {
+        _onConfirm();
+      }
+    }
+  }];
+  const step = steps[activeStep];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+    title: (handleText === null || handleText === void 0 ? void 0 : handleText.title) || t('blocklet.fromUrl.title'),
+    fullWidth: true,
+    maxWidth: "md",
+    onClose: () => step.onCancel(),
+    showCloseButton: activeStep === 0,
+    disableEscapeKeyDown: true,
+    open: true,
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [step.cancel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: e => {
+          e.stopPropagation();
+          setError(null);
+          step.onCancel();
+        },
+        color: "inherit",
+        children: step.cancel || t('common.cancel')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        onClick: e => {
+          e.stopPropagation();
+          step.onConfirm();
+        },
+        color: "primary",
+        "data-cy": "install-blocklet-next-step",
+        disabled: loading || !url || error,
+        variant: "contained",
+        autoFocus: true,
+        style: {
+          marginLeft: 8
+        },
+        children: [loading && activeStep === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          size: [16, 10]
+        }), step.confirm]
+      })]
+    }),
+    children: [alwayShowSteps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stepper.default, {
+      alternativeLabel: true,
+      activeStep: activeStep,
+      children: steps.map(_ref2 => {
+        let {
+          label
+        } = _ref2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+            children: label
+          })
+        }, label);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+      component: "div",
+      style: {
+        marginTop: 24
+      },
+      children: step.body
+    }), !!error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+      type: "error",
+      style: {
+        width: '100%',
+        marginTop: 8
+      },
+      children: error
+    })]
+  });
+}
+InstallFromUrl.propTypes = {
+  defaultUrl: _propTypes.default.string,
+  onCancel: _propTypes.default.func.isRequired,
+  onSuccess: _propTypes.default.func.isRequired,
+  onError: _propTypes.default.func,
+  mode: _propTypes.default.oneOf(['install', 'component']),
+  handleText: _propTypes.default.object
+};
+InstallFromUrl.defaultProps = {
+  onError: () => {},
+  defaultUrl: '',
+  mode: 'install',
+  handleText: {}
+};

package/lib/blocklet/overview.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BlockletOverview;
-var _react = require("react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
@@ -18,6 +17,7 @@ var _util = require("@blocklet/meta/lib/util");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 var _blocklet = require("../contexts/blocklet");
+var _node = require("../contexts/node");
 var _util2 = require("../util");
 var _didAddress = _interopRequireDefault(require("../did-address"));
 var _blockletSource = _interopRequireDefault(require("./blocklet-source"));
@@ -44,7 +44,7 @@ function DomainLink(_ref) {
   } = _ref;
   const {
     t
-  } = (0, _react.useContext)(_context.LocaleContext);
+  } = (0, _context.useLocaleContext)();
   const {
     href,
     accessibility
@@ -113,7 +113,11 @@ function BlockletOverview(_ref2) {
     rest = _objectWithoutProperties(_ref2, _excluded);
   const {
     t
-  } = (0, _react.useContext)(_context.LocaleContext);
+  } = (0, _context.useLocaleContext)();
+  const {
+    info: nodeInfo,
+    inService
+  } = (0, _node.useNodeContext)();
   const {
     loadingRuntimeInfo
   } = (0, _blocklet.useBlockletContext)();
@@ -183,21 +187,26 @@ function BlockletOverview(_ref2) {
       did: blocklet.settings.owner.did
     }) : '--'
   }].filter(Boolean);
+  if (inService) {
+    infoRows.push({
+      name: t('common.serverDid'),
+      value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
+        did: nodeInfo.did
+      })
+    }, {
+      name: t('common.serverVersion'),
+      value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
+        children: nodeInfo.version
+      })
+    });
+  }
   const engineRows = getEngineRows(blocklet.engine, t);
   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,
+      nameFormatter: () => row.name,
       children: row.value
     }, row.name);
   });

package/lib/blocklet/preferences/index.js

@@ -0,0 +1,233 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockletPreferences;
+var _react = _interopRequireWildcard(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIframe = _interopRequireDefault(require("react-iframe"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _constant = require("@abtnode/constant");
+var _material = require("@mui/material");
+var _TuneRounded = _interopRequireDefault(require("@mui/icons-material/TuneRounded"));
+var _Key = _interopRequireDefault(require("@mui/icons-material/Key"));
+var _SettingsOutlined = _interopRequireDefault(require("@mui/icons-material/SettingsOutlined"));
+var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
+var _util = require("@blocklet/meta/lib/util");
+var _avatar = _interopRequireDefault(require("../avatar"));
+var _configuration = _interopRequireDefault(require("../configuration"));
+var _index = _interopRequireDefault(require("../access/index"));
+var _node = require("../../contexts/node");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["blocklet", "onUpdate"];
+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) { 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; }
+const addComponentTabs = function addComponentTabs(tabs, blocklet) {
+  let ancestors = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  let depth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  const key = [...ancestors.map(x => x.meta.did), blocklet.meta.did].join('/');
+  tabs.push({
+    label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      pl: Math.max(1, depth - 1) * 2,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.default, {
+        size: 24,
+        blocklet: blocklet,
+        ancestors: ancestors
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        ml: "16px",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          style: {
+            color: '#222'
+          },
+          children: (0, _util.getDisplayName)(blocklet, true)
+        })
+      })]
+    }, key),
+    value: key
+  });
+  if (blocklet.children.length > 0) {
+    blocklet.children.forEach(x => {
+      addComponentTabs(tabs, x, [...ancestors, blocklet], depth + 1);
+    });
+  }
+};
+function BlockletPreferences(_ref) {
+  let {
+      blocklet,
+      onUpdate
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const {
+    info,
+    inService
+  } = (0, _node.useNodeContext)();
+  const [current, setCurrent] = (0, _react.useState)('general');
+  const [expandPref, setExpandPref] = (0, _react.useState)(true);
+  const tabs = [{
+    label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      display: "flex",
+      alignItems: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TuneRounded.default, {
+        sx: {
+          fontSize: 24
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        ml: "16px",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          style: {
+            color: '#222'
+          },
+          children: t('common.general')
+        })
+      })]
+    }, "general"),
+    value: 'general'
+  }, {
+    label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      display: "flex",
+      alignItems: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Key.default, {
+        sx: {
+          fontSize: 24
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        ml: "16px",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          style: {
+            color: '#222'
+          },
+          children: t('common.access')
+        })
+      })]
+    }, "access"),
+    value: 'access'
+  }, {
+    label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      display: "flex",
+      alignItems: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        ml: -2,
+        style: {
+          transform: 'translateY(2px)'
+        },
+        children: expandPref ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
+          fontSize: "inherit"
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChevronRight.default, {
+          fontSize: "inherit"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsOutlined.default, {
+        sx: {
+          fontSize: 24
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        ml: "16px",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          style: {
+            color: '#222'
+          },
+          children: t('common.preferences')
+        })
+      })]
+    }, "preference"),
+    value: 'preference'
+  }];
+  if (expandPref) {
+    addComponentTabs(tabs, blocklet);
+  }
+  const onTabChange = x => {
+    if (x === 'preference') {
+      setExpandPref(!expandPref);
+    } else {
+      setCurrent(x);
+    }
+  };
+  let content = null;
+  if (current === 'general') {
+    content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_configuration.default, {
+      blocklet: blocklet,
+      onUpdate: onUpdate
+    });
+  } else if (current === 'access') {
+    content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {});
+  } else {
+    // eslint-disable-next-line no-nested-ternary
+    const pathPrefix = inService ? _constant.WELLKNOWN_SERVICE_PATH_PREFIX : process.env.NODE_ENV === 'production' ? info.routing.adminPath : '';
+    const searchParams = new URLSearchParams();
+    if (!inService) {
+      searchParams.set('authKey', '__sst');
+    }
+    searchParams.set('schemaKey', (0, _urlJoin.default)(window.location.origin, pathPrefix, "/api/preferences?id=".concat(encodeURIComponent(current))));
+    content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIframe.default, {
+      url: "".concat((0, _urlJoin.default)(window.location.origin, pathPrefix, '/hosted/form-collector/'), "?").concat(searchParams.toString()),
+      width: "100%",
+      height: "100%",
+      frameBorder: 0,
+      styles: {
+        border: 0
+      }
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, _objectSpread(_objectSpread({}, rest), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+      container: true,
+      spacing: 4,
+      columns: 24,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+        item: true,
+        sm: 7,
+        md: 5,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
+          tabs: tabs,
+          current: current,
+          orientation: "vertical",
+          onChange: onTabChange,
+          sx: {
+            borderRight: 1,
+            height: '100%',
+            borderColor: 'divider'
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+        item: true,
+        sm: 17,
+        md: 19,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          style: {
+            minHeight: '66vh',
+            height: '100%',
+            position: 'relative',
+            overflow: 'hidden'
+          },
+          children: content
+        })
+      })]
+    })
+  }));
+}
+BlockletPreferences.propTypes = {
+  blocklet: _propTypes.default.object.isRequired,
+  onUpdate: _propTypes.default.func
+};
+BlockletPreferences.defaultProps = {
+  onUpdate: () => {}
+};
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiTab-root {\n    text-align: left;\n    align-items: flex-start;\n    font-weight: normal;\n  }\n  .Mui-selected {\n    font-weight: bold;\n  }\n"])));