@abtnode/ux 1.16.25-next-bc2f4c63 → 1.16.26-beta-e0056285

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, lazy, useRef, useCallback } from 'react';
+import { useState, useEffect, lazy, useRef, useCallback, useMemo } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 import useSetState from 'react-use/lib/useSetState';
@@ -14,16 +14,19 @@ 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 Dialog from '@mui/material/Dialog';
+import MaterialDialog from '@mui/material/Dialog';
+import DidConnect from '@arcblock/did-connect/lib/Connect';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Button from '@arcblock/ux/lib/Button';
 import Toast from '@arcblock/ux/lib/Toast';
 import Empty from '@arcblock/ux/lib/Empty';
 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 } from '@abtnode/constant';
+import { WELLKNOWN_SERVICE_PATH_PREFIX, UNOWNED_DID } from '@abtnode/constant';
 import BlockletBundleAvatar from '../bundle-avatar';
+import { useSessionContext } from '../../contexts/session';
 import { useNodeContext } from '../../contexts/node';
 import { useBlockletContext } from '../../contexts/blocklet';
 import EmptySpinner from '../../empty-spinner';
@@ -31,6 +34,7 @@ import ClickToCopy from '../../click-to-copy';
 import { formatError } from '../../util';
 import Resource from './resource';
 import SelectComponents from './select-components';
+import ConnectStoreList from './connect-store-list';
 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
@@ -103,13 +107,14 @@ const addComponentTabs = ({
   });
 };
 const pickParams = (release, app) => {
-  const params = pick(release, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'blockletComponents', 'note']);
+  const params = pick(release, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'blockletComponents', 'publishedStoreIds', 'note']);
   params.blockletScreenshots ||= [];
