@abtnode/ux 1.8.39 → 1.8.41

package/lib/blocklet/preferences/index.js

@@ -86,6 +86,7 @@ function BlockletPreferences(_ref) {
     label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
       display: "flex",
       alignItems: "center",
+      "data-cy": "configuration-tab-general",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TuneRounded.default, {
         sx: {
           fontSize: 24
@@ -105,6 +106,7 @@ function BlockletPreferences(_ref) {
     label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
       display: "flex",
       alignItems: "center",
+      "data-cy": "configuration-tab-access",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Key.default, {
         sx: {
           fontSize: 24
@@ -124,6 +126,7 @@ function BlockletPreferences(_ref) {
     label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
       display: "flex",
       alignItems: "center",
+      "data-cy": "configuration-tab-preference",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
         ml: -2,
         style: {

package/lib/hooks/blocklet.js

@@ -137,6 +137,17 @@ function useBlocklet(_ref) {
       });
     }
   };
+  const configNavigations = async value => {
+    const {
+      blocklet: data
+    } = await client.configNavigations({
+      input: {
+        did,
+        navigations: value
+      }
+    });
+    setBlocklet(data);
+  };
   (0, _react.useEffect)(() => {
     if (domainListStr && !disableSubscription) {
       refreshDomainStatus();
@@ -181,7 +192,8 @@ function useBlocklet(_ref) {
     actions: {
       refreshBlocklet,
       refreshDomainStatus,
-      setBlocklet
+      setBlocklet,
+      configNavigations
     }
   };
 }

package/lib/hooks/use-avatar.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useAvatar;
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _constant = require("@abtnode/constant");
+var _node = require("../contexts/node");
+var _util = require("../util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function useAvatar(_ref) {
+  var _blocklet$meta;
+  let {
+    blocklet,
+    ancestors = []
+  } = _ref;
+  const node = (0, _node.useNodeContext)();
+  const {
+    inService
+  } = node;
+  const search = "?version=".concat(blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.version);
+  let logoUrl = inService ? (0, _urlJoin.default)(_util.APP_PREFIX, _constant.WELLKNOWN_SERVICE_PATH_PREFIX, '/blocklet/logo', search) : (0, _urlJoin.default)(node.prefix, 'blocklet.png');
+  if (blocklet.source === 'registry' && blocklet.deployedFrom && blocklet.meta.logo) {
+    logoUrl = (0, _urlJoin.default)(blocklet.deployedFrom, (0, _util.formatRegistryLogoPath)(blocklet.meta.bundleDid, blocklet.meta.logo), search);
+  } else {
+    const prefix = window.env.apiPrefix || '/';
+    const components = ancestors.concat(blocklet);
+    const list = inService ? components.slice(1) : components;
+    logoUrl = (0, _urlJoin.default)(prefix, "/blocklet/logo".concat(list.map(x => "/".concat(x.meta.did)).join('')), search);
+  }
+  return {
+    logoUrl,
+    inService
+  };
+}

package/lib/hooks/use-navigation.js

@@ -0,0 +1,364 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useNavigation;
+var _ahooks = require("ahooks");
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _omitBy = _interopRequireDefault(require("lodash/omitBy"));
+var _react = require("react");
+var _nanoid = require("nanoid");
+var _material = require("@mui/material");
+var _parseNavigationFromBlocklet = require("@blocklet/meta/lib/parse-navigation-from-blocklet");
+var _constant = require("@abtnode/constant");
+var _blocklet = require("../contexts/blocklet");
+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; }
+const BASE_LINK = '/';
+const DEFAULT_SECTION = 'header';
+// 默认注入的数据
+// 需要指定一些内置的 id
+const injectNavigationData = {
+  sessionManager: [{
+    id: '/sessionManager',
+    title: {
+      en: 'Manage',
+      zh: '管理'
+    },
+    section: ['sessionManager'],
+    icon: 'ion:settings-outline',
+    link: "".concat(_constant.WELLKNOWN_SERVICE_PATH_PREFIX, "/admin"),
+    role: ['owner', 'admin'],
+    from: 'tmpl'
+  }],
+  dashboard: [{
+    id: '/access',
+    title: {
+      en: 'Access',
+      zh: '访问控制'
+    },
+    role: ['owner', 'admin', 'member'],
+    section: ['dashboard'],
+    link: '',
+    from: 'tmpl',
+    items: [{
+      id: 'member',
+      title: {
+        en: 'Members',
+        zh: '成员'
+      },
+      icon: 'ant-design:user-outlined',
+      link: "".concat(_constant.WELLKNOWN_SERVICE_PATH_PREFIX, "/admin/members"),
+      from: 'tmpl'
+    }, {
+      id: 'passport',
+      title: {
+        en: 'Passport',
+        zh: '通行证'
+      },
+      icon: 'icon-park-outline:passport',
+      link: "".concat(_constant.WELLKNOWN_SERVICE_PATH_PREFIX, "/admin/passports"),
+      from: 'tmpl'
+    }]
+  }, {
+    id: '/dashboard',
+    title: 'Blocklet',
+    role: ['owner', 'admin'],
+    section: ['dashboard'],
+    link: '',
+    from: 'tmpl',
+    items: [{
+      id: 'dashboard',
+      title: {
+        en: 'Dashboard',
+        zh: '仪表盘'
+      },
+      icon: 'ant-design:dashboard-outlined',
+      link: "".concat(_constant.WELLKNOWN_SERVICE_PATH_PREFIX, "/admin"),
+      from: 'tmpl'
+    }]
+  }]
+};
+function isSameNavigation(a, b) {
+  if (a.section && b.section) {
+    return a.section === b.section && a.id === b.id;
+  }
+  return a.id === b.id;
+}
+function hackBuiltinLink(treeList) {
+  const copyData = (0, _cloneDeep.default)(treeList);
+  (0, _parseNavigationFromBlocklet.deepWalk)(copyData, item => {
+    if (item.from === 'tmpl') {
+      item.link = '/';
+    }
+  }, {
+    key: 'items'
+  });
+  return copyData;
+}
+function useNavigation() {
+  const {
+    blocklet,
+    actions
+  } = (0, _blocklet.useBlockletContext)();
+  const {
+    navigationList,
+    components,
+    builtinList
+  } = (0, _parseNavigationFromBlocklet.parseNavigation)(blocklet, {
+    beforeProcess(rawList) {
+      const copyList = (0, _cloneDeep.default)(rawList);
+      // 注入默认的 dashboard 菜单
+      injectNavigationData.dashboard.forEach(item => {
+        if (!copyList.some(x => x.id === item.id)) {
+          copyList.push(item);
+        }
+      });
+      // 注入默认的 sessionManager 菜单
+      if (!copyList.some(x => x.id && (x.section || []).includes('sessionManager'))) {
+        copyList.push(...injectNavigationData.sessionManager);
+      }
+      return copyList;
+    }
+  });
+  const state = (0, _ahooks.useReactive)({
+    rawNavigation: (0, _cloneDeep.default)(navigationList),
+    activeSection: DEFAULT_SECTION,
+    components
+  });
+  const navigation = (0, _react.useMemo)(() => {
+    return (0, _parseNavigationFromBlocklet.nestNavigationList)(state.rawNavigation);
+  }, [state.rawNavigation]);
+  const treeNavigation = (0, _react.useMemo)(() => {
+    const rawData = (0, _parseNavigationFromBlocklet.filterNavigation)(state.rawNavigation, components);
+    const navigationWithLink = hackBuiltinLink((0, _parseNavigationFromBlocklet.joinLink)(rawData, components));
+    return navigationWithLink;
+  }, [components, state.rawNavigation]);
+  function getNavigationFullLink(navigationItem) {
+    if (!navigationItem.id) return '';
+    const fullList = (0, _parseNavigationFromBlocklet.flatternNavigation)((0, _parseNavigationFromBlocklet.joinLink)(navigation, components));
+    const findItem = fullList.find(item => item.id === navigationItem.id);
+    // eslint-disable-next-line react/prop-types
+    function Uninstalled(_ref) {
+      let {
+        name
+      } = _ref;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+        label: "Uninstalled: ".concat(name),
+        color: "error",
+        size: "small",
+        variant: "outlined",
+        sx: {
+          fontSize: 10,
+          height: 20
+        }
+      });
+    }
+    if (findItem !== null && findItem !== void 0 && findItem.component) {
+      if (!components.some(x => x.name === findItem.component)) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Uninstalled, {
+          name: findItem.component
+        });
+      }
+    } else if (findItem.parent) {
+      const parent = fullList.find(x => x.id === findItem.parent);
+      if (parent !== null && parent !== void 0 && parent.component) {
+        if (!components.some(x => x.name === parent.component)) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Uninstalled, {
+            name: parent.component
+          });
+        }
+      }
+    }
+    return findItem === null || findItem === void 0 ? void 0 : findItem.link;
+  }
+  function updateActiveSection(activeSection) {
+    state.activeSection = activeSection;
+  }
+  function updateNavigationTree(tree) {
+    const list = [];
+    (0, _parseNavigationFromBlocklet.deepWalk)(tree, (treeItem, parent) => {
+      const tmpData = _objectSpread(_objectSpread({}, (0, _omit.default)(treeItem, ['children', 'expand'])), {}, {
+        parent: parent === null || parent === void 0 ? void 0 : parent.id
+      });
+      list.push(tmpData);
+    });
+    const unchangedNavigation = state.rawNavigation.filter(item => {
+      if (!state.activeSection) {
+        return false;
+      }
+      const findItem = list.find(v => isSameNavigation(v, item));
+      if (findItem) {
+        return !(0, _parseNavigationFromBlocklet.isMatchSection)(findItem.section, state.activeSection);
+      }
+      return true;
+    });
+    state.rawNavigation = [...unchangedNavigation, ...list];
+  }
+  /**
+   * 更新导航的一个节点
+   * @param {object} itemData 更新的数据
+   */
+  function updateNavigationItem(itemData) {
+    _saveNavigationChange([itemData]);
+  }
+  function _saveNavigationChange() {
+    let changed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    const updatedNavigation = state.rawNavigation.map(item => {
+      const findChanged = changed.find(changeItem => isSameNavigation(_objectSpread(_objectSpread({}, changeItem), {}, {
+        section: state.activeSection
+      }), item));
+      if (findChanged) {
+        return _objectSpread(_objectSpread({}, item), findChanged);
+      }
+      return item;
+    });
+    state.rawNavigation = updatedNavigation;
+  }
+  /**
+   * 删除一个导航节点
+   * @param {string} id 导航的 ID
+   */
+  function delNavigationItem(id) {
+    const relatedNavigationId = state.rawNavigation.filter(item => item.id === id || item.parent === id).map(item => item.id);
+    state.rawNavigation = state.rawNavigation.filter(item => !relatedNavigationId.includes(item.id));
+  }
+  /**
+   * 增加一个导航节点
+   * @param {object} params 导航数据
+   */
+  function addNavigationItem() {
+    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const data = _objectSpread(_objectSpread({}, params), {}, {
+      // 新增的数据使用随机生成的 nanoid (A-Za-z0-9_-)
+      id: (0, _nanoid.nanoid)(),
+      section: state.activeSection,
+      visible: true
+    });
+    state.rawNavigation = [...state.rawNavigation, data];
+  }
+
+  /**
+   * 将树状结构转换为数据库存储的导航结构
+   * @param {array} tree 树状结构
+   * @returns array
+   */
+  // eslint-disable-next-line no-unused-vars
+  function tree2navigation(tree) {
+    const list = tree.map(item => {
+      const items = item.children || [];
+      return {
+        title: item.title,
+        icon: item.icon,
+        link: item.link,
+        items: tree2navigation(items),
+        section: item.section,
+        visible: item.visible,
+        parent: item.parent,
+        component: item.component,
+        role: item.role,
+        from: item.from,
+        id: item.id
+      };
+    });
+    return list;
+  }
+  /**
+   * 将数据库中的导航数据转换为树状结构
+   * @param {array} list 数据库中导航的结构
+   * @param {string} baseLink 当前 tree 的 base
+   * @returns 树状结构
+   */
+  function navigation2tree(list) {
+    let baseLink = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : BASE_LINK;
+    const tree = list.map(item => {
+      const findComponent = components.find(componentItem => componentItem.name === item.component);
+      const base = (findComponent === null || findComponent === void 0 ? void 0 : findComponent.link) || baseLink;
+      const children = item.items || [];
+      const {
+        link
+      } = item;
+      return {
+        title: item.title,
+        subtitle: getNavigationFullLink(item),
+        link,
+        icon: item.icon,
+        children: navigation2tree(children, link || BASE_LINK),
+        section: item.section,
+        visible: item.visible,
+        parent: item.parent,
+        component: item.component,
+        id: item.id,
+        role: item.role,
+        from: item.from,
+        __base: base
+      };
+    });
+    return tree;
+  }
+
+  /**
+   * 获取指定区块的导航数据
+   * @param {string} section 导航所属区块
+   * @returns 在指定导航区块内的导航数据
+   */
+  function getNavigation(section) {
+    const copyNavigation = (0, _cloneDeep.default)(navigation);
+    const filteredSectionNavigation = copyNavigation.filter(item => {
+      return (0, _parseNavigationFromBlocklet.isMatchSection)(item.section, section);
+    });
+    return navigation2tree(filteredSectionNavigation);
+  }
+
+  /**
+   * 将导航数据保存到后端
+   * @param {array} list 需要保存的导航数据
+   */
+  async function saveNavigationList(list) {
+    const data = list.map(item => {
+      return (0, _omitBy.default)(item, _isNil.default);
+    });
+    const formartedData = data.map(item => {
+      const tempData = _objectSpread({}, item);
+      if (tempData.role && Array.isArray(tempData.role)) {
+        tempData.role = JSON.stringify(tempData.role);
+      }
+      if (tempData.section && Array.isArray(tempData.section)) {
+        tempData.section = JSON.stringify(tempData.section);
+      }
+      if (tempData.title && tempData.title instanceof Object) {
+        tempData.title = JSON.stringify(tempData.title);
+      }
+      if (tempData.link && tempData.link instanceof Object) {
+        tempData.link = JSON.stringify(tempData.link);
+      }
+      return tempData;
+    });
+    // .filter((item) => item.from !== ' tmpl');
+    await actions.configNavigations(formartedData);
+  }
+  async function resetNavigation() {
+    await saveNavigationList([]);
+    state.rawNavigation = (0, _cloneDeep.default)(builtinList);
+  }
+  return {
+    state,
+    navigation: treeNavigation,
+    components,
+    getNavigationFullLink,
+    updateActiveSection,
+    updateNavigationItem,
+    delNavigationItem,
+    addNavigationItem,
+    updateNavigationTree,
+    getNavigation,
+    saveNavigationList,
+    resetNavigation
+  };
+}

