@abtnode/ux 1.16.13-beta-55b3e93d → 1.16.13-beta-423a40b1

package/lib/blocklet/router/action/config-routing-rule.js

@@ -4,18 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ConfigRoutingRule;
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _constant = require("@abtnode/constant");
+var _constant2 = require("@blocklet/constant");
+var _util = require("@blocklet/meta/lib/util");
+var _blocklet = require("../../../contexts/blocklet");
 var _jsxRuntime = require("react/jsx-runtime");
 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 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); }
+const getComponents = blocklet => blocklet.children.filter(x => x.meta.interfaces.find(i => i.type === _constant2.BLOCKLET_INTERFACE_TYPE_WEB));
 function ConfigRoutingRule(_ref) {
   let {
     params,
@@ -26,12 +33,41 @@ function ConfigRoutingRule(_ref) {
   const {
     t
   } = (0, _context.useLocaleContext)();
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const teamDid = blocklet.meta.did;
+  const components = getComponents(blocklet);
+  const [pageGroups, setPageGroups] = (0, _react.useState)([]);
   const redirectCodesMap = {
     301: t('common.redirectPermanently'),
     302: t('common.redirectTemporary'),
     307: t('common.redirectTemporary'),
     308: t('common.redirectPermanently')
   };
+  (0, _react.useEffect)(() => {
+    if (params.type === _constant.ROUTING_RULE_TYPES.COMPONENT && params.componentId) {
+      const component = components.find(x => x.meta.did === params.componentId);
+      const webInterface = (0, _util.findWebInterface)(component.meta);
+      const groups = (Array.isArray(webInterface === null || webInterface === void 0 ? void 0 : webInterface.pageGroups) ? webInterface.pageGroups : []).map(x => ({
+        value: x,
+        label: "".concat(x, " pages")
+      }));
+      if (groups.length) {
+        groups.unshift({
+          value: '',
+          label: 'All pages'
+        });
+      }
+      setPageGroups(groups);
+      if (params.pageGroup && groups.find(x => x.value === params.pageGroup) === false) {
+        setParams(_objectSpread(_objectSpread({}, params), {}, {
+          pageGroups: ''
+        }));
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params.componentId, params.type]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
       select: true,
@@ -46,6 +82,7 @@ function ConfigRoutingRule(_ref) {
         setError('');
         setParams(_objectSpread(_objectSpread({}, params), {}, {
           type: e.target.value,
+          did: e.target.value === _constant.ROUTING_RULE_TYPES.BLOCKLET ? teamDid : '',
           __disableConfirm: false
         }));
       },
@@ -82,14 +119,13 @@ function ConfigRoutingRule(_ref) {
         value: code,
         children: "".concat(redirectCodesMap[code], " - ").concat(code)
       }, code))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+    }, "redirectCode"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
       label: t('common.redirectUrl'),
       autoComplete: "off",
       variant: "outlined",
       name: "url",
       "data-cy": "redirect-url-input",
       fullWidth: true,
-      autoFocus: true,
       value: params.url,
       helperText: t('router.urlHelperText'),
       style: {
@@ -106,7 +142,77 @@ function ConfigRoutingRule(_ref) {
           setError('');
         }
       }
-    })]]
+    }, "redirectUrl")], params.type === _constant.ROUTING_RULE_TYPES.COMPONENT && [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      select: true,
+      label: t('router.domain.add.component'),
+      autoComplete: "off",
+      variant: "outlined",
+      "data-cy": "select-component-input",
+      name: "componentId",
+      fullWidth: true,
+      value: params.componentId,
+      onChange: e => {
+        setParams(_objectSpread(_objectSpread({}, params), {}, {
+          componentId: e.target.value
+        }));
+      },
+      style: {
+        marginBottom: 32
+      },
+      SelectProps: {},
+      children: components.map(component => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+        value: component.meta.did,
+        selected: component.meta.did === params.componentId,
+        children: (0, _util.getDisplayName)(component, true)
+      }, component.meta.did))
+    }, "componentId"), pageGroups.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      select: true,
+      label: t('router.domain.add.pageGroup'),
+      autoComplete: "off",
+      variant: "outlined",
+      name: "pageGroup",
+      "data-cy": "route-group-input",
+      fullWidth: true,
+      value: params.pageGroup,
+      helperText: t('router.domain.add.pageGroupTip'),
+      style: {
+        marginBottom: 32
+      },
+      onChange: e => {
+        setParams(_objectSpread(_objectSpread({}, params), {}, {
+          pageGroup: e.target.value
+        }));
+      },
+      SelectProps: {},
+      children: pageGroups.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+        value: x.value,
+        selected: x.value === params.pageGroup,
+        children: x.label
+      }, x.label))
+    }, "pageGroup") : null].filter(Boolean), params.type === _constant.ROUTING_RULE_TYPES.GENERAL_REWRITE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      label: t('common.rewriteUrl'),
+      autoComplete: "off",
+      variant: "outlined",
+      name: "url",
+      "data-cy": "rewrite-url-input",
+      fullWidth: true,
+      value: params.url,
+      helperText: t('router.urlHelperText'),
+      style: {
+        marginBottom: 32
+      },
+      onChange: e => {
+        setParams(_objectSpread(_objectSpread({}, params), {}, {
+          url: e.target.value,
+          __disableConfirm: !e.target.value.trim()
+        }));
+        if (!e.target.value.trim()) {
+          setError(t('router.validation.rewriteUrlRequired'));
+        } else {
+          setError('');
+        }
+      }
+    }, "url")]
   });
 }
 ConfigRoutingRule.propTypes = {
@@ -123,6 +229,12 @@ ConfigRoutingRule.defaultProps = {
   }, {
     name: 'Default - User will see the 404 page',
     value: _constant.ROUTING_RULE_TYPES.NONE
+  }, {
+    name: 'Rewrite - Route traffic without redirect',
+    value: _constant.ROUTING_RULE_TYPES.GENERAL_REWRITE
+  }, {
+    name: 'Component - Pass traffic to blocklet component',
+    value: _constant.ROUTING_RULE_TYPES.COMPONENT
   }],
   setParams: () => {},
   setError: () => {}

