@abtnode/ux 1.16.15-beta-58d50c9a → 1.16.15-beta-e143b1cf

package/es/actions.js

@@ -12,6 +12,7 @@ import { createElement as _createElement } from "react";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function Actions({
   actions,
+  size,
   ...props
 }) {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -40,7 +41,7 @@ export default function Actions({
       "aria-haspopup": "true",
       "data-cy": "actions-menu-icon",
       onClick: onOpen,
-      size: "small",
+      size: size,
       children: /*#__PURE__*/_jsx(MoreHorizIcon, {})
     }), /*#__PURE__*/_jsx(Menu, {
       id: "actions-menu",
@@ -89,9 +90,11 @@ export default function Actions({
   });
 }
 Actions.propTypes = {
-  actions: PropTypes.array
+  actions: PropTypes.array,
+  size: PropTypes.oneOf(['small', 'medium', 'large'])
 };
 Actions.defaultProps = {
-  actions: []
+  actions: [],
+  size: 'small'
 };
 const Div = styled.div``;

package/es/blocklet/component/domain-list.js

@@ -0,0 +1,274 @@
+import Button from '@arcblock/ux/lib/Button';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import React, { useMemo, useState } from 'react';
+import AddIcon from '@mui/icons-material/Add';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import useTheme from '@mui/material/styles/useTheme';
+import { encode as encodeBase32 } from '@abtnode/util/lib/base32';
+import { isDidDomain } from '@abtnode/util/lib/url-evaluation';
+import LockIcon from '@arcblock/icons/lib/LockIcon';
+import Empty from '@arcblock/ux/lib/Empty';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { isInProgress } from '@blocklet/meta/lib/util';
+import Spinner from '@mui/material/CircularProgress';
+import { useNodeContext } from '../../contexts/node';
+import { withPermission } from '../../permission';
+import { BlockletAdminRoles, getSystemDomains, sortDomains } from '../../util';
+import AddCert from '../add-cert';
+import AddDomainAlias from '../router/action/add-domain-alias';
+import DomainActions from '../router/domain-actions';
+import DomainStatus from '../router/domain-status';
+import { DomainType } from '../types';
+import { isServerless } from '../util';
+import { useBlockletContext } from '../../contexts/blocklet';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const BlockletComponent = withPermission(DomainList, 'mutate_blocklets');
+const BlockletInServiceComponent = withPermission(DomainList, '', BlockletAdminRoles);
+export default function DomainListWithPermission(props) {
+  const {
+    inService
+  } = useNodeContext();
+  const {
+    blocklet,
+    loadingRuntimeInfo
+  } = useBlockletContext();
+  let Component = BlockletComponent;
+  if (inService) {
+    Component = BlockletInServiceComponent;
+  }
+  return /*#__PURE__*/_jsx(Component, {
+    ...props,
+    blocklet: blocklet,
+    inService: inService,
+    loadingRuntimeInfo: loadingRuntimeInfo
+  });
+}
+function DomainList({
+  hasPermission,
+  blocklet,
+  loadingRuntimeInfo,
+  inService
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const [showAllDomains, setShowAllDomains] = useState(false);
+  const theme = useTheme();
+  const hasMutatePermission = useMemo(() => {
+    let res = hasPermission;
+    if (isServerless(blocklet)) {
+      res = res && inService;
+    }
+    return res;
+  }, [hasPermission, inService, blocklet]);
+  const {
+    site
+  } = blocklet;
+  const domains = useMemo(() => sortDomains(blocklet.site?.domainAliases), [blocklet.site?.domainAliases]);
+  const displayDomains = [];
+  const hiddenDomains = [];
+  const pidBase32 = encodeBase32(blocklet.appPid);
+  const systemDomains = getSystemDomains(domains);
+  domains.forEach(domain => {
+    const value = domain.value || '';
+    if (isDidDomain(value) && !value.startsWith(pidBase32)) {
+      hiddenDomains.push(domain);
+    } else {
+      displayDomains.push(domain);
+    }
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      className: "title first",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx(Box, {
+        children: t('common.domain')
+      }), hasMutatePermission && /*#__PURE__*/_jsx(AddDomainAlias, {
+        id: site.id,
+        title: t('router.domain.add.title'),
+        teamDid: blocklet.meta?.did,
+        systemDomains: systemDomains?.map(x => x.value),
+        children: ({
+          open
+        }) => /*#__PURE__*/_jsxs(Button, {
+          style: {
+            marginLeft: 16
+          },
+          variant: "contained",
+          color: "primary",
+          "data-cy": "add-domain-alias",
+          onClick: open,
+          disabled: isInProgress(blocklet.status),
+          children: [/*#__PURE__*/_jsx(AddIcon, {
+            style: {
+              fontSize: '1.3em',
+              marginRight: 4
+            }
+          }), t('common.add')]
+        })
+      })]
+    }), blocklet.status !== 'running' && /*#__PURE__*/_jsx(Box, {
+      mt: 1.5,
+      mb: 1.5,
+      children: /*#__PURE__*/_jsx(Alert, {
+        severity: "warning",
+        children: t('blocklet.router.noRunning')
+      })
+    }), (showAllDomains ? domains : displayDomains).map((domain, index) => /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      mt: index ? 0 : 1,
+      children: [/*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        children: [/*#__PURE__*/_jsx(DomainStatus, {
+          domain: domain,
+          filters: ['domain']
+        }, `${domain.value}-domain`), /*#__PURE__*/_jsx(Box, {
+          sx: {
+            ml: 2,
+            mr: 0.5
+          },
+          children: /*#__PURE__*/_jsx(DomainLink, {
+            domain: domain,
+            target: "_blank",
+            children: domain.value
+          })
+        }), /*#__PURE__*/_jsx(DomainStatus, {
+          domain: domain,
+          filters: ['http']
+        }, `${domain.value}-http`), hasMutatePermission && /*#__PURE__*/_jsx(AddCert, {
+          domain: domain.value,
+          domainStatus: domain.domainStatus,
+          did: blocklet.meta.did,
+          children: ({
+            open
+          }) => /*#__PURE__*/_jsx(Button, {
+            size: "small",
+            onClick: e => open(e),
+            children: t('router.cert.genLetsEncryptCert.title')
+          })
+        })]
+      }), hasMutatePermission && !domain.isProtected ? /*#__PURE__*/_jsx(DomainActions, {
+        site: site,
+        domain: domain,
+        blocklet: blocklet
+      }) : /*#__PURE__*/_jsx(Tooltip, {
+        title: t('blocklet.router.domainLockTooltip'),
+        placement: "top",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          disabled: true,
+          size: "large",
+          style: {
+            pointerEvents: 'auto',
+            // padding replace to margin, fix the tooltip position
+            paddingTop: 0,
+            paddingBottom: 0,
+            margin: '12px 0'
+          },
+          children: /*#__PURE__*/_jsx(LockIcon, {
+            style: {
+              fill: theme.palette.text.disabled
+            }
+          })
+        })
+      })]
+    }, domain.value)), hiddenDomains.length > 0 && /*#__PURE__*/_jsx("div", {
+      style: {
+        marginLeft: '20px',
+        marginTop: '12px'
+      },
+      children: /*#__PURE__*/_jsx(Button, {
+        endIcon: showAllDomains ? /*#__PURE__*/_jsx(ExpandLess, {}) : /*#__PURE__*/_jsx(ExpandMore, {}),
+        onClick: () => setShowAllDomains(!showAllDomains),
+        children: showAllDomains ? t('common.collapseAll') : t('blocklet.router.showAllDomains')
+      })
+    }), !domains.length && (loadingRuntimeInfo ? /*#__PURE__*/_jsx(Spinner, {
+      size: 16
+    }) : /*#__PURE__*/_jsx(Empty, {
+      children: t('common.empty')
+    }))]
+  });
+}
+DomainList.propTypes = {
+  hasPermission: PropTypes.bool,
+  blocklet: PropTypes.object.isRequired,
+  loadingRuntimeInfo: PropTypes.bool,
+  inService: PropTypes.bool.isRequired
+};
+DomainList.defaultProps = {
+  hasPermission: false,
+  loadingRuntimeInfo: false
+};
+function DomainLink({
+  domain,
+  children
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    href,
+    accessibility
+  } = domain;
+  if (!accessibility || accessibility.loading) {
+    return /*#__PURE__*/_jsxs(LinkDiv, {
+      children: [children, /*#__PURE__*/_jsx(Tooltip, {
+        title: t('blocklet.router.checkUrlAccessible'),
+        placement: "top-end",
+        children: /*#__PURE__*/_jsx("span", {
+          className: "status",
+          children: /*#__PURE__*/_jsx(Spinner, {
+            size: 12
+          })
+        })
+      })]
+    });
+  }
+  if (!accessibility.accessible) {
+    return /*#__PURE__*/_jsx(LinkDiv, {
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: t('blocklet.router.urlInaccessible'),
+        placement: "top-end",
+        children: /*#__PURE__*/_jsx("span", {
+          children: children
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(LinkDiv, {
+    children: /*#__PURE__*/_jsx("a", {
+      href: href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: children
+    })
+  });
+}
+DomainLink.propTypes = {
+  domain: DomainType.isRequired,
+  children: PropTypes.any.isRequired
+};
+const LinkDiv = styled.span`
+  &,
+  & > * {
+    color: #222;
+    font-size: 18px;
+  }
+
+  .status {
+    margin-left: 8px;
+  }
+`;

package/es/blocklet/configuration.js

@@ -4,32 +4,23 @@ import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import Box from '@mui/material/Box';
-import useTheme from '@mui/material/styles/useTheme';
 import Switch from '@mui/material/Switch';
 import Divider from '@mui/material/Divider';
-import AddIcon from '@mui/icons-material/Add';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Button from '@arcblock/ux/lib/Button';
-import Empty from '@arcblock/ux/lib/Empty';
-import LockIcon from '@arcblock/icons/lib/LockIcon';
 import LoopIcon from '@mui/icons-material/Loop';
 import { EVENTS } from '@abtnode/constant';
 import { BLOCKLET_CONFIGURABLE_KEY, SUPPORTED_LANGUAGES } from '@blocklet/constant';
-import { getWhoCanAccess, isInProgress } from '@blocklet/meta/lib/util';
+import { getWhoCanAccess } from '@blocklet/meta/lib/util';
 import Toast from '@arcblock/ux/lib/Toast';
 import FormTextInput from '../form/form-text-input';
 import FormSelectInput from '../form/form-select-input';
 import { useNodeContext } from '../contexts/node';
-import { isInstalling, isValidClusterSize, BlockletAdminRoles, sortDomains } from '../util';
+import { isInstalling, isValidClusterSize, BlockletAdminRoles } from '../util';
 import { enableDebug } from '../util/mode';
 import Permission, { withPermission } from '../permission';
-import AddDomainAlias from './router/action/add-domain-alias';
-import DomainStatus from './router/domain-status';
-import DomainActions from './router/domain-actions';
+import ClearCache from '../clear-cache';
 import AppSk from './preferences/app-sk';
-import AddCert from './add-cert';
 import TransferOwner from './transfer-owner';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -52,7 +43,6 @@ function BlockletEnvironment({
   const [showTransferOwner, setShowTransferOwner] = useState(false);
   const whoCanAccess = getWhoCanAccess(blocklet);
   const publicToStore = blocklet?.settings?.publicToStore;
-  const theme = useTheme();
   const disabled = loading || !hasPermission;
   const {
     inService,
@@ -66,7 +56,6 @@ function BlockletEnvironment({
   const {
     site
   } = blocklet;
-  const domains = sortDomains(site?.domainAliases);
   const clusterMode = get(blocklet.meta, 'capabilities.clusterMode', false);
   useSubscription(EVENTS.NODE_RUNTIME_INFO, res => {
     if (clusterMode) {
@@ -318,107 +307,6 @@ function BlockletEnvironment({
       className: "config-form",
       component: Divider,
       my: 3
-    }), /*#__PURE__*/_jsxs(Box, {
-      className: "config-form",
-      children: [/*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        children: [/*#__PURE__*/_jsx("div", {
-          className: "config-label",
-          children: t('common.domain')
-        }), /*#__PURE__*/_jsx(Box, {
-          display: "flex",
-          alignItems: "center",
-          children: /*#__PURE__*/_jsx(AddDomainAlias, {
-            id: site.id,
-            title: t('router.domain.add.title'),
-            teamDid: did,
-            children: ({
-              open
-            }) => /*#__PURE__*/_jsxs(Button, {
-              style: {
-                marginLeft: 16
-              },
-              variant: "contained",
-              color: "primary",
-              "data-cy": "add-domain-alias",
-              onClick: open,
-              disabled: isInProgress(blocklet.status),
-              children: [/*#__PURE__*/_jsx(AddIcon, {
-                style: {
-                  fontSize: '1.3em',
-                  marginRight: 4
-                }
-              }), t('common.add')]
-            })
-          })
-        })]
-      }), domains.map((domain, index) => /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        mt: index ? 0 : 1,
-        children: [/*#__PURE__*/_jsxs(Box, {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          children: [/*#__PURE__*/_jsx(DomainStatus, {
-            domain: domain,
-            filters: ['domain']
-          }, `${domain.value}-domain`), /*#__PURE__*/_jsx(Box, {
-            ml: 2,
-            mr: 0.5,
-            children: domain.value
-          }), /*#__PURE__*/_jsx(DomainStatus, {
-            domain: domain,
-            filters: ['http']
-          }, `${domain.value}-http`), /*#__PURE__*/_jsx("span", {
-            style: {
-              marginLeft: 12
-            }
-          }), /*#__PURE__*/_jsx(AddCert, {
-            domain: domain.value,
-            domainStatus: domain.domainStatus,
-            did: blocklet.meta.did,
-            children: ({
-              open
-            }) => /*#__PURE__*/_jsx(Button, {
-              size: "small",
-              onClick: e => open(e),
-              children: t('router.cert.genLetsEncryptCert.title')
-            })
-          })]
-        }), hasPermission && !domain.isProtected ? /*#__PURE__*/_jsx(DomainActions, {
-          site: site,
-          domain: domain,
-          blocklet: blocklet
-        }) : /*#__PURE__*/_jsx(Tooltip, {
-          title: t('blocklet.router.domainLockTooltip'),
-          placement: "top",
-          children: /*#__PURE__*/_jsx(IconButton, {
-            disabled: true,
-            size: "large",
-            style: {
-              pointerEvents: 'auto',
-              // padding replace to margin, fix the tooltip position
-              paddingTop: 0,
-              paddingBottom: 0,
-              margin: '12px 0'
-            },
-            children: /*#__PURE__*/_jsx(LockIcon, {
-              style: {
-                fill: theme.palette.text.disabled
-              }
-            })
-          })
-        })]
-      }, domain.value)), !domains.length && /*#__PURE__*/_jsx(Box, {
-        mt: 4,
-        children: /*#__PURE__*/_jsx(Empty, {
-          children: t('common.empty')
-        })
-      })]
     }), /*#__PURE__*/_jsx(Box, {
       className: "config-form",
       component: Divider,
@@ -454,10 +342,6 @@ function BlockletEnvironment({
         initialValue: (site.corsAllowedOrigins || []).join(', '),
         onSubmit: onUpdateCors
       })]
-    }), /*#__PURE__*/_jsx(Box, {
-      className: "config-form",
-      component: Divider,
-      my: 3
     }), /*#__PURE__*/_jsx(Box, {
       mb: 2,
       className: "config-label",
@@ -538,6 +422,21 @@ function BlockletEnvironment({
             onSuccess: () => setShowTransferOwner(false)
           })]
         })
+      }), /*#__PURE__*/_jsx(Box, {
+        className: "config-form",
+        mt: 2,
+        children: /*#__PURE__*/_jsxs(Box, {
+          className: "config-item",
+          children: [/*#__PURE__*/_jsxs(Box, {
+            className: "config-label",
+            children: [t('blocklet.config.clearCache.name'), /*#__PURE__*/_jsx(Box, {
+              className: "config-desc",
+              children: t('blocklet.config.clearCache.purpose')
+            })]
+          }), /*#__PURE__*/_jsx(ClearCache, {
+            teamDid: did
+          })]
+        })
       })]
     })]
   });