package/lib/locales/en.js

@@ -100,6 +100,7 @@ module.exports = {
     components: 'Components',
     config: 'Configure',
     configuration: 'Configuration',
+    configNavigation: 'Navigation',
     configSuccess: 'Config successfully',
     confirm: 'Confirm',
     console: 'Console',
@@ -504,7 +505,7 @@ module.exports = {
     routingEngine: 'Routing Engine',
     ownerNftURL: 'Owner NFT',
     expirationLeft: 'Expiration Left',
-    renewal: 'Renewal'
+    renew: 'Renew'
   },
   store: {
     nameSort: 'Name',
@@ -1110,5 +1111,27 @@ module.exports = {
       confirm: 'Confirm on your DID Wallet',
       success: 'You are successfully connected'
     }
+  },
+  navigation: {
+    navigation: 'Navigation',
+    form: {
+      title: 'Title',
+      titlePlaceholder: 'Please input navigation title',
+      titleTooLong: 'Title length should small than {len}',
+      icon: 'Navigation Icon',
+      iconPlaceholder: 'Please input navigation icon',
+      invalidIcon: 'Icon is invalid',
+      findMoreIcon: 'Find more icons',
+      link: 'Link',
+      linkPlaceholder: 'Please input navigation link',
+      invalidLink: 'Link is invalid',
+      component: 'Component',
+      componentPlaceholder: 'Please select navigation component',
+      role: 'Role',
+      rolePlaceholder: 'Please select navigation role',
+      locale: 'Locale',
+      localePlaceholder: 'Please input locale need to add',
+      localeExists: '{value} is already exists'
+    }
   }
 };

