@abtnode/ux 1.16.19-beta-710018ca → 1.16.19-beta-ba354e01

package/es/blocklet/component/step-actions.js

@@ -0,0 +1,99 @@
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from './button';
+import useMobile from '../../hooks/use-mobile';
+import { hasRequiredSteps } from '../../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function StepActions({
+  blocklet,
+  onStartNow,
+  children,
+  disabled
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const isMobile = useMobile();
+  if (!blocklet || hasRequiredSteps(blocklet.meta)) {
+    return /*#__PURE__*/_jsx(Center, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsxs(Between, {
+    isMobile: isMobile,
+    children: [/*#__PURE__*/_jsx(Button, {
+      className: "start-now",
+      variant: "contained",
+      color: "primary",
+      disabled: disabled,
+      onClick: () => onStartNow(),
+      children: t('setup.startNow')
+    }), /*#__PURE__*/_jsx(Box, {
+      display: "flex",
+      alignItems: "center",
+      children: children
+    })]
+  });
+}
+StepActions.propTypes = {
+  blocklet: PropTypes.object,
+  onStartNow: PropTypes.func,
+  children: PropTypes.any,
+  disabled: PropTypes.bool
+};
+StepActions.defaultProps = {
+  blocklet: null,
+  onStartNow: () => {},
+  children: null,
+  disabled: false
+};
+const Center = styled(Box)`
+  width: 100%;
+  margin-top: auto;
+  padding-top: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .bottom-button {
+    min-width: 200px;
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    .bottom-button {
+      width: 100%;
+    }
+  }
+`;
+const Between = styled(Box)`
+  padding-top: 24px;
+  margin-top: auto;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .start-now {
+    min-width: 140px;
+  }
+  .bottom-button {
+    min-width: 120px;
+  }
+  ${props => props.theme.breakpoints.down('lg')} {
+    width: 100%;
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    .start-now {
+      min-width: inherit;
+    }
+    .bottom-button {
+      min-width: 100px;
+    }
+  }
+
+  ${props => props.isMobile} {
+    justify-content: space-between;
+    gap: '32px',
+  }}
+`;

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

@@ -53,7 +53,7 @@ export default function CreateProject({
   const [blockletDid, setBlockletDid] = useState();
   const [openConnect, setOpenConnect] = useState(false);
   const {
-    componentDid
+    componentDid = ''
   } = useParams();
   const handleCreateBlockletDidError = err => {
     Toast.error(err.message);

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, lazy, useRef } from 'react';
+import { useState, useEffect, lazy, useRef, useCallback } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 import useSetState from 'react-use/lib/useSetState';
@@ -13,6 +13,7 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import InputAdornment from '@mui/material/InputAdornment';
+import Spinner from '@mui/material/CircularProgress';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Button from '@arcblock/ux/lib/Button';
 import Toast from '@arcblock/ux/lib/Toast';
@@ -120,6 +121,7 @@ export default function CreateRelease({
   const [params, setParams] = useSetState(null);
   const [paramsErrTip, setParamsErrTip] = useState({});
   const [loading, setLoading] = useState(false);
+  const [createLoading, setCreateLoading] = useState(false);
   const [release, setRelease] = useState(null);
   const {
     api
@@ -177,7 +179,7 @@ export default function CreateRelease({
       Toast.error(formatError(err));
     });
   };
-  const getData = () => {
+  const getData = useCallback(() => {
     if (mode === 'edit') {
       if (!releaseId) {
         Toast.error('Empty release id');
@@ -188,11 +190,11 @@ export default function CreateRelease({
     if (mode === 'create') {
       getProject();
     }
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode, releaseId]);
   useEffect(() => {
     getData();
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
+  }, [getData]);
   const onRelease = status => {
     const errors = validateParams(params, status, t);
     if (errors) {
@@ -218,6 +220,8 @@ export default function CreateRelease({
     _params.blockletDescription = (_params.blockletDescription || '').trim();
     _params.blockletIntroduction = (_params.blockletIntroduction || '').trim();
     _params.note = (_params.note || '').trim();
+    setCreateLoading(status);
+    setLoading(true);
     api.createRelease({
       input: {
         ..._params,
@@ -226,21 +230,25 @@ export default function CreateRelease({
         releaseId,
         status
       }
-    }).then(() => {
+    }).then(res => {
+      setCreateLoading(false);
+      setLoading(false);
       if (status === 'draft') {
-        Toast.success('Save draft success');
-        if (mode === 'create') {
-          navigate(`../${projectId}`, {
-            replace: true
-          });
-        }
+        Toast.success(t('blocklet.publish.saveDraftSuccess'));
       } else {
-        Toast.success('Create Release success');
-        navigate(`../${projectId}`, {
+        Toast.success(t('blocklet.publish.createReleaseSuccess'));
+      }
+      if (mode === 'create') {
+        const id = res?.release?.id;
+        navigate(`../${projectId}/${id}`, {
           replace: true
         });
+      } else {
+        getRelease();
       }
     }).catch(err => {
+      setCreateLoading(false);
+      setLoading(false);
       Toast.error(formatError(err));
     });
   };
@@ -295,19 +303,30 @@ export default function CreateRelease({
       }), /*#__PURE__*/_jsxs(Box, {
         display: "flex",
         children: [!isPublished && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Button, {
+          children: [/*#__PURE__*/_jsxs(Button, {
             variant: "outlined",
-            disabled: loading,
+            disabled: loading || createLoading,
             onClick: () => onRelease(PROJECT.RELEASE_STATUS.draft),
             style: {
               marginRight: 12
             },
-            children: t('blocklet.publish.saveDraft')
-          }), /*#__PURE__*/_jsx(Button, {
+            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,
+            disabled: loading || createLoading,
             onClick: () => onRelease(PROJECT.RELEASE_STATUS.published),
-            children: t('common.release')
+            children: [createLoading === PROJECT.RELEASE_STATUS.published && /*#__PURE__*/_jsx(Spinner, {
+              size: 14,
+              sx: {
+                mr: 0.5
+              },
+              color: "inherit"
+            }), t('common.release')]
           })]
         }), isPublished && /*#__PURE__*/_jsx(Button, {
           variant: "contained",

package/es/blocklet/publish/index.js

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
 import { Routes, Route, useLocation, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
@@ -9,7 +10,9 @@ import ReleasesList from './release-list';
 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() {
+export default function BlockletPublish({
+  padding
+}) {
   const {
     blocklet
   } = useBlockletContext();
@@ -33,7 +36,12 @@ export default function BlockletPublish() {
   if (!blocklet) {
     return null;
   }
+  const style = {};
+  if (padding) {
+    style.padding = padding;
+  }
   return /*#__PURE__*/_jsx(Main, {
+    style: style,
     children: /*#__PURE__*/_jsxs(Routes, {
       children: [/*#__PURE__*/_jsx(Route, {
         path: "/",
@@ -51,7 +59,12 @@ export default function BlockletPublish() {
     })
   });
 }
-BlockletPublish.propTypes = {};
+BlockletPublish.propTypes = {
+  padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+BlockletPublish.defaultProps = {
+  padding: ''
+};
 const Main = styled(Box)`
   a {
     color: ${({

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

@@ -16,6 +16,7 @@ import { useNodeContext } from '../../contexts/node';
 import EmptySpinner from '../../empty-spinner';
 import DidAddress from '../../did-address';
 import Confirm from '../../confirm';
+import BlockletBundleAvatar from '../bundle-avatar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function ProjectList() {
@@ -65,6 +66,7 @@ export default function ProjectList() {
       setLoading(false);
       getProjects();
       Toast.success(t('common.removeSuccess'));
+      setDeleteConfirm(null);
     }).catch(err => {
       setLoading(false);
       Toast.error(err.message);
@@ -144,6 +146,35 @@ export default function ProjectList() {
         }) : '';
       }
     }
+  }, componentDid ? null : {
+    label: t('common.scope'),
+    name: 'componentDid',
+    options: {
+      customBodyRender: value => {
+        const component = (blocklet.children || []).find(x => x.meta.did === value);
+        if (!component) {
+          return '';
+        }
+        return /*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          children: [/*#__PURE__*/_jsx(BlockletBundleAvatar, {
+            size: 14,
+            blocklet: component,
+            ancestors: [blocklet]
+          }), /*#__PURE__*/_jsx(Box, {
+            ml: 0.5,
+            sx: {
+              ml: 0.5,
+              color: 'text.primary',
+              fontSize: 14
+            },
+            children: component.meta.title
+          })]
+        }, value);
+      }
+    }
   }, {
     label: t('common.updatedAt'),
     name: 'updatedAt',
@@ -176,7 +207,7 @@ export default function ProjectList() {
         });
       }
     }
-  }];
+  }].filter(Boolean);
   return /*#__PURE__*/_jsxs(Main, {
     children: [/*#__PURE__*/_jsx(Box, {
       sx: {

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

@@ -98,6 +98,7 @@ export default function ReleaseList() {
       setLoading(false);
       getReleases();
       Toast.success(t('common.removeSuccess'));
+      setDeleteConfirm(null);
     }).catch(err => {
       setLoading(false);
       Toast.error(err.message);

package/es/blocklet/publish/resource.js

@@ -1,7 +1,6 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import difference from 'lodash/difference';
 import joinUrl from 'url-join';
 import Box from '@mui/material/Box';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -24,12 +23,6 @@ const fillParent = (nodes, parentId) => {
   });
   return nodes;
 };
-const checkDiff = (a, b) => {
-  if (a.length !== b.length) {
-    return true;
-  }
-  return !!difference(a, b || []).length;
-};
 export default function Resource({
   app,
   component,
@@ -45,14 +38,12 @@ export default function Resource({
   } = useNodeContext();
   const [resources, setResources] = useState([]);
   const [selectedResourceIds, setSelectedResourceIds] = useState([]);
-  const [savedResourceIds, setSavedResourceIds] = useState([]);
   const [loading, setLoading] = useState(false);
   const releaseId = release.id;
   const readonly = release.status === 'published';
   const {
     resourceExportApi = '/'
   } = component?.meta.capabilities || {};
-  const hasDiff = useMemo(() => checkDiff(savedResourceIds, selectedResourceIds), [savedResourceIds, selectedResourceIds]);
   const urlObj = new URL(joinUrl('http://127.0.0.1', component.mountPoint, resourceExportApi || '/').replace(/\/+/g, '/'));
   urlObj.searchParams.set('projectId', projectId);
   urlObj.searchParams.set('releaseId', releaseId);
@@ -69,7 +60,6 @@ export default function Resource({
           resources: data
         }
       });
-      setSavedResourceIds(data);
     } catch (err) {
       Toast.error(err.message);
     }
@@ -109,7 +99,6 @@ export default function Resource({
     }).then(res => {
       const list = res?.resources || [];
       setSelectedResourceIds(list);
-      setSavedResourceIds(list);
     }).catch(err => {
       Toast.error(err.message);
     });
@@ -138,7 +127,7 @@ export default function Resource({
         className: "footer",
         children: /*#__PURE__*/_jsx(Button, {
           variant: "contained",
-          disabled: loading || !hasDiff,
+          disabled: loading,
           onClick: () => onSave(),
           children: t('common.save')
         })

package/es/blocklet/publish/tree.js

@@ -11,6 +11,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { Icon } from '@iconify/react';
+import Images from '../../images';
 
 // BFS algorithm to find node by his ID
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -147,6 +148,9 @@ export default function Tree({
         }), !!node.description && /*#__PURE__*/_jsx(Box, {
           className: "description",
           children: node.description
+        }), !!node.images?.length && /*#__PURE__*/_jsx(Images, {
+          className: "images",
+          data: node.images
         })]
       })
     }),

package/es/blocklet/resource-type.js

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import uniq from 'lodash/uniq';
+import upperFirst from 'lodash/upperFirst';
+import Box from '@mui/material/Box';
+import Tag from '@arcblock/ux/lib/Tag';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ResourceType({
+  blocklet,
+  ...rest
+}) {
+  const types = useMemo(() => {
+    return uniq((blocklet?.meta?.resources || []).map(x => upperFirst(x.split('.').slice(-1)[0])).filter(Boolean));
+  }, [blocklet]);
+  const style = {
+    color: '#FFF',
+    backgroundColor: '#5B9BD5',
+    marginRight: '4px'
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    display: "flex",
+    mr: "-4px",
+    ...rest,
+    children: types.map(x => /*#__PURE__*/_jsx(Tag, {
+      type: "custom",
+      style: style,
+      children: x
+    }, x))
+  });
+}
+ResourceType.propTypes = {
+  blocklet: PropTypes.object.isRequired
+};
+ResourceType.defaultProps = {};

package/es/blocklet/storage/connect-to.js

@@ -14,7 +14,7 @@ import { axios } from '../../util/api';
 import { formatError, getWebWalletUrl } from '../../util';
 import { useNodeContext } from '../../contexts/node';
 import useBlockletInfoForConnectDIDSpaces from '../../hooks/use-blocklet-info-for-connect-did-spaces';
-import { extraDIDSpacesCoreUrl, getDIDSpaceDidFromEndpoint, isValidSpaceGatewayUrl } from '../../util/spaces';
+import { extraDIDSpacesCoreUrl, getDIDSpaceDidFromEndpoint, getSpaceGatewayUrl, isValidSpaceGatewayUrl } from '../../util/spaces';
 import { useBlockletStorageContext } from '../../contexts/blocklet-storage';
 /**
  * @description
@@ -148,12 +148,8 @@ function ConnectTo({
     name,
     did
   }) => {
-    let normalizeUrl = endpoint?.replace(/\/api\/.+/, '')?.trim()?.replace(/\/$/, '');
-    if (!normalizeUrl.startsWith('http')) {
-      // eslint-disable-next-line no-param-reassign
-      normalizeUrl = `https://${normalizeUrl}`;
-    }
-    if (!(await isValidSpaceGatewayUrl(normalizeUrl))) {
+    const spaceGatewayUrl = await getSpaceGatewayUrl(endpoint);
+    if (!(await isValidSpaceGatewayUrl(spaceGatewayUrl))) {
       toast.error(t('storage.spaces.gateway.add.invalidUrl'));
       return;
     }
@@ -167,7 +163,7 @@ function ConnectTo({
     const spaceGateway = {
       name,
       did,
-      url: normalizeUrl,
+      url: spaceGatewayUrl,
       endpoint
     };
     await addSpaceGateway(spaceGateway, endpoint);
@@ -193,19 +189,19 @@ function ConnectTo({
   const handleUseSpaceGatewayConnect = async () => {
     try {
       setLoading(true);
-      const tempUrl = url.startsWith('http') ? url : `https://${url}`;
-      const fullUrl = extraDIDSpacesCoreUrl(tempUrl);
-      const spaceDid = new URL(tempUrl).searchParams.get('spaceDid');
-      if (!(await isValidSpaceGatewayUrl(fullUrl))) {
+      const spaceGatewayUrl = await getSpaceGatewayUrl(url);
+      const didSpacesCoreUrl = extraDIDSpacesCoreUrl(spaceGatewayUrl);
+      const spaceDid = new URL(spaceGatewayUrl).searchParams.get('spaceDid');
+      if (!(await isValidSpaceGatewayUrl(didSpacesCoreUrl))) {
         throw new Error(t('storage.spaces.gateway.add.invalidUrl'));
       }
       setAuthorizeConnect(preValue => ({
         ...preValue,
         open: true,
-        prefix: joinUrl(fullUrl, 'space/api/did'),
-        baseUrl: new URL(fullUrl).origin,
+        prefix: joinUrl(didSpacesCoreUrl, 'space/api/did'),
+        baseUrl: new URL(didSpacesCoreUrl).origin,
         checkFn: axios.create({
-          baseURL: joinUrl(fullUrl, 'space')
+          baseURL: joinUrl(didSpacesCoreUrl, 'space')
         }).get,
         extraParams: {
           appDid: blockletInfo.appDid,

package/es/contexts/config-space.js

@@ -0,0 +1,160 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { node } from 'prop-types';
+import { isEmpty, merge } from 'lodash';
+import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
+import { useAsyncEffect } from 'ahooks';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from './node';
+import { getSpaceGateway, getSpaceNameByEndpoint } from '../util/spaces';
+import { useBlockletContext } from './blocklet';
+import useStorageEndpoint from '../hooks/use-storage-endpoint';
+
+/**
+ * @typedef {{
+ *  did: string,
+ *  url: string,
+ *  name: string,
+ *  endpoint: string,
+ * }} SpaceGateway
+ */
+
+/**
+ * @typedef {{
+ *  loading: boolean,
+ *  spaceGateway: SpaceGateway,
+ *  deleteSpaceGateway: (spaceGateway: SpaceGateway) => void | Promise<void>,
+ *  updateSpaceGateway: (updateSpaceGateway: SpaceGateway) => void | Promise<void>,
+ *  storageEndpoint: string,
+ *  settingStorageEndpoint: (endpoint: string) => void | Promise<void>,
+ *  hasStorageEndpoint: boolean,
+ * }} ConfigSpaceContextType
+ */
+
+/** @type {import('react').Context<ConfigSpaceContextType>} */
+import { jsx as _jsx } from "react/jsx-runtime";
+const ConfigSpaceContext = /*#__PURE__*/createContext({});
+const {
+  Provider,
+  Consumer
+} = ConfigSpaceContext;
+
+/**
+ * @description
+ * @param {{
+ *  children: React.ReactNode,
+ * }} { children }
+ * @return {any}
+ */
+function ConfigSpaceProvider({
+  children
+}) {
+  const [loading, setLoading] = useState(false);
+  const [spaceGateway, setSpaceGateway] = useState(null);
+  /**
+   *  @type {{
+   *    blocklet: import('@abtnode/client').BlockletState,
+   *    actions: { refreshBlocklet: Function }
+   *  }}
+   */
+  const {
+    blocklet,
+    actions: {
+      refreshBlocklet
+    }
+  } = useBlockletContext();
+  const {
+    storageEndpoint
+  } = useStorageEndpoint();
+  const {
+    api: nodeApi
+  } = useNodeContext();
+  useAsyncEffect(async () => {
+    try {
+      setLoading(true);
+      if (isEmpty(storageEndpoint)) {
+        setSpaceGateway(null);
+        return;
+      }
+      const $spaceGateway = await getSpaceGateway(storageEndpoint);
+      setSpaceGateway($spaceGateway);
+    } catch (error) {
+      console.error(error);
+      Toast.error(error.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [storageEndpoint]);
+
+  /**
+   * @description
+   * @param {SpaceGateway} spaceGateway
+   */
+  const deleteSpaceGateway = () => {
+    setSpaceGateway(null);
+    refreshBlocklet();
+  };
+
+  /**
+   * @description
+   * @param {SpaceGateway} x
+   */
+  const updateSpaceGateway = async x => {
+    setSpaceGateway(x);
+    // eslint-disable-next-line no-use-before-define
+    await settingStorageEndpoint(x.endpoint);
+    refreshBlocklet();
+  };
+
+  /**
+   * @description
+   * @param {string} endpoint
+   */
+  const settingStorageEndpoint = async endpoint => {
+    await nodeApi.configBlocklet({
+      input: {
+        did: [blocklet.meta.did],
+        configs: [{
+          key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT,
+          value: endpoint
+        }]
+      }
+    });
+    refreshBlocklet();
+  };
+  useEffect(() => {
+    async function syncSpaceGateway() {
+      if (!spaceGateway) {
+        return;
+      }
+      const name = await getSpaceNameByEndpoint(spaceGateway.endpoint, spaceGateway.name);
+      const latestSpaceGateway = merge(spaceGateway, {
+        name
+      });
+      setSpaceGateway(latestSpaceGateway);
+    }
+    syncSpaceGateway();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const hasStorageEndpoint = Boolean(storageEndpoint && spaceGateway);
+  return /*#__PURE__*/_jsx(Provider, {
+    value: {
+      loading,
+      spaceGateway,
+      deleteSpaceGateway,
+      updateSpaceGateway,
+      storageEndpoint,
+      settingStorageEndpoint,
+      hasStorageEndpoint
+    },
+    children: children
+  });
+}
+ConfigSpaceProvider.propTypes = {
+  children: node.isRequired
+};
+ConfigSpaceProvider.defaultProps = {};
+function useConfigSpaceContext() {
+  const res = useContext(ConfigSpaceContext);
+  return res;
+}
+export { ConfigSpaceContext, ConfigSpaceProvider, Consumer as ConfigSpaceConsumer, useConfigSpaceContext };