@abtnode/ux 1.16.17-beta-d282d63e → 1.16.17-beta-1cab4b42

package/lib/blocklet/publish/resource.js

@@ -7,15 +7,37 @@ exports.default = Resource;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _difference = _interopRequireDefault(require("lodash/difference"));
 var _urlJoin = _interopRequireDefault(require("url-join"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _tree = _interopRequireDefault(require("./tree"));
+var _node = require("../../contexts/node");
+var _api = require("../../util/api");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
-/* eslint-disable no-unused-vars */
-/* eslint-disable react/no-unstable-nested-components */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const fillParent = (nodes, parentId) => {
+  nodes.forEach(node => {
+    if (parentId) {
+      node.parent = parentId;
+    }
+    (node.children || []).forEach(child => {
+      child.parent = node.id;
+      fillParent(child.children || [], child.id);
+    });
+  });
+  return nodes;
+};
+const checkDiff = (a, b) => {
+  if (a.length !== b.length) {
+    return true;
+  }
+  return !!(0, _difference.default)(a, b || []).length;
+};
 function Resource(_ref) {
   let {
     app,
@@ -27,20 +49,82 @@ function Resource(_ref) {
     t,
     locale
   } = (0, _context.useLocaleContext)();
-  const iframeRef = (0, _react.useRef)(null);
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const [resources, setResources] = (0, _react.useState)([]);
+  const [selectedResourceIds, setSelectedResourceIds] = (0, _react.useState)([]);
+  const [savedResourceIds, setSavedResourceIds] = (0, _react.useState)([]);
+  const [loading, setLoading] = (0, _react.useState)(false);
   const releaseId = release.id;
   const readonly = release.status === 'published';
   const {
-    resourceExportPage = '/'
+    resourceExportApi = '/'
   } = (component === null || component === void 0 ? void 0 : component.meta.capabilities) || {};
-  const url = new URL((0, _urlJoin.default)('http://127.0.0.1', component.mountPoint, resourceExportPage).replace(/\/+/g, '/'));
-  url.searchParams.set('projectId', projectId);
-  url.searchParams.set('releaseId', releaseId);
-  url.searchParams.set('local', locale);
-  if (readonly) {
-    url.searchParams.set('readonly', '1');
-  }
-  const src = "".concat(url.pathname).concat(url.search);
+  const hasDiff = (0, _react.useMemo)(() => checkDiff(savedResourceIds, selectedResourceIds), [savedResourceIds, selectedResourceIds]);
+  const urlObj = new URL((0, _urlJoin.default)('http://127.0.0.1', component.mountPoint, resourceExportApi || '/').replace(/\/+/g, '/'));
+  urlObj.searchParams.set('projectId', projectId);
+  urlObj.searchParams.set('releaseId', releaseId);
+  urlObj.searchParams.set('local', locale);
+  const url = "".concat(urlObj.pathname).concat(urlObj.search);
+  const saveSelected = async data => {
+    try {
+      await api.updateSelectedResources({
+        input: {
+          did: app.meta.did,
+          projectId,
+          releaseId,
+          componentDid: component.meta.did,
+          resources: data
+        }
+      });
+      setSavedResourceIds(data);
+    } catch (err) {
+      _Toast.default.error(err.message);
+    }
+  };
+  const onSave = async () => {
+    const params = selectedResourceIds;
+    try {
+      setLoading(true);
+      await _api.axios.post(url, {
+        resources: params,
+        projectId,
+        releaseId,
+        locale
+      });
+      _Toast.default.success(t('common.saveSuccess'));
+      setLoading(false);
+      saveSelected(selectedResourceIds);
+    } catch (err) {
+      setLoading(false);
+      _Toast.default.error(err.message);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    _api.axios.get(url).then(res => {
+      var _res$data;
+      const tree = fillParent(((_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.resources) || []);
+      setResources(tree);
+    }).catch(err => {
+      _Toast.default.error(err.message);
+    });
+    api.getSelectedResources({
+      input: {
+        did: app.meta.did,
+        projectId,
+        releaseId,
+        componentDid: component.meta.did
+      }
+    }).then(res => {
+      const list = (res === null || res === void 0 ? void 0 : res.resources) || [];
+      setSelectedResourceIds(list);
+      setSavedResourceIds(list);
+    }).catch(err => {
+      _Toast.default.error(err.message);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]);
   if (component.status !== 'running') {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
@@ -52,12 +136,23 @@ function Resource(_ref) {
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
-      ref: iframeRef,
-      title: component.meta.title,
-      src: src,
-      width: "100%",
-      height: "600px"
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tree.default, {
+        data: resources,
+        value: selectedResourceIds,
+        onChange: data => {
+          setSelectedResourceIds(data);
+        },
+        disabled: loading || readonly
+      }), !readonly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        className: "footer",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          variant: "contained",
+          disabled: loading || !hasDiff,
+          onClick: () => onSave(),
+          children: t('common.save')
+        })
+      })]
     })
   });
 }