package/lib/locales/zh.js

@@ -104,6 +104,7 @@ module.exports = {
     components: '组件',
     config: '配置',
     configuration: '配置',
+    configNavigation: '导航',
     configSuccess: '设置成功',
     confirm: '确认',
     console: '控制台',
@@ -512,7 +513,7 @@ module.exports = {
     routingEngine: '路由引擎',
     ownerNftURL: '所有者 NFT',
     expirationLeft: '有效期还剩',
-    renewal: '续期'
+    renew: '续期'
   },
   store: {
     nameSort: '名称',
@@ -1115,5 +1116,27 @@ module.exports = {
       confirm: '在您的 DID 钱包上确认',
       success: '连接成功'
     }
+  },
+  navigation: {
+    navigation: '导航',
+    form: {
+      title: '标题',
+      titlePlaceholder: '请输入导航标题',
+      titleTooLong: '标题最长为 {len}',
+      icon: '图标',
+      iconPlaceholder: '请输入导航图标',
+      invalidIcon: '导航图标不存在',
+      findMoreIcon: '找到更多图标',
+      link: '链接',
+      linkPlaceholder: '请输入导航链接',
+      invalidLink: '链接格式不正确',
+      component: '组件',
+      componentPlaceholder: '请选择导航所属的组件',
+      role: '角色',
+      rolePlaceholder: '请选择导航可见的角色',
+      locale: '语言',
+      localePlaceholder: '请输入要添加的多语言标识符',
+      localeExists: '{value} 已经存在'
+    }
   }
 };