package/lib/blocklet/router/action/update-rule.js

@@ -73,6 +73,14 @@ function UpdateRule(_ref) {
         rule.to.url = params.url;
         rule.to.redirectCode = params.redirectCode;
       }
+      if (params.type === _constant.ROUTING_RULE_TYPES.COMPONENT) {
+        rule.to.did = teamDid;
+        rule.to.componentId = params.componentId;
+        rule.to.pageGroup = params.pageGroup;
+      }
+      if (params.type === _constant.ROUTING_RULE_TYPES.GENERAL_REWRITE) {
+        rule.to.url = (0, _urlPathFriendly.default)(params.url);
+      }
       await api.updateRoutingRule({
         input: {
           id: siteId,
@@ -122,6 +130,9 @@ function UpdateRule(_ref) {
             if (params.type === _constant.ROUTING_RULE_TYPES.REDIRECT && !params.url) {
               disable = true;
             }
+            if (params.type === _constant.ROUTING_RULE_TYPES.GENERAL_REWRITE && !params.url) {
+              disable = true;
+            }
             if (!e.target.value.trim()) {
               disable = true;
               setError(t('router.validation.pathPrefixRequired'));
@@ -149,10 +160,12 @@ function UpdateRule(_ref) {
     cancel: t('router.rule.update.cancel'),
     color: 'primary',
     params: {
+      did: to.did || '',
       pathPrefix: name === '/' ? name : name.replace(/^\/+/, '').replace(/\/+$/, ''),
       type: to.type || _constant.ROUTING_RULE_TYPES.BLOCKLET,
-      interfaceName: to.interfaceName || '',
       redirectCode: to.redirectCode || 302,
+      componentId: to.componentId || '',
+      pageGroup: to.pageGroup || '',
       url: to.url || '',
       __disableConfirm: false
     },

package/lib/blocklet/router/rule-list.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = RuleListWithPermission;
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _isUrl = _interopRequireDefault(require("is-url"));
 var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme"));
@@ -15,12 +16,14 @@ var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
 var _LockIcon = _interopRequireDefault(require("@arcblock/icons/lib/LockIcon"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _constant = require("@abtnode/constant");
-var _util = require("../../util");
+var _util = require("@blocklet/meta/lib/util");
+var _util2 = require("../../util");
 var _blocklet = require("../../contexts/blocklet");
 var _node = require("../../contexts/node");
 var _permission = require("../../permission");
 var _line = _interopRequireDefault(require("../component/line"));
 var _ruleActions = _interopRequireDefault(require("./rule-actions"));
+var _pageGroup = _interopRequireDefault(require("../page-group"));
 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; }
@@ -70,31 +73,39 @@ function RuleList(_ref2) {
     blocklet,
     recommendedDomain: domain
   } = (0, _blocklet.useBlockletContext)();
-  const rules = blocklet.site.rules.filter(rule => rule.to.did !== blocklet.meta.did).filter(rule => rule.to.type !== _constant.ROUTING_RULE_TYPES.BLOCKLET);
+  const rules = blocklet.site.rules.filter(rule => rule.to.type !== _constant.ROUTING_RULE_TYPES.BLOCKLET);
   return rules.map(rule => {
-    let avatarName = '';
+    let avatar = null;
+    let component = null;
     if (rule.to.type === _constant.ROUTING_RULE_TYPES.NONE) {
-      avatarName = '404';
+      avatar = '404';
     } else if (rule.to.type === _constant.ROUTING_RULE_TYPES.REDIRECT) {
-      avatarName = rule.to.redirectCode;
+      avatar = rule.to.redirectCode;
+    } else if (rule.to.type === _constant.ROUTING_RULE_TYPES.GENERAL_REWRITE) {
+      avatar = 'R';
+    } else if (rule.to.type === _constant.ROUTING_RULE_TYPES.COMPONENT) {
+      component = blocklet.children.find(x => x.meta.did === rule.to.componentId);
+      avatar = 'C';
     }
     const action = rule.isProtected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
       title: t('blocklet.router.urlLockTooltip'),
       placement: "top",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-        disabled: true,
-        size: "small",
-        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, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+          disabled: true,
+          size: "small",
           style: {
-            fill: theme.palette.text.disabled
-          }
+            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
+            }
+          })
         })
       })
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ruleActions.default, _objectSpread({}, rule));
@@ -113,23 +124,28 @@ function RuleList(_ref2) {
         alignItems: "center",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
           width: 28
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-          children: avatarName
+        }), typeof avatar === 'object' ? avatar : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          children: avatar
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-          ml: "16px",
+          ml: 2,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
             style: {
               color: '#222',
-              fontSize: 18
+              fontSize: 16
             },