package/es/blocklet/overview.js

@@ -1,95 +1,26 @@
 import Button from '@arcblock/ux/lib/Button';
 import styled from '@emotion/styled';
-import PropTypes from 'prop-types';
 import React, { useState } from 'react';
-import Alert from '@mui/material/Alert';
-import Box from '@mui/material/Box';
-import Tooltip from '@mui/material/Tooltip';
-import ExpandMore from '@mui/icons-material/ExpandMore';
 import ExpandLess from '@mui/icons-material/ExpandLess';
-import { encode as encodeBase32 } from '@abtnode/util/lib/base32';
-import { isDidDomain } from '@abtnode/util/lib/url-evaluation';
-import Empty from '@arcblock/ux/lib/Empty';
+import ExpandMore from '@mui/icons-material/ExpandMore';
 import InfoRow from '@arcblock/ux/lib/InfoRow';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tag from '@arcblock/ux/lib/Tag';
 import { getDisplayName, getWhoCanAccess } from '@blocklet/meta/lib/util';
-import Spinner from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
 import { useBlockletContext } from '../contexts/blocklet';
 import { useNodeContext } from '../contexts/node';
 import DidAddress from '../did-address';
-import { formatToDatetime, getExplorerLink, sortDomains } from '../util';
-import DomainStatus from './router/domain-status';
+import { formatToDatetime, getExplorerLink } from '../util';
 import BlockletStatus from './status';
