@abtnode/ux 1.16.14-beta-c308dc3b → 1.16.14-beta-963cb583

package/es/blocklet/component/space-connector.js

@@ -0,0 +1,199 @@
+import React, { useContext, useState, useEffect, useImperativeHandle, forwardRef, useMemo } from 'react';
+import DidConnect from '@arcblock/did-connect/lib/Connect';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import joinUrl from 'url-join';
+import { isEmpty } from 'lodash';
+import Typography from '@mui/material/Typography';
+import Toast from '@arcblock/ux/lib/Toast';
+import { getAppName, getAppDescription } from '@blocklet/meta/lib/util';
+import { useBlockletContext } from '../../contexts/blocklet';
+import { useNodeContext } from '../../contexts/node';
+import SpaceSelector from './space-selector';
+
+/**
+ *
+ *
+ * @param {import('@abtnode/client').BlockletState} blocklet
+ * @return {*}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function useAppUrl(blocklet) {
+  const appUrls = blocklet?.site?.domainAliases?.sort((a, b) => {
+    if (a.accessibility.accessible && b.accessibility.accessible) {
+      return +a.isProtected - +b.isProtected;
+    }
+    return +b.accessibility.accessible - +a.accessibility.accessible;
+  })?.map(domainAlias => {
+    const protocol = domainAlias?.domainStatus?.isHttps ? 'https://' : 'http://';
+    const value = domainAlias?.value;
+    return `${protocol}${value}`;
+  }).filter(Boolean);
+  const appUrl = appUrls?.[0];
+
+  // 授权的时候提供 appUrl, 因为 appUrl 可能很久都拿不到值，所以加一个 loading 效果过渡一下
+  return {
+    appUrl,
+    isReady: Boolean(appUrl)
+  };
+}
+const SpaceConnector = /*#__PURE__*/forwardRef(({
+  onConnect,
+  ...restProps
+}, ref) => {
+  /** @type {{ api: import('@abtnode/client').ABTNodeClient, info: import('@abtnode/client').NodeState  }} */
+  const {
+    api,
+    info
+  } = useNodeContext();
+  const nodeDid = info.did;
+  const {
+    t,
+    locale
+  } = useContext(LocaleContext);
+  /** @type {{ blocklet: import('@abtnode/client').BlockletState }} */
+  const {
+    blocklet,
+    actions: {
+      refreshBlocklet
+    }
+  } = useBlockletContext();
+  const [gatewayUrl, setGatewayUrl] = useState('');
+  const spaceProps = useMemo(() => {
+    return {
+      endpoint: blocklet?.environments?.find(e => e.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT)?.value || '',
+      gatewayUrl: blocklet?.environments?.find(e => e.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACES_URL)?.value || ''
+    };
+  }, [blocklet]);
+  const appName = getAppName(blocklet);
+  const appDescription = getAppDescription(blocklet);
+  const {
+    appUrl,
+    isReady
+  } = useAppUrl(blocklet);
+  async function saveSpaceConnectorEndpoint(did, storageEndpoint) {
+    await api.configBlocklet({
+      input: {
+        did: [did],
+        configs: [{
+          key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACES_URL,
+          value: gatewayUrl
+        }, {
+          key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT,
+          value: storageEndpoint
+        }]
+      }
+    }).then(() => {
+      Toast.success(t('storage.spaces.connect.succeeded', locale));
+    }).catch(error => {
+      console.error(error);
+      Toast.error(error.message);
+    });
+  }
+  const onAuthorizeConnectSuccess = async (response, decrypt) => {
+    await saveSpaceConnectorEndpoint(blocklet.meta.did, decrypt(response.endpoint));
+    setTimeout(() => {
+      setAuthorizeConnect(preValue => ({
+        ...preValue,
+        open: false
+      }));
+      onConnect?.();
+      refreshBlocklet();
+    }, 3000);
+  };
+  const [authorizeConnect, setAuthorizeConnect] = useState({
+    open: false
+  });
+
+  // eslint-disable-next-line no-shadow
+  const handleOnClickAuthorize = gatewayUrl => {
+    if (isEmpty(gatewayUrl)) {
+      Toast.error(t('storage.spaces.addressCannotEmpty', locale));
+      return;
+    }
+    setGatewayUrl(gatewayUrl);
+    setAuthorizeConnect(preValue => ({
+      ...preValue,
+      action: 'one-click-authorization',
+      checkTimeout: 1000 * 300,
+      prefix: joinUrl(gatewayUrl, 'space/api/did'),
+      baseUrl: new URL(gatewayUrl).origin,
+      checkFn: axios.create({
+        baseURL: joinUrl(gatewayUrl, 'space')
+      }).get,
+      extraParams: {
+        appDid: blocklet.appDid,
+        appName,
+        appDescription,
+        scopes: 'list:object read:object write:object',
+        appUrl,
+        referrer: window.location.href,
+        nodeDid
+      },
+      onClose: () => {
+        // eslint-disable-next-line no-shadow
+        setAuthorizeConnect(preValue => ({
+          ...preValue,
+          open: false
+        }));
+      },
+      open: true
+    }));
+  };
+  useEffect(() => {
+    setAuthorizeConnect(preValue => ({
+      ...preValue,
+      messages: {
+        title: t('storage.spaces.authorize.title', {
+          appName
+        }),
+        scan: t('storage.spaces.authorize.scan', {
+          appName
+        }),
+        confirm: '',
+        success: /*#__PURE__*/_jsx(Typography, {
+          gutterBottom: true,
+          children: t('storage.spaces.authorize.success')
+        })
+      }
+    }));
+  }, [appName, locale, t]);
+  useImperativeHandle(ref, () => ({
+    getEndpoint: () => spaceProps.endpoint,
+    getGatewayUrl: () => spaceProps.gatewayUrl
+  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SpaceSelector, {
+      ...restProps,
+      ...spaceProps,
+      onSelect: handleOnClickAuthorize,
+      loading: !isReady
+    }), /*#__PURE__*/_jsx(DidConnect, {
+      forceConnected: false,
+      saveConnect: false,
+      prefix: authorizeConnect.prefix,
+      open: authorizeConnect.open,
+      popup: true,
+      action: authorizeConnect.action,
+      baseUrl: authorizeConnect.baseUrl,
+      checkFn: authorizeConnect.checkFn,
+      onSuccess: onAuthorizeConnectSuccess,
+      onClose: authorizeConnect.onClose,
+      checkTimeout: authorizeConnect.checkTimeout,
+      extraParams: authorizeConnect.extraParams,
+      messages: authorizeConnect.messages,
+      locale: locale
+    })]
+  });
+});
+SpaceConnector.propTypes = {
+  onConnect: PropTypes.func
+};
+SpaceConnector.defaultProps = {
+  onConnect: () => {}
+};
+export default SpaceConnector;