-            children: [rule.to.type === _constant.ROUTING_RULE_TYPES.NONE && t('common.page404'), rule.to.type === _constant.ROUTING_RULE_TYPES.REDIRECT && t('common.redirect')]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            children: [rule.to.type === _constant.ROUTING_RULE_TYPES.NONE && t('common.page404'), rule.to.type === _constant.ROUTING_RULE_TYPES.REDIRECT && t('common.redirect'), rule.to.type === _constant.ROUTING_RULE_TYPES.GENERAL_REWRITE && t('common.rewrite'), rule.to.type === _constant.ROUTING_RULE_TYPES.COMPONENT && (0, _util.getDisplayName)(component, true)]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
             display: "flex",
             alignItems: "center",
-            children: rule.to.type === _constant.ROUTING_RULE_TYPES.REDIRECT && /*#__PURE__*/(0, _jsxRuntime.jsx)(RedirectRule, {
+            children: [rule.to.type === _constant.ROUTING_RULE_TYPES.REDIRECT && /*#__PURE__*/(0, _jsxRuntime.jsx)(RedirectRule, {
+              domain: domain,
+              toUrl: rule.to.url
+            }), rule.to.type === _constant.ROUTING_RULE_TYPES.GENERAL_REWRITE && /*#__PURE__*/(0, _jsxRuntime.jsx)(RedirectRule, {
               domain: domain,
               toUrl: rule.to.url
-            })
+            }), rule.to.type === _constant.ROUTING_RULE_TYPES.COMPONENT && /*#__PURE__*/(0, _jsxRuntime.jsx)(_pageGroup.default, {
+              group: rule.to.pageGroup
+            })]
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
@@ -143,10 +159,10 @@ function RuleList(_ref2) {
         alignItems: "center",
         flexGrow: "1",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
-          href: (0, _util.getAccessUrl)(domain, rule.from.pathPrefix, (0, _util.getBlockletUrlParams)(blocklet, locale)),
+          href: (0, _util2.getAccessUrl)(domain, rule.from.pathPrefix, (0, _util2.getBlockletUrlParams)(blocklet, locale)),
           target: "_blank",
           style: {
-            fontSize: 18
+            fontSize: 16
           },
           underline: "hover",
           children: rule.from.pathPrefix
@@ -159,7 +175,7 @@ function RuleList(_ref2) {
           children: action
         })
       }, "actions")]