+  params.publishedStoreIds ||= [];
   if (!params.blockletComponents) {
     params.blockletComponents = (app.children || []).map(x => ({
       did: x.meta.did,
-      included: true,
-      required: true
+      included: false,
+      required: false
     }));
   } else {
     params.blockletComponents = params.blockletComponents.map(x => ({
@@ -126,11 +131,15 @@ export default function CreateRelease({
   const {
     projectId,
     releaseId: inputReleaseId,
-    componentDid
+    componentDid = ''
   } = useParams();
   const {
-    t
+    t,
+    locale
   } = useLocaleContext();
+  const {
+    api: sessionApi
+  } = useSessionContext();
   const {
     blocklet
   } = useBlockletContext();
@@ -144,10 +153,12 @@ export default function CreateRelease({
   } = useNodeContext();
   const uploaderLogoRef = useRef(null);
   const uploaderScreenshotRef = useRef(null);
-  const [projectType, setProjectType] = useState();
   const [installResourceTip, setInstallResourceTip] = useState();
+  const [openConnect, setOpenConnect] = useState(false);
+  const [showStoreDialog, setShowStoreDialog] = useState(false);
   const releaseId = inputReleaseId === 'create' ? '' : inputReleaseId;
   const mode = inputReleaseId === 'create' ? 'create' : 'edit';
+  const projectType = useMemo(() => params?.blockletComponents?.some(x => x.included) ? 'pack' : 'resource', [params?.blockletComponents]);
   const tabs = [];
   const resourceComponents = (blocklet?.children || []).filter(x => x.meta.resource?.exportApi).filter(x => !componentDid || x.meta.did === componentDid);
   resourceComponents.forEach(item => {
@@ -161,9 +172,18 @@ export default function CreateRelease({
   const [tab, setTab] = useState(tabs[0]?.value);
   const isPublished = release?.status === 'published';
   const readOnly = isPublished;
-  const getProject = ({
-    typeOnly
-  } = {}) => {
+  const getProject = () => {
+    if (projectId === UNOWNED_DID) {
+      setParams({
+        blockletVersion: '1.0.0',
+        blockletTitle: ''
+      });
+      return;
+    }
+    if (!projectId) {
+      Toast.error(t('blocklet.publish.errorTip.noDid'));
+      return;
+    }
     api.getProject({
       input: {
         did: blocklet.meta.did,
@@ -172,17 +192,16 @@ export default function CreateRelease({
     }).then(res => {
       setLoading(false);
       const data = res.project || {};
-      if (typeOnly) {
-        setProjectType(data.type);
-        return;
-      }
       if (!data.blockletVersion) {
         data.blockletVersion = '1.0.0';
       } else if (semver.valid(data.blockletVersion)) {
         data.blockletVersion = semver.inc(data.blockletVersion, 'patch');
       }
-      setParams(pickParams(data, blocklet));
-      setProjectType(data.type);
+      const theParams = pickParams(data, blocklet);
+      if (theParams.blockletTitle === projectId.slice(0, 8)) {
+        theParams.blockletTitle = '';
+      }
+      setParams(theParams);
     }).catch(err => {
       setLoading(false);
       Toast.error(formatError(err));
@@ -211,19 +230,17 @@ export default function CreateRelease({
         return;
       }
       getRelease();
-      getProject({
-        typeOnly: true
-      });
     }
     if (mode === 'create') {
       getProject();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mode, releaseId]);
-  useEffect(() => {
-    getData();
-  }, [getData]);
   const onRelease = status => {
+    if (!projectId || projectId === UNOWNED_DID) {
+      Toast.error(t('blocklet.publish.errorTip.noDid'));
+      return;
+    }
     const errors = validateParams(params, status, t);
     if (errors) {
       Toast.error(errors.map(x => x.message).join('; '));
@@ -248,11 +265,7 @@ export default function CreateRelease({
     _params.blockletDescription = (_params.blockletDescription || '').trim();
     _params.blockletIntroduction = (_params.blockletIntroduction || '').trim();
     _params.note = (_params.note || '').trim();
-    if (projectType === 'pack') {
-      _params.blockletComponents = (_params.blockletComponents || []).filter(x => x.included).map(x => pick(x, ['did', 'required'])).map(JSON.stringify);
-    } else {
-      delete _params.blockletComponents;
-    }
+    _params.blockletComponents = (_params.blockletComponents || []).filter(x => x.included).map(x => pick(x, ['did', 'required'])).map(JSON.stringify);
     setCreateLoading(status);
     setLoading(true);
     api.createRelease({
@@ -291,12 +304,96 @@ export default function CreateRelease({
       }
     });
   };
+  const handleDidConnectShow = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!params.blockletTitle) {
+      setParamsErrTip({
+        blockletTitle: t('blocklet.publish.errorTip.noTitle')
+      });
+      Toast.error(t('blocklet.publish.errorTip.noTitle'));
+      return;
+    }
+    if (!projectId || projectId === UNOWNED_DID) {
+      setOpenConnect(true);
+    }
+  };
+  const handleDidConnectClose = () => {
+    setOpenConnect(false);
+  };
+  const handleChangeSelectedComponents = data => {
+    setParams({
+      blockletComponents: data
+    });
+  };
+  const handleCreateBlockletDidError = err => {
+    Toast.error(err.message);
+    setOpenConnect(false);
+  };
+  const handleCreate = nextProjectDid => {
+    if (!nextProjectDid) {
+      Toast.error(t('blocklet.publish.errorTip.noDid'));
+      return;
+    }
+    setLoading(true);
+    api.createProject({
+      input: {
+        did: blocklet.meta.did,
+        blockletTitle: params.blockletTitle || nextProjectDid.slice(0, 9),
+        blockletDid: nextProjectDid,
+        type: params.blockletComponents?.length > 0 ? 'pack' : 'resource',
+        componentDid
+      }
+    }).then(() => {
+      setLoading(false);
+      navigate(window.location.pathname.replace(`${UNOWNED_DID}/create`, `${nextProjectDid}/create`), {
+        replace: true
+      });
+    }).catch(err => {
+      setLoading(false);
+      Toast.error(err.message);
+    });
+  };
+  const handleCreateBlockletDidSuccess = result => {
+    const did = result?.blockletWallet?.address;
+    if (!did) {
+      Toast.error('Empty Blocklet DID');
+    } else {
+      handleCreate(did);
+    }
+    setOpenConnect(false);
+  };
+  useEffect(() => {
+    getData();
+  }, [getData]);
   if (!params && loading) {
     return /*#__PURE__*/_jsx(EmptySpinner, {});
   }
   if (!params) {
     return null;
   }
+  const connect = openConnect ? /*#__PURE__*/_jsx(DidConnect, {
+    open: true,
+    popup: true,
+    onClose: handleDidConnectClose,
+    action: "gen-blocklet-key-pair",
+    locale: locale,
+    checkFn: sessionApi.get,
+    saveConnect: false,
+    forceConnected: false,
+    checkTimeout: 5 * 60 * 1000,
+    onSuccess: handleCreateBlockletDidSuccess,
+    onError: handleCreateBlockletDidError,
+    extraParams: {
+      did: blocklet.meta.did
+    },
+    messages: {
+      title: t('blocklet.publish.connect.title'),
+      scan: t('blocklet.publish.connect.scan'),
+      confirm: t('blocklet.publish.connect.confirm'),
+      success: t('blocklet.publish.connect.success')
+    }
+  }) : null;
   const uploadLogoPrefix = `${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/logo/upload`;
   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`;
@@ -307,7 +404,7 @@ export default function CreateRelease({
       error: paramsErrTip.blockletResource,
       app: blocklet,
       component: item,
-      projectId: projectId,
+      projectId: projectId === UNOWNED_DID ? '' : projectId,
       release: {
         ...release,
         id: releaseId
@@ -357,8 +454,8 @@ export default function CreateRelease({
             marginRight: 8
           },
           onClick: () => setInstallResourceTip(blockletMetaUrl),
-          children: t('common.install')
-        }), /*#__PURE__*/_jsx(Dialog, {
+          children: t('blocklet.publish.copyInstallUrl')
+        }), /*#__PURE__*/_jsx(MaterialDialog, {
           fullWidth: true,
           maxWidth: "sm",
           open: installResourceTip,
@@ -398,7 +495,7 @@ export default function CreateRelease({
   }
   return /*#__PURE__*/_jsxs(Main, {
     ...rest,
-    children: [/*#__PURE__*/_jsxs(Box, {
+    children: [connect, /*#__PURE__*/_jsxs(Box, {
       className: "sticky-header",
       children: [/*#__PURE__*/_jsxs(Breadcrumbs, {
         className: "breadcrumbs",
@@ -432,6 +529,9 @@ export default function CreateRelease({
           }), /*#__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,
@@ -443,23 +543,24 @@ export default function CreateRelease({
           })]
         }), isPublished && /*#__PURE__*/_jsxs(_Fragment, {
           children: [installButton, /*#__PURE__*/_jsx(Button, {
-            variant: "contained",
+            variant: "outlined",
+            style: {
+              marginRight: 12
+            },
             children: /*#__PURE__*/_jsx("a", {
               href: joinUrl(`${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/download/${(release.files || [])[0]}`),
               children: t('common.download')
             })
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            onClick: () => setShowStoreDialog(true),
+            children: t('common.uploadToStore')
           })]
         })]
       })]
     }), /*#__PURE__*/_jsxs(Box, {
-      children: [projectType === 'pack' && /*#__PURE__*/_jsx(Alert, {
-        type: "info",
-        style: {
-          width: '100%'
-        },
-        children: t('blocklet.publish.packTip')
-      }), /*#__PURE__*/_jsx(Box, {
-        pt: 3
+      children: [/*#__PURE__*/_jsx(Box, {
+        pt: 5
       }), /*#__PURE__*/_jsxs(Box, {
         display: "flex",
         className: "section",
@@ -493,6 +594,31 @@ export default function CreateRelease({
             },
             error: !!paramsErrTip.blockletTitle,
             helperText: paramsErrTip.blockletTitle || ''
+          }), /*#__PURE__*/_jsx(TextField, {
+            required: true,
+            label: "Blocklet DID",
+            fullWidth: true,
+            readonly: true,
+            disabled: projectId !== UNOWNED_DID,
+            autoComplete: "off",
+            variant: "outlined",
+            onClick: handleDidConnectShow,
+            onInput: handleDidConnectShow,
+            InputProps: {
+              'data-cy': 'export-blocklet-did',
+              endAdornment: projectId === UNOWNED_DID && /*#__PURE__*/_jsx(InputAdornment, {
+                position: "end",
+                children: /*#__PURE__*/_jsx(Button, {
+                  onClick: handleDidConnectShow,
+                  children: t('common.create')
+                })
+              })
+            },
+            helperText: "",
+            value: projectId === UNOWNED_DID ? '' : projectId,
+            sx: {
+              mt: 3
+            }
           }), /*#__PURE__*/_jsx(TextField, {
             label: `Blocklet ${t('common.description')}`,
             placeholder: `Blocklet ${t('common.description')}`,
@@ -778,7 +904,7 @@ export default function CreateRelease({
             children: resourceContent
           })]
         })]
-      }), projectType === 'pack' && /*#__PURE__*/_jsxs(Box, {
+      }), /*#__PURE__*/_jsxs(Box, {
         display: "flex",
         mt: 3,
         className: "section full-width",
@@ -795,15 +921,32 @@ export default function CreateRelease({
           children: /*#__PURE__*/_jsx(SelectComponents, {
             disabled: loading || readOnly,
             app: blocklet,
-            value: params.blockletComponents,
-            onChange: data => {
-              setParams({
-                blockletComponents: data
-              });
-            }
+            value: params.blockletComponents || [],
+            onChange: handleChangeSelectedComponents
           })
         })]
+      }), projectType === 'pack' && /*#__PURE__*/_jsx(Alert, {
+        type: "info",
+        style: {
+          width: '100%'
+        },
+        children: t('blocklet.publish.packTip')
       })]
+    }), /*#__PURE__*/_jsx(Dialog, {
+      title: t('common.connectToStore'),
+      disableEscapeKeyDown: true,
+      disablePortal: false,
+      fullWidth: true,
+      open: showStoreDialog,
+      onClose: () => setShowStoreDialog(false),
+      children: /*#__PURE__*/_jsx(ConnectStoreList, {
+        blocklet: blocklet,
+        releaseType: params.blockletComponents?.length > 0 ? 'pack' : 'resource',
+        projectId: projectId,
+        releaseId: releaseId,
+        onPublish: getRelease,
+        publishedStoreIds: release?.publishedStoreIds
+      })
     })]
   });
 }

package/es/blocklet/publish/index.js

@@ -5,7 +5,6 @@ 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';
 import CreateRelease from './create-release';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,9 +44,6 @@ export default function BlockletPublish({
       children: [/*#__PURE__*/_jsx(Route, {
         path: "/",
         element: /*#__PURE__*/_jsx(ProjectList, {})
-      }), /*#__PURE__*/_jsx(Route, {
-        path: "/create",
-        element: /*#__PURE__*/_jsx(CreateProject, {})
       }), /*#__PURE__*/_jsx(Route, {
         path: "/:projectId",
         element: /*#__PURE__*/_jsx(ReleasesList, {})

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

@@ -1,16 +1,23 @@
 /* eslint-disable react/no-unstable-nested-components */
 import React, { useState, useEffect } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
+import joinUrl from 'url-join';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Box from '@mui/material/Box';
+import AddIcon from '@mui/icons-material/Add';
 import IconButton from '@mui/material/IconButton';
+import LibraryAddIcon from '@mui/icons-material/LibraryAdd';
 import DeleteIcon from '@mui/icons-material/Delete';
+import InstallDesktopIcon from '@mui/icons-material/InstallDesktop';
+import DownloadIcon from '@mui/icons-material/Download';
+import { WELLKNOWN_SERVICE_PATH_PREFIX, UNOWNED_DID } from '@abtnode/constant';
 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 { Tooltip } from '@mui/material';
 import { useBlockletContext } from '../../contexts/blocklet';
 import { useNodeContext } from '../../contexts/node';
 import EmptySpinner from '../../empty-spinner';
@@ -18,7 +25,9 @@ import DidAddress from '../../did-address';
 import Confirm from '../../confirm';
 import BlockletBundleAvatar from '../bundle-avatar';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const serverEndpoint = window.env?.serverEndpoint;
 export default function ProjectList() {
+  const navigate = useNavigate();
   const {
     t,
     locale
@@ -50,6 +59,11 @@ export default function ProjectList() {
       Toast.error(err.message);
     });
   };
+  const handleNewBlocklet = () => {
+    navigate(`${UNOWNED_DID}/create`, {
+      replace: true
+    });
+  };
   const onDeleteProject = project => {
     setDeleteConfirm(project);
   };
@@ -76,7 +90,15 @@ export default function ProjectList() {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (!projects && loading) {
-    return /*#__PURE__*/_jsx(EmptySpinner, {});
+    return /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: '40px'
+      },
+      children: /*#__PURE__*/_jsx(EmptySpinner, {})
+    });
   }
   if (!projects) {
     return null;
@@ -101,12 +123,10 @@ export default function ProjectList() {
           mb: 3
         },
         children: t('blocklet.publish.createBlockletTip')
-      }), /*#__PURE__*/_jsx(Link, {
-        to: "create",
-        children: /*#__PURE__*/_jsx(Button, {
-          variant: "contained",
-          children: t('blocklet.publish.createBlocklet')
-        })
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleNewBlocklet,
+        variant: "contained",
+        children: t('blocklet.publish.createBlocklet')
       })]
     });
   }
@@ -191,34 +211,118 @@ export default function ProjectList() {
     options: {
       customBodyRenderLite: rawIndex => {
         const project = projects[rawIndex];
-        return /*#__PURE__*/_jsx(Box, {
+        let installUrl = '';
+        let downloadUrl = '';
+        if (project.lastReleaseId) {
+          const blockletMetaUrl = joinUrl(serverEndpoint, `/api/project/${blocklet.meta.did}/${project.id}/${project.lastReleaseId}/release/blocklet.json`);
+          const url = new URL(serverEndpoint);
+          url.pathname = joinUrl(url.pathname, '/launch-blocklet/agreement');
+          url.searchParams.set('blocklet_meta_url', blockletMetaUrl);
+          installUrl = url.href;
+          downloadUrl = joinUrl(`${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${project.id}/${project.lastReleaseId}/download/${(project.lastReleaseFiles || [])[0]}`);
+        }
+        return /*#__PURE__*/_jsxs(Box, {
           display: "flex",
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "error",
-            "aria-label": "delete",
-            onClick: () => onDeleteProject(project),
-            children: /*#__PURE__*/_jsx(DeleteIcon, {
-              sx: {
-                fontSize: 18
-              }
+          children: [/*#__PURE__*/_jsx(Link, {
+            to: `${project.id}/create`,
+            children: /*#__PURE__*/_jsx(Tooltip, {
+              title: t('blocklet.publish.createRelease'),
+              placement: "top",
+              children: /*#__PURE__*/_jsx(IconButton, {
+                color: "primary",
+                "aria-label": "create",
+                children: /*#__PURE__*/_jsx(LibraryAddIcon, {
+                  sx: {
+                    fontSize: 18
+                  }
+                })
+              })
+            })
+          }), !!project.lastReleaseId && project.type === 'pack' && /*#__PURE__*/_jsx(Tooltip, {
+            title: t('blocklet.publish.install', {
+              name: project.blockletTitle
+            }),
+            placement: "top",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              color: "secondary",
+              "aria-label": "create",
+              children: /*#__PURE__*/_jsx("a", {
+                style: {
+                  display: 'flex'
+                },
+                href: installUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                children: /*#__PURE__*/_jsx(InstallDesktopIcon, {
+                  sx: {
+                    fontSize: 18
+                  }
+                })
+              })
+            })
+          }), !!project.lastReleaseId && /*#__PURE__*/_jsx(Tooltip, {
+            title: t('blocklet.publish.download', {
+              name: project.blockletTitle
+            }),
+            placement: "top",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              color: "primary",
+              "aria-label": "create",
+              children: /*#__PURE__*/_jsx("a", {
+                style: {
+                  display: 'flex'
+                },
+                href: downloadUrl,
+                children: /*#__PURE__*/_jsx(DownloadIcon, {
+                  sx: {
+                    fontSize: 18
+                  }
+                })
+              })
+            })
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            title: t('blocklet.publish.delete', {
+              name: project.blockletTitle
+            }),
+            placement: "top",
+            children: /*#__PURE__*/_jsx(IconButton, {
+              color: "primary",
+              "aria-label": "delete",
+              onClick: () => onDeleteProject(project),
+              children: /*#__PURE__*/_jsx(DeleteIcon, {
+                sx: {
+                  fontSize: 18
+                }
+              })
             })
-          })
+          })]
         });
       }
     }
   }].filter(Boolean);
   return /*#__PURE__*/_jsxs(Main, {
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        textAlign: 'right'
-      },
-      children: /*#__PURE__*/_jsx(Link, {
-        to: "create",
-        children: /*#__PURE__*/_jsx(Button, {
-          variant: "contained",
-          children: t('blocklet.publish.createBlocklet')
-        })
-      })
+    children: [/*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx(Box, {
+        sx: {
+          fontSize: '1.2rem',
+          fontWeight: 'bold'
+        },
+        children: t('blocklet.publish.productListTitle')
+      }), /*#__PURE__*/_jsxs(Button, {
+        onClick: handleNewBlocklet,
+        variant: "contained",
+        children: [/*#__PURE__*/_jsx(AddIcon, {
+          style: {
+            fontSize: '1.3em',
+            marginRight: 4
+          }
+        }), t('blocklet.publish.createBlocklet')]
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      mt: 3
     }), /*#__PURE__*/_jsx(Datatable, {
       className: "main-table",
       locale: locale,