package/es/blocklet/component/space-selector.js

@@ -0,0 +1,178 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import joinUrl from 'url-join';
+import isUrl from 'is-url';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+import Button from '@arcblock/ux/lib/Button';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { TextField, ListItem, ListItemText, ListItemAvatar, Avatar } from '@mui/material';
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useSessionContext } from '../../contexts/session';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_GATEWAY_LIST = [{
+  value: 'https://www.didspaces.com/app',
+  label: 'Prod DID Spaces',
+  avatar: 'P'
+}, {
+  value: 'https://storage.staging.abtnet.io/app',
+  label: 'Staging DID Spaces',
+  avatar: 'S'
+}];
+const filter = createFilterOptions();
+function SpaceSelector({
+  onSelect,
+  endpoint,
+  gatewayUrl: defaultGatewayUrl,
+  loading,
+  size,
+  helperText,
+  ...rest
+}) {
+  const [gatewayList, setGatewayList] = useLocalStorage('did-space-gateway-list', DEFAULT_GATEWAY_LIST);
+  const [gatewayUrl, setGatewayUrl] = useState(defaultGatewayUrl || DEFAULT_GATEWAY_LIST[0].value);
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    api
+  } = useSessionContext();
+  useEffect(() => {
+    if (gatewayUrl && !gatewayList.find(x => x.value === gatewayUrl)) {
+      api.get(joinUrl(gatewayUrl, '/__blocklet__.js?type=json')).then(res => {
+        // FIXME: @wangshijun handle mountPoint
+        setGatewayList([...gatewayList, {
+          value: gatewayUrl,
+          label: res.data.appName
+        }]);
+      }).catch(err => {
+        console.error(err);
+        Toast.error('Can not add this gateway, please check the url and try again');
+      });
+    }
+  }, [gatewayUrl]); // eslint-disable-line
+
+  return /*#__PURE__*/_jsx(Container, {
+    ...rest,
+    freeSolo: true,
+    selectOnFocus: true,
+    clearOnBlur: true,
+    handleHomeEndKeys: true,
+    value: gatewayUrl,
+    options: gatewayList,
+    onChange: (e, v) => {
+      if (!v) {
+        return;
+      }
+      if (typeof v === 'string') {
+        const x = gatewayList.find(o => o.label === v);
+        if (x) {
+          setGatewayUrl(x.value);
+        }
+      } else if (v.inputValue) {
+        // Create a new value from the user input
+        setGatewayUrl(v.inputValue);
+      } else if (v.value) {
+        setGatewayUrl(v.value);
+      }
+    },
+    getOptionLabel: x => {
+      // Value selected with enter, right from the input
+      if (typeof x === 'string') {
+        return x;
+      }
+
+      // Add "xxx" x created dynamically
+      if (x.inputValue) {
+        return x.inputValue;
+      }
+      return x.label;
+    },
+    renderOption: (props, x) => {
+      return /*#__PURE__*/_jsxs(ListItem, {
+        ...props,
+        children: [/*#__PURE__*/_jsx(ListItemAvatar, {
+          children: /*#__PURE__*/_jsx(Avatar, {
+            children: x.avatar
+          })
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          primary: x.label,
+          secondary: x.value
+        })]
+      }, x.value);
+    },
+    filterOptions: (options, params) => {
+      const filtered = filter(options, params);
+
+      // Suggest the creation of a new value if its a valid url
+      if (params.inputValue && isUrl(params.inputValue)) {
+        const isExisting = options.some(x => params.inputValue === x.value);
+        if (!isExisting) {
+          filtered.push({
+            value: params.inputValue,
+            label: 'Add new gateway'
+          });
+        }
+      }
+      return filtered;
+    },
+    renderInput: params => {
+      return /*#__PURE__*/_jsx(TextField, {
+        ...params,
+        helperText: helperText,
+        label: t('storage.spaces.label'),
+        size: size,
+        InputProps: {
+          ...params.InputProps,
+          type: 'search',
+          endAdornment: /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            onClick: () => onSelect(gatewayUrl),
+            size: "small",
+            loading: loading,
+            disable: loading,
+            sx: {
+              position: 'absolute',
+              right: 0,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              width: '100px',
+              height: '100%'
+            },
+            children: endpoint ? t('storage.spaces.reconnect') : t('storage.spaces.connect.now')
+          })
+        }
+      });
+    }
+  });
+}
+const Container = styled(Autocomplete)`
+  height: 40px;
+  width: 100%;
+  max-width: 720px;
+  ${props => props.theme.breakpoints.down('md')} {
+    width: 75%;
+  }
+  input.MuiInputBase-input {
+    max-width: calc(100% - 80px);
+  }
+`;
+SpaceSelector.propTypes = {
+  onSelect: PropTypes.func.isRequired,
+  endpoint: PropTypes.string,
+  loading: PropTypes.bool,
+  size: PropTypes.string,
+  helperText: PropTypes.string,
+  gatewayUrl: PropTypes.string
+};
+SpaceSelector.defaultProps = {
+  endpoint: undefined,
+  loading: false,
+  size: 'small',
+  helperText: '',
+  gatewayUrl: ''
+};
+export default SpaceSelector;