-import { DomainType } from './types';
 import { isServerless } from './util';
+import DomainListWithPermission from './component/domain-list';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const WalletType = {
   arcblock: 'ArcBlock',
   ethereum: 'Ethereum'
 };
-function DomainLink({
-  domain,
-  children
-}) {
-  const {
-    t
-  } = useLocaleContext();
-  const {
-    href,
-    accessibility
-  } = domain;
-  if (!accessibility || accessibility.loading) {
-    return /*#__PURE__*/_jsxs(LinkDiv, {
-      children: [children, /*#__PURE__*/_jsx(Tooltip, {
-        title: t('blocklet.router.checkUrlAccessible'),
-        placement: "top-end",
-        children: /*#__PURE__*/_jsx("span", {
-          className: "status",
-          children: /*#__PURE__*/_jsx(Spinner, {
-            size: 12
-          })
-        })
-      })]
-    });
-  }
-  if (!accessibility.accessible) {
-    return /*#__PURE__*/_jsx(LinkDiv, {
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: t('blocklet.router.urlInaccessible'),
-        placement: "top-end",
-        children: /*#__PURE__*/_jsx("span", {
-          children: children
-        })
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(LinkDiv, {
-    children: /*#__PURE__*/_jsx("a", {
-      href: href,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      children: children
-    })
-  });
-}
-DomainLink.propTypes = {
-  domain: DomainType.isRequired,
-  children: PropTypes.any.isRequired
-};
-const LinkDiv = styled.span`
-  &,
-  & > * {
-    color: #222;
-    font-size: 18px;
-  }
-
-  .status {
-    margin-left: 8px;
-  }
-`;
 export default function BlockletOverview() {
   const {
     t,
@@ -99,11 +30,9 @@ export default function BlockletOverview() {
     info: nodeInfo,
     inService
   } = useNodeContext();
-  const [showAllDomains, setShowAllDomains] = useState(false);
   const [showAllDIDs, setShowAllDIDs] = useState(false);
   const {
-    blocklet,
-    loadingRuntimeInfo
+    blocklet
   } = useBlockletContext();
   const {
     appDid,
@@ -195,80 +124,9 @@ export default function BlockletOverview() {
       children: row.value
     }, row.name);
   });
-  const domains = sortDomains(blocklet.site?.domainAliases);
-  const displayDomains = [];
-  const hiddenDomains = [];
-  const pidBase32 = encodeBase32(blocklet.appPid);
-  domains.forEach(domain => {
-    const value = domain.value || '';
-    if (isDidDomain(value) && !value.startsWith(pidBase32)) {
-      hiddenDomains.push(domain);
-    } else {
-      displayDomains.push(domain);
-    }
-  });
   return /*#__PURE__*/_jsxs(Div, {
     component: "div",
-    children: [/*#__PURE__*/_jsx(Box, {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      children: /*#__PURE__*/_jsx(Box, {
-        className: "title first",
-        mb: 0,
-        children: t('common.domain')
-      })
-    }), blocklet.status !== 'running' && /*#__PURE__*/_jsx(Box, {
-      mt: -2,
-      mb: 1.5,
-      children: /*#__PURE__*/_jsx(Alert, {
-        severity: "warning",
-        children: t('blocklet.router.noRunning')
-      })
-    }), (showAllDomains ? domains : displayDomains).map((domain, index) => /*#__PURE__*/_jsx(Box, {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      mt: index ? 3 : 0,
-      children: /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        children: [/*#__PURE__*/_jsx(DomainStatus, {
-          domain: domain,
-          filters: ['domain']
-        }, `${domain.value}-domain`), /*#__PURE__*/_jsx(Box, {
-          ml: 2,
-          mr: 0.5,
-          children: /*#__PURE__*/_jsx(DomainLink, {
-            domain: domain,
-            target: "_blank",
-            children: domain.value
-          })
-        }), /*#__PURE__*/_jsx(DomainStatus, {
-          domain: domain,
-          filters: ['http']
-        }, `${domain.value}-http`), /*#__PURE__*/_jsx("span", {
-          style: {
-            marginLeft: 12
-          }
-        })]
-      })
-    }, domain.value)), hiddenDomains.length > 0 && /*#__PURE__*/_jsx("div", {
-      style: {
-        marginLeft: '20px',
-        marginTop: '12px'
-      },
-      children: /*#__PURE__*/_jsx(Button, {
-        endIcon: showAllDomains ? /*#__PURE__*/_jsx(ExpandLess, {}) : /*#__PURE__*/_jsx(ExpandMore, {}),
-        onClick: () => setShowAllDomains(!showAllDomains),
-        children: showAllDomains ? t('common.collapseAll') : t('blocklet.router.showAllDomains')
-      })
-    }), !domains.length && (loadingRuntimeInfo ? /*#__PURE__*/_jsx(Spinner, {
-      size: 16
-    }) : /*#__PURE__*/_jsx(Empty, {
-      children: t('common.empty')
-    })), /*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(DomainListWithPermission, {}), /*#__PURE__*/_jsx("div", {
       className: "title",
       children: /*#__PURE__*/_jsx("span", {
         children: t('common.basicInfo')
@@ -286,6 +144,7 @@ const Div = styled(Typography)`
     font-weight: bold;
     margin-top: ${props => props.theme.spacing(5)};
     margin-bottom: ${props => props.theme.spacing(3)};
+
     &.first {
       margin-top: 0;
     }