@abtnode/ux 1.16.28-beta-8acda0e6 → 1.16.28-beta-6917161a

package/lib/blocklet/component/index.js

@@ -7,11 +7,10 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogActions from '@mui/material/DialogActions';
 import UpdateIcon from '@mui/icons-material/Update';
-import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
+import { Icon } from '@iconify/react';
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import Grid from '@mui/material/Grid';
-import Tooltip from '@mui/material/Tooltip';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -37,6 +36,7 @@ import useGetInstallComponentByUrl from '../../hooks/use-install-component-by-ur
 import ComponentCell, { StyledBadge, StyledComponentRow } from './component-cell';
 import OptionalComponentCell from './optional-component-cell';
 import AddComponentDialog from './add-component/add-component-dialog';
+import Actions from '../../actions';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function BlockletComponent({
   blocklet,
@@ -61,6 +61,8 @@ export default function BlockletComponent({
   const [updateConfirm, setUpdateConfirm] = useState(null);
   const [showSettings, setShowSettings] = useState(null);
   const [showContainer, setShowContainer] = useState(false);
+  const [showAddRule, setShowAddRule] = useState(false);
+  const [showComponentConfiguration, setShowComponentConfiguration] = useState(false);
   const [installComponentMeta, setInstallComponentMeta] = useState(null);
   const needMigration = blocklet && blocklet.structVersion !== APP_STRUCT_VERSION;
 
@@ -283,24 +285,7 @@ export default function BlockletComponent({
         children: /*#__PURE__*/_jsxs(Box, {
           display: "flex",
           alignItems: "center",
-          children: [/*#__PURE__*/_jsx(AddRule, {
-            children: ({
-              open
-            }) => /*#__PURE__*/_jsxs(Button, {
-              disabled: loading || isInProgress(blocklet.status),
-              variant: "text",
-              color: "primary",
-              "data-cy": "add-rule",
-              className: "sm-hide-icon",
-              onClick: open,
-              children: [/*#__PURE__*/_jsx(AddIcon, {
-                style: {
-                  fontSize: '1.3em',
-                  marginRight: 4
-                }
-              }), t('router.rule.add.title')]
-            })
-          }), !needMigration && /*#__PURE__*/_jsx(AddComponentButton, {
+          children: [!needMigration && /*#__PURE__*/_jsx(AddComponentButton, {
             blocklet: blocklet,
             serverVersion: info.version,
             children: ({
@@ -319,24 +304,20 @@ export default function BlockletComponent({
                 }
               }), t('blocklet.component.add')]
             })
-          }), !needMigration && /*#__PURE__*/_jsx(ComponentConfiguration, {
-            blocklet: blocklet,
-            ancestors: [],
-            children: ({
-              open
-            }) => /*#__PURE__*/_jsx(Tooltip, {
-              title: `${t('blocklet.component.container')}${t('common.config')}`,
-              children: /*#__PURE__*/_jsx(IconButton, {
-                onClick: open,
-                size: "small",
-                color: "primary",
-                children: /*#__PURE__*/_jsx(SettingsOutlinedIcon, {
-                  style: {
-                    fontSize: 18
-                  }
-                })
-              })
-            }, "config")
+          }), /*#__PURE__*/_jsx(Actions, {
+            "data-cy": "component-actions",
+            actions: [{
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: "fluent:link-20-filled"
+              }),
+              onClick: () => setShowAddRule(true),
+              text: t('router.rule.add.title'),
+              disabled: loading || isInProgress(blocklet.status)
+            }, !needMigration && {
+              icon: /*#__PURE__*/_jsx(SettingsOutlinedIcon, {}),
+              text: `${t('blocklet.component.container')}`,
+              onClick: () => setShowComponentConfiguration(true)
+            }].filter(Boolean)
           })]
         })
       })]
@@ -490,6 +471,16 @@ export default function BlockletComponent({
       blocklet: blocklet,
       showDialog: !!parseInstallComponentMeta,
       setShowDialog: () => setInstallComponentMeta(null)
+    }), showAddRule && /*#__PURE__*/_jsx(AddRule, {
+      hiddenChildren: true,
+      open: true,
+      onClose: () => setShowAddRule(false)
+    }), showComponentConfiguration && /*#__PURE__*/_jsx(ComponentConfiguration, {
+      open: true,
+      onClose: () => setShowComponentConfiguration(false),
+      hiddenChildren: true,
+      blocklet: blocklet,
+      ancestors: []
     })]
   });
 }

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