package/es/blocklet/component/start.js

@@ -0,0 +1,101 @@
+import { useState, useContext } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import Toast from '@arcblock/ux/lib/Toast';
+import StartIcon from '@mui/icons-material/PlayArrow';
+import StopIcon from '@mui/icons-material/Stop';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Confirm from '../../confirm';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function StartComponent({
+  component,
+  onStart,
+  onStop,
+  disabled,
+  tip
+}) {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const [loading, setLoading] = useState(false);
+  const [confirmSetting, setConfirmSetting] = useState();
+  const startComponent = async () => {
+    setLoading(true);
+    try {
+      await onStart(component);
+    } catch (error) {
+      Toast.error(error.message);
+    }
+    setLoading(false);
+  };
+  const stopComponent = async () => {
+    setLoading(true);
+    try {
+      await onStop(component);
+    } catch (error) {
+      Toast.error(error.message);
+    }
+    setLoading(false);
+  };
+  const componentDisabled = disabled || loading;
+  const isStop = ['starting', 'running'].includes(component.status);
+  const Icon = isStop ? StopIcon : StartIcon;
+  const btn = /*#__PURE__*/_jsx(StyledButton, {
+    disabled: componentDisabled,
+    onClick: () => {
+      if (isStop) {
+        setConfirmSetting({
+          title: `${t('common.stop')} ${component?.meta?.title}`,
+          description: t('blocklet.action.stopComponentDescription'),
+          confirm: t('blocklet.action.confirmStop'),
+          cancel: t('common.cancel'),
+          onConfirm: () => {
+            setConfirmSetting(null);
+            return stopComponent();
+          },
+          onCancel: () => setConfirmSetting(null)
+        });
+      } else {
+        startComponent();
+      }
+    },
+    "data-cy": `${isStop ? 'stop' : 'start'}-component-btn`,
+    children: /*#__PURE__*/_jsx(Icon, {
+      disabled: componentDisabled
+    })
+  });
+  return [/*#__PURE__*/_jsx(Tooltip, {
+    title: tip || t(`common.${isStop ? 'stop' : 'start'}`),
+    children: /*#__PURE__*/_jsx("span", {
+      children: btn
+    })
+  }, "btn"), confirmSetting && /*#__PURE__*/_jsx(Confirm, {
+    title: confirmSetting.title,
+    description: confirmSetting.description,
+    confirm: confirmSetting.confirm,
+    cancel: confirmSetting.cancel,
+    params: confirmSetting.params,
+    onConfirm: confirmSetting.onConfirm,
+    onCancel: confirmSetting.onCancel
+  }, "connect")];
+}
+StartComponent.propTypes = {
+  component: PropTypes.object.isRequired,
+  onStart: PropTypes.func,
+  onStop: PropTypes.func,
+  disabled: PropTypes.bool,
+  tip: PropTypes.string
+};
+StartComponent.defaultProps = {
+  onStart: async () => {},
+  onStop: async () => {},
+  disabled: false,
+  tip: ''
+};
+const StyledButton = styled(IconButton)`
+  &.Mui-disabled {
+    opacity: 0.5;
+  }
+`;

