@abtnode/ux 1.15.17 → 1.16.0-beta-8ee536d7

package/lib/blocklet/purchase/component-purchase.js

@@ -0,0 +1,253 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComponentPurchase = ComponentPurchase;
+exports.default = void 0;
+var _react = require("react");
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _util = require("@blocklet/meta/lib/util");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _pWaitFor = _interopRequireDefault(require("p-wait-for"));
+var _toast = _interopRequireDefault(require("../../toast"));
+var _node = require("../../contexts/node");
+var _util2 = require("../../util");
+var _api = require("../../util/api");
+var _common = require("./common");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["mode"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
+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); }
+function ComponentPurchase(_ref) {
+  let {
+    meta,
+    onCancel,
+    mode,
+    handlePaySuccess
+  } = _ref;
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const {
+    info
+  } = (0, _node.useNodeContext)();
+  const webWalletUrl = (0, _util2.getWebWalletUrl)(info);
+  const [nw, setNw] = (0, _react.useState)(null);
+  const baseUrl = new URL(meta === null || meta === void 0 ? void 0 : meta.registryUrl).origin;
+  const name = (0, _util.getDisplayName)({
+    meta
+  });
+  const handleConnectSuccess = async (result, decrypt) => {
+    const success = async _ref2 => {
+      let {
+        downloadTokenList
+      } = _ref2;
+      handlePaySuccess({
+        downloadTokenList
+      });
+    };
+    const failure = async errorMessage => {
+      _toast.default.error(errorMessage);
+      onCancel(errorMessage);
+    };
+    async function handleConnectSessionStatus(url) {
+      return (0, _pWaitFor.default)(() => {
+        return _api.api.get(url).then(async _ref3 => {
+          let {
+            data
+          } = _ref3;
+          const downloadTokenList = data === null || data === void 0 ? void 0 : data.downloadTokenList;
+          if (data.status === 'succeed') {
+            if (downloadTokenList && downloadTokenList.length) {
+              await success({
+                downloadTokenList
+              });
+            } else {
+              await failure(t('blocklet.component.missDownloadTokenTip'));
+              return true;
+            }
+            return true;
+          }
+          if (data.status === 'error') {
+            console.error('vc error: ', data);
+            await failure(data === null || data === void 0 ? void 0 : data.error);
+            return true;
+          }
+          return false;
+        });
+      }, {
+        interval: 1000
+      });
+    }
+    if (mode === 'purchase' && nw) {
+      const {
+        statusUrl
+      } = (0, _util2.extractStatusUrlFromNextWorkflow)(nw);
+      // poll status url, to get download token
+      await handleConnectSessionStatus(statusUrl);
+    } else {
+      await success({
+        downloadTokenList: result.downloadTokenList && decrypt(result.downloadTokenList)
+      });
+    }
+  };
+  (0, _react.useEffect)(() => {
+    // only purchase mode has nw
+    if (mode === 'purchase') {
+      const nextWorkflowUrl = new URL(baseUrl);
+      nextWorkflowUrl.pathname = '/api/did/verify-purchase-blocklet/token';
+      nextWorkflowUrl.searchParams.set('serverDid', info.did);
+      nextWorkflowUrl.searchParams.set('blockletDid', meta === null || meta === void 0 ? void 0 : meta.did);
+      try {
+        _api.api.get(nextWorkflowUrl.href).then(_ref4 => {
+          let {
+            data
+          } = _ref4;
+          const url = "".concat(data.url);
+          setNw(url);
+        });
+      } catch (error) {
+        console.error('get next workflow url error: ', error);
+      }
+    }
+    return () => {
+      setNw(null);
+    };
+  }, [mode]); // eslint-disable-line
+
+  // If nw does not exist, then connect should not be render
+  if (mode === 'purchase' && !nw) {
+    return '';
+  }
+  const modePropsMap = {
+    verify: {
+      action: 'verify-purchase-blocklet',
+      checkFn: _api.axios.create({
+        baseURL: baseUrl
+      }).get,
+      extraParams: {
+        serverDid: info.did,
+        blockletDid: meta === null || meta === void 0 ? void 0 : meta.did
+      },
+      messages: {
+        title: t('store.purchase.verify.auth.title', {
+          name
+        }),
+        scan: t('store.purchase.verify.auth.scan'),
+        confirm: t('store.purchase.verify.auth.confirm'),
+        success: t('store.purchase.verify.auth.success')
+      }
+    },
+    purchase: {
+      action: 'acquire-asset',
+      checkFn: _api.axios.create({
+        baseURL: (0, _urlJoin.default)(baseUrl, '/store')
+      }).get,
+      extraParams: {
+        factory: meta.nftFactory,
+        nw
+      },
+      messages: {
+        title: t('store.purchase.auth.title', {
+          name
+        }),
+        scan: t('store.purchase.auth.scan'),
+        confirm: t('store.purchase.auth.confirm'),
+        success: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: t('store.purchase.auth.success')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: t('blocklet.component.purchaseComponentSecondCheckTip')
+          })]
+        })
+      }
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, _objectSpread({
+    open: true,
+    locale: locale,
+    popup: false,
+    saveConnect: false,
+    className: "connect",
+    baseUrl: baseUrl,
+    onSuccess: handleConnectSuccess,
+    cancelWhenScanned: onCancel,
+    onClose: onCancel,
+    checkTimeout: 60 * 5000,
+    webWalletUrl: webWalletUrl,
+    disableClose: true,
+    showDownload: false
+  }, modePropsMap[mode]));
+}
+ComponentPurchase.propTypes = _objectSpread(_objectSpread({}, _common.commonProps), {}, {
+  handlePaySuccess: _propTypes.default.func,
+  mode: _propTypes.default.oneOf(['verify', 'purchase']).isRequired
+});
+ComponentPurchase.defaultProps = {
+  handlePaySuccess: () => {}
+};
+const ComponentPurchaseSelect = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+  let {
+      mode
+    } = _ref5,
+    rest = _objectWithoutProperties(_ref5, _excluded);
+  const [action, setAction] = (0, _react.useState)(mode !== 'both' ? mode : 'verify');
+  const [step, setStep] = (0, _react.useState)(mode !== 'both' ? 2 : 1);
+  const onSelect = async act => {
+    if (act === action) {
+      return;
+    }
+    setAction(act);
+  };
+  const onNext = async () => {
+    if (!action) {
+      return;
+    }
+    if (step === 2) {
+      return;
+    }
+    setStep(2);
+  };
+
+  // expose the func and activeStep
+  (0, _react.useImperativeHandle)(ref, () => ({
+    onNext,
+    getCurrentStep: () => {
+      return step;
+    }
+  }));
+  if (step === 1) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        maxWidth: 520
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.CustomSelect, {
+        action: action,
+        onNext: null,
+        onSelect: onSelect
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentPurchase, _objectSpread(_objectSpread({}, rest), {}, {
+    mode: action
+  }));
+});
+ComponentPurchaseSelect.propTypes = {
+  mode: _propTypes.default.oneOf(['both', 'verify', 'purchase']).isRequired,
+  ref: _propTypes.default.any
+};
+ComponentPurchaseSelect.defaultProps = {
+  ref: {}
+};
+var _default = ComponentPurchaseSelect;
+exports.default = _default;

