@abtnode/ux 1.16.14-beta-ab7f615e → 1.16.14-beta-cb53c14b

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

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import ActionIcon from '@mui/icons-material/Delete';
+import Spinner from '@mui/material/CircularProgress';
+import MenuItem from '@mui/material/MenuItem';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../../../contexts/node';
+import { useBlockletContext } from '../../../contexts/blocklet';
+import DelConfirm from '../../../delete-confirm';
+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 DeleteRule({
+  id: ruleId,
+  from,
+  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 name = from.pathPrefix;
+  const onCancel = () => {
+    setLoading(false);
+    setConfirmSetting(null);
+  };
+  const onConfirm = async () => {
+    setLoading(true);
+    try {
+      await api.deleteRoutingRule({
+        input: {
+          id: siteId,
+          ruleId,
+          teamDid
+        }
+      });
+    } catch (error) {
+      Toast.error(error.message);
+    } finally {
+      setConfirmSetting(null);
+      setLoading(false);
+    }
+  };
+  const setting = {
+    keyName: name,
+    title: t('router.rule.delete.title'),
+    description: t('router.rule.delete.description', {
+      name: `<b>${name}</b>`
+    }),
+    confirmPlaceholder: t('router.rule.delete.confirm_desc', {
+      name
+    }),
+    confirm: t('common.delConfirm'),
+    cancel: t('router.rule.delete.cancel'),
+    onConfirm,
+    onCancel
+  };
+  const onMenuItemClick = e => {
+    e.stopPropagation();
+    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-delete-rule",
+      children: [loading ? /*#__PURE__*/_jsx(Spinner, {
+        size: 16
+      }) : /*#__PURE__*/_jsx(ActionIcon, {
+        style: {
+          fontSize: 18,
+          marginRight: 5
+        }
+      }), t('router.rule.delete.title')]
+    }), confirmSetting && /*#__PURE__*/_jsx(DelConfirm, {
+      keyName: confirmSetting.keyName,
+      title: confirmSetting.title,
+      description: confirmSetting.description,
+      confirmPlaceholder: confirmSetting.confirmPlaceholder,
+      confirm: confirmSetting.confirm,
+      cancel: confirmSetting.cancel,
+      params: confirmSetting.params,
+      onConfirm: confirmSetting.onConfirm,
+      onCancel: confirmSetting.onCancel
+    })]
+  });
+}
+DeleteRule.propTypes = {
+  id: PropTypes.string.isRequired,
+  from: PropTypes.object.isRequired,
+  children: PropTypes.any
+};
+DeleteRule.defaultProps = {
+  children: null
+};

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