@@ -75,4 +170,4 @@ Resource.defaultProps = {
     id: ''
   }
 };
-const Container = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  iframe {\n    border: none;\n  }\n"])));
+const Container = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 16px;\n  padding-bottom: 0px;\n  max-height: 600px;\n  overflow-y: auto;\n  .footer {\n    border-top: 1px solid #ddd;\n    display: flex;\n    padding: 12px 0;\n    margin-top: 12px;\n    position: sticky;\n    bottom: 0;\n    background: #fff;\n  }\n"])));

package/lib/blocklet/publish/tree.js

@@ -0,0 +1,199 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Tree;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _isUrl = _interopRequireDefault(require("is-url"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _TreeView = _interopRequireDefault(require("@mui/lab/TreeView"));
+var _TreeItem = _interopRequireDefault(require("@mui/lab/TreeItem"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
+var _OpenInNew = _interopRequireDefault(require("@mui/icons-material/OpenInNew"));
+var _react = require("@iconify/react");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject; // BFS algorithm to find node by his ID
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const bfsSearch = (graph, targetId) => {
+  const queue = [...graph];
+  while (queue.length > 0) {
+    const currNode = queue.shift();
+    if (currNode.id === targetId) {
+      return currNode;
+    }
+    if (currNode.children) {
+      queue.push(...currNode.children);
+    }
+  }
+  return []; // Target node not found
+};
+
+function ResourceIcon(_ref) {
+  let {
+    icon
+  } = _ref;
+  if (!icon) {
+    return null;
+  }
+  if ((0, _isUrl.default)(icon)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      className: "resource-icon",
+      src: icon,
+      alt: "icon"
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+    className: "resource-icon",
+    icon: icon
+  });
+}
+ResourceIcon.propTypes = {
+  icon: _propTypes.default.string
+};
+ResourceIcon.defaultProps = {
+  icon: ''
+};
+function Tree(_ref2) {
+  let {
+    disabled,
+    data,
+    onChange,
+    value
+  } = _ref2;
+  const selectedNodes = value;
+
+  // Retrieve all ids from node to his children's
+  function getAllIds(node) {
+    let idList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    idList.push(node.id);
+    if (node.children) {
+      node.children.forEach(child => getAllIds(child, idList));
+    }
+    return idList;
+  }
+  // Get IDs of all children from specific node
+  const getAllChild = id => {
+    return getAllIds(bfsSearch(data, id));
+  };
+
+  // Get all father IDs from specific node
+  const getAllFathers = function getAllFathers(id) {
+    let list = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    const node = bfsSearch(data, id);
+    if (node.parent) {
+      list.push(node.parent);
+      return getAllFathers(node.parent, list);
+    }
+    return list;
+  };
+  function isAllChildrenChecked(node, list) {
+    const allChild = getAllChild(node.id);
+    const nodeIdIndex = allChild.indexOf(node.id);
+    allChild.splice(nodeIdIndex, 1);
+    return allChild.every(nodeId => selectedNodes.concat(list).includes(nodeId));
+  }
+  const handleNodeSelect = (event, nodeId) => {
+    event.stopPropagation();
+    const allChild = getAllChild(nodeId);
+    const fathers = getAllFathers(nodeId);
+    if (selectedNodes.includes(nodeId)) {
+      // Need to de-check
+      const newValue = selectedNodes.filter(id => !allChild.concat(fathers).includes(id));
+      onChange(newValue);
+    } else {
+      // Need to check
+      const ToBeChecked = allChild;
+      for (let i = 0; i < fathers.length; ++i) {
+        if (isAllChildrenChecked(bfsSearch(data, fathers[i]), ToBeChecked)) {
+          ToBeChecked.push(fathers[i]);
+        }
+      }
+      onChange([...selectedNodes].concat(ToBeChecked));
+    }
+  };
+  const stopExpand = event => {
+    // prevent the click event from propagating to the checkbox
+    event.stopPropagation();
+  };
+  const hadChildren = data.some(node => {
+    var _node$children;
+    return ((_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.length) > 0;
+  });
+  const renderTree = node => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem.default, {
+    nodeId: node.id,
+    label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+      onClick: stopExpand,
+      control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+        size: "small",
+        checked: selectedNodes.indexOf(node.id) !== -1,
+        tabIndex: -1,
+        disableRipple: true,
+        onClick: event => handleNodeSelect(event, node.id),
+        disabled: disabled
+      }),
+      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "content",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          display: "flex",
+          alignItems: "center",
+          children: [node.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResourceIcon, {
+            icon: node.icon
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            className: "name",
+            children: node.name
+          }), node.url && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            href: node.url,
+            target: "_blank",
+            rel: "noreferrer",
+            className: "link",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OpenInNew.default, {
+              className: "link-icon"
+            })
+          })]
+        }), !!node.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          className: "description",
+          children: node.description
+        })]
+      })
+    }),
+    children: Array.isArray(node.children) ? node.children.map(renderTree) : null
+  }, node.id);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTreeView, {
+    className: (0, _classnames.default)(!hadChildren && 'no-children'),
+    multiSelect: true,
+    defaultCollapseIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {}),
+    defaultExpandIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChevronRight.default, {}),
+    selected: selectedNodes,
+    children: data.map(node => renderTree(node))
+  });
+}
+Tree.propTypes = {
+  data: _propTypes.default.array,
+  value: _propTypes.default.array,
+  onChange: _propTypes.default.func,
+  disabled: _propTypes.default.bool
+};
+Tree.defaultProps = {
+  data: [],
+  value: [],
+  onChange: () => {},
+  disabled: false
+};
+const StyledTreeView = (0, _styled.default)(_TreeView.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.no-children {\n    .MuiTreeItem-content {\n      padding: 0;\n      .MuiTreeItem-iconContainer {\n        display: none;\n      }\n      .MuiTreeItem-label {\n        padding-left: 0;\n      }\n    }\n  }\n  .MuiTreeItem-content {\n    align-items: flex-start;\n    .MuiTreeItem-iconContainer {\n      transform: translateY(10px);\n    }\n    &.Mui-selected {\n      background-color: transparent;\n    }\n  }\n  .MuiTreeItem-label {\n    cursor: default;\n  }\n  .MuiFormControlLabel-root {\n    align-items: flex-start;\n  }\n  .content {\n    padding-top: 6px;\n  }\n  .name {\n    font-size: 16px;\n    font-weight: 700;\n  }\n  .resource-icon {\n    margin-right: 2px;\n    font-size: 16px;\n  }\n  img.resource-icon {\n    width: 1rem;\n    height: 1rem;\n  }\n  .link {\n    margin-left: 8px;\n    font-size: 16px;\n    color: ", ";\n    display: flex;\n  }\n  .link-icon {\n    font-size: inherit;\n  }\n  .description {\n    font-size: 14px;\n    color: ", ";\n  }\n"])), _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.palette.primary.main;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.palette.text.secondary;
+});