package/lib/blocklet/purchase/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentPurchaseSelect", {
+  enumerable: true,
+  get: function get() {
+    return _componentPurchase.default;
+  }
+});
+var _componentPurchase = _interopRequireDefault(require("./component-purchase"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/blocklet/router/action/add-domain-alias.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AddDomainAlias;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CallMerge = _interopRequireDefault(require("@mui/icons-material/CallMerge"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _toast = _interopRequireDefault(require("../../../toast"));
+var _confirm = _interopRequireDefault(require("../../../confirm"));
+var _util = require("../../../util");
+var _node = require("../../../contexts/node");
+var _util2 = require("../util");
+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) { 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); }
+function AddDomainAlias(_ref) {
+  let {
+    id,
+    children,
+    title,
+    teamDid
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [confirmSetting, setConfirmSetting] = (0, _react.useState)(null);
+  const onCancel = () => {
+    setLoading(false);
+    setConfirmSetting(null);
+  };
+  const onConfirm = async params => {
+    setLoading(true);
+    try {
+      await api.addDomainAlias({
+        input: {
+          id,
+          domainAlias: params.domain.trim(),
+          teamDid
+        }
+      });
+      await (0, _util.sleep)(2000);
+    } catch (err) {
+      _toast.default.error(err.message);
+    } finally {
+      setConfirmSetting(null);
+      setLoading(false);
+    }
+  };
+  const onEnter = async (params, confirm, setError) => {
+    try {
+      await confirm(params);
+    } catch (err) {
+      setError((0, _util.formatError)(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+  const setting = {
+    title: title || t('router.domainAlias.add.title'),
+    // eslint-disable-next-line react/no-unstable-nested-components
+    description: (params, setParams, setError) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      component: "div",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        label: t('router.domainAlias.add.domainDescription'),
+        autoComplete: "off",
+        variant: "outlined",
+        name: "domain",
+        "data-cy": "add-domain",
+        fullWidth: true,
+        autoFocus: true,
+        inputProps: {
+          'data-cy': 'domain-name-input'
+        },
+        value: params.domain,
+        style: {
+          marginBottom: 8
+        },
+        margin: "dense",
+        onChange: e => {
+          const domain = e.target.value.trim();
+          const errMsg = (0, _util2.validateDomain)(domain, t);
+          setParams(_objectSpread(_objectSpread({}, params), {}, {
+            domain,
+            __disableConfirm: !!errMsg
+          }));
+          if (errMsg) {
+            setError(errMsg);
+          } else {
+            setError('');
+          }
+        },
+        onKeyPress: e => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            const domain = e.target.value.trim();
+            const errMsg = (0, _util2.validateDomain)(domain, t);
+            if (errMsg) {
+              setError(errMsg);
+            } else {
+              onEnter(params, onConfirm, setError);
+            }
+          }
+        }
+      })
+    }),
+    confirm: t('common.confirm'),
+    cancel: t('common.cancel'),
+    params: {
+      domain: '',
+      __disableConfirm: true
+    },
+    onConfirm,
+    onCancel
+  };
+  const onMenuItemClick = e => {
+    e.stopPropagation();
+    // eslint-disable-next-line no-unused-expressions
+    setConfirmSetting(setting);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [typeof children === 'function' ? children({
+      loading,
+      open: onMenuItemClick
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+      onClick: onMenuItemClick,
+      className: "rule-action",
+      "data-cy": "action-add-domain-alias",
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        size: 16
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CallMerge.default, {
+        style: {
+          fontSize: 18,
+          marginRight: 5
+        }
+      }), t('router.domainAlias.add.title')]
+    }), confirmSetting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+      title: confirmSetting.title,
+      description: confirmSetting.description,
+      confirm: confirmSetting.confirm,
+      cancel: confirmSetting.cancel,
+      params: confirmSetting.params,
+      onConfirm: confirmSetting.onConfirm,
+      onCancel: confirmSetting.onCancel,
+      color: "primary"
+    })]
+  });
+}
+AddDomainAlias.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  children: _propTypes.default.any,
+  title: _propTypes.default.string,
+  teamDid: _propTypes.default.string
+};
+AddDomainAlias.defaultProps = {
+  children: null,
+  title: '',
+  teamDid: ''
+};

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

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AddRule;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Link = _interopRequireDefault(require("@mui/icons-material/Link"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+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 _urlFriendly = _interopRequireDefault(require("@blocklet/meta/lib/url-friendly"));
+var _node = require("../../../contexts/node");
+var _blocklet = require("../../../contexts/blocklet");
+var _confirm = _interopRequireDefault(require("../../../confirm"));
+var _toast = _interopRequireDefault(require("../../../toast"));
+var _util = require("../util");
+var _configRoutingRule = _interopRequireDefault(require("./config-routing-rule"));
+var _util2 = require("../../../util");
+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) { 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); }
+function AddRule(_ref) {
+  let {
+    children
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [confirmSetting, setConfirmSetting] = (0, _react.useState)(null);
+  const teamDid = blocklet.meta.did;
+  const siteId = blocklet.site.id;
+  const onCancel = () => {
+    setLoading(false);
+    setConfirmSetting(null);
+  };
+  const onConfirm = async params => {
+    try {
+      const err = await (0, _util.validateRule)(params, t);
+      if (err) {
+        throw err;
+      }
+      setLoading(true);
+      const rule = {
+        from: {
+          pathPrefix: (0, _urlFriendly.default)(params.pathPrefix)
+        },
+        to: {
+          type: params.type
+        }
+      };
+      if (params.type === _constant.ROUTING_RULE_TYPES.REDIRECT) {
+        rule.to.url = params.url.trim();
+        rule.to.redirectCode = params.redirectCode;
+      }
+      await api.addRoutingRule({
+        input: {
+          id: siteId,
+          rule,
+          teamDid
+        }
+      });
+    } catch (error) {
+      _toast.default.error(error.message);
+    } finally {
+      setLoading(false);
+      setConfirmSetting(null);
+    }
+  };
+  const setting = {
+    title: t('router.rule.add.title'),
+    // eslint-disable-next-line react/no-unstable-nested-components
+    description: (params, setParams, setError) => {
+      const setValue = value => {
+        setError(null);
+        const validateResult = (0, _util.validateRule)(value, t);
+        if (validateResult) {
+          setParams(_objectSpread(_objectSpread({}, value), {}, {
+            __disableConfirm: true
+          }));
+          return;
+        }
+        setParams(_objectSpread({}, value));
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+        component: "div",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          label: t('router.rule.add.pathPrefix'),
+          autoComplete: "off",
+          variant: "outlined",
+          name: "pathPrefix",
+          "data-cy": "path-prefix-input",
+          fullWidth: true,
+          autoFocus: true,
+          helperText: params.helperText || t('router.rule.add.pathPrefixTip'),
+          style: {
+            marginBottom: 32
+          },
+          margin: "dense",
+          value: params.pathPrefix,
+          onChange: e => {
+            let disable = false;
+            const validateResult = (0, _util.validatePathPrefix)({
+              params: _objectSpread(_objectSpread({}, params), {}, {
+                pathPrefix: e.target.value
+              }),
+              blocklets: [blocklet]
+            });
+            setError(validateResult);
+            if (params.type === _constant.ROUTING_RULE_TYPES.BLOCKLET && validateResult) {
+              disable = true;
+            }
+            if (params.type === _constant.ROUTING_RULE_TYPES.REDIRECT && !params.url) {
+              disable = true;
+            }
+            if (!e.target.value.trim()) {
+              disable = true;
+              setError(t('router.validation.pathPrefixRequired'));
+            }
+            if (!disable) {
+              setError('');
+            }
+            const helperText = t('common.slugifyHint', {
+              value: (0, _util2.formatMountPoint)(e.target.value)
+            });
+            setParams(_objectSpread(_objectSpread({}, params), {}, {
+              pathPrefix: e.target.value,
+              helperText,
+              __disableConfirm: disable
+            }));
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_configRoutingRule.default, {
+          params: params,
+          setParams: setValue,
+          setError: setError
+        })]
+      });
+    },
+    confirm: t('router.rule.add.confirm'),
+    cancel: t('common.cancel'),
+    params: {
+      pathPrefix: '',
+      type: _constant.ROUTING_RULE_TYPES.REDIRECT,
+      interfaceName: '',
+      redirectCode: 302,
+      __disableConfirm: true
+    },
+    onConfirm,
+    onCancel
+  };
+  const onMenuItemClick = e => {
+    e.stopPropagation();
+    // eslint-disable-next-line no-unused-expressions
+    setConfirmSetting(setting);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [typeof children === 'function' ? children({
+      loading,
+      open: onMenuItemClick
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+      onClick: onMenuItemClick,
+      className: "rule-action",
+      "data-cy": "action-add-rule",
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        size: 16
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+        style: {
+          fontSize: 18,
+          marginRight: 5
+        }
+      }), t('router.rule.add.title')]
+    }), confirmSetting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+      title: confirmSetting.title,
+      description: confirmSetting.description,
+      confirm: confirmSetting.confirm,
+      cancel: confirmSetting.cancel,
+      params: confirmSetting.params,
+      onConfirm: confirmSetting.onConfirm,
+      onCancel: confirmSetting.onCancel,
+      color: "primary"
+    })]
+  });
+}
+AddRule.propTypes = {
+  children: _propTypes.default.any
+};
+AddRule.defaultProps = {
+  children: null
+};