@@ -19,7 +19,7 @@ import ConnectStoreList from './connect-store-list';
 import { validateParams } from '../utils/validate-params';
 import { waitGetConnectedStore } from '../utils/wait-connect';
 import uploadImageToProject from '../utils/upload-image-to-project';
-import { uploadResource } from './resources';
+import { uploadResource } from './resource-select';
 import ClickToCopy from '../../../click-to-copy';
 import { formatError } from '../../../util';
 import { useNodeContext } from '../../../contexts/node';
@@ -44,7 +44,7 @@ function Header({
   resourceRelateComponents,
   disabledSelectComponents,
   saveSelectedEventsRef,
-  isSelectedResources,
+  hasSelectedResources,
   initLogoUrl,
   setLoading,
   releaseUsedLast,
@@ -72,7 +72,7 @@ function Header({
   const onRelease = async status => {
     const errors = validateParams({
       params,
-      isSelectedResources,
+      hasSelectedResources,
       projectId,
       status,
       t
@@ -140,32 +140,37 @@ function Header({
         return;
       }
     }
-    const saveKeys = Object.keys(saveSelectedEventsRef.current);
-    try {
-      await pAll(saveKeys.map(x => {
-        return () => {
-          const item = saveSelectedEventsRef.current[x];
-          return uploadResource({
-            api,
-            locale,
-            projectId,
-            releaseId: releaseUsedLast ? '' : releaseId,
-            appDid: blocklet.meta.did,
-            component: item.component,
-            resources: item.resources,
-            initUrl
-          });
-        };
-      }), {
-        concurrency: 2
-      });
-    } catch (err) {
-      Toast.error(err?.response?.data?.error?.message || err.message);
-      setLoading(false);
-      setParamsErrTip({
-        resources: 'Invalid save the resource'
-      });
-      return;
+    if (params.resourceFromSelect) {
+      _params.uploadedResource = '';
+      try {
+        const saveKeys = Object.keys(saveSelectedEventsRef.current);
+        await pAll(saveKeys.map(x => {
+          return () => {
+            const item = saveSelectedEventsRef.current[x];
+            return uploadResource({
+              api,
+              locale,
+              projectId,
+              releaseId: releaseUsedLast ? '' : releaseId,
+              appDid: blocklet.meta.did,
+              component: item.component,
+              resources: item.resources,
+              initUrl
+            });
+          };
+        }), {
+          concurrency: 2
+        });
+      } catch (err) {
+        Toast.error(err?.response?.data?.error?.message || err.message);
+        setLoading(false);
+        setParamsErrTip({
+          resources: 'Invalid save the resource'
+        });
+        return;
+      }
+    } else {
+      _params.blockletComponents = [];
     }
     _params.blockletTitle = (_params.blockletTitle || '').trim();
     _params.blockletDescription = (_params.blockletDescription || '').trim();
@@ -345,7 +350,7 @@ function Header({
               mr: 0.5
             },
             color: "inherit"
-          }), t('common.release')]
+          }), t('blocklet.publish.createRelease')]
         }), isPublished && /*#__PURE__*/_jsxs(_Fragment, {
           children: [installButton, /*#__PURE__*/_jsx("a", {
             href: joinURL(`${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/download/${(release.files || [])[0]}`),
@@ -406,7 +411,7 @@ Header.propTypes = {
   resourceRelateComponents: PropTypes.object.isRequired,
   disabledSelectComponents: PropTypes.bool.isRequired,
   saveSelectedEventsRef: PropTypes.object.isRequired,
-  isSelectedResources: PropTypes.bool.isRequired,
+  hasSelectedResources: PropTypes.bool.isRequired,
   initLogoUrl: PropTypes.string.isRequired,
   setLoading: PropTypes.func.isRequired,
   releaseUsedLast: PropTypes.bool.isRequired,

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

@@ -4,10 +4,10 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
 import Toast from '@arcblock/ux/lib/Toast';
 import styled from '@emotion/styled';
-import { Box, Tooltip, Typography, useMediaQuery } from '@mui/material';
+import { Box, FormControlLabel, Radio, RadioGroup, Tooltip, Typography, useMediaQuery } from '@mui/material';
 import pick from 'lodash/pick';
 import PropTypes from 'prop-types';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import useSetState from 'react-use/lib/useSetState';
 import semver from 'semver';
@@ -17,14 +17,15 @@ import { useNodeContext } from '../../../contexts/node';
 import EmptySpinner from '../../../empty-spinner';
 import { formatError } from '../../../util';
 import Blocklets from './blocklets';
-import Resources from './resources';
+import ResourceSelect from './resource-select';
 import Branding from './branding';
 import Header from './header';
 import Introduction from './introduction';
 import ReleaseStepper from './release-stepper';
 import StopBox from './stop-box';
 import Version from './version';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ResourceUpload from './resource-upload';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const addComponentTabs = ({
   tabs,
   blocklet,
@@ -52,7 +53,7 @@ const addComponentTabs = ({
   });
 };
 const pickParams = (baseParams, app) => {
-  const params = pick(baseParams, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'connectedStores', 'blockletComponents', 'lastReleaseId', 'note']);
+  const params = pick(baseParams, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'connectedStores', 'blockletComponents', 'lastReleaseId', 'uploadedResource', 'note']);
   if (!params.blockletComponents) {
     params.blockletComponents = (app.children || []).map(x => ({
       did: x.meta.did,
@@ -65,6 +66,7 @@ const pickParams = (baseParams, app) => {
       included: true
     }));
   }
+  params.resourceFromSelect = !params.uploadedResource;
   return params;
 };
 const stepsToLabel = {
@@ -100,7 +102,9 @@ export default function CreateRelease({
   const [params, setParams] = useSetState({
     blockletScreenshots: [],
     publishedStoreIds: [],
-    connectedStores: []
+    connectedStores: [],
+    uploadedResource: '',
+    resourceFromSelect: true
   });
   const [paramsErrTip, setParamsErrTip] = useSetState({});
   const [loading, setLoading] = useState(false);
@@ -272,7 +276,7 @@ export default function CreateRelease({
       }
     }
   }, [setParams, projectId, initUrl, mode]);
-  const isSelectedResources = useMemo(() => {
+  const hasSelectedResources = useMemo(() => {
     return !!Object.keys(selectedResourceIds).find(key => {
       if (selectedResourceIds[key].length) {
         return true;
@@ -339,7 +343,7 @@ export default function CreateRelease({
       resourceRelateComponents: resourceRelateComponents,
       resourceItem: resourceItem,
       saveSelectedEventsRef: saveSelectedEventsRef,
-      isSelectedResources: isSelectedResources,
+      hasSelectedResources: hasSelectedResources,
       releaseUsedLast: releaseUsedLast,
       setReleaseUsedLast: setReleaseUsedLast,
       setRelease: setRelease
@@ -361,7 +365,7 @@ export default function CreateRelease({
           steps: steps,
           viewMode: mode === 'view',
           params: params,
-          isSelectedResources: isSelectedResources,
+          hasSelectedResources: hasSelectedResources || params.uploadedResource,
           paramsErrTip: paramsErrTip,
           activeStep: activeStep,
           setActiveStep: setActiveStep,
@@ -455,17 +459,38 @@ export default function CreateRelease({
                 sx: {
                   flex: 1
                 },
-                children: [!componentDid && /*#__PURE__*/_jsx(Tabs, {
-                  tabs: tabs,
-                  current: tab,
-                  onChange: onTabChange,
-                  sx: {
-                    ml: -2,
-                    mt: -1.5,
-                    maxWidth: isMobile ? window.innerWidth - 24 : '100%'
-                  }
-                }), /*#__PURE__*/_jsx(Box, {
-                  children: /*#__PURE__*/_jsx(Resources, {
+                children: [/*#__PURE__*/_jsxs(RadioGroup, {
+                  onChange: () => setParams({
+                    resourceFromSelect: !params.resourceFromSelect
+                  }),
+                  children: [/*#__PURE__*/_jsx(FormControlLabel, {
+                    value: "select",
+                    disabled: readOnly,
+                    control: /*#__PURE__*/_jsx(Radio, {
+                      size: "small",
+                      checked: params.resourceFromSelect
+                    }),
+                    label: t('blocklet.publish.resourceSelect')
+                  }), /*#__PURE__*/_jsx(FormControlLabel, {
+                    value: "select",
+                    disabled: readOnly,
+                    control: /*#__PURE__*/_jsx(Radio, {
+                      size: "small",
+                      checked: !params.resourceFromSelect
+                    }),
+                    label: t('blocklet.publish.resourceUpload')
+                  })]
+                }), params.resourceFromSelect && /*#__PURE__*/_jsxs(_Fragment, {
+                  children: [!componentDid && /*#__PURE__*/_jsx(Tabs, {
+                    tabs: tabs,
+                    current: tab,
+                    onChange: onTabChange,
+                    sx: {
+                      ml: -2,
+                      mt: 2,
+                      maxWidth: isMobile ? window.innerWidth - 24 : '100%'
+                    }
+                  }), /*#__PURE__*/_jsx(ResourceSelect, {
                     loading: loading,
                     initialResources: initialResources,
                     saveSelectedEventsRef: saveSelectedEventsRef,
@@ -478,13 +503,21 @@ export default function CreateRelease({
                     component: resourceItem,
                     componentDid: componentDid,
                     initUrl: initUrl,
+                    params: params,
+                    setParams: setParams,
                     projectId: projectId === UNOWNED_DID ? '' : projectId,
                     releaseUsedLast: releaseUsedLast,
                     release: {
                       ...release,
                       id: releaseId
                     }
-                  })
+                  })]
+                }), !params.resourceFromSelect && /*#__PURE__*/_jsx(ResourceUpload, {
+                  app: blocklet,
+                  readOnly: readOnly,
+                  projectId: projectId === UNOWNED_DID ? '' : projectId,
+                  params: params,
+                  setParams: setParams
                 })]
               })
             })

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

@@ -8,7 +8,7 @@ export default function ReleaseStepper({
   steps,
   activeStep,
   setActiveStep,
-  isSelectedResources,
+  hasSelectedResources,
   params,
   loading,
   paramsErrTip,
@@ -37,7 +37,7 @@ export default function ReleaseStepper({
     return '';
   };
   const readOnly = viewMode || validateParams({
-    isSelectedResources,
+    hasSelectedResources,
     params,
     projectId,
     t
@@ -57,7 +57,7 @@ export default function ReleaseStepper({
       children: steps.map((step, index) => {
         const labelProps = {};
         const ok = loading || !validateParamsStep({
-          isSelectedResources,
+          hasSelectedResources,
           params,
           projectId,
           step: index,
@@ -149,7 +149,7 @@ ReleaseStepper.propTypes = {
   viewMode: PropTypes.string.isRequired,
   loading: PropTypes.bool.isRequired,
   projectId: PropTypes.string.isRequired,
-  isSelectedResources: PropTypes.bool.isRequired,
+  hasSelectedResources: PropTypes.bool.isRequired,
   paramsErrTip: PropTypes.shape({
     projectId: PropTypes.string,
     blockletVersion: PropTypes.string,

package/lib/blocklet/publish/create-release/{resources.js → resource-select.js}

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import useSetState from 'react-use/lib/useSetState';
 import { joinURL } from 'ufo';
 import { Box } from '@mui/material';
@@ -90,7 +90,7 @@ const getNodeIdDependencies = (node, nodeIds) => {
   };
   return getDependencies(node, {});
 };
-export default function Resources({
+export default function ResourceSelect({
   app,
   component,
   projectId,
@@ -257,7 +257,7 @@ export default function Resources({
     })]
   });
 }
-Resources.propTypes = {
+ResourceSelect.propTypes = {
   component: PropTypes.object.isRequired,
   app: PropTypes.object.isRequired,
   projectId: PropTypes.string.isRequired,
@@ -276,7 +276,7 @@ Resources.propTypes = {
   selectedResourceIds: PropTypes.array.isRequired,
   setSelectedResourceIds: PropTypes.func.isRequired
 };
-Resources.defaultProps = {
+ResourceSelect.defaultProps = {
   error: '',
   release: {
     id: ''

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

@@ -0,0 +1,105 @@
+import PropTypes from 'prop-types';
+import { UNOWNED_DID, WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import React, { Suspense, useRef, lazy } from 'react';
+import { Stack, Box, Button, Typography } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast/index';
+import EmptySpinner from '../../../empty-spinner';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const allowedFileTypes = ['.zip', '.gz'];
+const maxFileSize = 1024 * 1024 * 100; // 100 MB
+
+// eslint-disable-next-line import/no-unresolved
+const UploaderComponent = /*#__PURE__*/lazy(() => import('@blocklet/uploader/react').then(res => ({
+  default: res.Uploader
+})));
+export default function ResourceUpload({
+  app,
+  projectId,
+  readOnly,
+  params,
+  setParams
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const uploaderRef = useRef(null);
+  const checkCanUpload = () => {
+    if (readOnly) {
+      return false;
+    }
+    if (!projectId || projectId === UNOWNED_DID) {
+      Toast.error(t('blocklet.publish.errorTip.noFirstDid'));
+      return false;
+    }
+    return true;
+  };
+  const uploadPrefix = `${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${app.meta.did}/${projectId}/resource/upload`;
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      mt: 3
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      gutterBottom: true,
+      children: t('blocklet.publish.resourceUpload')
+    }), /*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      alignItems: "center",
+      spacing: 1,
+      sx: {
+        flex: 1,
+        cursor: readOnly ? 'default' : 'pointer'
+      },
+      children: [!!params.uploadedResource && /*#__PURE__*/_jsx(Typography, {
+        component: "a",
+        href: `${uploadPrefix}/params.uploadedResource`,
+        children: params.uploadedResource
+      }), !readOnly && /*#__PURE__*/_jsx(Button, {
+        variant: "outlined",
+        size: "small",
+        onClick: () => {
+          if (!checkCanUpload()) {
+            return;
+          }
+          uploaderRef.current?.open();
+        },
+        children: params.uploadedResource ? t('common.change') : t('common.upload')
+      })]
+    }), /*#__PURE__*/_jsx(Suspense, {
+      fallback: /*#__PURE__*/_jsx(EmptySpinner, {}),
+      children: /*#__PURE__*/_jsx(UploaderComponent, {
+        ref: uploaderRef,
+        popup: true,
+        onUploadFinish: result => {
+          setParams({
+            uploadedResource: result.data.filename
+          });
+          uploaderRef.current?.close();
+        },
+        plugins: ['ImageEditor'],
+        installerProps: {
+          disabled: true
+        },
+        apiPathProps: {
+          uploader: uploadPrefix,
+          disableMediaKitPrefix: true
+        },
+        coreProps: {
+          restrictions: {
+            allowedFileTypes,
+            maxFileSize,
+            maxNumberOfFiles: 1
+          }
+        }
+      }, "uploader-resource")
+    })]
+  });
+}
+ResourceUpload.propTypes = {
+  app: PropTypes.object.isRequired,
+  projectId: PropTypes.string.isRequired,
+  readOnly: PropTypes.bool.isRequired,
+  params: PropTypes.object.isRequired,
+  setParams: PropTypes.func.isRequired
+};
+ResourceUpload.defaultProps = {};

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

@@ -182,6 +182,9 @@ export default function ProjectList({
     name: 'blockletDid',
     options: {
       customBodyRender: did => {
+        if (!did) {
+          return null;
+        }
         return /*#__PURE__*/_jsx(DidAddress, {
           size: 14,
           compact: true,
@@ -195,6 +198,9 @@ export default function ProjectList({
     name: 'createdBy',
     options: {
       customBodyRender: did => {
+        if (!did) {
+          return null;
+        }
         return /*#__PURE__*/_jsx(DidAddress, {
           onClick: () => {
             navigate(`/.well-known/service/admin/members?did=${did}`);

package/lib/blocklet/publish/utils/validate-params.js

@@ -3,7 +3,7 @@ import { UNOWNED_DID } from '@abtnode/constant';
 import semver from 'semver';
 export const validateParams = ({
   params,
-  isSelectedResources,
+  hasSelectedResources,
   projectId,
   status,
   t
@@ -21,7 +21,7 @@ export const validateParams = ({
       message: t('blocklet.publish.errorTip.noDid')
     });
   }
-  if (!isSelectedResources) {
+  if (!params.uploadedResource && !hasSelectedResources) {
     errors.push({
       param: 'blockletResources',
       message: t('blocklet.publish.errorTip.noResource')
@@ -56,7 +56,7 @@ export const validateParams = ({
 };
 export const validateParamsStep = ({
   params,
-  isSelectedResources,
+  hasSelectedResources,
   step,
   t,
   projectId
@@ -73,7 +73,7 @@ export const validateParamsStep = ({
     }
   }
   if (step === 2) {
-    if (!isSelectedResources) {
+    if (!params.uploadedResource && !hasSelectedResources) {
       return t('blocklet.publish.errorTip.noResource');
     }
   }