package/lib/blocklet/router/util.js

@@ -7,6 +7,7 @@ exports.validateSite = exports.validateRule = exports.validatePathPrefix = expor
 var _constant = require("@abtnode/constant");
 var _isPathPrefixEqual = _interopRequireDefault(require("@abtnode/util/lib/is-path-prefix-equal"));
 var _constant2 = require("@blocklet/constant");
+var _hasStartEngine = _interopRequireDefault(require("@blocklet/meta/lib/has-start-engine"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable import/prefer-default-export */
 
@@ -86,7 +87,7 @@ const validatePathPrefix = _ref => {
   } = _ref;
   // validate children
   if (curBlocklet) {
-    let exist = (curBlocklet.children || []).find(x => (0, _isPathPrefixEqual.default)(x.mountPoint, params.pathPrefix));
+    let exist = (curBlocklet.children || []).find(x => (0, _hasStartEngine.default)(x.meta) && (0, _isPathPrefixEqual.default)(x.mountPoint, params.pathPrefix));
     if (curBlocklet.meta.group !== 'gateway' && params.pathPrefix === '/') {
       exist = '/';
     }

package/lib/locales/en.js

@@ -634,6 +634,7 @@ module.exports = {
       saveDraft: 'Save Draft',
       releaseNote: 'Release Note',
       errorTip: {
+        noDid: 'Blocklet DID is required',
         noTitle: 'Blocklet Title is required',
         noVersion: 'Blocklet Version is required',
         noDescription: 'Blocklet Description is required',
@@ -1315,7 +1316,8 @@ module.exports = {
       launchFailed: 'Failed to launch the app, please try again',
       installedButStopped: 'The app is installed successfully, but cannot be started. You can start it manually after resolving blocking issues',
       installedButError: 'The app is successfully installed, but failed to start',
-      restoreFailed: 'Failed to restore app, please try again'
+      restoreFailed: 'Failed to restore app, please try again',
+      resourceBlocklet: 'Resource Blocklet cannot be installed as an application, you can mount this blocklet into existing applications.'
     },
     steps: {
       introduction: 'Introduction',

package/lib/locales/zh.js

@@ -641,6 +641,7 @@ module.exports = {
       saveDraft: '保存草稿',
       releaseNote: '发布说明',
       errorTip: {
+        noDid: '请填写 Blocklet DID',
         noTitle: '请填写 Blocklet 名称',
         noVersion: '请填写 Blocklet 版本号',
         noDescription: '请填写 Blocklet 描述',
@@ -1320,7 +1321,8 @@ module.exports = {
       launchFailed: '启动应用失败，请重试',
       installedButStopped: '应用安装成功，但是无法启动，解决启动问题之后后可手动启动',
       installedButError: '应用已经安装，但是运行出错了',
-      restoreFailed: '还原应用失败,请重试'
+      restoreFailed: '还原应用失败,请重试',
+      resourceBlocklet: '资源 Blocklet 无法作为应用被安装，你可以将该 Blocklet 挂载到现有的应用中。'
     },
     steps: {
       introduction: '简介',

package/lib/team/members/toggle-user-approval.js

@@ -8,6 +8,7 @@ var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _passport = require("@abtnode/util/lib/passport");
 var _confirm = _interopRequireDefault(require("../../confirm"));
 var _node = require("../../contexts/node");
 var _team = require("../../contexts/team");
@@ -88,7 +89,9 @@ function ToggleUserApproval(_ref) {
     color: user.approved ? 'error' : 'primary'
   };
   let can;
-  if (!inService) {
+  if ((0, _passport.hasActiveOwnerPassport)(user)) {
+    can = false;
+  } else if (!inService) {
     can = nodeInfo.nodeOwner && !isNodeOwner(nodeInfo, user.did) && !isSelf(session.user, user.did);
   } else {
     can = !isSelf(session.user, user.did);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abtnode/ux",
-  "version": "1.16.17-beta-d282d63e",
+  "version": "1.16.17-beta-1cab4b42",
   "description": "UX components shared across abtnode packages",
   "publishConfig": {
     "access": "public"
@@ -27,24 +27,24 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@abtnode/auth": "1.16.17-beta-d282d63e",
-    "@abtnode/constant": "1.16.17-beta-d282d63e",
-    "@abtnode/util": "1.16.17-beta-d282d63e",
+    "@abtnode/auth": "1.16.17-beta-1cab4b42",
+    "@abtnode/constant": "1.16.17-beta-1cab4b42",
+    "@abtnode/util": "1.16.17-beta-1cab4b42",
     "@ahooksjs/use-url-state": "^3.5.1",
-    "@arcblock/did": "^1.18.91",
-    "@arcblock/did-connect": "^2.7.25",
+    "@arcblock/did": "^1.18.92",
+    "@arcblock/did-connect": "^2.7.27",
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.7.25",
-    "@arcblock/nft-display": "2.7.25",
-    "@arcblock/react-hooks": "^2.7.25",
-    "@arcblock/terminal": "^2.7.25",
-    "@arcblock/ux": "^2.7.25",
-    "@blocklet/constant": "1.16.17-beta-d282d63e",
-    "@blocklet/launcher-layout": "2.2.19",
+    "@arcblock/icons": "^2.7.27",
+    "@arcblock/nft-display": "2.7.27",
+    "@arcblock/react-hooks": "^2.7.27",
+    "@arcblock/terminal": "^2.7.27",
+    "@arcblock/ux": "^2.7.27",
+    "@blocklet/constant": "1.16.17-beta-1cab4b42",
+    "@blocklet/launcher-layout": "2.2.21",
     "@blocklet/list": "^0.12.45",
-    "@blocklet/meta": "1.16.17-beta-d282d63e",
-    "@blocklet/ui-react": "^2.7.25",
-    "@blocklet/uploader": "^0.0.24",
+    "@blocklet/meta": "1.16.17-beta-1cab4b42",
+    "@blocklet/ui-react": "^2.7.27",
+    "@blocklet/uploader": "^0.0.26",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@iconify/react": "^4.0.0",
@@ -54,7 +54,7 @@
     "@mui/material": "^5.14.10",
     "@mui/styles": "^5.14.10",
     "@mui/x-date-pickers": "^6.14.0",
-    "@ocap/client": "1.18.91",
+    "@ocap/client": "1.18.92",
     "@uiw/react-markdown-preview": "4.0.6",
     "ahooks": "^3.7.1",
     "axios": "^0.27.2",
@@ -100,7 +100,7 @@
     "babel-plugin-inline-react-svg": "^1.1.2",
     "glob": "^10.3.3"
   },
-  "gitHead": "b675be55d76903e8b92d98cfca7d960fcfedd98f",
+  "gitHead": "114d4fedc6b4a8034a3d2ea9e166544fb6c2588e",
   "exports": {
     ".": {
       "import": "./es/index.js",