package/lib/team/members/passports.js

@@ -77,8 +77,7 @@ function Passports(_ref2) {
     t
   } = (0, _context.useLocaleContext)();
   const {
-    session,
-    inService
+    session
   } = (0, _session.useSessionContext)();
   const {
     roles,
@@ -91,7 +90,8 @@ function Passports(_ref2) {
     blocklet
   } = (0, _team.useTeamContext)();
   const {
-    api
+    api,
+    inService
   } = (0, _node.useNodeContext)();
   const {
     enqueueSnackbar

package/lib/team/passports/color.js

@@ -47,8 +47,7 @@ function PassportColor(_ref) {
   const onSubmit = async () => {
     const params = [{
       key: _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_PASSPORT_COLOR,
-      value: color,
-      custom: true
+      value: color
     }];
     try {
       setLoading(true);

package/lib/team/passports/index.js

@@ -37,7 +37,6 @@ function PassportList() {
   } = (0, _react.useContext)(_context.LocaleContext);
   const {
     api,
-    info: nodeInfo,
     inService
   } = (0, _node.useNodeContext)();
   const {
@@ -47,7 +46,8 @@ function PassportList() {
     teamName,
     refresh: refreshTeam,
     enablePassportIssuance,
-    passportColor
+    passportColor,
+    isNodeTeam
   } = (0, _team.useTeamContext)();
   const [showCreate, setShowCreate] = (0, _react.useState)(false);
   const [updateForm, setUpdateForm] = (0, _react.useState)(false);
@@ -118,8 +118,9 @@ function PassportList() {
                     })]
                   })]
                 })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SplitButton.default.Item, {
+              }), !isNodeTeam && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SplitButton.default.Item, {
                 onClick: () => setShowColor(true),
+                "data-cy": "config-passport-color",
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
                   children: t('team.passport.configColor')
                 })
@@ -138,7 +139,7 @@ function PassportList() {
                 }
               }), t('team.passport.trustedPassportIssuers')]
             })
-          }), (inService || nodeInfo.did !== teamDid) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+          }), !isNodeTeam && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
             style: {
               marginLeft: 16
             },

package/lib/util/locales.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// https://www.maigoo.com/top/393790.html
+// https://zh.wikipedia.org/zh-my/ISO_639-1代码表
+var _default = {
+  en: 'English',
+  zh: '中文',
+  fr: 'Français',
+  // 法语
+  ru: 'Russian',
+  // 俄语
+  ar: 'العربية',
+  //  阿拉伯语
+  es: 'Español',
+  // 西班牙语
+  de: 'Deutsch',
+  // 德语
+  pt: 'Português do Brasil',
+  // 葡萄牙语
+  ja: '日本語',
+  // 日语
+  hi: 'हिन्दी' // 印地语
+};
+exports.default = _default;