@abtnode/ux 1.16.17-beta-d282d63e → 1.16.17-beta-1cab4b42

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

@@ -4,13 +4,13 @@ import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import Breadcrumbs from '@mui/material/Breadcrumbs';
+import InputAdornment from '@mui/material/InputAdornment';
 import styled from '@emotion/styled';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Box from '@mui/material/Box';
 import Button from '@arcblock/ux/lib/Button';
 import DidConnect from '@arcblock/did-connect/lib/Connect';
 import Toast from '@arcblock/ux/lib/Toast';
-import DidAddress from '../../did-address';
 import { useNodeContext } from '../../contexts/node';
 import { useBlockletContext } from '../../contexts/blocklet';
 import { useSessionContext } from '../../contexts/session';
@@ -66,6 +66,14 @@ export default function CreateProject({
     setOpenConnect(false);
   };
   const onCreate = () => {
+    if (!blockletDid) {
+      Toast.error(t('blocklet.publish.errorTip.noDid'));
+      return;
+    }
+    if (!blockletTitle) {
+      Toast.error(t('blocklet.publish.errorTip.noTitle'));
+      return;
+    }
     setLoading(true);
     api.createProject({
       input: {
@@ -100,26 +108,29 @@ export default function CreateProject({
       style: {
         maxWidth: 500
       },
-      children: [/*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(TextField, {
+        required: true,
         sx: {
-          mb: 3
+          mb: 4
         },
-        display: "flex",
-        alignItems: "center",
-        children: [/*#__PURE__*/_jsxs(Typography, {
-          variant: "h6",
-          sx: {
-            mr: 3
-          },
-          children: ["Blocklet DID:", ' ']
-        }), blockletDid ? /*#__PURE__*/_jsx(DidAddress, {
-          size: 14,
-          responsive: true,
-          did: blockletDid
-        }) : /*#__PURE__*/_jsx(Button, {
-          onClick: () => setOpenConnect(true),
-          children: t('blocklet.publish.createBlockletDid')
-        })]
+        label: "Blocklet DID",
+        fullWidth: true,
+        readonly: true,
+        autoComplete: "off",
+        variant: "outlined",
+        onClick: () => !blockletDid && setOpenConnect(true),
+        InputProps: {
+          'data-cy': 'export-blocklet-did',
+          endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+            position: "end",
+            children: /*#__PURE__*/_jsx(Button, {
+              onClick: () => setOpenConnect(true),
+              children: t(blockletDid ? 'common.update' : 'common.create')
+            })
+          })
+        },
+        helperText: "",
+        value: blockletDid || ''
       }), openConnect && /*#__PURE__*/_jsx(DidConnect, {
         open: true,
         popup: true,
@@ -142,10 +153,11 @@ export default function CreateProject({
           success: t('blocklet.publish.connect.success')
         }
       }), /*#__PURE__*/_jsx(TextField, {
+        required: true,
         label: `Blocklet ${t('common.title')}`,
         autoComplete: "off",
         variant: "outlined",
-        inputProps: {
+        InputProps: {
           'data-cy': 'export-blocklet-title'
         },
         fullWidth: true,
@@ -173,7 +185,7 @@ export default function CreateProject({
       })]
     }), /*#__PURE__*/_jsx(Button, {
       variant: "contained",
-      disabled: loading || !blockletDid || !blockletTitle,
+      disabled: loading,
       onClick: onCreate,
       children: t('common.create')
     })]

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

@@ -12,26 +12,65 @@ import Breadcrumbs from '@mui/material/Breadcrumbs';
 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 { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Button from '@arcblock/ux/lib/Button';
 import Toast from '@arcblock/ux/lib/Toast';
-import Tabs from '@arcblock/ux/lib/Tabs';
 import Empty from '@arcblock/ux/lib/Empty';
+import Tabs from '@arcblock/ux/lib/Tabs';
 import { PROJECT } from '@blocklet/constant';
 import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
 import BlockletBundleAvatar from '../bundle-avatar';
 import { useNodeContext } from '../../contexts/node';
 import { useBlockletContext } from '../../contexts/blocklet';
 import EmptySpinner from '../../empty-spinner';
+import { formatError } from '../../util';
 import Resource from './resource';
-
-// eslint-disable-next-line import/no-unresolved
 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 allowedFileTypes = ['image/*', '.jpg', '.jpeg', '.png', '.gif', '.svg'];
+const maxFileSize = 1024 * 1024 * 10; // 10 MB
+
+// eslint-disable-next-line import/no-unresolved
 const UploaderComponent = /*#__PURE__*/lazy(() => import('@blocklet/uploader/react').then(res => ({
   default: res.Uploader
 })));
+const validateParams = (params, status, t) => {
+  const errors = [];
+  if (!params.blockletTitle) {
+    errors.push({
+      param: 'blockletTitle',
+      message: t('blocklet.publish.errorTip.noTitle')
+    });
+  }
+  if (!params.blockletVersion) {
+    errors.push({
+      param: 'blockletVersion',
+      message: t('blocklet.publish.errorTip.noVersion')
+    });
+  } else if (!semver.valid(params.blockletVersion)) {
+    errors.push({
+      param: 'blockletVersion',
+      message: 'Invalid Blocklet Version'
+    });
+  }
+  if (status === PROJECT.RELEASE_STATUS.published) {
+    if (!params.blockletDescription) {
+      errors.push({
+        param: 'blockletDescription',
+        message: t('blocklet.publish.errorTip.noDescription')
+      });
+    }
+    if (!params.note) {
+      errors.push({
+        param: 'note',
+        message: t('blocklet.publish.errorTip.noNote')
+      });
+    }
+  }
+  return errors.length ? errors : null;
+};
 const addComponentTabs = ({
   tabs,
   blocklet,
@@ -40,7 +79,6 @@ const addComponentTabs = ({
   const key = blocklet.meta.did;
   tabs.push({
     label: /*#__PURE__*/_jsxs(Box, {
-      ml: -4,
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-start",
@@ -49,7 +87,7 @@ const addComponentTabs = ({
         blocklet: blocklet,
         ancestors: ancestors
       }), /*#__PURE__*/_jsx(Box, {
-        ml: "16px",
+        ml: "4px",
         className: "text",
         children: /*#__PURE__*/_jsx(Box, {
           children: blocklet.meta.title
@@ -59,7 +97,11 @@ const addComponentTabs = ({
     value: key
   });
 };
-const pickParams = release => pick(release, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'note']);
+const pickParams = release => {
+  const params = pick(release, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'note']);
+  params.blockletScreenshots ||= [];
+  return params;
+};
 export default function CreateRelease({
   ...rest
 }) {
@@ -75,6 +117,7 @@ export default function CreateRelease({
     blocklet
   } = useBlockletContext();
   const [params, setParams] = useSetState(null);
+  const [paramsErrTip, setParamsErrTip] = useState({});
   const [loading, setLoading] = useState(false);
   const [release, setRelease] = useState(null);
   const {
@@ -85,7 +128,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.resourceExportPage);
+  const resourceComponents = (blocklet?.children || []).filter(x => x.meta.capabilities.resourceExportApi);
   resourceComponents.forEach(item => {
     addComponentTabs({
       tabs,
@@ -114,7 +157,7 @@ export default function CreateRelease({
       setParams(pickParams(data));
     }).catch(err => {
       setLoading(false);
-      Toast.error(err.message);
+      Toast.error(formatError(err));
     });
   };
   const getRelease = () => {
@@ -130,7 +173,7 @@ export default function CreateRelease({
       setRelease(res?.release);
     }).catch(err => {
       setLoading(false);
-      Toast.error(err.message);
+      Toast.error(formatError(err));
     });
   };
   const getData = () => {
@@ -150,30 +193,24 @@ export default function CreateRelease({
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const onRelease = status => {
-    if (!params.blockletTitle) {
-      Toast.error(t('blocklet.publish.errorTip.noTitle'));
-      return;
-    }
-    if (!params.blockletVersion) {
-      Toast.error(t('blocklet.publish.errorTip.noVersion'));
+    const errors = validateParams(params, status, t);
+    if (errors) {
+      Toast.error(errors.map(x => x.message).join('; '));
+      setParamsErrTip(errors.reduce((acc, x) => ({
+        ...acc,
+        [x.param]: x.message
+      }), {}));
       return;
     }
-    if (status === PROJECT.RELEASE_STATUS.published) {
-      if (!params.blockletDescription) {
-        Toast.error(t('blocklet.publish.errorTip.noDescription'));
-        return;
-      }
-      if (!params.note) {
-        Toast.error(t('blocklet.publish.errorTip.noNote'));
-        return;
-      }
-    }
     const _params = {
       ...params
     };
     _params.blockletVersion = semver.valid(_params.blockletVersion);
     if (!_params.blockletVersion) {
       Toast.error('Invalid Blocklet Version');
+      setParamsErrTip({
+        blockletVersion: 'Invalid Blocklet Version'
+      });
       return;
     }
     _params.blockletTitle = (_params.blockletTitle || '').trim();
@@ -203,7 +240,7 @@ export default function CreateRelease({
         });
       }
     }).catch(err => {
-      Toast.error(err.message);
+      Toast.error(formatError(err));
     });
   };
   if (!params && loading) {
@@ -295,56 +332,77 @@ export default function CreateRelease({
           children: [/*#__PURE__*/_jsx(TextField, {
             label: `Blocklet ${t('common.title')}`,
             placeholder: `Blocklet ${t('common.title')}`,
-            inputProps: {
+            InputProps: {
               'data-cy': 'blocklet-title',
               readOnly
             },
             autoComplete: "off",
             variant: "outlined",
             fullWidth: true,
+            required: true,
             value: params.blockletTitle || '',
             onChange: e => {
+              setParamsErrTip({
+                blockletTitle: ''
+              });
               setParams({
                 blockletTitle: e.target.value
               });
-            }
+            },
+            error: !!paramsErrTip.blockletTitle,
+            helperText: paramsErrTip.blockletTitle || ''
           }), /*#__PURE__*/_jsx(TextField, {
             label: `Blocklet ${t('common.description')}`,
             placeholder: `Blocklet ${t('common.description')}`,
-            inputProps: {
+            InputProps: {
               'data-cy': 'blocklet-description',
               readOnly
             },
+            required: true,
             autoComplete: "off",
             variant: "outlined",
             fullWidth: true,
             value: params.blockletDescription || '',
             onChange: e => {
+              setParamsErrTip({
+                blockletDescription: ''
+              });
               setParams({
                 blockletDescription: e.target.value
               });
             },
+            error: !!paramsErrTip.blockletDescription,
+            helperText: paramsErrTip.blockletDescription || '',
             sx: {
               mt: 3
             }
           }), /*#__PURE__*/_jsx(TextField, {
             label: `Blocklet ${t('common.introduction')}`,
             placeholder: `Blocklet ${t('common.introduction')}`,
-            inputProps: {
+            InputProps: {
               'data-cy': 'export-blocklet-introduction',
-              readOnly
+              readOnly,
+              endAdornment: /*#__PURE__*/_jsxs(InputAdornment, {
+                position: "end",
+                children: [params?.blockletIntroduction?.length || 0, " / ", PROJECT.MAX_INTRO_LENGTH]
+              })
             },
             autoComplete: "off",
             variant: "outlined",
             fullWidth: true,
             multiline: true,
-            rows: 4,
+            minRows: 4,
             value: params.blockletIntroduction || '',
             onChange: e => {
+              setParamsErrTip({
+                blockletIntroduction: ''
+              });
               setParams({
-                blockletIntroduction: e.target.value
+                blockletIntroduction: e.target.value.slice(0, PROJECT.MAX_INTRO_LENGTH)
               });
             },
+            error: !!paramsErrTip.blockletIntroduction,
+            helperText: paramsErrTip.blockletIntroduction || '',
             sx: {
               mt: 3
             }
@@ -363,9 +421,10 @@ export default function CreateRelease({
             flex: 1
           },
           children: [/*#__PURE__*/_jsx(TextField, {
+            required: true,
             label: `Blocklet ${t('common.version')}`,
             placeholder: `Blocklet ${t('common.version')}`,
-            inputProps: {
+            InputProps: {
               'data-cy': 'blocklet-version',
               readOnly
             },
@@ -374,27 +433,42 @@ export default function CreateRelease({
             fullWidth: true,
             value: params.blockletVersion,
             onChange: e => {
+              setParamsErrTip({
+                blockletVersion: ''
+              });
               setParams({
                 blockletVersion: e.target.value
               });
-            }
+            },
+            error: !!paramsErrTip.blockletVersion,
+            helperText: paramsErrTip.blockletVersion || ''
           }), /*#__PURE__*/_jsx(TextField, {
             label: t('blocklet.publish.releaseNote'),
             autoComplete: "off",
             variant: "outlined",
-            inputProps: {
+            InputProps: {
               'data-cy': 'release-note',
-              readOnly
+              readOnly,
+              endAdornment: /*#__PURE__*/_jsxs(InputAdornment, {
+                position: "end",
+                children: [params?.note?.length || 0, " / ", PROJECT.MAX_NOTE_LENGTH]
+              })
             },
             fullWidth: true,
             multiline: true,
-            rows: 4,
+            minRows: 4,
+            required: true,
             value: params.note,
             onChange: e => {
+              setParamsErrTip({
+                note: ''
+              });
               setParams({
-                note: e.target.value
+                note: e.target.value.slice(0, PROJECT.MAX_NOTE_LENGTH)
               });
             },
+            error: !!paramsErrTip.note,
+            helperText: paramsErrTip.note || '',
             sx: {
               mt: 3
             }
@@ -494,11 +568,19 @@ export default function CreateRelease({
             setParams({
               blockletLogo: result.data.filename
             });
+            uploaderLogoRef.current.close();
           },
-          plugins: ['ImageEditor', 'Url', 'Webcam'],
+          plugins: [],
           apiPathProps: {
             uploader: uploadLogoPrefix,
             disableMediaKitPrefix: true
+          },
+          coreProps: {
+            restrictions: {
+              allowedFileTypes,
+              maxFileSize,
+              maxNumberOfFiles: 1
+            }
           }
         }, "uploader-screenshot"), /*#__PURE__*/_jsx(UploaderComponent, {
           id: "\u200Buploader-screenshot",
@@ -510,38 +592,46 @@ export default function CreateRelease({
             setParams({
               blockletScreenshots
             });
+            uploaderScreenshotRef.current.close();
           },
-          plugins: ['ImageEditor', 'Url', 'Webcam'],
+          plugins: [],
           apiPathProps: {
             uploader: uploadScreenshotPrefix,
             disableMediaKitPrefix: true
+          },
+          coreProps: {
+            restrictions: {
+              allowedFileTypes,
+              maxFileSize,
+              maxNumberOfFiles: 5 - screenshotUrls.length
+            }
           }
         }, "uploader-screenshot")]
       }), /*#__PURE__*/_jsxs(Box, {
         display: "flex",
         mt: 3,
         className: "section full-width",
-        children: [/*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(Box, {
           className: "left",
-          children: [/*#__PURE__*/_jsx(Typography, {
+          children: /*#__PURE__*/_jsx(Typography, {
             variant: "h3",
             children: t('blocklet.publish.resourceTitle')
-          }), /*#__PURE__*/_jsx(Tabs, {
+          })
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/_jsx(Tabs, {
             tabs: tabs,
             current: tab,
-            orientation: "vertical",
             onChange: onTabChange,
             sx: {
-              width: '100%'
+              ml: -2,
+              mt: -1.5
             }
-          })]
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            flex: 1
-          },
-          children: /*#__PURE__*/_jsx(Box, {
+          }), /*#__PURE__*/_jsx(Box, {
             children: resourceContent
-          })
+          })]
         })]
       })]
     })]
@@ -607,20 +697,6 @@ const Main = styled.div`
       flex-shrink: 0;
       width: 140px;
     }
-    .MuiTabs-root {
-      margin-top: 8px;
-      transform: translateX(-16px);
-      .MuiButtonBase-root .text {
-        color: ${({
-  theme
-}) => theme.palette.text.primary};
-      }
-      .MuiButtonBase-root.Mui-selected .text {
-        color: ${({
-  theme
-}) => theme.palette.primary.main};
-      }
-    }
     .MuiTabs-indicator {
       display: none;
     }
@@ -640,4 +716,11 @@ const Main = styled.div`
       color: inherit;
     }
   }
+  .MuiInputBase-multiline .MuiInputAdornment-positionEnd {
+    align-self: flex-end;
+    .MuiTypography-root {
+      font-size: 0.8rem;
+    }
+    font-size: 0.8rem;
+  }
 `;

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

@@ -9,6 +9,8 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import Datatable from '@arcblock/ux/lib/Datatable';
 import Button from '@arcblock/ux/lib/Button';
 import Toast from '@arcblock/ux/lib/Toast';
+import Tag from '@arcblock/ux/lib/Tag';
+import RelativeTime from '@arcblock/ux/lib/RelativeTime';
 import { useBlockletContext } from '../../contexts/blocklet';
 import { useNodeContext } from '../../contexts/node';
 import EmptySpinner from '../../empty-spinner';
@@ -104,7 +106,7 @@ export default function ProjectList() {
     });
   }
   const columns = [{
-    label: t('common.name'),
+    label: 'Blocklet',
     name: 'blockletTitle',
     options: {
       customBodyRenderLite: rawIndex => {
@@ -116,7 +118,7 @@ export default function ProjectList() {
       }
     }
   }, {
-    label: t('common.address'),
+    label: 'DID',
     name: 'blockletDid',
     options: {
       customBodyRender: e => {
@@ -127,6 +129,28 @@ export default function ProjectList() {
         });
       }
     }
+  }, {
+    label: 'Version',
+    name: 'blockletVersion',
+    options: {
+      customBodyRender: value => {
+        return value ? /*#__PURE__*/_jsx(Tag, {
+          type: "success",
+          children: value
+        }) : '';
+      }
+    }
+  }, {
+    label: t('common.updatedAt'),
+    name: 'updatedAt',
+    options: {
+      customBodyRender: value => {
+        return /*#__PURE__*/_jsx(RelativeTime, {
+          value: Number(value),
+          locale: locale
+        });
+      }
+    }
   }, {
     label: t('common.actions'),
     name: 'actions',

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

@@ -16,6 +16,8 @@ import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
 import Button from '@arcblock/ux/lib/Button';
 import Toast from '@arcblock/ux/lib/Toast';
 import Tag from '@arcblock/ux/lib/Tag';
+import RelativeTime from '@arcblock/ux/lib/RelativeTime';
+import { PROJECT } from '@blocklet/constant';
 import { useBlockletContext } from '../../contexts/blocklet';
 import { useNodeContext } from '../../contexts/node';
 import EmptySpinner from '../../empty-spinner';
@@ -187,6 +189,21 @@ export default function ReleaseList() {
         });
       }
     }
+  }, {
+    label: t('common.lastPublishedAt'),
+    name: 'updatedAt',
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const release = releases[rawIndex];
+        if (release.status !== PROJECT.RELEASE_STATUS.published) {
+          return '';
+        }
+        return /*#__PURE__*/_jsx(RelativeTime, {
+          value: Number(release.updatedAt),
+          locale: locale
+        });
+      }
+    }
   }, {
     label: t('common.actions'),
     name: 'actions',
@@ -195,11 +212,15 @@ export default function ReleaseList() {
         const release = releases[rawIndex];
         return /*#__PURE__*/_jsxs(Box, {
           display: "flex",
+          alignItems: "center",
           children: [/*#__PURE__*/_jsx(IconButton, {
             color: "primary",
             "aria-label": "download",
             disabled: release.status !== 'published',
             children: release.status === 'published' ? /*#__PURE__*/_jsx("a", {
+              style: {
+                display: 'flex'
+              },
               href: joinUrl(`${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${project.id}/${release.id}/download/${(release.files || [])[0]}`),
               children: /*#__PURE__*/_jsx(DownloadIcon, {
                 sx: {