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

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

@@ -0,0 +1,407 @@
+import { UNOWNED_DID, WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Box, Breadcrumbs, Button, Typography, Dialog as MaterialDialog } from '@mui/material';
+import styled from '@emotion/styled';
+import { Link, useNavigate } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { joinURL } from 'ufo';
+import { PROJECT } from '@blocklet/constant';
+import Spinner from '@mui/material/CircularProgress';
+import CloudUploadRoundedIcon from '@mui/icons-material/CloudUploadRounded';
+import semver from 'semver';
+import { useState } from 'react';
+import Toast from '@arcblock/ux/lib/Toast/index';
+import pAll from 'p-all';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import pick from 'lodash/pick';
+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 ClickToCopy from '../../../click-to-copy';
+import { formatError } from '../../../util';
+import { useNodeContext } from '../../../contexts/node';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const serverEndpoint = window.env?.serverEndpoint;
+function Header({
+  projectId,
+  params,
+  setParamsErrTip,
+  initUrl,
+  setParams,
+  mode,
+  loading,
+  blocklet,
+  release,
+  isPublished,
+  releaseId,
+  getData,
+  getRelease,
+  componentDid,
+  resourceRelateComponents,
+  disabledSelectComponents,
+  saveSelectedEventsRef,
+  isSelectedResources,
+  initLogoUrl,
+  setLoading,
+  releaseUsedLast,
+  setReleaseUsedLast,
+  projectType
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const {
+    api
+  } = useNodeContext();
+  const navigate = useNavigate();
+  const [showStoreDialog, setShowStoreDialog] = useState(false);
+  const [installResourceTip, setInstallResourceTip] = useState();
+  const onPublish = () => {
+    window.parent.postMessage({
+      event: 'studioDialog.uploaded',
+      componentDid
+    }, '*');
+    getRelease();
+  };
+  const onRelease = async status => {
+    const errors = validateParams({
+      params,
+      isSelectedResources,
+      projectId,
+      status,
+      t
+    });
+    if (errors) {
+      Toast.error(errors.map(x => x.message).join('; '));
+      setParamsErrTip(errors.reduce((acc, x) => ({
+        ...acc,
+        [x.param]: x.message
+      }), {}));
+      return;
+    }
+    const _params = {
+      ...params
+    };
+    const componentMaps = (blocklet?.children || []).reduce((acc, curr) => {
+      acc[curr.meta.did] = true;
+      return acc;
+    }, {});
+    Object.keys(resourceRelateComponents).forEach(blockletDid => {
+      if (!componentMaps[blockletDid]) {
+        return;
+      }
+      let included = false;
+      if (!disabledSelectComponents) {
+        _params.blockletComponents.forEach(item => {
+          if (item.did === blockletDid) {
+            item.included = true;
+            item.required = true;
+            included = true;
+          }
+        });
+      }
+      if (!included) {
+        _params.blockletComponents.push({
+          did: blockletDid,
+          included: true,
+          required: true
+        });
+      }
+    });
+    _params.blockletVersion = semver.valid(_params.blockletVersion);
+    if (!_params.blockletVersion) {
+      Toast.error('Invalid Blocklet Version');
+      setParamsErrTip({
+        blockletVersion: 'Invalid Blocklet Version'
+      });
+      return;
+    }
+    if (initLogoUrl) {
+      try {
+        const filename = await uploadImageToProject({
+          did: blocklet.meta.did,
+          projectId,
+          imageUrl: initLogoUrl
+        });
+        _params.blockletLogo = filename;
+        setParams({
+          blockletLogo: filename
+        });
+      } catch (err) {
+        Toast.error(err.message);
+        return;
+      }
+    }
+    setLoading(true);
+    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.message);
+      setLoading(false);
+      setParamsErrTip({
+        resources: 'Invalid save the resource'
+      });
+      return;
+    }
+    _params.blockletTitle = (_params.blockletTitle || '').trim();
+    _params.blockletDescription = (_params.blockletDescription || '').trim();
+    _params.blockletIntroduction = (_params.blockletIntroduction || '').trim();
+    _params.note = (_params.note || '').trim();
+    _params.blockletComponents = (_params?.blockletComponents || []).filter(x => x.included).map(x => pick(x, ['did', 'required'])).map(JSON.stringify);
+    setLoading(true);
+    api.createRelease({
+      input: {
+        ..._params,
+        did: blocklet.meta.did,
+        projectId,
+        releaseId: releaseUsedLast ? '' : releaseId,
+        status
+      }
+    }).then(res => {
+      if (status === 'draft') {
+        Toast.success(t('blocklet.publish.saveDraftSuccess'));
+      } else {
+        setReleaseUsedLast(false);
+        Toast.success(t('blocklet.publish.createReleaseSuccess'));
+        window.parent.postMessage({
+          event: 'studioDialog.released',
+          componentDid
+        }, '*');
+      }
+      if (mode === 'create') {
+        const id = res?.release?.id;
+        navigate(`../${projectId}/view/${id}`, {
+          replace: true
+        });
+      } else {
+        getRelease();
+      }
+    }).catch(err => {
+      const msg = formatError(err);
+      Toast.error(msg);
+      if (/resource.*empty/.test(msg)) {
+        setParamsErrTip({
+          blockletResource: msg
+        });
+      }
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+  const onOpenConnectStore = async param => {
+    await waitGetConnectedStore(api, param);
+    getData();
+  };
+  let installButton = null;
+  if (isPublished && serverEndpoint) {
+    const blockletMetaUrl = joinURL(serverEndpoint, `/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/release/blocklet.json`);
+    if (projectType === 'pack') {
+      const url = new URL(serverEndpoint);
+      url.pathname = joinURL(url.pathname, '/launch-blocklet/agreement');
+      url.searchParams.set('blocklet_meta_url', blockletMetaUrl);
+      installButton = /*#__PURE__*/_jsx("a", {
+        href: url.href,
+        target: "_blank",
+        rel: "noreferrer",
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "outlined",
+          style: {
+            marginRight: 8
+          },
+          children: t('common.install')
+        })
+      });
+    } else {
+      installButton = /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "outlined",
+          style: {
+            marginRight: 8
+          },
+          onClick: () => setInstallResourceTip(blockletMetaUrl),
+          children: t('blocklet.publish.copyInstallUrl')
+        }), /*#__PURE__*/_jsx(MaterialDialog, {
+          fullWidth: true,
+          maxWidth: "sm",
+          open: installResourceTip,
+          onClose: () => setInstallResourceTip(''),
+          children: /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              py: 5,
+              px: 4,
+              wordBreak: 'break-all'
+            },
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "h6",
+              sx: {
+                mb: 2
+              },
+              children: t('blocklet.publish.installResourceTip')
+            }), /*#__PURE__*/_jsx(ClickToCopy, {
+              children: installResourceTip
+            }), /*#__PURE__*/_jsxs(Typography, {
+              sx: {
+                mt: 2
+              },
+              children: [t('blocklet.publish.installResourceTip2'), /*#__PURE__*/_jsx("a", {
+                style: {
+                  marginLeft: 4
+                },
+                href: "https://www.arcblock.io/docs/blocklet-developer/R3weqCy7WPI8ggudt0C2alWv",
+                target: "_blank",
+                rel: "noreferrer",
+                children: t('blocklet.publish.installResourceHelp')
+              })]
+            })]
+          })
+        })]
+      });
+    }
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Content, {
+      className: "sticky-header",
+      children: /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "row",
+        children: [/*#__PURE__*/_jsxs(Breadcrumbs, {
+          className: "breadcrumbs",
+          "aria-label": "breadcrumb",
+          children: [/*#__PURE__*/_jsx(Link, {
+            to: "../",
+            children: t('common.blockletStudio')
+          }), projectId === UNOWNED_DID ? /*#__PURE__*/_jsx(Typography, {
+            color: "text.primary",
+            children: params?.blockletTitle || 'Blocklet'
+          }) : /*#__PURE__*/_jsx(Link, {
+            to: `../${projectId}`,
+            children: params?.blockletTitle
+          }), /*#__PURE__*/_jsx(Typography, {
+            color: "text.primary",
+            children: mode === 'create' ? t('common.create') : params?.blockletVersion || t('common.edit')
+          })]
+        }), /*#__PURE__*/_jsx(Box, {
+          flex: "1"
+        }), !isPublished && /*#__PURE__*/_jsxs(Button, {
+          variant: "contained",
+          disabled: loading,
+          style: {
+            marginRight: 12
+          },
+          onClick: () => onRelease(PROJECT.RELEASE_STATUS.published),
+          children: [loading && /*#__PURE__*/_jsx(Spinner, {
+            size: 14,
+            sx: {
+              mr: 0.5
+            },
+            color: "inherit"
+          }), t('common.release')]
+        }), 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]}`),
+            children: /*#__PURE__*/_jsx(Button, {
+              variant: "outlined",
+              style: {
+                marginRight: 12
+              },
+              children: t('common.download')
+            })
+          }), /*#__PURE__*/_jsxs(Button, {
+            variant: "contained",
+            onClick: () => setShowStoreDialog(true),
+            children: [/*#__PURE__*/_jsx(CloudUploadRoundedIcon, {
+              style: {
+                fontSize: '1.3em',
+                marginRight: 4
+              }
+            }), t('common.uploadToStore')]
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Dialog, {
+      title: t('common.connectToStore'),
+      disableEscapeKeyDown: true,
+      disablePortal: false,
+      fullWidth: true,
+      open: showStoreDialog,
+      onClose: () => setShowStoreDialog(false),
+      children: /*#__PURE__*/_jsx(ConnectStoreList, {
+        projectType: projectType,
+        blocklet: blocklet,
+        releaseType: params?.blockletComponents?.length > 0 ? 'pack' : 'resource',
+        projectId: projectId,
+        releaseId: releaseId,
+        componentDid: componentDid,
+        onPublish: onPublish,
+        onOpenConnectStore: onOpenConnectStore,
+        onDelete: getData,
+        connectedStores: params.connectedStores || [],
+        publishedStoreIds: release?.publishedStoreIds
+      })
+    })]
+  });
+}
+Header.propTypes = {
+  projectId: PropTypes.string.isRequired,
+  params: PropTypes.object.isRequired,
+  mode: PropTypes.string.isRequired,
+  loading: PropTypes.bool.isRequired,
+  blocklet: PropTypes.object.isRequired,
+  release: PropTypes.object.isRequired,
+  isPublished: PropTypes.bool.isRequired,
+  releaseId: PropTypes.string.isRequired,
+  getData: PropTypes.func.isRequired,
+  getRelease: PropTypes.func.isRequired,
+  componentDid: PropTypes.string.isRequired,
+  resourceRelateComponents: PropTypes.object.isRequired,
+  disabledSelectComponents: PropTypes.bool.isRequired,
+  saveSelectedEventsRef: PropTypes.object.isRequired,
+  isSelectedResources: PropTypes.bool.isRequired,
+  initLogoUrl: PropTypes.string.isRequired,
+  setLoading: PropTypes.func.isRequired,
+  releaseUsedLast: PropTypes.bool.isRequired,
+  setReleaseUsedLast: PropTypes.func.isRequired,
+  projectType: PropTypes.string.isRequired,
+  setParamsErrTip: PropTypes.func.isRequired,
+  setParams: PropTypes.func.isRequired,
+  initUrl: PropTypes.object.isRequired
+};
+const Content = styled.div`
+  .sticky-header {
+    margin-top: -12px;
+    padding: 12px 0;
+    position: sticky;
+    top: 0;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #fff;
+    padding-bottom: 12px;
+    border-bottom: ${({
+  theme
+}) => `1px solid ${theme.palette.divider}`};
+  }
+`;
+export default Header;