@abtnode/ux 1.16.14-beta-c308dc3b → 1.16.14-beta-963cb583

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

@@ -0,0 +1,167 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import AddIcon from '@mui/icons-material/CallMerge';
+import Spinner from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import Confirm from '../../../confirm';
+import { formatError, sleep } from '../../../util';
+import { useNodeContext } from '../../../contexts/node';
+import { validateDomain } from '../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function AddDomainAlias({
+  id,
+  children,
+  title,
+  teamDid
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    api
+  } = useNodeContext();
+  const [loading, setLoading] = useState(false);
+  const [confirmSetting, setConfirmSetting] = useState(null);
+  const onCancel = () => {
+    setLoading(false);
+    setConfirmSetting(null);
+  };
+  const onConfirm = async params => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      await api.addDomainAlias({
+        input: {
+          id,
+          domainAlias: params.domain.trim(),
+          teamDid
+        }
+      });
+      await sleep(2000);
+    } catch (err) {
+      Toast.error(err.message);
+    } finally {
+      setConfirmSetting(null);
+      setLoading(false);
+    }
+  };
+  const onEnter = async (params, confirm, setError) => {
+    try {
+      await confirm(params);
+    } catch (err) {
+      setError(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__*/_jsx(Typography, {
+      component: "div",
+      children: /*#__PURE__*/_jsx(TextField, {
+        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 = validateDomain(domain, t);
+          setParams({
+            ...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 = 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__*/_jsxs(_Fragment, {
+    children: [typeof children === 'function' ? children({
+      loading,
+      open: onMenuItemClick
+    }) : /*#__PURE__*/_jsxs(MenuItem, {
+      onClick: onMenuItemClick,
+      className: "rule-action",
+      "data-cy": "action-add-domain-alias",
+      children: [loading ? /*#__PURE__*/_jsx(Spinner, {
+        size: 16
+      }) : /*#__PURE__*/_jsx(AddIcon, {
+        style: {
+          fontSize: 18,
+          marginRight: 5
+        }
+      }), t('router.domainAlias.add.title')]
+    }), confirmSetting && /*#__PURE__*/_jsx(Confirm, {
+      title: confirmSetting.title,
+      description: confirmSetting.description,
+      confirm: confirmSetting.confirm,
+      cancel: confirmSetting.cancel,
+      params: confirmSetting.params,
+      onConfirm: confirmSetting.onConfirm,
+      onCancel: confirmSetting.onCancel,
+      color: "primary",
+      loading: loading
+    })]
+  });
+}
+AddDomainAlias.propTypes = {
+  id: PropTypes.string.isRequired,
+  children: PropTypes.any,
+  title: PropTypes.string,
+  teamDid: PropTypes.string
+};
+AddDomainAlias.defaultProps = {
+  children: null,
+  title: '',
+  teamDid: ''
+};

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

@@ -0,0 +1,211 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import AddIcon from '@mui/icons-material/Link';
+import Spinner from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { ROUTING_RULE_TYPES } from '@abtnode/constant';
+import urlPathFriendly from '@blocklet/meta/lib/url-path-friendly';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../../../contexts/node';
+import { useBlockletContext } from '../../../contexts/blocklet';
+import Confirm from '../../../confirm';
+import { validateRule, validatePathPrefix } from '../util';
+import ConfigRoutingRule from './config-routing-rule';
+import { formatMountPoint } from '../../../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function AddRule({
+  children
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    api
+  } = useNodeContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const [loading, setLoading] = useState(false);
+  const [confirmSetting, setConfirmSetting] = 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 validateRule(params, t);
+      if (err) {
+        throw err;
+      }
+      setLoading(true);
+      const rule = {
+        from: {
+          pathPrefix: urlPathFriendly(params.pathPrefix)
+        },
+        to: {
+          type: params.type
+        }
+      };
+      if (params.type === ROUTING_RULE_TYPES.REDIRECT) {
+        rule.to.url = params.url.trim();
+        rule.to.redirectCode = params.redirectCode;
+      }
+      if (params.type === ROUTING_RULE_TYPES.COMPONENT) {
+        rule.to.did = teamDid;
+        rule.to.componentId = params.componentId;
+        rule.to.pageGroup = params.pageGroup;
+      }
+      if (params.type === ROUTING_RULE_TYPES.GENERAL_REWRITE) {
+        rule.to.url = urlPathFriendly(params.url);
+      }
+      await api.addRoutingRule({
+        input: {
+          id: siteId,
+          rule,
+          teamDid
+        }
+      });
+    } catch (error) {
+      Toast.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 = validateRule(value, t);
+        if (validateResult) {
+          setParams({
+            ...value,
+            __disableConfirm: true
+          });
+          return;
+        }
+        setParams({
+          ...value
+        });
+      };
+      return /*#__PURE__*/_jsxs(Typography, {
+        component: "div",
+        children: [/*#__PURE__*/_jsx(TextField, {
+          label: t('router.rule.add.pathPrefix'),
+          autoComplete: "off",
+          variant: "outlined",
+          name: "pathPrefix",
+          "data-cy": "path-prefix-input",
+          fullWidth: true,
+          autoFocus: true,
+          helperText: params.pathPrefixHint || t('router.rule.add.pathPrefixTip'),
+          style: {
+            marginBottom: 32
+          },
+          margin: "dense",
+          value: params.pathPrefix,
+          onChange: e => {
+            let disable = false;
+            const validateResult = validatePathPrefix({
+              params: {
+                ...params,
+                pathPrefix: e.target.value
+              },
+              blocklets: [blocklet]
+            });
+            setError(validateResult);
+            if (params.type === ROUTING_RULE_TYPES.BLOCKLET && validateResult) {
+              disable = true;
+            }
+            if (params.type === ROUTING_RULE_TYPES.REDIRECT && !params.url) {
+              disable = true;
+            }
+            if (params.type === ROUTING_RULE_TYPES.GENERAL_REWRITE && !params.url) {
+              disable = true;
+            }
+            if (!e.target.value.trim()) {
+              disable = true;
+              setError(t('router.validation.pathPrefixRequired'));
+            }
+            if (!disable) {
+              setError('');
+            }
+            const pathPrefixHint = t('common.slugifyHint', {
+              value: formatMountPoint(e.target.value)
+            });
+            setParams({
+              ...params,
+              pathPrefix: e.target.value,
+              pathPrefixHint,
+              __disableConfirm: disable
+            });
+          }
+        }), /*#__PURE__*/_jsx(ConfigRoutingRule, {
+          params: params,
+          setParams: setValue,
+          setError: setError
+        })]
+      });
+    },
+    confirm: t('router.rule.add.confirm'),
+    cancel: t('common.cancel'),
+    params: {
+      did: '',
+      pathPrefix: '',
+      type: ROUTING_RULE_TYPES.REDIRECT,
+      componentId: '',
+      pageGroup: '',
+      redirectCode: 302,
+      __disableConfirm: true
+    },
+    onConfirm,
+    onCancel
+  };
+  const onMenuItemClick = e => {
+    e.stopPropagation();
+    // eslint-disable-next-line no-unused-expressions
+    setConfirmSetting(setting);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [typeof children === 'function' ? children({
+      loading,
+      open: onMenuItemClick
+    }) : /*#__PURE__*/_jsxs(MenuItem, {
+      onClick: onMenuItemClick,
+      className: "rule-action",
+      "data-cy": "action-add-rule",
+      children: [loading ? /*#__PURE__*/_jsx(Spinner, {
+        size: 16
+      }) : /*#__PURE__*/_jsx(AddIcon, {
+        style: {
+          fontSize: 18,
+          marginRight: 5
+        }
+      }), t('router.rule.add.title')]
+    }), confirmSetting && /*#__PURE__*/_jsx(Confirm, {
+      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.any
+};
+AddRule.defaultProps = {
+  children: null
+};

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

@@ -0,0 +1,232 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { ROUTING_RULE_TYPES } from '@abtnode/constant';
+import { BLOCKLET_INTERFACE_TYPE_WEB } from '@blocklet/constant';
+import { findWebInterface, getDisplayName } from '@blocklet/meta/lib/util';
+import { useBlockletContext } from '../../../contexts/blocklet';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getComponents = blocklet => blocklet.children.filter(x => x.meta.interfaces.find(i => i.type === BLOCKLET_INTERFACE_TYPE_WEB));
+export default function ConfigRoutingRule({
+  params,
+  setParams,
+  setError,
+  serviceTypes
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const teamDid = blocklet.meta.did;
+  const components = getComponents(blocklet);
+  const [pageGroups, setPageGroups] = useState([]);
+  const redirectCodesMap = {
+    301: t('common.redirectPermanently'),
+    302: t('common.redirectTemporary'),
+    307: t('common.redirectTemporary'),
+    308: t('common.redirectPermanently')
+  };
+  useEffect(() => {
+    if (params.type === ROUTING_RULE_TYPES.COMPONENT && params.componentId) {
+      const component = components.find(x => x.meta.did === params.componentId);
+      const webInterface = findWebInterface(component.meta);
+      const groups = (Array.isArray(webInterface?.pageGroups) ? webInterface.pageGroups : []).map(x => ({
+        value: x,
+        label: `${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({
+          ...params,
+          pageGroups: ''
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params.componentId, params.type]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TextField, {
+      select: true,
+      label: t('router.domain.add.type'),
+      autoComplete: "off",
+      variant: "outlined",
+      name: "type",
+      "data-cy": "domain-add-type",
+      fullWidth: true,
+      value: params.type,
+      onChange: e => {
+        setError('');
+        setParams({
+          ...params,
+          type: e.target.value,
+          did: e.target.value === ROUTING_RULE_TYPES.BLOCKLET ? teamDid : '',
+          __disableConfirm: false
+        });
+      },
+      style: {
+        marginBottom: 32
+      },
+      SelectProps: {},
+      children: serviceTypes.map(({
+        name,
+        value
+      }) => /*#__PURE__*/_jsx(MenuItem, {
+        value: value,
+        children: name
+      }, value))
+    }), params.type === ROUTING_RULE_TYPES.REDIRECT && [/*#__PURE__*/_jsx(TextField, {
+      select: true,
+      label: t('router.domain.add.redirect'),
+      autoComplete: "off",
+      variant: "outlined",
+      name: "type",
+      fullWidth: true,
+      value: params.redirectCode,
+      onChange: e => setParams({
+        ...params,
+        redirectCode: e.target.value
+      }),
+      style: {
+        marginBottom: 32
+      },
+      SelectProps: {},
+      children: Object.keys(redirectCodesMap).map(code => /*#__PURE__*/_jsx(MenuItem, {
+        value: code,
+        children: `${redirectCodesMap[code]} - ${code}`
+      }, code))
+    }, "redirectCode"), /*#__PURE__*/_jsx(TextField, {
+      label: t('common.redirectUrl'),
+      autoComplete: "off",
+      variant: "outlined",
+      name: "url",
+      "data-cy": "redirect-url-input",
+      fullWidth: true,
+      value: params.url,
+      helperText: t('router.urlHelperText'),
+      style: {
+        marginBottom: 32
+      },
+      onChange: e => {
+        setParams({
+          ...params,
+          url: e.target.value,
+          __disableConfirm: !e.target.value.trim()
+        });
+        if (!e.target.value.trim()) {
+          setError(t('router.validation.redirectUrlRequired'));
+        } else {
+          setError('');
+        }
+      }
+    }, "redirectUrl")], params.type === ROUTING_RULE_TYPES.COMPONENT && [/*#__PURE__*/_jsx(TextField, {
+      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({
+          ...params,
+          componentId: e.target.value
+        });
+      },
+      style: {
+        marginBottom: 32
+      },
+      SelectProps: {},
+      children: components.map(component => /*#__PURE__*/_jsx(MenuItem, {
+        value: component.meta.did,
+        selected: component.meta.did === params.componentId,
+        children: getDisplayName(component, true)
+      }, component.meta.did))
+    }, "componentId"), pageGroups.length ? /*#__PURE__*/_jsx(TextField, {
+      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({
+          ...params,
+          pageGroup: e.target.value
+        });
+      },
+      SelectProps: {},
+      children: pageGroups.map(x => /*#__PURE__*/_jsx(MenuItem, {
+        value: x.value,
+        selected: x.value === params.pageGroup,
+        children: x.label
+      }, x.label))
+    }, "pageGroup") : null].filter(Boolean), params.type === ROUTING_RULE_TYPES.GENERAL_REWRITE && /*#__PURE__*/_jsx(TextField, {
+      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({
+          ...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 = {
+  params: PropTypes.object,
+  serviceTypes: PropTypes.array,
+  setParams: PropTypes.func,
+  setError: PropTypes.func
+};
+ConfigRoutingRule.defaultProps = {
+  params: {},
+  serviceTypes: [{
+    name: 'Redirect',
+    value: ROUTING_RULE_TYPES.REDIRECT
+  }, {
+    name: 'Default - User will see the 404 page',
+    value: ROUTING_RULE_TYPES.NONE
+  }, {
+    name: 'Rewrite - Route traffic without redirect',
+    value: ROUTING_RULE_TYPES.GENERAL_REWRITE
+  }, {
+    name: 'Component - Pass traffic to blocklet component',
+    value: ROUTING_RULE_TYPES.COMPONENT
+  }],
+  setParams: () => {},
+  setError: () => {}
+};

package/es/blocklet/router/action/delete-domain-alias.js

@@ -0,0 +1,99 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import ActionIcon from '@mui/icons-material/Delete';
+import Spinner from '@mui/material/CircularProgress';
+import Button from '@arcblock/ux/lib/Button';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import Confirm from '../../../confirm';
+import { useNodeContext } from '../../../contexts/node';
+import { sleep } from '../../../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function DeleteDomainAlias(props) {
+  const {
+    t
+  } = useLocaleContext();
+  const [loading, setLoading] = useState(false);
+  const [confirmSetting, setConfirmSetting] = useState(null);
+  const {
+    id,
+    domain,
+    children,
+    teamDid
+  } = props;
+  const {
+    api
+  } = useNodeContext();
+  const onCancel = () => {
+    setLoading(false);
+    setConfirmSetting(null);
+  };
+  const onConfirm = async () => {
+    setLoading(true);
+    try {
+      await api.deleteDomainAlias({
+        input: {
+          id,
+          domainAlias: domain,
+          teamDid
+        }
+      });
+      await sleep(2000);
+    } catch (err) {
+      Toast.error(err.message);
+    } finally {
+      setConfirmSetting(null);
+      setLoading(false);
+    }
+  };
+  const setting = {
+    title: t('router.domainAlias.delete.title'),
+    description: t('router.domainAlias.delete.description'),
+    confirm: t('common.confirm'),
+    onConfirm,
+    onCancel
+  };
+  const onClick = e => {
+    e.stopPropagation();
+    setConfirmSetting(setting);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [typeof children === 'function' ? children({
+      loading,
+      open: onClick
+    }) : /*#__PURE__*/_jsxs(Button, {
+      edge: "end",
+      onClick: onClick,
+      size: "small",
+      className: "rule-action",
+      color: "error",
+      "data-cy": "action-delete-domain-alias",
+      children: [loading ? /*#__PURE__*/_jsx(Spinner, {
+        size: 16
+      }) : /*#__PURE__*/_jsx(ActionIcon, {
+        style: {
+          fontSize: 16
+        }
+      }), t('router.domainAlias.delete.title')]
+    }), confirmSetting && /*#__PURE__*/_jsx(Confirm, {
+      title: confirmSetting.title,
+      description: confirmSetting.description,
+      confirm: confirmSetting.confirm,
+      params: confirmSetting.params,
+      onConfirm: confirmSetting.onConfirm,
+      onCancel: confirmSetting.onCancel
+    })]
+  });
+}
+DeleteDomainAlias.propTypes = {
+  id: PropTypes.string.isRequired,
+  domain: PropTypes.string.isRequired,
+  children: PropTypes.any,
+  teamDid: PropTypes.string
+};
+DeleteDomainAlias.defaultProps = {
+  children: null,
+  teamDid: ''
+};