@@ -0,0 +1,209 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import EditIcon from '@mui/icons-material/Edit';
+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 { ROUTING_RULE_TYPES } from '@abtnode/constant';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+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 } 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 UpdateRule({
+  id: ruleId,
+  from,
+  to,
+  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 name = from.pathPrefix;
+  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 = {
+        id: ruleId,
+        from: {
+          pathPrefix: urlPathFriendly(params.pathPrefix)
+        },
+        to: {
+          type: params.type
+        }
+      };
+      if (params.type === ROUTING_RULE_TYPES.REDIRECT) {
+        rule.to.url = params.url;
+        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.updateRoutingRule({
+        input: {
+          id: siteId,
+          rule,
+          teamDid
+        }
+      });
+    } catch (error) {
+      Toast.error(error.message);
+    } finally {
+      setLoading(false);
+      setConfirmSetting(null);
+    }
+  };
+  const setting = {
+    title: t('router.rule.update.title'),
+    // eslint-disable-next-line react/no-unstable-nested-components
+    description: (params, setParams, setError) => {
+      const setValue = value => {
+        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.helperText || t('router.rule.add.pathPrefixTip'),
+          style: {
+            marginBottom: 32
+          },
+          margin: "dense",
+          value: params.pathPrefix,
+          onChange: e => {
+            let disable = false;
+            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 helperText = t('common.slugifyHint', {
+              value: formatMountPoint(e.target.value)
+            });
+            setParams({
+              ...params,
+              pathPrefix: e.target.value,
+              helperText,
+              __disableConfirm: disable
+            });
+          }
+        }), /*#__PURE__*/_jsx(ConfigRoutingRule, {
+          params: params,
+          setParams: setValue,
+          setError: setError
+        })]
+      });
+    },
+    confirm: t('router.rule.update.confirm'),
+    cancel: t('router.rule.update.cancel'),
+    color: 'primary',
+    params: {
+      did: to.did || '',
+      pathPrefix: name === '/' ? name : name.replace(/^\/+/, '').replace(/\/+$/, ''),
+      type: to.type || ROUTING_RULE_TYPES.BLOCKLET,
+      redirectCode: to.redirectCode || 302,
+      componentId: to.componentId || '',
+      pageGroup: to.pageGroup || '',
+      url: to.url || '',
+      __disableConfirm: false
+    },
+    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-update-rule",
+      children: [loading ? /*#__PURE__*/_jsx(Spinner, {
+        size: 16
+      }) : /*#__PURE__*/_jsx(EditIcon, {
+        style: {
+          fontSize: 18,
+          marginRight: 5
+        }
+      }), t('router.rule.update.title')]
+    }), confirmSetting && /*#__PURE__*/_jsx(Confirm, {
+      title: confirmSetting.title,
+      description: confirmSetting.description,
+      confirm: confirmSetting.confirm,
+      color: confirmSetting.color,
+      cancel: confirmSetting.cancel,
+      params: confirmSetting.params,
+      onConfirm: confirmSetting.onConfirm,
+      onCancel: confirmSetting.onCancel
+    })]
+  });
+}
+UpdateRule.propTypes = {
+  id: PropTypes.string.isRequired,
+  from: PropTypes.object.isRequired,
+  to: PropTypes.object.isRequired,
+  children: PropTypes.any
+};
+UpdateRule.defaultProps = {
+  children: null
+};