-    }, "group-not-gateway-box"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_line.default, {})];
+    }, "rule"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_line.default, {}, "divider")];
   });
 }
 RuleList.propTypes = {
@@ -169,7 +185,7 @@ RuleList.defaultProps = {
   hasPermission: false
 };
 const RuleListInDaemon = (0, _permission.withPermission)(RuleList, 'mutate_blocklets');
-const RuleListInService = (0, _permission.withPermission)(RuleList, '', _util.BlockletAdminRoles);
+const RuleListInService = (0, _permission.withPermission)(RuleList, '', _util2.BlockletAdminRoles);
 function RuleListWithPermission(props) {
   const {
     inService

package/lib/blocklet/storage/connect-to.js

@@ -28,7 +28,7 @@ const _excluded = ["spaceGateways", "refreshSpaceGateways"];
 /**
  * @description
  * @param {{
- *  spaceGateways: Array<import('./connected').SpaceGateway>,
+ *  spaceGateways?: Array<import('./connected').SpaceGateway>,
  *  refreshSpaceGateways: () => void,
  * }} { spaceGateways, refreshSpaceGateways, ...rest }
  * @return {*}
@@ -246,10 +246,11 @@ function ConnectTo(_ref) {
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SplitButton.default, _objectSpread(_objectSpread({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SplitButton.default, {
       color: "primary",
       style: {
-        textTransform: 'none !important'
+        textTransform: 'none !important',
+        fontSize: '1rem'
       },
       size: "small",
       onClick: handleUseWalletConnect,
@@ -261,8 +262,7 @@ function ConnectTo(_ref) {
         size: "small"
       }, rest), {}, {
         children: t('storage.spaces.connect.useSpaceGateway')
-      }), "1")]
-    }, rest), {}, {
+      }), "1")],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
         sx: {
           fontWeight: 'bold',
@@ -270,7 +270,7 @@ function ConnectTo(_ref) {
         },
         children: t('storage.spaces.connect.useWallet')
       })
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
       forceConnected: false,
       saveConnect: false,
       prefix: authorizeFromNftConnect.prefix,
@@ -372,8 +372,12 @@ function ConnectTo(_ref) {
   });
 }
 ConnectTo.propTypes = {
-  spaceGateways: _propTypes.array.isRequired,
-  refreshSpaceGateways: _propTypes.func.isRequired
+  spaceGateways: _propTypes.array,
+  refreshSpaceGateways: _propTypes.func
+};
+ConnectTo.defaultProps = {
+  spaceGateways: [],
+  refreshSpaceGateways: () => undefined
 };
 var _default = ConnectTo;
 exports.default = _default;

package/lib/blocklet/storage/connected.js

@@ -165,10 +165,6 @@ function Connected() {
         fontWeight: "bold",
         children: t('storage.spaces.connected.title')
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_connectTo.default, {
-        style: {
-          fontSize: '1rem'
-        },
-        display: "inline-flex",
         spaceGateways: spaceGateways,
         refreshSpaceGateways: refreshSpaceGateways
       })]