@abtnode/ux 1.16.27-beta-d1555a79 → 1.16.27-beta-595ed831

package/lib/blocklet/component/related-components-dialog.js

@@ -137,6 +137,7 @@ export default function RelatedComponentsDialog({
                 }
               },
               onClick: () => {
+                // FIXME: @zhanghan 不能使用 homepage 来获得最终地址
                 window.open(`${component.bundleSource?.store || component.meta.homepage}/blocklets/${component.meta.did}`, '_blank');
               },
               children: [component.meta.title, /*#__PURE__*/_jsx(Box, {

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

@@ -8,13 +8,16 @@ import Link from '@mui/material/Link';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import { ErrorBoundary } from 'react-error-boundary';
 import InnerList from '@blocklet/list';
+import UpgradeIcon from '@mui/icons-material/Upgrade';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Blocklet, { ActionButton } from '@arcblock/ux/lib/Blocklet';
 import Spinner from '@mui/material/CircularProgress';
 import Button from '@arcblock/ux/lib/Button';
+import semver from 'semver';
 import { isFreeBlocklet } from '@blocklet/meta/lib/util';
 import Toast from '@arcblock/ux/lib/Toast';
 import { formatRegistryLogoPath } from '../../util';
+import { useBlockletContext } from '../../contexts/blocklet';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getStoreDetail = (meta, endpoint) => {
   return joinUrl(endpoint, `/blocklets/${meta.did}`);
@@ -55,7 +58,6 @@ function BlockletItem({
     }
     return true;
   };
-  const btnTxt = requirePurchase(blocklet) ? t('common.purchase') : t('blocklet.component.choose');
   const onAction = async e => {
     e.preventDefault();
     e.stopPropagation();
@@ -72,6 +74,40 @@ function BlockletItem({
       setLoading(false);
     }
   };
+  const {
+    blocklet: pageBlocklet
+  } = useBlockletContext();
+  const getCurrentVersion = () => {
+    const exist = (pageBlocklet?.children || []).find(x => x.meta.bundleDid === blocklet.did);
+    const currentVersion = exist.meta.version;
+    return currentVersion;
+  };
+  const getInstallOrUpgrade = () => {
+    const exist = (pageBlocklet?.children || []).find(x => x.meta.bundleDid === blocklet.did);
+    if (exist) {
+      try {
+        const currentVersion = exist.meta.version;
+        const targetVersion = blocklet.version;
+        if (semver.gt(targetVersion, currentVersion)) {
+          return 'upgrade';
+        }
+      } catch {
+        // 如果比对版本报错，则还是允许安装
+        return 'install';
+      }
+      return 'disable';
+    }
+    return 'install';
+  };
+  const actionType = getInstallOrUpgrade();
+  let btnTxt = t('blocklet.component.choose');
+  if (actionType === 'upgrade') {
+    btnTxt = t('blocklet.component.upgrade');
+  } else if (actionType === 'disable') {
+    btnTxt = t('blocklet.component.installed');
+  } else if (requirePurchase(blocklet)) {
+    btnTxt = t('common.purchase');
+  }
   return /*#__PURE__*/_jsx(Link, {
     href: getStoreDetail(blocklet, endpoint),
     style: {
@@ -100,21 +136,26 @@ function BlockletItem({
           alignItems: 'center'
         },
         children: /*#__PURE__*/_jsx(ActionButton, {
-          children: /*#__PURE__*/_jsx(Button, {
+          children: /*#__PURE__*/_jsxs(Button, {
             onClick: onAction,
             size: "small",
-            disabled: loading,
+            disabled: loading || actionType === 'disable',
             variant: "outlined",
             color: "primary",
             "data-cy": "install-blocklet",
-            children: loading ? /*#__PURE__*/_jsxs(_Fragment, {
+            title: actionType === 'upgrade' ? `${getCurrentVersion()} -> ${blocklet.version}` : '',
+            children: [loading ? /*#__PURE__*/_jsxs(_Fragment, {
               children: [/*#__PURE__*/_jsx(Spinner, {
                 size: 16,
                 style: {
                   marginRight: 3
                 }
               }), btnTxt]
-            }) : btnTxt
+            }) : btnTxt, actionType === 'upgrade' ? /*#__PURE__*/_jsx(UpgradeIcon, {
+              style: {
+                fontSize: '1.2rem'
+              }
+            }) : null]
           }, blocklet.did)
         })
       })
@@ -142,6 +183,7 @@ export default function BlockletList({
   resourceType,
   resourceDid,
   showResourcesSwitch,
+  showCategory,
   ...rest
 }) {
   const {
@@ -175,6 +217,7 @@ export default function BlockletList({
     children: /*#__PURE__*/_jsx("div", {
       ...rest,
       children: initialized && /*#__PURE__*/_jsx(InnerList, {
+        showCategory: showCategory,
         showResourcesSwitch: showResourcesSwitch,
         blockletRender: blockletRenderProps => {
           const defaultProps = {
@@ -211,7 +254,8 @@ BlockletList.propTypes = {
   serverVersion: PropTypes.string,
   resourceType: PropTypes.string,
   resourceDid: PropTypes.string,
-  showResourcesSwitch: PropTypes.bool
+  showResourcesSwitch: PropTypes.bool,
+  showCategory: PropTypes.bool
 };
 BlockletList.defaultProps = {
   handleButtonClick: null,
@@ -221,7 +265,8 @@ BlockletList.defaultProps = {
   serverVersion: '',
   resourceType: '',
   resourceDid: '',
-  showResourcesSwitch: true
+  showResourcesSwitch: true,
+  showCategory: true
 };
 const StyledBlocklet = styled(Blocklet)`
   .ms-highlight {

package/lib/blocklet/publish/connect-store-list.js

@@ -19,7 +19,8 @@ function ConnectStoreList({
   onPublish,
   onDelete,
   projectType,
-  componentDid
+  componentDid,
+  onOpenConnectStore
 }) {
   const {
     t
@@ -50,7 +51,8 @@ function ConnectStoreList({
           published: publishedStoreIds?.indexOf(x.id) > -1,
           connectedStore: connectedMap[x.id],
           onPublish: onPublish,
-          onDelete: onDelete
+          onDelete: onDelete,
+          onOpenConnectStore: onOpenConnectStore
         })
       })
     }, x.url)), !!storeList?.length && /*#__PURE__*/_jsx(Alert, {
@@ -89,13 +91,15 @@ ConnectStoreList.propTypes = {
   publishedStoreIds: PropTypes.arrayOf(PropTypes.string),
   connectedStores: PropTypes.arrayOf(PropTypes.object).isRequired,
   projectType: PropTypes.string,
-  componentDid: PropTypes.string
+  componentDid: PropTypes.string,
+  onOpenConnectStore: PropTypes.func
 };
 ConnectStoreList.defaultProps = {
   projectType: '',
   componentDid: '',
   publishedStoreIds: [],
   onPublish: () => {},
-  onDelete: () => {}
+  onDelete: () => {},
+  onOpenConnectStore: () => {}
 };
 export default ConnectStoreList;

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

@@ -26,7 +26,7 @@ import Tabs from '@arcblock/ux/lib/Tabs';
 import Dialog from '@arcblock/ux/lib/Dialog';
 import Alert from '@arcblock/ux/lib/Alert';
 import { PROJECT } from '@blocklet/constant';
-import { WELLKNOWN_SERVICE_PATH_PREFIX, UNOWNED_DID, BLOCKLET_STORE } from '@abtnode/constant';
+import { WELLKNOWN_SERVICE_PATH_PREFIX, UNOWNED_DID } from '@abtnode/constant';
 import BlockletBundleAvatar from '../bundle-avatar';
 import { useNodeContext } from '../../contexts/node';
 import { useBlockletContext } from '../../contexts/blocklet';
@@ -36,8 +36,12 @@ import { formatError } from '../../util';
 import Resource, { uploadResource } from './resource';
 import SelectComponents from './select-components';
 import ConnectStoreList from './connect-store-list';
-import { createMessageId, waitGetConnectedByStudio, waitGetConnectedStore } from './wait-connect';
+import { createMessageId, waitGetConnectedByStudio, waitGetConnectedStore } from './utils/wait-connect';
 import ConnectStoreButton from './connect-store-button';
+import uploadImageToProject from './utils/upload-image-to-project';
+import useWantToConnectStore from './hooks/use-want-to-connect-store';
+import usePromiseWindowOpen from '../../hooks/use-promise-window-open';
+import StopBox from './stop-box';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const allowedFileTypes = ['image/*', '.jpg', '.jpeg', '.png', '.gif', '.svg'];
 const maxFileSize = 1024 * 1024 * 10; // 10 MB
@@ -161,9 +165,23 @@ export default function CreateRelease({
   const [initialResources, setInitialResources] = useState({});
   const [releaseUsedLast, setReleaseUsedLast] = useState(false);
   const saveSelectedEventsRef = useRef({});
-  const [_wantToConnectStore, setWantToConnectStore] = useState(null);
-  const baseStore = (blocklet?.settings?.storeList || []).find(x => x.id === BLOCKLET_STORE.id);
-  const wantToConnectStore = _wantToConnectStore || baseStore;
+  const [initLogoUrl, setInitLogoUrl] = useState('');
+  const [wantToConnectStore, setWantToConnectStore] = useWantToConnectStore(blocklet);
+  const [resourceComponentsMap, _setResourceComponentsMap] = useSetState({});
+  const dependentComponentsMode = initUrl?.searchParams.get('dependentComponentsMode');
+  const disabledSelectComponents = dependentComponentsMode === 'readonly';
+  const setResourceComponentsMap = useCallback(setter => {
+    if (disabledSelectComponents) {
+      setParams({
+        blockletComponents: []
+      });
+    }
+    _setResourceComponentsMap(setter);
+  }, [disabledSelectComponents, _setResourceComponentsMap, setParams]);
+  const openWindow = usePromiseWindowOpen({
+    onOpen: () => setLoading(true),
+    onClose: () => setLoading(false)
+  });
   const releaseId = inputReleaseId === 'create' ? params?.lastReleaseId || '' : inputReleaseId;
   const mode = inputReleaseId === 'create' ? 'create' : 'edit';
   const projectType = useMemo(() => params?.blockletComponents?.some(x => x.included) ? 'pack' : 'resource', [params?.blockletComponents]);
@@ -180,6 +198,18 @@ export default function CreateRelease({
   const [tab, setTab] = useState(tabs[0]?.value);
   const isPublished = !releaseUsedLast && release?.status === 'published';
   const readOnly = isPublished;
+  const resourceRelateComponents = useMemo(() => {
+    const result = {};
+    Object.keys(resourceComponentsMap).forEach(key => {
+      const item = resourceComponentsMap[key];
+      if (item) {
+        item.forEach(k => {
+          result[k] = true;
+        });
+      }
+    });
+    return result;
+  }, [resourceComponentsMap]);
   const getRelease = async () => {
     try {
       const res = await api.getRelease({
@@ -279,6 +309,32 @@ export default function CreateRelease({
     const _params = {
       ...params
     };
+    const componentMaps = (blocklet?.children || []).reduce((acc, curr) => {
+      acc[curr.meta.did] = true;
+      return acc;
+    }, {});
+    Object.keys(resourceRelateComponents).forEach(blockletDid => {
+      if (!componentMaps[blockletDid]) {
+        return;
+      }
+      let included = false;
+      if (!disabledSelectComponents) {
+        _params.blockletComponents.forEach(item => {
+          if (item.did === blockletDid) {
+            item.included = true;
+            item.required = true;
+            included = true;
+          }
+        });
+      }
+      if (!included) {
+        _params.blockletComponents.push({
+          did: blockletDid,
+          included: true,
+          required: true
+        });
+      }
+    });
     _params.blockletVersion = semver.valid(_params.blockletVersion);
     if (!_params.blockletVersion) {
       Toast.error('Invalid Blocklet Version');
@@ -287,6 +343,22 @@ export default function CreateRelease({
       });
       return;
     }
+    if (initLogoUrl) {
+      try {
+        const filename = await uploadImageToProject({
+          did: blocklet.meta.did,
+          projectId,
+          imageUrl: initLogoUrl
+        });
+        _params.blockletLogo = filename;
+        setParams({
+          blockletLogo: filename
+        });
+      } catch (err) {
+        Toast.error(err.message);
+        return;
+      }
+    }
     const saveKeys = Object.keys(saveSelectedEventsRef.current);
     if (!saveKeys.length) {
       Toast.error('No resource selected');
@@ -372,7 +444,7 @@ export default function CreateRelease({
   const onOpenConnectByStudio = async param => {
     const timer = setTimeout(() => {
       setLoading(false);
-    }, 6000);
+    }, 20000);
     const nextBlockletDid = await waitGetConnectedByStudio(api, param);
     setLoading(false);
     clearTimeout(timer);
@@ -389,37 +461,42 @@ export default function CreateRelease({
       Toast.error(t('blocklet.publish.errorTip.noTitle'));
       return;
     }
-    setLoading(true);
     if (!wantToConnectStore) {
       Toast.error('No store found');
       return;
     }
     const messageId = createMessageId();
-    api.connectByStudio({
-      input: {
-        did: blocklet?.meta?.did,
-        blockletTitle: params?.blockletTitle,
-        storeUrl: wantToConnectStore.url,
-        storeId: wantToConnectStore.id,
-        storeName: wantToConnectStore.name,
-        type: params?.blockletComponents?.length > 0 ? 'pack' : 'resource',
-        componentDid,
-        messageId,
-        tenantScope: initUrl?.searchParams.get('tenantScope') || ''
-      }
-    }).then(res => {
-      if (!res?.url) {
-        Toast.error('failed to connect to store');
-        return;
+    openWindow(async (newWindow, open) => {
+      try {
+        const res = await api.connectByStudio({
+          input: {
+            did: blocklet?.meta?.did,
+            blockletTitle: params?.blockletTitle,
+            storeUrl: wantToConnectStore.url,
+            storeId: wantToConnectStore.id,
+            storeName: wantToConnectStore.name,
+            type: params?.blockletComponents?.length > 0 ? 'pack' : 'resource',
+            componentDid,
+            messageId,
+            tenantScope: initUrl?.searchParams.get('tenantScope') || ''
+          }
+        });
+        if (!res?.url) {
+          Toast.error('failed to connect to store');
+          return;
+        }
+        open(res.url);
+        onOpenConnectByStudio({
+          did: blocklet?.meta?.did,
+          projectId: '',
+          messageId
+        });
+      } catch (err) {
+        const error = formatError(err);
+        Toast.error(error);
+        newWindow.document.write(error);
+        setLoading(false);
       }
-      window.open(res.url);
-      onOpenConnectByStudio({
-        did: blocklet?.meta?.did,
-        projectId: '',
-        messageId
-      });
-    }).catch(err => {
-      Toast.error(formatError(err));
     });
   };
   const handleChangeSelectedComponents = data => {
@@ -431,10 +508,11 @@ export default function CreateRelease({
     getData();
   }, [getData]);
   useEffect(() => {
-    if (mode === 'create' && initUrl) {
+    if (projectId === UNOWNED_DID && mode === 'create' && initUrl) {
+      setInitLogoUrl(initUrl.searchParams.get('logo'));
       setParams({
         blockletTitle: initUrl.searchParams.get('title'),
-        blockletLogo: initUrl.searchParams.get('logo'),
+        // blockletLogo: initUrl.searchParams.get('logo'),
         blockletDescription: initUrl.searchParams.get('description'),
         blockletIntroduction: initUrl.searchParams.get('introduction'),
         blockletComponents: JSON.parse(initUrl.searchParams.get('components') || '[]'),
@@ -448,7 +526,7 @@ export default function CreateRelease({
         //
       }
     }
-  }, [setParams, initUrl, mode]);
+  }, [setParams, projectId, initUrl, mode]);
   if (!params && loading) {
     return /*#__PURE__*/_jsx(EmptySpinner, {});
   }
@@ -459,15 +537,22 @@ export default function CreateRelease({
   const uploadScreenshotPrefix = `${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/screenshot/upload`;
   const logoUrl = params?.blockletLogo ? `${uploadLogoPrefix}/${params.blockletLogo}` : `${WELLKNOWN_SERVICE_PATH_PREFIX}/static/images/logo.png`;
   const screenshotUrls = (params?.blockletScreenshots || []).filter(Boolean).map(x => `${uploadScreenshotPrefix}/${x}`);
-  const item = resourceComponents.find(x => x.meta.did === tab);
-  const resourceContent = item ? /*#__PURE__*/_jsx(Box, {
+  const resourceItem = resourceComponents.find(x => x.meta.did === tab);
+  const allResourceComponentsStop = resourceComponents.every(x => x.status !== 'running');
+  if (allResourceComponentsStop) {
+    return /*#__PURE__*/_jsx(StopBox, {
+      children: t('blocklet.publish.allComponentsNotRunning')
+    });
+  }
+  const resourceContent = resourceItem ? /*#__PURE__*/_jsx(Box, {
     children: /*#__PURE__*/_jsx(Resource, {
       initialResources: initialResources,
       saveSelectedEventsRef: saveSelectedEventsRef,
+      setResourceComponentsMap: setResourceComponentsMap,
       error: paramsErrTip.blockletResource,
       app: blocklet,
       readOnly: readOnly,
-      component: item,
+      component: resourceItem,
       initUrl: initUrl,
       projectId: projectId === UNOWNED_DID ? '' : projectId,
       releaseUsedLast: releaseUsedLast,
@@ -552,6 +637,8 @@ export default function CreateRelease({
       });
     }
   }
+  const resourcesUrlTitle = initUrl?.searchParams.get('resourcesTitle');
+  const componentsUrlTitle = initUrl?.searchParams.get('componentsTitle');
   return /*#__PURE__*/_jsxs(Main, {
     ...rest,
     children: [/*#__PURE__*/_jsxs(Box, {
@@ -574,35 +661,20 @@ export default function CreateRelease({
         })]
       }), /*#__PURE__*/_jsxs(Box, {
         display: "flex",
-        children: [!isPublished && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsxs(Button, {
-            variant: "outlined",
-            disabled: loading || createLoading,
-            onClick: () => onRelease(PROJECT.RELEASE_STATUS.draft),
-            style: {
-              marginRight: 12
-            },
-            children: [createLoading === PROJECT.RELEASE_STATUS.draft && /*#__PURE__*/_jsx(Spinner, {
-              size: 14,
-              sx: {
-                mr: 0.5
-              }
-            }), t('blocklet.publish.saveDraft')]
-          }), /*#__PURE__*/_jsxs(Button, {
-            variant: "contained",
-            disabled: loading || createLoading,
-            style: {
-              marginRight: 12
+        children: [!isPublished && /*#__PURE__*/_jsxs(Button, {
+          variant: "contained",
+          disabled: loading || createLoading,
+          style: {
+            marginRight: 12
+          },
+          onClick: () => onRelease(PROJECT.RELEASE_STATUS.published),
+          children: [createLoading === PROJECT.RELEASE_STATUS.published && /*#__PURE__*/_jsx(Spinner, {
+            size: 14,
+            sx: {
+              mr: 0.5
             },
-            onClick: () => onRelease(PROJECT.RELEASE_STATUS.published),
-            children: [createLoading === PROJECT.RELEASE_STATUS.published && /*#__PURE__*/_jsx(Spinner, {
-              size: 14,
-              sx: {
-                mr: 0.5
-              },
-              color: "inherit"
-            }), t('common.release')]
-          })]
+            color: "inherit"
+          }), t('common.release')]
         }), isPublished && /*#__PURE__*/_jsxs(_Fragment, {
           children: [installButton, /*#__PURE__*/_jsx(Button, {
             variant: "outlined",
@@ -848,7 +920,7 @@ export default function CreateRelease({
                   height: 80
                 },
                 alt: "Blocklet Logo",
-                src: logoUrl,
+                src: initLogoUrl || logoUrl,
                 onClick: () => !readOnly && uploaderLogoRef.current.open()
               })
             })]
@@ -903,13 +975,13 @@ export default function CreateRelease({
             })]
           })]
         }), /*#__PURE__*/_jsx(UploaderComponent, {
-          id: "\u200Buploader-logo",
           ref: uploaderLogoRef,
           popup: true,
           onUploadFinish: result => {
             setParams({
               blockletLogo: result.data.filename
             });
+            setInitLogoUrl('');
             uploaderLogoRef.current.close();
           },
           plugins: ['ImageEditor'],
@@ -928,7 +1000,6 @@ export default function CreateRelease({
             }
           }
         }, "uploader-logo"), /*#__PURE__*/_jsx(UploaderComponent, {
-          id: "\u200Buploader-screenshot",
           ref: uploaderScreenshotRef,
           popup: true,
           onUploadFinish: result => {
@@ -960,13 +1031,13 @@ export default function CreateRelease({
           className: "left",
           children: /*#__PURE__*/_jsx(Typography, {
             variant: "h3",
-            children: t('blocklet.publish.resourceTitle')
+            children: resourcesUrlTitle || t('blocklet.publish.resourceTitle')
           })
         }), /*#__PURE__*/_jsxs(Box, {
           sx: {
             flex: 1
           },
-          children: [/*#__PURE__*/_jsx(Tabs, {
+          children: [!componentDid && /*#__PURE__*/_jsx(Tabs, {
             tabs: tabs,
             current: tab,
             onChange: onTabChange,
@@ -986,7 +1057,7 @@ export default function CreateRelease({
           className: "left",
           children: /*#__PURE__*/_jsx(Typography, {
             variant: "h3",
-            children: t('common.components')
+            children: componentsUrlTitle || t('common.components')
           })
         }), /*#__PURE__*/_jsx(Box, {
           sx: {
@@ -996,7 +1067,9 @@ export default function CreateRelease({
             disabled: loading || readOnly,
             app: blocklet,
             value: params?.blockletComponents || [],
-            onChange: handleChangeSelectedComponents
+            onChange: handleChangeSelectedComponents,
+            resourceRelateComponents: resourceRelateComponents,
+            dependentComponentsMode: dependentComponentsMode
           })
         })]
       }), /*#__PURE__*/_jsx(Alert, {

package/lib/blocklet/publish/hooks/use-want-to-connect-store.js

@@ -0,0 +1,21 @@
+import { BLOCKLET_STORE } from '@abtnode/constant';
+import { useCallback, useMemo, useState } from 'react';
+const LOCAL_STORAGE_KEY = 'lastWantToConnectStoreId';
+function useWantToConnectStore(blocklet) {
+  const [_wantToConnectStore, _setWantToConnectStore] = useState(null);
+  const setWantToConnectStore = useCallback(x => {
+    _setWantToConnectStore(x);
+    localStorage.setItem(LOCAL_STORAGE_KEY, x?.id);
+  }, [_setWantToConnectStore]);
+  const baseStore = useMemo(() => {
+    const lastStoreId = localStorage.getItem(LOCAL_STORAGE_KEY);
+    const lastStore = lastStoreId ? (blocklet?.settings?.storeList || []).find(x => x.id === lastStoreId) : null;
+    if (lastStore) {
+      return lastStore;
+    }
+    return (blocklet?.settings?.storeList || []).find(x => x.id === BLOCKLET_STORE.id);
+  }, [blocklet?.settings?.storeList]);
+  const wantToConnectStore = _wantToConnectStore || baseStore;
+  return [wantToConnectStore, setWantToConnectStore];
+}
+export default useWantToConnectStore;