@abtnode/ux 1.16.27-beta-74c4e335 → 1.16.27-beta-4022dde0

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

@@ -0,0 +1,109 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { Box, InputAdornment, Tab, Tabs, TextField, Typography } from '@mui/material';
+import { PROJECT } from '@blocklet/constant';
+import IntroductionPreview from './introduction-preview';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Introduction({
+  params,
+  setParams,
+  paramsErrTip,
+  loading,
+  setParamsErrTip,
+  readOnly
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const [nowTab, setNowTab] = useState(readOnly ? 'preview' : 'write');
+  const handleChange = (_, newValue) => {
+    setNowTab(newValue);
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      border: '1px solid #fff',
+      width: '100%',
+      borderRadius: 2
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h6",
+        fontWeight: "bold",
+        sx: {},
+        children: t('common.introduction')
+      }), /*#__PURE__*/_jsxs(Tabs, {
+        value: nowTab,
+        onChange: handleChange,
+        "aria-label": "wrapped label tabs example",
+        children: [/*#__PURE__*/_jsx(Tab, {
+          value: "write",
+          label: "Write"
+        }), /*#__PURE__*/_jsx(Tab, {
+          value: "preview",
+          label: "Preview"
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      display: nowTab === 'write' ? 'block' : 'none',
+      sx: {
+        width: '100%',
+        marginTop: 3
+      },
+      children: /*#__PURE__*/_jsx(TextField, {
+        disabled: loading || readOnly,
+        sx: {
+          border: 'none'
+        }
+        // label={`Blocklet ${t('common.introduction')}`}
+        ,
+        placeholder: `Blocklet ${t('common.introduction')}`,
+        InputProps: {
+          'data-cy': 'export-blocklet-introduction',
+          readOnly,
+          endAdornment: /*#__PURE__*/_jsxs(InputAdornment, {
+            position: "end",
+            children: [params?.blockletIntroduction?.length || 0, " / ", PROJECT.MAX_INTRO_LENGTH]
+          })
+        },
+        autoComplete: "off",
+        variant: "outlined",
+        fullWidth: true,
+        multiline: true,
+        minRows: 4,
+        value: params.blockletIntroduction || '',
+        onChange: e => {
+          setParamsErrTip({
+            blockletIntroduction: ''
+          });
+          setParams({
+            blockletIntroduction: e.target.value.slice(0, PROJECT.MAX_INTRO_LENGTH)
+          });
+        },
+        error: !!paramsErrTip.blockletIntroduction,
+        helperText: paramsErrTip.blockletIntroduction || ''
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      display: nowTab === 'preview' ? 'block' : 'none',
+      mt: 3,
+      children: /*#__PURE__*/_jsx(IntroductionPreview, {
+        text: params.blockletIntroduction || ''
+      })
+    })]
+  });
+}
+Introduction.propTypes = {
+  params: PropTypes.object.isRequired,
+  setParams: PropTypes.func.isRequired,
+  paramsErrTip: PropTypes.object.isRequired,
+  setParamsErrTip: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool.isRequired,
+  loading: PropTypes.bool.isRequired
+};
+export default Introduction;

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

@@ -0,0 +1,161 @@
+import PropTypes from 'prop-types';
+import { StepContent, Typography, Button, Step, Box, Stepper, StepButton, Paper } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { validateParams, validateParamsStep } from '../utils/validate-params';
+import StepIcon from './step-icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ReleaseStepper({
+  steps,
+  activeStep,
+  setActiveStep,
+  isSelectedResources,
+  params,
+  loading,
+  paramsErrTip,
+  viewMode,
+  projectId
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const handleNext = () => {
+    setActiveStep(prevActiveStep => prevActiveStep + 1);
+  };
+  const handleBack = () => {
+    setActiveStep(prevActiveStep => prevActiveStep - 1);
+  };
+  const getStepError = step => {
+    if (step === 0) {
+      return paramsErrTip?.blockletTitle || paramsErrTip?.projectId || paramsErrTip?.blockletDescription;
+    }
+    if (step === 2) {
+      return paramsErrTip?.blockletResources;
+    }
+    if (step >= 4) {
+      return paramsErrTip?.blockletVersion || paramsErrTip?.note;
+    }
+    return '';
+  };
+  const readOnly = viewMode || validateParams({
+    isSelectedResources,
+    params,
+    projectId,
+    t
+  }) === null;
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      width: 300,
+      maxWidth: 300,
+      minWidth: 300,
+      padding: 2,
+      border: '1px solid #ccc',
+      borderRadius: 2
+    },
+    children: [/*#__PURE__*/_jsx(Stepper, {
+      activeStep: activeStep,
+      orientation: "vertical",
+      children: steps.map((step, index) => {
+        const labelProps = {};
+        const ok = loading || !validateParamsStep({
+          isSelectedResources,
+          params,
+          projectId,
+          step: index,
+          t
+        });
+        const error = loading ? '' : getStepError(index);
+        if (error) {
+          labelProps.optional = /*#__PURE__*/_jsx(Typography, {
+            variant: "caption",
+            color: "error",
+            children: error
+          });
+          labelProps.error = true;
+        }
+        return /*#__PURE__*/_jsxs(Step, {
+          children: [/*#__PURE__*/_jsx(StepButton, {
+            icon: /*#__PURE__*/_jsx(StepIcon, {
+              error: error,
+              active: readOnly ? 99 : activeStep,
+              step: index,
+              ok: ok
+            }),
+            sx: {
+              cursor: 'pointer',
+              color: error ? 'error.main' : 'inherit'
+            },
+            disabled: false,
+            onClick: () => setActiveStep(index),
+            ...labelProps,
+            children: /*#__PURE__*/_jsx(Typography, {
+              fontSize: "14px",
+              fontWeight: "500",
+              color: error || !ok && activeStep > index ? 'error.main' : 'inherit',
+              children: step.label
+            })
+          }), /*#__PURE__*/_jsxs(StepContent, {
+            children: [/*#__PURE__*/_jsx(Typography, {
+              fontSize: 12,
+              children: step.description
+            }), !readOnly && /*#__PURE__*/_jsx(Box, {
+              sx: {
+                mb: 2
+              },
+              children: /*#__PURE__*/_jsxs("div", {
+                children: [index < steps.length - 1 && /*#__PURE__*/_jsx(Button, {
+                  variant: "contained",
+                  onClick: handleNext,
+                  sx: {
+                    mt: 1,
+                    mr: 1
+                  },
+                  disabled: error || !ok,
+                  children: "Continue"
+                }), index > 0 && /*#__PURE__*/_jsx(Button, {
+                  disabled: index === 0,
+                  onClick: handleBack,
+                  sx: {
+                    mt: 1,
+                    mr: 1
+                  },
+                  children: "Back"
+                })]
+              })
+            })]
+          })]
+        }, step.label);
+      })
+    }), activeStep >= steps.length - 1 && /*#__PURE__*/_jsx(Paper, {
+      square: true,
+      elevation: 0,
+      sx: {
+        p: 3
+      },
+      children: /*#__PURE__*/_jsx(Typography, {
+        fontSize: 12,
+        sx: {
+          opacity: 0.5
+        },
+        children: "Click right top button to release"
+      })
+    })]
+  });
+}
+ReleaseStepper.propTypes = {
+  steps: PropTypes.array.isRequired,
+  activeStep: PropTypes.number.isRequired,
+  setActiveStep: PropTypes.func.isRequired,
+  params: PropTypes.object.isRequired,
+  viewMode: PropTypes.string.isRequired,
+  loading: PropTypes.bool.isRequired,
+  projectId: PropTypes.string.isRequired,
+  isSelectedResources: PropTypes.bool.isRequired,
+  paramsErrTip: PropTypes.shape({
+    projectId: PropTypes.string,
+    blockletVersion: PropTypes.string,
+    blockletTitle: PropTypes.string,
+    blockletDescription: PropTypes.string,
+    note: PropTypes.string,
+    blockletResources: PropTypes.string
+  }).isRequired
+};

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