package/es/blocklet/router/domain-actions.js

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Tooltip from '@mui/material/Tooltip';
+import Actions from '../../actions';
+import DeleteDomainAlias from './action/delete-domain-alias';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function DomainActions({
+  site,
+  domain,
+  blocklet
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const isCurrentDomain = domain.value === window.location.hostname;
+  return /*#__PURE__*/_jsx(Actions, {
+    "data-cy": "domain-actions",
+    actions: [
+    // eslint-disable-next-line react/no-unstable-nested-components
+    ({
+      close
+    }) => /*#__PURE__*/_jsx(DeleteDomainAlias, {
+      id: site.id,
+      domain: domain.value,
+      teamDid: blocklet?.meta?.did,
+      children: ({
+        open
+      }) => /*#__PURE__*/_jsx(Tooltip, {
+        title: isCurrentDomain ? t('blocklet.router.currentDomainTip') : '',
+        children: /*#__PURE__*/_jsx("span", {
+          children: /*#__PURE__*/_jsxs(MenuItem, {
+            disabled: domain.isProtected || isCurrentDomain,
+            dense: true,
+            onClick: e => {
+              close();
+              open(e);
+            },
+            "data-cy": "action-toggle-block",
+            children: [/*#__PURE__*/_jsx(ListItemIcon, {
+              style: {
+                minWidth: 24,
+                marginRight: 8
+              },
+              children: /*#__PURE__*/_jsx(DeleteIcon, {})
+            }), /*#__PURE__*/_jsx(ListItemText, {
+              primary: t('common.delete')
+            })]
+          }, "remove")
+        })
+      })
+    })]
+  });
+}
+DomainActions.propTypes = {
+  site: PropTypes.object.isRequired,
+  domain: PropTypes.object.isRequired,
+  blocklet: PropTypes.object.isRequired
+};
+DomainActions.defaultProps = {};

package/es/blocklet/router/domain-status.js

@@ -0,0 +1,88 @@
+import { createElement, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import HttpsIcon from '@mui/icons-material/Https';
+import Tooltip from '@mui/material/Tooltip';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import VerifiedDot from '../../dot';
+import { DomainType } from '../types';
+import { shouldCheckDomainStatus, checkIsWildcardDomain } from '../../util';
+import Certificate from '../../certificate';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DomainStatus({
+  domain,
+  filters
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    value: name,
+    domainStatus
+  } = domain;
+  if (!shouldCheckDomainStatus(name)) {
+    return null;
+  }
+  let domainIcon = null;
+  let httpsIcon = null;
+  const {
+    isHttps,
+    matchedCert
+  } = domainStatus;
+  if (!checkIsWildcardDomain(name)) {
+    const {
+      dns: {
+        resolved,
+        ip
+      } = {}
+    } = domainStatus;
+    if (resolved || ip === '127.0.0.1') {
+      domainIcon = /*#__PURE__*/_jsx(Tooltip, {
+        title: t('router.domain.verify.ok'),
+        children: /*#__PURE__*/_jsx(VerifiedDot, {
+          color: "success"
+        })
+      });
+    } else {
+      domainIcon = /*#__PURE__*/_jsx(Tooltip, {
+        title: t('router.domain.verify.notResolved'),
+        children: /*#__PURE__*/_jsx(VerifiedDot, {
+          color: "error"
+        })
+      });
+    }
+  }
+  if (isHttps) {
+    httpsIcon = /*#__PURE__*/_jsx(Certificate, {
+      certificate: matchedCert
+    });
+  } else {
+    httpsIcon = /*#__PURE__*/_jsx(Tooltip, {
+      title: t('router.domain.https.bad'),
+      children: /*#__PURE__*/_jsx(HttpsIcon, {
+        style: {
+          color: '#D0021B',
+          fontSize: 20,
+          marginLeft: 8,
+          cursor: 'pointer'
+        }
+      })
+    });
+  }
+  const items = filters.map(x => {
+    if (x === 'domain') {
+      return domainIcon;
+    }
+    if (x === 'http') {
+      return httpsIcon;
+    }
+    return null;
+  });
+  return /*#__PURE__*/createElement(Fragment, null, ...items);
+}
+DomainStatus.propTypes = {
+  domain: DomainType.isRequired,
+  filters: PropTypes.array
+};
+DomainStatus.defaultProps = {
+  filters: ['domain', 'http']
+};

package/es/blocklet/router/rule-actions.js

@@ -0,0 +1,66 @@
+/* eslint-disable react/no-unstable-nested-components */
+import PropTypes from 'prop-types';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import DeleteIcon from '@mui/icons-material/Delete';
+import LaunchIcon from '@mui/icons-material/Launch';
+import IconButton from '@mui/material/IconButton';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import Box from '@mui/material/Box';
+import { useBlockletContext } from '../../contexts/blocklet';
+import DeleteRule from './action/delete-rule';
+import UpdateRule from './action/update-rule';
+import { getBlockletUrlParams, getAccessUrl } from '../../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function RuleActions(rule) {
+  const {
+    locale
+  } = useLocaleContext();
+  const {
+    blocklet,
+    recommendedDomain: domain
+  } = useBlockletContext();
+  const href = getAccessUrl(domain, rule.from.pathPrefix, getBlockletUrlParams(blocklet, locale));
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    alignItems: "center",
+    children: [/*#__PURE__*/_jsx("a", {
+      target: "_blank",
+      href: href,
+      rel: "noopener noreferrer",
+      title: href,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        children: /*#__PURE__*/_jsx(LaunchIcon, {})
+      })
+    }), /*#__PURE__*/_jsx(UpdateRule, {
+      ...rule,
+      children: ({
+        open: o
+      }) => /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        onClick: o,
+        disabled: rule.isProtected,
+        "data-cy": "action-update-rule",
+        children: /*#__PURE__*/_jsx(SettingsOutlinedIcon, {})
+      })
+    }), /*#__PURE__*/_jsx(DeleteRule, {
+      ...rule,
+      children: ({
+        open
+      }) => /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        onClick: open,
+        disabled: rule.isProtected,
+        "data-cy": "action-delete-rule",
+        children: /*#__PURE__*/_jsx(DeleteIcon, {})
+      })
+    })]
+  });
+}
+RuleActions.propTypes = {
+  isProtected: PropTypes.bool
+};
+RuleActions.defaultProps = {
+  isProtected: false
+};