@abtnode/ux 1.16.16 → 1.16.17-beta-7ec31a60

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

@@ -0,0 +1,190 @@
+/* eslint-disable react/no-unstable-nested-components */
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import styled from '@emotion/styled';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+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 { useBlockletContext } from '../../contexts/blocklet';
+import { useNodeContext } from '../../contexts/node';
+import EmptySpinner from '../../empty-spinner';
+import DidAddress from '../../did-address';
+import Confirm from '../../confirm';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ProjectList() {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const {
+    api
+  } = useNodeContext();
+  const [loading, setLoading] = useState(true);
+  const {
+    blocklet
+  } = useBlockletContext();
+  const [deleteConfirm, setDeleteConfirm] = useState(null);
+  const [projects, setProjects] = useState(null);
+  const getProjects = () => {
+    api.getProjects({
+      input: {
+        did: blocklet.meta.did
+      }
+    }).then(res => {
+      const list = res?.projects || [];
+      setLoading(false);
+      setProjects(list);
+    }).catch(err => {
+      setLoading(false);
+      Toast.error(err.message);
+    });
+  };
+  const onDeleteProject = project => {
+    setDeleteConfirm(project);
+  };
+  const deleteProject = () => {
+    setLoading(false);
+    const projectId = deleteConfirm.id;
+    api.deleteProject({
+      input: {
+        did: blocklet.meta.did,
+        projectId
+      }
+    }).then(() => {
+      setLoading(false);
+      getProjects();
+      Toast.success(t('common.removeSuccess'));
+    }).catch(err => {
+      setLoading(false);
+      Toast.error(err.message);
+    });
+  };
+  useEffect(() => {
+    getProjects();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!projects && loading) {
+    return /*#__PURE__*/_jsx(EmptySpinner, {});
+  }
+  if (!projects) {
+    return null;
+  }
+  if (!projects.length) {
+    return /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      pt: 10,
+      children: [/*#__PURE__*/_jsx(Box, {
+        sx: {
+          fontSize: 20,
+          fontWeight: 'bold',
+          mb: 3
+        },
+        children: t('blocklet.publish.blockletEmptyTip')
+      }), /*#__PURE__*/_jsx(Box, {
+        sx: {
+          fontSize: 14,
+          color: 'text.secondary',
+          mb: 3
+        },
+        children: t('blocklet.publish.createBlockletTip')
+      }), /*#__PURE__*/_jsx(Link, {
+        to: "create",
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "contained",
+          children: t('blocklet.publish.createBlocklet')
+        })
+      })]
+    });
+  }
+  const columns = [{
+    label: t('common.name'),
+    name: 'blockletTitle',
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const project = projects[rawIndex];
+        return /*#__PURE__*/_jsx(Link, {
+          to: `${project.id}`,
+          children: project.blockletTitle || '/'
+        });
+      }
+    }
+  }, {
+    label: t('common.address'),
+    name: 'blockletDid',
+    options: {
+      customBodyRender: e => {
+        return /*#__PURE__*/_jsx(DidAddress, {
+          size: 14,
+          responsive: true,
+          did: e
+        });
+      }
+    }
+  }, {
+    label: t('common.actions'),
+    name: 'actions',
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const project = projects[rawIndex];
+        return /*#__PURE__*/_jsx(Box, {
+          display: "flex",
+          children: /*#__PURE__*/_jsx(IconButton, {
+            color: "error",
+            "aria-label": "delete",
+            onClick: () => onDeleteProject(project),
+            children: /*#__PURE__*/_jsx(DeleteIcon, {
+              sx: {
+                fontSize: 18
+              }
+            })
+          })
+        });
+      }
+    }
+  }];
+  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')
+        })
+      })
+    }), /*#__PURE__*/_jsx(Datatable, {
+      className: "main-table",
+      locale: locale,
+      data: projects,
+      columns: columns,
+      options: {
+        sort: false,
+        download: false,
+        filter: false,
+        print: false,
+        search: false
+      }
+    }), deleteConfirm && /*#__PURE__*/_jsx(Confirm, {
+      title: `${t('common.delete')} ${deleteConfirm.blockletTitle}`,
+      description: t('blocklet.publish.deleteBlockletTip'),
+      confirm: t('common.confirm'),
+      onConfirm: deleteProject,
+      onCancel: () => setDeleteConfirm(null)
+    })]
+  });
+}
+ProjectList.propTypes = {};
+const Main = styled(Box)`
+  .main-table > div:first-child {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,274 @@
+/* eslint-disable react/no-unstable-nested-components */
+import React, { useState, useEffect } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import styled from '@emotion/styled';
+import joinUrl from 'url-join';
+import upperFirst from 'lodash/upperFirst';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import DownloadIcon from '@mui/icons-material/Download';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Datatable from '@arcblock/ux/lib/Datatable';
+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 { useBlockletContext } from '../../contexts/blocklet';
+import { useNodeContext } from '../../contexts/node';
+import EmptySpinner from '../../empty-spinner';
+import Confirm from '../../confirm';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function ReleaseList() {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const {
+    projectId
+  } = useParams();
+  const {
+    api
+  } = useNodeContext();
+  const [loading, setLoading] = useState(true);
+  const {
+    blocklet
+  } = useBlockletContext();
+  const [releases, setReleases] = useState(null);
+  const [project, setProject] = useState(null);
+  const [deleteConfirm, setDeleteConfirm] = useState(null);
+  const getReleases = () => {
+    api.getReleases({
+      input: {
+        did: blocklet.meta.did,
+        projectId
+      }
+    }).then(res => {
+      const list = res?.releases || [];
+      setLoading(false);
+      setReleases(list);
+    }).catch(err => {
+      setLoading(false);
+      Toast.error(err.message);
+    });
+  };
+  const getData = () => {
+    api.doBatchQuery({
+      getProject: {
+        input: {
+          did: blocklet.meta.did,
+          projectId
+        }
+      },
+      getReleases: {
+        input: {
+          did: blocklet.meta.did,
+          projectId
+        }
+      }
+    }).then(res => {
+      setProject(res.getProject.project || {});
+      setReleases(res.getReleases.releases || []);
+      setLoading(false);
+    }).catch(err => {
+      setLoading(false);
+      Toast.error(err.message);
+    });
+  };
+  useEffect(() => {
+    getData();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const deleteRelease = () => {
+    setLoading(false);
+    const releaseId = deleteConfirm.id;
+    api.deleteRelease({
+      input: {
+        did: blocklet.meta.did,
+        projectId,
+        releaseId
+      }
+    }).then(() => {
+      setLoading(false);
+      getReleases();
+      Toast.success(t('common.removeSuccess'));
+    }).catch(err => {
+      setLoading(false);
+      Toast.error(err.message);
+    });
+  };
+  const onDeleteRelease = release => {
+    setDeleteConfirm(release);
+  };
+  if (!releases && loading) {
+    return /*#__PURE__*/_jsx(EmptySpinner, {});
+  }
+  if (!releases) {
+    return null;
+  }
+  const breadcrumbs = /*#__PURE__*/_jsxs(Breadcrumbs, {
+    className: "breadcrumbs",
+    "aria-label": "breadcrumb",
+    children: [/*#__PURE__*/_jsx(Link, {
+      to: "..",
+      children: t('common.publish')
+    }), /*#__PURE__*/_jsx(Typography, {
+      color: "text.primary",
+      children: project.blockletTitle
+    })]
+  });
+  if (!releases.length) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [breadcrumbs, /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        pt: 10,
+        children: [/*#__PURE__*/_jsx(Box, {
+          sx: {
+            fontSize: 20,
+            fontWeight: 'bold',
+            mb: 3
+          },
+          children: t('blocklet.publish.releaseEmptyTip')
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: {
+            fontSize: 14,
+            color: 'text.secondary',
+            mb: 3
+          },
+          children: t('blocklet.publish.createReleaseTip')
+        }), /*#__PURE__*/_jsx(Link, {
+          to: "create",
+          children: /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            children: t('blocklet.publish.createRelease')
+          })
+        })]
+      })]
+    });
+  }
+  const columns = [{
+    label: t('common.version'),
+    name: 'blockletVersion',
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const release = releases[rawIndex];
+        return /*#__PURE__*/_jsx(Link, {
+          to: `${release.id}`,
+          children: release.blockletVersion || '/'
+        });
+      }
+    }
+  }, {
+    label: t('blocklet.publish.releaseNote'),
+    name: 'note',
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const release = releases[rawIndex];
+        return /*#__PURE__*/_jsx(Typography, {
+          className: "note",
+          children: release.note || ''
+        });
+      }
+    }
+  }, {
+    label: t('common.status'),
+    name: 'status',
+    options: {
+      customBodyRender: value => {
+        return /*#__PURE__*/_jsx(Tag, {
+          type: value === 'published' ? 'success' : 'warning',
+          children: upperFirst(value)
+        });
+      }
+    }
+  }, {
+    label: t('common.actions'),
+    name: 'actions',
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const release = releases[rawIndex];
+        return /*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            color: "primary",
+            "aria-label": "download",
+            disabled: release.status !== 'published',
+            children: release.status === 'published' ? /*#__PURE__*/_jsx("a", {
+              href: joinUrl(`${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${project.id}/${release.id}/download/${(release.files || [])[0]}`),
+              children: /*#__PURE__*/_jsx(DownloadIcon, {
+                sx: {
+                  fontSize: 18
+                }
+              })
+            }) : /*#__PURE__*/_jsx(DownloadIcon, {
+              sx: {
+                fontSize: 18
+              }
+            })
+          }), /*#__PURE__*/_jsx(IconButton, {
+            color: "error",
+            "aria-label": "delete",
+            onClick: () => onDeleteRelease(release),
+            children: /*#__PURE__*/_jsx(DeleteIcon, {
+              sx: {
+                fontSize: 18
+              }
+            })
+          })]
+        });
+      }
+    }
+  }];
+  return /*#__PURE__*/_jsxs(Main, {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      className: "header",
+      children: [breadcrumbs, /*#__PURE__*/_jsx(Link, {
+        to: "create",
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "contained",
+          children: t('blocklet.publish.createRelease')
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Datatable, {
+      className: "main-table",
+      verticalKeyWidth: 100,
+      locale: locale,
+      data: releases,
+      columns: columns,
+      options: {
+        sort: false,
+        download: false,
+        filter: false,
+        print: false,
+        search: false
+      }
+    }), deleteConfirm && /*#__PURE__*/_jsx(Confirm, {
+      title: t(`${t('common.delete')} ${deleteConfirm.blockletVersion}`),
+      description: t('blocklet.publish.deleteReleaseTip'),
+      confirm: t('common.confirm'),
+      onConfirm: deleteRelease,
+      onCancel: () => setDeleteConfirm(null)
+    })]
+  });
+}
+ReleaseList.propTypes = {};
+const Main = styled(Box)`
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .main-table > div:first-child {
+    display: none;
+  }
+  .note {
+    word-break: break-all;
+    white-space: pre-line;
+  }
+`;

package/es/blocklet/publish/resource.js

@@ -0,0 +1,72 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/no-unstable-nested-components */
+import { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import joinUrl from 'url-join';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Resource({
+  app,
+  component,
+  projectId,
+  release
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const iframeRef = useRef(null);
+  const releaseId = release.id;
+  const readonly = release.status === 'published';
+  const {
+    resourceExportPage = '/'
+  } = component?.meta.capabilities || {};
+  const url = new URL(joinUrl('http://127.0.0.1', component.mountPoint, resourceExportPage).replace(/\/+/g, '/'));
+  url.searchParams.set('projectId', projectId);
+  url.searchParams.set('releaseId', releaseId);
+  url.searchParams.set('local', locale);
+  if (readonly) {
+    url.searchParams.set('readonly', '1');
+  }
+  const src = `${url.pathname}${url.search}`;
+  if (component.status !== 'running') {
+    return /*#__PURE__*/_jsx(Container, {
+      children: /*#__PURE__*/_jsx(Box, {
+        pt: 6,
+        children: t('blocklet.publish.componentNotRunning', {
+          name: component.meta.title
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(Container, {
+    children: /*#__PURE__*/_jsx("iframe", {
+      ref: iframeRef,
+      title: component.meta.title,
+      src: src,
+      width: "100%",
+      height: "600px"
+    })
+  });
+}
+Resource.propTypes = {
+  component: PropTypes.object.isRequired,
+  app: PropTypes.object.isRequired,
+  projectId: PropTypes.string.isRequired,
+  release: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    status: PropTypes.string
+  })
+};
+Resource.defaultProps = {
+  release: {
+    id: ''
+  }
+};
+const Container = styled(Box)`
+  iframe {
+    border: none;
+  }
+`;

package/es/empty-spinner.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Spinner from '@mui/material/CircularProgress';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function EmptySpinner({
+  size,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(Box, {
+    display: "flex",
+    mt: 4,
+    ...rest,
+    children: /*#__PURE__*/_jsx(Spinner, {
+      size: size
+    })
+  });
+}
+EmptySpinner.propTypes = {
+  size: PropTypes.number
+};
+EmptySpinner.defaultProps = {
+  size: 24
+};

package/es/locales/en.js

@@ -177,6 +177,7 @@ module.exports = {
     installSuccess: 'Successfully installed',
     installing: 'Installing',
     internalIp: 'Internal IP',
+    introduction: 'Introduction',
     invite: 'Invite',
     inviting: 'Inviting',
     ip: 'IP',
@@ -228,6 +229,7 @@ module.exports = {
     preferences: 'Preferences',
     protected: 'Protected',
     protocol: 'Protocol',
+    publish: 'Publish',
     published: 'published',
     purchase: 'Purchase',
     readMore: 'More',
@@ -237,11 +239,13 @@ module.exports = {
     redirectTemporary: 'Temporary Redirect',
     redirectUrl: 'Redirect URL',
     rewrite: 'Rewrite',
+    release: 'Release',
     rewriteUrl: 'Rewrite URL',
     reject: 'Reject',
     reload: 'Reload',
     remark: 'Remark',
     remove: 'Remove',
+    removeSuccess: 'Remove successfully',
     renew: 'Renew',
     reportIssue: 'Report an issue',
     required: 'Required',
@@ -259,6 +263,7 @@ module.exports = {
     saveSuccess: 'Saved successfully',
     scheduleFailed: 'schedule failed',
     scheduleSuccess: 'successfully scheduled',
+    screenshot: 'Screenshot',
     search: 'Search',
     security: 'Security',
     serverDid: 'Server DID',
@@ -602,6 +607,36 @@ module.exports = {
     error: {
       isRunning: 'Blocklet is running, please stop it first',
       isInProgress: 'Blocklet is in progress, please wait for it to finish'
+    },
+    publish: {
+      productTitle: 'Product',
+      versionTitle: 'Version',
+      imgTitle: 'Images',
+      resourceTitle: 'Resources',
+      blockletEmptyTip: 'There aren’t any blocklets here',
+      createBlockletTip: 'You can create new blocklet through existing resources, components, and configuration in this application',
+      createBlocklet: 'Create a new blocklet',
+      deleteBlockletTip: 'The blocklet cannot be recovered after deletion, please confirm',
+      componentNotRunning: 'Component {name} is not running, please start it first',
+      releaseEmptyTip: 'There aren’t any releases here',
+      createReleaseTip: 'You can create a release of the blocklet, along with release notes and resources, for other people to use',
+      createRelease: 'Create a new release',
+      deleteReleaseTip: 'The release cannot be recovered after deletion',
+      createBlockletDid: 'Create from DID Wallet',
+      connect: {
+        title: 'Create Blocklet DID',
+        scan: 'Scan the QR code below to generate Blocklet DID',
+        confirm: 'Confirm using DID Wallet',
+        success: 'Blocklet DID has been generated, please continue your operation'
+      },
+      saveDraft: 'Save Draft',
+      releaseNote: 'Release Note',
+      errorTip: {
+        noTitle: 'Blocklet Title is required',
+        noVersion: 'Blocklet Version is required',
+        noDescription: 'Blocklet Description is required',
+        noNote: 'Release Note is required'
+      }
     }
   },
   dashboard: {

package/es/locales/zh.js

@@ -182,6 +182,7 @@ module.exports = {
     installSuccess: '安装成功',
     installing: '安装中',
     internalIp: '内网 IP',
+    introduction: '介绍',
     invite: '邀请',
     inviting: '邀请中',
     ip: 'IP',
@@ -233,6 +234,7 @@ module.exports = {
     preferences: '偏好',
     protected: '受保护',
     protocol: '协议',
+    publish: '发布',
     published: '发布于',
     purchase: '购买',
     readMore: '更多',
@@ -243,10 +245,12 @@ module.exports = {
     redirectUrl: '重定向 URL',
     rewriteUrl: '重写到 URL',
     rewrite: '重写',
+    release: '发布',
     reject: '拒绝',
     reload: '优雅重启',
     remark: '备注',
     remove: '删除',
+    removeSuccess: '删除成功',
     renew: '续期',
     reportIssue: '问题反馈',
     required: '必需的',
@@ -264,6 +268,7 @@ module.exports = {
     saveSuccess: '保存成功',
     scheduleFailed: '加入任务队列失败',
     scheduleSuccess: '成功加入任务队列',
+    screenshot: '截图',
     search: '搜索',
     security: '安全',
     serverDid: '服务器 DID',
@@ -609,6 +614,36 @@ module.exports = {
     error: {
       isRunning: '应用正在运行，请先停止运行',
       isInProgress: '应用正在进行中，请等待完成'
+    },
+    publish: {
+      productTitle: 'Blocklet 详情',
+      versionTitle: '版本信息',
+      imgTitle: '图片资源',
+      resourceTitle: '组件资源',
+      blockletEmptyTip: '这里没有任何 blocklet',
+      createBlockletTip: '你可以使用此应用的资源，组件，配置制作新的 Blocklet',
+      createBlocklet: '创建 Blocklet',
+      deleteBlockletTip: '此 Blocklet 删除后不可恢复，是否继续？',
+      componentNotRunning: '组件 {name} 未运行',
+      releaseEmptyTip: '这里没有任何发布',
+      createReleaseTip: '您可以创建 Blocklet 发布，在发布中包含说明和资源，以供其他人使用',
+      createRelease: '创建新的发布',
+      deleteReleaseTip: '此发布删除后不可恢复，是否继续？',
+      createBlockletDid: '通过 DID 钱包创建',
+      connect: {
+        title: '创建 Blocklet DID',
+        scan: '扫描下面的二维码来生成 Blocklet DID',
+        confirm: '使用 DID Wallet 确认',
+        success: 'Blocklet DID 已经生成，请继续您的操作'
+      },
+      saveDraft: '保存草稿',
+      releaseNote: '发布说明',
+      errorTip: {
+        noTitle: '请填写 Blocklet 名称',
+        noVersion: '请填写 Blocklet 版本号',
+        noDescription: '请填写 Blocklet 描述',
+        noNote: '请填写 发布说明'
+      }
     }
   },
   dashboard: {