package/es/blocklet/component/store-blocklet-list.js

@@ -0,0 +1,200 @@
+/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable react/jsx-wrap-multilines */
+import { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import joinUrl from 'url-join';
+import Link from '@mui/material/Link';
+import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
+import { ErrorBoundary } from 'react-error-boundary';
+import InnerList from '@blocklet/list';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Blocklet, { ActionButton } from '@arcblock/ux/lib/Blocklet';
+import Spinner from '@mui/material/CircularProgress';
+import Button from '@arcblock/ux/lib/Button';
+import { isFreeBlocklet } from '@blocklet/meta/lib/util';
+import Toast from '@arcblock/ux/lib/Toast';
+import { formatRegistryLogoPath } from '../../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getStoreDetail = (meta, endpoint) => {
+  return joinUrl(endpoint, `/blocklets/${meta.did}`);
+};
+const displayAttributes = ({
+  blocklet,
+  attribute,
+  value
+}) => {
+  if (blocklet._formatted) {
+    return blocklet._formatted[attribute];
+  }
+  return value;
+};
+const requirePurchase = meta => meta.inStore && isFreeBlocklet(meta) === false;
+function BlockletItem({
+  blocklet,
+  blocklets,
+  handleButtonClick,
+  endpoint
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const logoUrl = joinUrl(endpoint, formatRegistryLogoPath(blocklet.did, blocklet.logo || ''));
+  const [loading, setLoading] = useState(false);
+  const onClickLink = e => {
+    if (!e.currentTarget.contains(e.target)) {
+      e.preventDefault();
+      return false;
+    }
+    return true;
+  };
+  const btnTxt = requirePurchase(blocklet) ? t('common.purchase') : t('blocklet.component.choose');
+  const onAction = async e => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      setLoading(true);
+      await handleButtonClick({
+        meta: blocklet,
+        registryUrl: endpoint,
+        blocklets
+      });
+    } catch (err) {
+      Toast.error(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/_jsx(Link, {
+    href: getStoreDetail(blocklet, endpoint),
+    style: {
+      color: 'initial',
+      textDecoration: 'none'
+    },
+    onClick: onClickLink,
+    target: "_blank",
+    children: /*#__PURE__*/_jsx(StyledBlocklet, {
+      title: displayAttributes({
+        blocklet,
+        attribute: 'title',
+        value: blocklet.title || blocklet.name
+      }),
+      did: blocklet.did,
+      description: displayAttributes({
+        blocklet,
+        attribute: 'description',
+        value: blocklet.description
+      }),
+      cover: blocklet.logo ? logoUrl : '',
+      version: blocklet.version,
+      button: /*#__PURE__*/_jsx("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center'
+        },
+        children: /*#__PURE__*/_jsx(ActionButton, {
+          children: /*#__PURE__*/_jsx(Button, {
+            onClick: onAction,
+            size: "small",
+            disabled: loading,
+            variant: "outlined",
+            color: "primary",
+            "data-cy": "install-blocklet",
+            children: loading ? /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Spinner, {
+                size: 16,
+                style: {
+                  marginRight: 3
+                }
+              }), btnTxt]
+            }) : btnTxt
+          }, blocklet.did)
+        })
+      })
+    })
+  });
+}
+BlockletItem.propTypes = {
+  blocklet: PropTypes.object.isRequired,
+  blocklets: PropTypes.array,
+  handleButtonClick: PropTypes.func,
+  endpoint: PropTypes.string
+};
+BlockletItem.defaultProps = {
+  handleButtonClick: null,
+  endpoint: '',
+  blocklets: []
+};
+export default function BlockletList({
+  handleButtonClick,
+  handleSearchSelect,
+  storeUrl,
+  handleBlockletRender,
+  extraFilter,
+  serverVersion,
+  ...rest
+}) {
+  const {
+    locale
+  } = useLocaleContext();
+  const [filters, setFilters] = useState({});
+  const handleChange = changeData => {
+    setFilters(changeData);
+  };
+  const endpoint = storeUrl;
+  useEffect(() => {
+    setFilters({});
+  }, [endpoint]);
+  return /*#__PURE__*/_jsx(ErrorBoundary, {
+    FallbackComponent: ErrorFallback,
+    resetKeys: [endpoint],
+    children: /*#__PURE__*/_jsx("div", {
+      ...rest,
+      children: /*#__PURE__*/_jsx(InnerList, {
+        blockletRender: blockletRenderProps => {
+          const defaultProps = {
+            ...blockletRenderProps,
+            handleButtonClick,
+            endpoint
+          };
+          return handleBlockletRender({
+            ...blockletRenderProps,
+            defaultRender: /*#__PURE__*/_jsx(BlockletItem, {
+              ...defaultProps
+            })
+          });
+        },
+        baseSearch: true,
+        endpoint: endpoint,
+        locale: locale,
+        onFilterChange: handleChange,
+        onSearchSelect: handleSearchSelect,
+        filters: filters,
+        extraFilter: extraFilter,
+        serverVersion: serverVersion
+      })
+    })
+  });
+}
+BlockletList.propTypes = {
+  storeUrl: PropTypes.string.isRequired,
+  handleButtonClick: PropTypes.func,
+  handleSearchSelect: PropTypes.func,
+  handleBlockletRender: PropTypes.func,
+  extraFilter: PropTypes.func,
+  serverVersion: PropTypes.string
+};
+BlockletList.defaultProps = {
+  handleButtonClick: null,
+  handleSearchSelect: null,
+  handleBlockletRender: null,
+  extraFilter: undefined,
+  serverVersion: ''
+};
+const StyledBlocklet = styled(Blocklet)`
+  .ms-highlight {
+    color: ${props => props.theme.palette.primary.main};
+  }
+`;