@abtnode/ux 1.16.18-beta-7aa6be5a → 1.16.18-beta-bb4ebacc

package/es/blocklet/component/select-store.js

@@ -9,7 +9,7 @@ import Button from '@arcblock/ux/lib/Button';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import Typography from '@mui/material/Typography';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
-import { STORAGE_KEY_STORE_BLOCKLET, STORAGE_KEY_STORE_SERVER } from '../../util/constants';
+import uniqBy from 'lodash/uniqBy';
 import { useNodeContext } from '../../contexts/node';
 import { useBlockletContext } from '../../contexts/blocklet';
 import AddStore from '../../store/add';
@@ -22,7 +22,9 @@ export default function SelectStore({
   onChange,
   loading,
   children,
-  extra
+  extra,
+  stores: customStores,
+  storageKey
 }) {
   const {
     t
@@ -36,16 +38,21 @@ export default function SelectStore({
   } = useBlockletContext();
   const [open, setOpen] = useState(false);
   const storeSelectRef = useRef(null);
-  const storageKey = inService ? STORAGE_KEY_STORE_BLOCKLET : STORAGE_KEY_STORE_SERVER;
-  const [storeUrl, setStoreUrl] = useLocalStorage(storageKey);
+  const [storeUrlMem, setStoreUrlMem] = useState();
+  const [storeUrlLs, setStoreUrlLs] = useLocalStorage(storageKey || 'tmp');
+  const [storeUrl, setStoreUrl] = storageKey ? [storeUrlLs, setStoreUrlLs] : [storeUrlMem, setStoreUrlMem];
   const {
-    storeList,
+    storeList: appStoreList,
     teamDid
   } = getStoreList({
     fromBlocklet: inService,
     blocklet,
     nodeInfo
   });
+  const storeList = uniqBy([...customStores.map(x => ({
+    ...x,
+    protected: true
+  })), ...appStoreList], 'url');
   const currentRegistry = storeUrl && storeList.find(x => storeUrl === x.url) || storeList[0];
   const isServerlessMode = nodeInfo.mode === NODE_MODES.SERVERLESS;
   return /*#__PURE__*/_jsxs(_Fragment, {
@@ -134,12 +141,19 @@ SelectStore.propTypes = {
   onChange: PropTypes.func,
   loading: PropTypes.bool,
   children: PropTypes.any.isRequired,
-  extra: PropTypes.node
+  extra: PropTypes.node,
+  storageKey: PropTypes.string,
+  stores: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  }))
 };
 SelectStore.defaultProps = {
   onChange: () => {},
   loading: false,
-  extra: ''
+  extra: '',
+  stores: [],
+  storageKey: ''
 };
 const SelectStoreTitle = styled.div`
   display: flex;

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

@@ -134,25 +134,36 @@ export default function BlockletList({
   handleBlockletRender,
   extraFilter,
   serverVersion,
+  resourceType,
   ...rest
 }) {
   const {
     locale
   } = useLocaleContext();
+  const [initialized, setInitialized] = useState(false);
   const [filters, setFilters] = useState({});
   const handleChange = changeData => {
     setFilters(changeData);
   };
   const endpoint = storeUrl;
   useEffect(() => {
-    setFilters({});
-  }, [endpoint]);
+    setFilters({
+      resourceType
+    });
+  }, [endpoint, resourceType]);
+  useEffect(() => {
+    setInitialized(true);
+    setFilters({
+      resourceType
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/_jsx(ErrorBoundary, {
     FallbackComponent: ErrorFallback,
     resetKeys: [endpoint],
     children: /*#__PURE__*/_jsx("div", {
       ...rest,
-      children: /*#__PURE__*/_jsx(InnerList, {
+      children: initialized && /*#__PURE__*/_jsx(InnerList, {
         blockletRender: blockletRenderProps => {
           const defaultProps = {
             ...blockletRenderProps,
@@ -173,7 +184,8 @@ export default function BlockletList({
         onSearchSelect: handleSearchSelect,
         filters: filters,
         extraFilter: extraFilter,
-        serverVersion: serverVersion
+        serverVersion: serverVersion,
+        fetchCategoryDelay: 500
       })
     })
   });
@@ -184,14 +196,16 @@ BlockletList.propTypes = {
   handleSearchSelect: PropTypes.func,
   handleBlockletRender: PropTypes.func,
   extraFilter: PropTypes.func,
-  serverVersion: PropTypes.string
+  serverVersion: PropTypes.string,
+  resourceType: PropTypes.string
 };
 BlockletList.defaultProps = {
   handleButtonClick: null,
   handleSearchSelect: null,
   handleBlockletRender: null,
   extraFilter: undefined,
-  serverVersion: ''
+  serverVersion: '',
+  resourceType: ''
 };
 const StyledBlocklet = styled(Blocklet)`
   .ms-highlight {

package/es/blocklet/configuration.js

@@ -1,17 +1,14 @@
-import React, { useState, useContext, lazy, useRef } from 'react';
+import React, { useState, useContext } from 'react';
 import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
-import classnames from 'classnames';
-import joinUrl from 'url-join';
 import Box from '@mui/material/Box';
 import Switch from '@mui/material/Switch';
 import Divider from '@mui/material/Divider';
 import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Button from '@arcblock/ux/lib/Button';
 import LoopIcon from '@mui/icons-material/Loop';
-import Avatar from '@mui/material/Avatar';
 import { EVENTS } from '@abtnode/constant';
 import { BLOCKLET_CONFIGURABLE_KEY, SUPPORTED_LANGUAGES } from '@blocklet/constant';
 import { getWhoCanAccess } from '@blocklet/meta/lib/util';
@@ -26,18 +23,13 @@ import ClearCache from '../clear-cache';
 import AppSk from './preferences/app-sk';
 import TransferOwner from './transfer-owner';
 import useAppLogo from '../hooks/use-app-logo';
+import Uploader from './logo-uploader';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const languages = Object.keys(SUPPORTED_LANGUAGES).map(x => ({
   code: x,
   name: SUPPORTED_LANGUAGES[x].nativeName
 }));
-
-// eslint-disable-next-line import/no-unresolved
-const UploaderComponent = /*#__PURE__*/lazy(() => import('@blocklet/uploader/react').then(res => ({
-  default: res.Uploader
-})));
-const uploadPrefix = '/blocklet/logo/upload';
 function BlockletEnvironment({
   blocklet,
   onUpdate,
@@ -62,7 +54,6 @@ function BlockletEnvironment({
   const whoCanAccess = getWhoCanAccess(blocklet);
   const publicToStore = blocklet?.settings?.publicToStore;
   const disabled = loading || !hasPermission;
-  const uploaderLogoRef = useRef(null);
   const {
     logoUrl,
     rectLogoUrl,
@@ -70,20 +61,6 @@ function BlockletEnvironment({
   } = useAppLogo({
     blocklet
   });
-  const [apiPathProps, setApiPathProps] = useState();
-  const uploadLogoPrefix = joinUrl(prefix, uploadPrefix, 'square', blocklet.meta.did);
-  const uploadLogoRectPrefix = joinUrl(prefix, uploadPrefix, 'rect', blocklet.meta.did);
-  const uploadLogoFaviconPrefix = joinUrl(prefix, uploadPrefix, 'favicon', blocklet.meta.did);
-  const openUploader = uploaderPrefix => {
-    if (!hasPermission) {
-      return;
-    }
-    setApiPathProps({
-      uploader: uploaderPrefix,
-      disableMediaKitPrefix: true
-    });
-    uploaderLogoRef.current.open();
-  };
   const {
     did
   } = blocklet.meta;
@@ -269,11 +246,6 @@ function BlockletEnvironment({
       setLoading(false);
     }
   };
-  const uploaderStyle = {
-    '&::after': {
-      content: `"${t('common.switch')}"`
-    }
-  };
   return /*#__PURE__*/_jsxs(Div, {
     ...rest,
     children: [configurableEnvs.map(item => /*#__PURE__*/_jsxs(Box, {
@@ -306,19 +278,15 @@ function BlockletEnvironment({
         width: 'auto'
       },
       children: t('blocklet.config.logoSquare')
-    }), /*#__PURE__*/_jsx(Box, {
-      className: classnames('uploader-wrapper', hasPermission && 'enabled'),
-      sx: uploaderStyle,
-      onClick: () => openUploader(uploadLogoPrefix),
-      children: /*#__PURE__*/_jsx(Avatar, {
-        sx: {
-          height: 80,
-          width: 80
-        },
-        variant: "square",
-        alt: "Blocklet Logo",
-        src: logoUrl
-      })
+    }), /*#__PURE__*/_jsx(Uploader, {
+      did: blocklet.meta.did,
+      height: 80,
+      width: 80,
+      type: "square",
+      prefix: prefix,
+      url: logoUrl,
+      enabled: hasPermission,
+      headers: getSessionInHeader
     }), /*#__PURE__*/_jsx(Box, {
       className: "config-label",
       fontSize: 14,
@@ -328,17 +296,14 @@ function BlockletEnvironment({
       mb: 1.5,
       className: "config-desc",
       children: t('blocklet.config.logoRectDesc')
-    }), /*#__PURE__*/_jsx(Box, {
-      className: classnames('uploader-wrapper', hasPermission && 'enabled'),
-      sx: uploaderStyle,
-      onClick: () => openUploader(uploadLogoRectPrefix),
-      children: /*#__PURE__*/_jsx("img", {
-        alt: "Blocklet Rect Logo",
-        src: rectLogoUrl,
-        style: {
-          height: '80px'
-        }
-      })
+    }), /*#__PURE__*/_jsx(Uploader, {
+      did: blocklet.meta.did,
+      height: 80,
+      type: "rect",
+      prefix: prefix,
+      url: rectLogoUrl,
+      enabled: hasPermission,
+      headers: getSessionInHeader
     }), /*#__PURE__*/_jsx(Box, {
       className: "config-label",
       fontSize: 14,
@@ -348,41 +313,16 @@ function BlockletEnvironment({
       mb: 1.5,
       className: "config-desc",
       children: t('blocklet.config.logoFaviconDesc')
+    }), /*#__PURE__*/_jsx(Uploader, {
+      did: blocklet.meta.did,
+      height: 25,
+      width: 25,
+      type: "favicon",
+      prefix: prefix,
+      url: faviconUrl,
+      enabled: hasPermission,
+      headers: getSessionInHeader
     }), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        display: 'inline-flex',
-        cursor: hasPermission ? 'pointer' : 'default'
-      },
-      onClick: () => openUploader(uploadLogoFaviconPrefix),
-      children: /*#__PURE__*/_jsx(Avatar, {
-        variant: "square",
-        sx: {
-          width: 20,
-          height: 20
-        },
-        alt: "Blocklet Favicon Logo",
-        src: faviconUrl
-      })
-    }), /*#__PURE__*/_jsx(UploaderComponent, {
-      id: "\u200Buploader-logo",
-      ref: uploaderLogoRef,
-      popup: true,
-      onUploadFinish: () => {
-        uploaderLogoRef.current.close();
-      },
-      plugins: [],
-      apiPathProps: apiPathProps,
-      coreProps: {
-        restrictions: {
-          allowedFileTypes: ['image/*', '.jpg', '.jpeg', '.png', '.gif', '.svg'],
-          maxFileSize: 1024 * 1024 * 10,
-          maxNumberOfFiles: 1
-        }
-      },
-      tusProps: {
-        headers: getSessionInHeader
-      }
-    }, "uploader-logo"), /*#__PURE__*/_jsx(Box, {
       className: "config-form",
       children: whoCanAccess === 'all' && blocklet.source === 'registry' && /*#__PURE__*/_jsxs(Box, {
         className: "config-item",
@@ -617,34 +557,4 @@ const Div = styled.div`
   .form-item {
     margin-top: 0;
   }
-
-  .uploader-wrapper {
-    display: inline-flex;
-    position: relative;
-    font-size: 0px;
-    &.enabled {
-      cursor: pointer;
-    }
-    &::after {
-      display: none;
-    }
-    &.enabled::after {
-      display: block;
-      opacity: 0;
-      position: absolute;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.2);
-      left: 0;
-      right: 0;
-      height: 2.2em;
-      color: white;
-      text-align: center;
-      font-size: 12px;
-      line-height: 2em;
-      transition: opacity 0.3s ease;
-    }
-    &:hover::after {
-      opacity: 1;
-    }
-  }
 `;

package/es/blocklet/logo-uploader.js

@@ -0,0 +1,131 @@
+import React, { lazy, useRef } from 'react';
+import PropTypes from 'prop-types';
+import joinUrl from 'url-join';
+import styled from '@emotion/styled';
+import noop from 'lodash/noop';
+import Box from '@mui/material/Box';
+import classnames from 'classnames';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+// eslint-disable-next-line import/no-unresolved
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Uploader = /*#__PURE__*/lazy(() => import('@blocklet/uploader/react').then(res => ({
+  default: res.Uploader
+})));
+const uploadPrefix = '/blocklet/logo/upload';
+export default function LogoUploader({
+  url,
+  height,
+  width,
+  enabled,
+  type,
+  did,
+  prefix,
+  headers,
+  onUploaded
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const uploaderRef = useRef(null);
+  const onOpen = () => {
+    uploaderRef.current?.open();
+  };
+  const onFinish = () => {
+    onUploaded();
+    uploaderRef.current?.close();
+  };
+  const uploaderStyle = {
+    cursor: enabled ? 'pointer' : 'default',
+    '&::after': {
+      content: `"${t('common.switch')}"`
+    }
+  };
+  return /*#__PURE__*/_jsxs(Div, {
+    id: `uploader-${did}-${type}`,
+    children: [/*#__PURE__*/_jsx(Uploader, {
+      ref: uploaderRef,
+      popup: true,
+      onUploadFinish: onFinish,
+      plugins: ['ImageEditor'],
+      apiPathProps: {
+        uploader: joinUrl(prefix, uploadPrefix, type, did),
+        disableMediaKitPrefix: true
+      },
+      coreProps: {
+        restrictions: {
+          allowedFileTypes: ['image/*', '.jpg', '.jpeg', '.png', '.gif', '.svg'],
+          maxFileSize: 1024 * 1024 * 10,
+          maxNumberOfFiles: 1
+        }
+      },
+      tusProps: {
+        headers
+      }
+    }), /*#__PURE__*/_jsx(Box, {
+      className: classnames('uploader-wrapper', enabled && 'enabled'),
+      sx: uploaderStyle,
+      onClick: onOpen,
+      children: /*#__PURE__*/_jsx("img", {
+        alt: "Logo",
+        src: url,
+        style: {
+          height,
+          width
+        }
+      })
+    })]
+  }, `uploader-${did}-${type}`);
+}
+
+// infer props for Uploader
+LogoUploader.propTypes = {
+  url: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['square', 'rect', 'favicon']).isRequired,
+  did: PropTypes.string.isRequired,
+  prefix: PropTypes.string.isRequired,
+  headers: PropTypes.func,
+  onUploaded: PropTypes.func,
+  height: PropTypes.number,
+  width: PropTypes.any,
+  enabled: PropTypes.bool
+};
+LogoUploader.defaultProps = {
+  height: 80,
+  width: 'auto',
+  enabled: true,
+  headers: () => ({}),
+  onUploaded: noop
+};
+const Div = styled.div`
+  .uploader-wrapper {
+    display: inline-flex;
+    position: relative;
+    font-size: 0px;
+    &.enabled {
+      cursor: pointer;
+    }
+    &::after {
+      display: none;
+    }
+    &.enabled::after {
+      display: block;
+      opacity: 0;
+      position: absolute;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.2);
+      left: 0;
+      right: 0;
+      height: 2.2em;
+      color: white;
+      text-align: center;
+      font-size: 12px;
+      line-height: 2em;
+      transition: opacity 0.3s ease;
+    }
+    &:hover::after {
+      opacity: 1;
+    }
+  }
+`;

package/es/blocklet/oauth/federated-site-list.js

@@ -206,7 +206,7 @@ function FederatedSiteList({
       });
     }
     return list;
-  }, [federatedConfig.appId, federatedSites, isMaster]);
+  }, [federatedConfig.appId, federatedSites, isMaster, t]);
   const tableOptions = useCreation(() => {
     return {
       sort: true,

package/es/blocklet/publish/create-project.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
@@ -52,6 +52,9 @@ export default function CreateProject({
   } = useNodeContext();
   const [blockletDid, setBlockletDid] = useState();
   const [openConnect, setOpenConnect] = useState(false);
+  const {
+    componentDid
+  } = useParams();
   const handleCreateBlockletDidError = err => {
     Toast.error(err.message);
     setOpenConnect(false);
@@ -80,7 +83,8 @@ export default function CreateProject({
         did: blocklet.meta.did,
         blockletTitle: blockletTitle || '',
         blockletDid,
-        type
+        type,
+        componentDid
       }
     }).then(() => {
       setLoading(false);

package/es/blocklet/publish/create-release.js

@@ -108,7 +108,8 @@ export default function CreateRelease({
   const navigate = useNavigate();
   const {
     projectId,
-    releaseId: inputReleaseId
+    releaseId: inputReleaseId,
+    componentDid
   } = useParams();
   const {
     t
@@ -128,7 +129,7 @@ export default function CreateRelease({
   const releaseId = inputReleaseId === 'create' ? '' : inputReleaseId;
   const mode = inputReleaseId === 'create' ? 'create' : 'edit';
   const tabs = [];
-  const resourceComponents = (blocklet?.children || []).filter(x => x.meta.capabilities.resourceExportApi);
+  const resourceComponents = (blocklet?.children || []).filter(x => x.meta.capabilities.resourceExportApi).filter(x => !componentDid || x.meta.did === componentDid);
   resourceComponents.forEach(item => {
     addComponentTabs({
       tabs,
@@ -570,7 +571,7 @@ export default function CreateRelease({
             });
             uploaderLogoRef.current.close();
           },
-          plugins: [],
+          plugins: ['ImageEditor'],
           apiPathProps: {
             uploader: uploadLogoPrefix,
             disableMediaKitPrefix: true
@@ -594,7 +595,7 @@ export default function CreateRelease({
             });
             uploaderScreenshotRef.current.close();
           },
-          plugins: [],
+          plugins: ['ImageEditor'],
           apiPathProps: {
             uploader: uploadScreenshotPrefix,
             disableMediaKitPrefix: true

package/es/blocklet/publish/index.js

@@ -1,7 +1,8 @@
-import React from 'react';
-import { Routes, Route } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { Routes, Route, useLocation, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
+import { useBlockletContext } from '../../contexts/blocklet';
 import ProjectList from './project-list';
 import CreateProject from './create-project';
 import ReleasesList from './release-list';
@@ -9,6 +10,29 @@ import CreateRelease from './create-release';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function BlockletPublish() {
+  const {
+    blocklet
+  } = useBlockletContext();
+  const location = useLocation();
+
+  // post message to parent window when route changed
+  const {
+    componentDid
+  } = useParams();
+  useEffect(() => {
+    if (componentDid && window.parent) {
+      const path = `${location.pathname}${location.search}`;
+      window.parent.postMessage({
+        event: 'popstate',
+        page: 'publish',
+        componentDid,
+        path
+      }, '*');
+    }
+  }, [componentDid, location]);
+  if (!blocklet) {
+    return null;
+  }
   return /*#__PURE__*/_jsx(Main, {
     children: /*#__PURE__*/_jsxs(Routes, {
       children: [/*#__PURE__*/_jsx(Route, {

package/es/blocklet/publish/project-list.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Box from '@mui/material/Box';
@@ -31,11 +31,15 @@ export default function ProjectList() {
     blocklet
   } = useBlockletContext();
   const [deleteConfirm, setDeleteConfirm] = useState(null);
+  const {
+    componentDid = ''
+  } = useParams();
   const [projects, setProjects] = useState(null);
   const getProjects = () => {
     api.getProjects({
       input: {
-        did: blocklet.meta.did
+        did: blocklet.meta.did,
+        componentDid
       }
     }).then(res => {
       const list = res?.projects || [];

package/es/hooks/use-navigation.js

@@ -28,7 +28,7 @@ const injectNavigationData = {
     from: 'tmpl'
   }],
   dashboard: [{
-    id: '/access',
+    id: '/team',
     title: {
       en: 'Access',
       zh: '访问控制'

package/es/hooks/use-passport-id.js

@@ -1,11 +1,14 @@
-import useLocalStorage from 'react-use/lib/useLocalStorage';
 export default function usePassportId() {
-  const [passportId, setPassportId, clearPassportId] = useLocalStorage('passportId', '');
+  const clearPassportId = () => {
+    localStorage.removeItem('passportId');
+  };
+  const setPassportId = value => {
+    localStorage.setItem('passportId', value);
+  };
   const getPassportId = () => {
-    setTimeout(() => {
-      clearPassportId();
-    }, 0);
-    return passportId || '';
+    const passportId = localStorage.getItem('passportId') || '';
+    clearPassportId();
+    return passportId;
   };
   return {
     getPassportId,