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

package/es/blocklet/publish/resource.js

@@ -1,12 +1,35 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable react/no-unstable-nested-components */
-import { useState, useRef, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import Box from '@mui/material/Box';
+import difference from 'lodash/difference';
 import joinUrl from 'url-join';
+import Box from '@mui/material/Box';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import Toast from '@arcblock/ux/lib/Toast';
+import Tree from './tree';
+import { useNodeContext } from '../../contexts/node';
+import { axios } from '../../util/api';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+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 !!difference(a, b || []).length;
+};
 export default function Resource({
   app,
   component,
@@ -17,20 +40,81 @@ export default function Resource({
     t,
     locale
   } = useLocaleContext();
-  const iframeRef = useRef(null);
+  const {
+    api
+  } = useNodeContext();
+  const [resources, setResources] = useState([]);
+  const [selectedResourceIds, setSelectedResourceIds] = useState([]);
+  const [savedResourceIds, setSavedResourceIds] = useState([]);
+  const [loading, setLoading] = useState(false);
   const releaseId = release.id;
   const readonly = release.status === 'published';
   const {
-    resourceExportPage = '/'
+    resourceExportApi = '/'
   } = component?.meta.capabilities || {};
-  const url = new URL(joinUrl('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 = `${url.pathname}${url.search}`;
+  const hasDiff = useMemo(() => checkDiff(savedResourceIds, selectedResourceIds), [savedResourceIds, selectedResourceIds]);
+  const urlObj = new URL(joinUrl('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 = `${urlObj.pathname}${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.error(err.message);
+    }
+  };
+  const onSave = async () => {
+    const params = selectedResourceIds;
+    try {
+      setLoading(true);
+      await axios.post(url, {
+        resources: params,
+        projectId,
+        releaseId,
+        locale
+      });
+      Toast.success(t('common.saveSuccess'));
+      setLoading(false);
+      saveSelected(selectedResourceIds);
+    } catch (err) {
+      setLoading(false);
+      Toast.error(err.message);
+    }
+  };
+  useEffect(() => {
+    axios.get(url).then(res => {
+      const tree = fillParent(res.data?.resources || []);
+      setResources(tree);
+    }).catch(err => {
+      Toast.error(err.message);
+    });
+    api.getSelectedResources({
+      input: {
+        did: app.meta.did,
+        projectId,
+        releaseId,
+        componentDid: component.meta.did
+      }
+    }).then(res => {
+      const list = res?.resources || [];
+      setSelectedResourceIds(list);
+      setSavedResourceIds(list);
+    }).catch(err => {
+      Toast.error(err.message);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]);
   if (component.status !== 'running') {
     return /*#__PURE__*/_jsx(Container, {
       children: /*#__PURE__*/_jsx(Box, {
@@ -42,12 +126,23 @@ export default function Resource({
     });
   }
   return /*#__PURE__*/_jsx(Container, {
-    children: /*#__PURE__*/_jsx("iframe", {
-      ref: iframeRef,
-      title: component.meta.title,
-      src: src,
-      width: "100%",
-      height: "600px"
+    children: /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Tree, {
+        data: resources,
+        value: selectedResourceIds,
+        onChange: data => {
+          setSelectedResourceIds(data);
+        },
+        disabled: loading || readonly
+      }), !readonly && /*#__PURE__*/_jsx(Box, {
+        className: "footer",
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "contained",
+          disabled: loading || !hasDiff,
+          onClick: () => onSave(),
+          children: t('common.save')
+        })
+      })]
     })
   });
 }
@@ -66,7 +161,19 @@ Resource.defaultProps = {
   }
 };
 const Container = styled(Box)`
-  iframe {
-    border: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 16px;
+  padding-bottom: 0px;
+  max-height: 600px;
+  overflow-y: auto;
+  .footer {
+    border-top: 1px solid #ddd;
+    display: flex;
+    padding: 12px 0;
+    margin-top: 12px;
+    position: sticky;
+    bottom: 0;
+    background: #fff;
   }
 `;

package/es/blocklet/publish/tree.js

@@ -0,0 +1,235 @@
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import classnames from 'classnames';
+import isUrl from 'is-url';
+import Box from '@mui/material/Box';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import TreeView from '@mui/lab/TreeView';
+import TreeItem from '@mui/lab/TreeItem';
+import Checkbox from '@mui/material/Checkbox';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { Icon } from '@iconify/react';
+
+// BFS algorithm to find node by his ID
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+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({
+  icon
+}) {
+  if (!icon) {
+    return null;
+  }
+  if (isUrl(icon)) {
+    return /*#__PURE__*/_jsx("img", {
+      className: "resource-icon",
+      src: icon,
+      alt: "icon"
+    });
+  }
+  return /*#__PURE__*/_jsx(Icon, {
+    className: "resource-icon",
+    icon: icon
+  });
+}
+ResourceIcon.propTypes = {
+  icon: PropTypes.string
+};
+ResourceIcon.defaultProps = {
+  icon: ''
+};
+export default function Tree({
+  disabled,
+  data,
+  onChange,
+  value
+}) {
+  const selectedNodes = value;
+
+  // Retrieve all ids from node to his children's
+  function getAllIds(node, idList = []) {
+    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 = (id, list = []) => {
+    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 => node.children?.length > 0);
+  const renderTree = node => /*#__PURE__*/_jsx(TreeItem, {
+    nodeId: node.id,
+    label: /*#__PURE__*/_jsx(FormControlLabel, {
+      onClick: stopExpand,
+      control: /*#__PURE__*/_jsx(Checkbox, {
+        size: "small",
+        checked: selectedNodes.indexOf(node.id) !== -1,
+        tabIndex: -1,
+        disableRipple: true,
+        onClick: event => handleNodeSelect(event, node.id),
+        disabled: disabled
+      }),
+      label: /*#__PURE__*/_jsxs(Box, {
+        className: "content",
+        children: [/*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          children: [node.icon && /*#__PURE__*/_jsx(ResourceIcon, {
+            icon: node.icon
+          }), /*#__PURE__*/_jsx(Box, {
+            className: "name",
+            children: node.name
+          }), node.url && /*#__PURE__*/_jsx("a", {
+            href: node.url,
+            target: "_blank",
+            rel: "noreferrer",
+            className: "link",
+            children: /*#__PURE__*/_jsx(OpenInNewIcon, {
+              className: "link-icon"
+            })
+          })]
+        }), !!node.description && /*#__PURE__*/_jsx(Box, {
+          className: "description",
+          children: node.description
+        })]
+      })
+    }),
+    children: Array.isArray(node.children) ? node.children.map(renderTree) : null
+  }, node.id);
+  return /*#__PURE__*/_jsx(StyledTreeView, {
+    className: classnames(!hadChildren && 'no-children'),
+    multiSelect: true,
+    defaultCollapseIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
+    defaultExpandIcon: /*#__PURE__*/_jsx(ChevronRightIcon, {}),
+    selected: selectedNodes,
+    children: data.map(node => renderTree(node))
+  });
+}
+Tree.propTypes = {
+  data: PropTypes.array,
+  value: PropTypes.array,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool
+};
+Tree.defaultProps = {
+  data: [],
+  value: [],
+  onChange: () => {},
+  disabled: false
+};
+const StyledTreeView = styled(TreeView)`
+  &.no-children {
+    .MuiTreeItem-content {
+      padding: 0;
+      .MuiTreeItem-iconContainer {
+        display: none;
+      }
+      .MuiTreeItem-label {
+        padding-left: 0;
+      }
+    }
+  }
+  .MuiTreeItem-content {
+    align-items: flex-start;
+    .MuiTreeItem-iconContainer {
+      transform: translateY(10px);
+    }
+    &.Mui-selected {
+      background-color: transparent;
+    }
+  }
+  .MuiTreeItem-label {
+    cursor: default;
+  }
+  .MuiFormControlLabel-root {
+    align-items: flex-start;
+  }
+  .content {
+    padding-top: 6px;
+  }
+  .name {
+    font-size: 16px;
+    font-weight: 700;
+  }
+  .resource-icon {
+    margin-right: 2px;
+    font-size: 16px;
+  }
+  img.resource-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .link {
+    margin-left: 8px;
+    font-size: 16px;
+    color: ${({
+  theme
+}) => theme.palette.primary.main};
+    display: flex;
+  }
+  .link-icon {
+    font-size: inherit;
+  }
+  .description {
+    font-size: 14px;
+    color: ${({
+  theme
+}) => theme.palette.text.secondary};
+  }
+`;

package/es/blocklet/router/util.js

@@ -2,6 +2,7 @@
 import { ROUTING_RULE_TYPES, DEFAULT_IP_DOMAIN_SUFFIX, DOMAIN_FOR_IP_SITE_REGEXP, DOMAIN_FOR_DEFAULT_SITE, DOMAIN_FOR_IP_SITE } from '@abtnode/constant';
 import isPathPrefixEqual from '@abtnode/util/lib/is-path-prefix-equal';
 import { BLOCKLET_DYNAMIC_PATH_PREFIX } from '@blocklet/constant';
+import hasStartEngine from '@blocklet/meta/lib/has-start-engine';
 const validateRuleByServiceType = (params, localeContext) => {
   if (params.type === ROUTING_RULE_TYPES.REDIRECT) {
     if (!params.url) {
@@ -74,7 +75,7 @@ export const validatePathPrefix = ({
 }) => {
   // validate children
   if (curBlocklet) {
-    let exist = (curBlocklet.children || []).find(x => isPathPrefixEqual(x.mountPoint, params.pathPrefix));
+    let exist = (curBlocklet.children || []).find(x => hasStartEngine(x.meta) && isPathPrefixEqual(x.mountPoint, params.pathPrefix));
     if (curBlocklet.meta.group !== 'gateway' && params.pathPrefix === '/') {
       exist = '/';
     }

package/es/locales/en.js

@@ -632,6 +632,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',
@@ -1313,7 +1314,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/es/locales/zh.js

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

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

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
+import { hasActiveOwnerPassport } from '@abtnode/util/lib/passport';
 import Confirm from '../../confirm';
 import { useNodeContext } from '../../contexts/node';
 import { useTeamContext } from '../../contexts/team';
@@ -82,7 +83,9 @@ export default function ToggleUserApproval({
     color: user.approved ? 'error' : 'primary'
   };
   let can;
-  if (!inService) {
+  if (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/lib/blocklet/publish/create-project.js

@@ -10,13 +10,13 @@ var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _Breadcrumbs = _interopRequireDefault(require("@mui/material/Breadcrumbs"));
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
-var _didAddress = _interopRequireDefault(require("../../did-address"));
 var _node = require("../../contexts/node");
 var _blocklet = require("../../contexts/blocklet");
 var _session = require("../../contexts/session");
@@ -80,6 +80,14 @@ function CreateProject(_ref) {
     setOpenConnect(false);
   };
   const onCreate = () => {
+    if (!blockletDid) {
+      _Toast.default.error(t('blocklet.publish.errorTip.noDid'));
+      return;
+    }
+    if (!blockletTitle) {
+      _Toast.default.error(t('blocklet.publish.errorTip.noTitle'));
+      return;
+    }
     setLoading(true);
     api.createProject({
       input: {
@@ -113,26 +121,29 @@ function CreateProject(_ref) {
       style: {
         maxWidth: 500
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        required: true,
         sx: {
-          mb: 3
+          mb: 4
         },
-        display: "flex",
-        alignItems: "center",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
-          variant: "h6",
-          sx: {
-            mr: 3
-          },
-          children: ["Blocklet DID:", ' ']
-        }), blockletDid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
-          size: 14,
-          responsive: true,
-          did: blockletDid
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          onClick: () => setOpenConnect(true),
-          children: t('blocklet.publish.createBlockletDid')
-        })]
+        label: "Blocklet DID",
+        fullWidth: true,
+        readonly: true,
+        autoComplete: "off",
+        variant: "outlined",
+        onClick: () => !blockletDid && setOpenConnect(true),
+        InputProps: {
+          'data-cy': 'export-blocklet-did',
+          endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputAdornment.default, {
+            position: "end",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              onClick: () => setOpenConnect(true),
+              children: t(blockletDid ? 'common.update' : 'common.create')
+            })
+          })
+        },
+        helperText: "",
+        value: blockletDid || ''
       }), openConnect && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
         open: true,
         popup: true,
@@ -155,10 +166,11 @@ function CreateProject(_ref) {
           success: t('blocklet.publish.connect.success')
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        required: true,
         label: "Blocklet ".concat(t('common.title')),
         autoComplete: "off",
         variant: "outlined",
-        inputProps: {
+        InputProps: {
           'data-cy': 'export-blocklet-title'
         },
         fullWidth: true,
@@ -186,7 +198,7 @@ function CreateProject(_ref) {
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
       variant: "contained",
-      disabled: loading || !blockletDid || !blockletTitle,
+      disabled: loading,
       onClick: onCreate,
       children: t('common.create')
     })]