@@ -1,18 +1,19 @@
-import { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import joinUrl from 'url-join';
 import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { useEffect, useRef } from 'react';
 import useSetState from 'react-use/lib/useSetState';
-import Box from '@mui/material/Box';
+import joinUrl from 'url-join';
+import { Box } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import Toast from '@arcblock/ux/lib/Toast';
-import pAll from 'p-all';
 import hasStartEngine from '@blocklet/meta/lib/has-start-engine';
-import Tree from './tree';
-import { useNodeContext } from '../../contexts/node';
-import { axios } from '../../util/api';
+import pAll from 'p-all';
+import Toast from '@arcblock/ux/lib/Toast/index';
+import { EmptyIcon } from '@arcblock/icons';
+import { useNodeContext } from '../../../contexts/node';
+import { axios } from '../../../util/api';
 import StopBox from './stop-box';
+import Tree from './tree';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const fillParent = (nodes, parentId) => {
   nodes.forEach(node => {
@@ -88,17 +89,20 @@ const getNodeIdDependencies = (node, nodeIds) => {
   };
   return getDependencies(node, {});
 };
-export default function Resource({
+export default function Resources({
   app,
   component,
   projectId,
   release,
+  loading,
   error,
   saveSelectedEventsRef,
   readOnly,
   componentDid,
   initialResources = {},
   setResourceComponentsMap,
+  selectedResourceIds,
+  setSelectedResourceIds,
   initUrl
 }) {
   const {
@@ -109,7 +113,6 @@ export default function Resource({
     api
   } = useNodeContext();
   const [resources, setResources] = useSetState({});
-  const [selectedResourceIds, setSelectedResourceIds] = useSetState({});
   const refs = useRef({});
   const loadedDataRef = useRef(false);
   const releaseId = release.id;
@@ -216,8 +219,17 @@ export default function Resource({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [app, initialResources, readOnly]);
-  if (component.status !== 'running') {
-    return /*#__PURE__*/_jsx(StopBox, {
+  let Empty = null;
+  if (!component) {
+    Empty = /*#__PURE__*/_jsx(StopBox, {
+      Icon: EmptyIcon,
+      children: t('blocklet.publish.resourceEmptyTip', {
+        name: component.meta.title
+      })
+    });
+  }
+  if (component?.status !== 'running') {
+    Empty = /*#__PURE__*/_jsx(StopBox, {
       children: t('blocklet.publish.componentNotRunning', {
         name: component.meta.title
       })
@@ -228,11 +240,12 @@ export default function Resource({
       className: classnames(error && 'error'),
       children: /*#__PURE__*/_jsx(Box, {
         pb: 2,
-        children: /*#__PURE__*/_jsx(Tree, {
+        width: "100%",
+        children: Empty || /*#__PURE__*/_jsx(Tree, {
           data: resources[component.meta.did] || [],
           value: selectedResourceIds[component.meta.did] || [],
           onChange: handleTreeChange,
-          disabled: readOnly
+          disabled: loading || readOnly
         })
       })
     }), !!error && /*#__PURE__*/_jsx(Box, {
@@ -243,13 +256,14 @@ export default function Resource({
     })]
   });
 }
-Resource.propTypes = {
+Resources.propTypes = {
   component: PropTypes.object.isRequired,
   app: PropTypes.object.isRequired,
   projectId: PropTypes.string.isRequired,
   error: PropTypes.string,
   saveSelectedEventsRef: PropTypes.object.isRequired,
-  readOnly: PropTypes.bool,
+  readOnly: PropTypes.bool.isRequired,
+  loading: PropTypes.bool.isRequired,
   release: PropTypes.shape({
     id: PropTypes.string.isRequired,
     status: PropTypes.string
@@ -257,11 +271,12 @@ Resource.propTypes = {
   initialResources: PropTypes.object,
   initUrl: PropTypes.object,
   setResourceComponentsMap: PropTypes.func,
-  componentDid: PropTypes.string
+  componentDid: PropTypes.string,
+  selectedResourceIds: PropTypes.array.isRequired,
+  setSelectedResourceIds: PropTypes.func.isRequired
 };
-Resource.defaultProps = {
+Resources.defaultProps = {
   error: '',
-  readOnly: false,
   release: {
     id: ''
   },
@@ -272,13 +287,14 @@ Resource.defaultProps = {
 };
 const Container = styled(Box)`
   border: 1px solid #ccc;
+  max-height: 600px;
+  width: 100%;
   &.error {
     border-color: ${props => props.theme.palette.error.main};
   }
   border-radius: 4px;
   padding: 16px;
   padding-bottom: 0px;
-  max-height: 600px;
   overflow-y: auto;
   .footer {
     border-top: 1px solid #ddd;

package/lib/blocklet/publish/create-release/step-icon.js

@@ -0,0 +1,63 @@
+import { Box } from '@mui/material';
+import PropTypes from 'prop-types';
+import DoneIcon from '@mui/icons-material/Done';
+import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
+import { jsx as _jsx } from "react/jsx-runtime";
+function StepIcon({
+  step,
+  ok,
+  active,
+  error
+}) {
+  let color = 'grey.500';
+  let content = step + 1;
+  if (ok) {
+    content = /*#__PURE__*/_jsx(DoneIcon, {
+      sx: {
+        fontSize: 18,
+        margin: 0
+      },
+      color: "white"
+    });
+  }
+  if (error || !ok && active > step) {
+    color = 'error.main';
+    content = /*#__PURE__*/_jsx(PriorityHighIcon, {
+      sx: {
+        fontSize: 18,
+        margin: 0
+      },
+      color: "white"
+    });
+  } else if (active >= step) {
+    color = 'primary.main';
+  }
+  return /*#__PURE__*/_jsx(Box, {
+    width: 24,
+    height: 24
+    // eslint-disable-next-line no-nested-ternary
+    ,
+    bgcolor: color,
+    borderRadius: "100%",
+    color: "white",
+    display: "flex",
+    justifyContent: "center",
+    fontWeight: "bold",
+    fontSize: 14,
+    alignItems: "center",
+    children: content
+  });
+}
+StepIcon.propTypes = {
+  step: PropTypes.number,
+  ok: PropTypes.bool,
+  active: PropTypes.number,
+  error: PropTypes.string
+};
+StepIcon.defaultProps = {
+  step: 0,
+  ok: false,
+  active: 0,
+  error: ''
+};
+export default StepIcon;

package/lib/blocklet/publish/{stop-box.js → create-release/stop-box.js}

@@ -3,7 +3,8 @@ import { Box, Container } from '@mui/material';
 import StopIcon from '@mui/icons-material/DoDisturbAlt';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function StopBox({
-  children
+  children,
+  Icon
 }) {
   return /*#__PURE__*/_jsxs(Container, {
     sx: {
@@ -11,17 +12,19 @@ function StopBox({
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
+      paddingTop: '10px',
       margin: '10px 0px'
     },
-    children: [/*#__PURE__*/_jsx(StopIcon, {
+    children: [/*#__PURE__*/_jsx(Box, {
       sx: {
-        fontSize: 32,
         opacity: 0.3,
-        mb: 2
-      }
+        fontSize: 32
+      },
+      children: /*#__PURE__*/_jsx(Icon, {})
     }), /*#__PURE__*/_jsx(Box, {
       sx: {
         mb: 2,
+        opacity: 0.7,
         fontSize: 'small',
         color: 'action'
       },
@@ -30,6 +33,10 @@ function StopBox({
   });
 }
 StopBox.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  Icon: PropTypes.elementType
+};
+StopBox.defaultProps = {
+  Icon: StopIcon
 };
 export default StopBox;

package/lib/blocklet/publish/{tree.js → create-release/tree.js}

@@ -11,7 +11,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { Icon } from '@iconify/react';
-import Images from '../../images';
+import Images from '../../../images';
 
 // BFS algorithm to find node by his ID
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Box, TextField, InputAdornment } from '@mui/material';
+import PropTypes from 'prop-types';
+import { PROJECT } from '@blocklet/constant';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Version({
+  readOnly,
+  params,
+  setParams,
+  paramsErrTip,
+  setParamsErrTip,
+  loading
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  return /*#__PURE__*/_jsx(Box, {
+    display: "flex",
+    mt: 3,
+    className: "section",
+    children: /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        flex: 1
+      },
+      children: [/*#__PURE__*/_jsx(TextField, {
+        required: true,
+        disabled: loading || readOnly,
+        label: `Blocklet ${t('common.version')}`,
+        placeholder: `Blocklet ${t('common.version')}`,
+        InputProps: {
+          'data-cy': 'blocklet-version',
+          readOnly
+        },
+        autoComplete: "off",
+        variant: "outlined",
+        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",
+        disabled: loading || readOnly,
+        variant: "outlined",
+        InputProps: {
+          'data-cy': 'release-note',
+          readOnly,
+          endAdornment: /*#__PURE__*/_jsxs(InputAdornment, {
+            position: "end",
+            children: [params?.note?.length || 0, " / ", PROJECT.MAX_NOTE_LENGTH]
+          })
+        },
+        fullWidth: true,
+        multiline: true,
+        minRows: 4,
+        required: true,
+        value: params.note || '',
+        onChange: e => {
+          setParamsErrTip({
+            note: ''
+          });
+          setParams({
+            note: e.target.value.slice(0, PROJECT.MAX_NOTE_LENGTH)
+          });
+        },
+        error: !!paramsErrTip.note,
+        helperText: paramsErrTip.note || '',
+        sx: {
+          mt: 3
+        }
+      })]
+    })
+  });
+}
+Version.propTypes = {
+  readOnly: PropTypes.bool.isRequired,
+  params: PropTypes.object.isRequired,
+  setParams: PropTypes.func.isRequired,
+  paramsErrTip: PropTypes.object.isRequired,
+  setParamsErrTip: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired
+};
+Version.defaultProps = {};
+export default Version;

package/lib/blocklet/publish/index.js

@@ -51,7 +51,7 @@ export default function BlockletPublish({
         path: "/:projectId",
         element: /*#__PURE__*/_jsx(ReleasesList, {})
       }), /*#__PURE__*/_jsx(Route, {
-        path: "/:projectId/:releaseId",
+        path: "/:projectId/:mode/:releaseId",
         element: /*#__PURE__*/_jsx(CreateRelease, {
           initUrl: initUrl
         })

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

@@ -71,7 +71,7 @@ export default function ProjectList({
     });
   };
   const handleNewBlocklet = () => {
-    navigate(`${UNOWNED_DID}/create`, {
+    navigate(`${UNOWNED_DID}/create/none`, {
       replace: true
     });
   };
@@ -247,7 +247,7 @@ export default function ProjectList({
         return /*#__PURE__*/_jsxs(Box, {
           display: "flex",
           children: [/*#__PURE__*/_jsx(Link, {
-            to: `${project.id}/create`,
+            to: `${project.id}/create/none`,
             children: /*#__PURE__*/_jsx(Tooltip, {
               title: t('blocklet.publish.createRelease'),
               placement: "top",
@@ -273,7 +273,7 @@ export default function ProjectList({
                 style: {
                   display: 'flex'
                 },
-                to: `${project.id}/${project.lastReleaseId}`,
+                to: `${project.id}/new-release/${project.lastReleaseId}`,
                 children: /*#__PURE__*/_jsx(VisibilityIcon, {
                   sx: {
                     fontSize: 18

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

@@ -172,7 +172,7 @@ export default function ReleaseList() {
       customBodyRenderLite: rawIndex => {
         const release = releases[rawIndex];
         return /*#__PURE__*/_jsx(Link, {
-          to: `${release.id}`,
+          to: `view/${release.id}`,
           children: release.blockletVersion || '/'
         });
       }
@@ -301,7 +301,7 @@ export default function ReleaseList() {
     children: [/*#__PURE__*/_jsxs(Box, {
       className: "header",
       children: [breadcrumbs, /*#__PURE__*/_jsx(Link, {
-        to: "create",
+        to: "new-release/none",
         children: /*#__PURE__*/_jsxs(Button, {
           variant: "contained",
           children: [/*#__PURE__*/_jsx(AddIcon, {