@abtnode/ux 1.16.14-beta-ab7f615e → 1.16.14-beta-cb53c14b

package/es/blocklet/component/configuration.js

@@ -0,0 +1,122 @@
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import IconButton from '@mui/material/IconButton';
+import Box from '@mui/material/Box';
+import EditIcon from '@mui/icons-material/Edit';
+import { getDisplayName } from '@blocklet/meta/lib/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Tabs from '@arcblock/ux/lib/Tabs';
+import { isInstalling } from '../../util';
+import ComponentEnvironment from './environment';
+import ComponentSetting from './setting';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ComponentConfiguration({
+  blocklet,
+  ancestors,
+  children
+}) {
+  const [showDialog, setShowDialog] = useState('');
+  const {
+    t
+  } = useLocaleContext();
+  const isComponent = !!ancestors.length;
+  const [tab, setTab] = useState('settings');
+  const name = isComponent ? getDisplayName(blocklet, true) : t('blocklet.component.container');
+  if (isInstalling(blocklet.status)) {
+    return null;
+  }
+  if (blocklet.status === 'unknown' && isInstalling(blocklet.status)) {
+    return null;
+  }
+  const onClose = () => {
+    setShowDialog(false);
+  };
+  const onOpen = e => {
+    e.stopPropagation();
+    // eslint-disable-next-line no-unused-expressions
+    setShowDialog(true);
+  };
+  const tabConfigs = {
+    settings: {
+      label: t('blocklet.component.setting'),
+      value: 'settings',
+      component: /*#__PURE__*/_jsx(ComponentSetting, {
+        blocklet: blocklet,
+        ancestors: ancestors
+      })
+    },
+    environments: {
+      label: t('common.environment'),
+      value: 'environments',
+      component: /*#__PURE__*/_jsx(ComponentEnvironment, {
+        blocklet: blocklet,
+        ancestors: ancestors
+      })
+    }
+  };
+  const tabs = Object.values(tabConfigs).map(({
+    label,
+    value
+  }) => ({
+    label,
+    value
+  }));
+  const onTabChange = newTab => {
+    setTab(newTab);
+  };
+  const tabConfig = tabConfigs[tab] || tabConfigs.settings;
+  return [typeof children === 'function' ? children({
+    open: onOpen
+  }) : /*#__PURE__*/_jsx(IconButton, {
+    onClick: onOpen,
+    "data-cy": "action-config-component",
+    children: /*#__PURE__*/_jsx(EditIcon, {})
+  }), showDialog && /*#__PURE__*/_jsx(StyledDialog, {
+    open: true,
+    fullWidth: true,
+    maxWidth: "md",
+    title: name,
+    onClose: onClose,
+    PaperProps: {
+      style: {
+        minHeight: 'auto'
+      }
+    },
+    children: isComponent ? /*#__PURE__*/_jsxs(Box, {
+      mt: 1,
+      children: [/*#__PURE__*/_jsx(Tabs, {
+        tabs: tabs,
+        current: tab,
+        onChange: onTabChange,
+        scrollButtons: "auto"
+      }), tabConfig.component]
+    }) : /*#__PURE__*/_jsx(ComponentEnvironment, {
+      blocklet: blocklet,
+      ancestors: ancestors
+    })
+  })];
+}
+ComponentConfiguration.propTypes = {
+  blocklet: PropTypes.object.isRequired,
+  ancestors: PropTypes.array,
+  children: PropTypes.any
+};
+ComponentConfiguration.defaultProps = {
+  ancestors: [],
+  children: null
+};
+const StyledDialog = styled(Dialog)`
+  .MuiDialogContent-root {
+    padding-top: 0;
+    margin-top: -32px;
+  }
+  .MuiToolbar-root {
+    padding-right: 12px;
+  }
+  .ux-dialog_right {
+    padding-right: 20px;
+  }
+`;

package/es/blocklet/component/delete.js

@@ -0,0 +1,134 @@
+import { useState, useContext, useEffect } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+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 DeleteComponent({
+  component,
+  remove,
+  disabled,
+  tip,
+  showConfirm,
+  hideBtn,
+  onCancel
+}) {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const [loading, setLoading] = useState(false);
+  const [deleteSetting, setDeleteSetting] = useState(null);
+  const deleteComponent = async param => {
+    setLoading(true);
+    await remove(param.component, param.removeType);
+    setLoading(false);
+    setDeleteSetting(null);
+  };
+  const componentDisabled = disabled || loading;
+  const doShowConfirm = () => {
+    setDeleteSetting({
+      title: `${t('common.delete')} ${component.meta.title || component.meta.name}`,
+      // eslint-disable-next-line react/no-unstable-nested-components
+      description: (params, setParams) => /*#__PURE__*/_jsxs(Typography, {
+        component: "div",
+        children: [/*#__PURE__*/_jsx(Typography, {
+          gutterBottom: true,
+          children: t('blocklet.action.removeComponentDescription')
+        }), /*#__PURE__*/_jsxs(RadioGroup, {
+          name: "removeType",
+          value: params.removeType,
+          onChange: e => setParams({
+            ...params,
+            removeType: e.target.value
+          }),
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            value: "keepData",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: t('blocklet.action.removeComponentKeepData')
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "complete",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: t('blocklet.action.removeComponentComplete')
+          })]
+        })]
+      }),
+      confirm: t('common.confirm'),
+      cancel: t('common.cancel'),
+      params: {
+        component,
+        removeType: 'keepData'
+      },
+      onConfirm: deleteComponent,
+      onCancel: () => {
+        setDeleteSetting(null);
+        onCancel();
+      }
+    });
+  };
+  useEffect(() => {
+    if (showConfirm) {
+      doShowConfirm();
+    } else {
+      setLoading(false);
+      setDeleteSetting(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showConfirm]);
+  const btn = /*#__PURE__*/_jsx(StyledButton, {
+    size: "small",
+    disabled: componentDisabled,
+    onClick: () => doShowConfirm,
+    "data-cy": "delete-component-btn",
+    children: /*#__PURE__*/_jsx(DeleteIcon, {
+      disabled: componentDisabled
+    })
+  });
+  const btnWithToolTip = /*#__PURE__*/_jsx(Tooltip, {
+    title: tip || t('common.delete'),
+    children: /*#__PURE__*/_jsx("span", {
+      children: btn
+    })
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!hideBtn && btnWithToolTip, deleteSetting && /*#__PURE__*/_jsx(Confirm, {
+      title: deleteSetting.title,
+      description: deleteSetting.description,
+      confirm: deleteSetting.confirm,
+      cancel: deleteSetting.cancel,
+      params: deleteSetting.params,
+      onConfirm: deleteSetting.onConfirm,
+      onCancel: deleteSetting.onCancel
+    })]
+  });
+}
+DeleteComponent.propTypes = {
+  component: PropTypes.object.isRequired,
+  remove: PropTypes.func,
+  onCancel: PropTypes.func,
+  disabled: PropTypes.bool,
+  showConfirm: PropTypes.bool,
+  hideBtn: PropTypes.bool,
+  tip: PropTypes.string
+};
+DeleteComponent.defaultProps = {
+  remove: async () => {},
+  disabled: false,
+  showConfirm: false,
+  hideBtn: false,
+  onCancel: () => {},
+  tip: ''
+};
+const StyledButton = styled(IconButton)`
+  &.Mui-disabled {
+    opacity: 0.5;
+  }
+`;

package/es/blocklet/component/environment.js

@@ -0,0 +1,370 @@
+/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable react/prop-types */
+import { useContext } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import MaterialTable from '@material-table/core';
+import TextField from '@mui/material/TextField';
+import Alert from '@mui/material/Alert';
+import { BLOCKLET_CONFIGURABLE_KEY, CHAIN_PROP_MAP } from '@blocklet/constant';
+import { getComponentMissingConfigs, getSharedConfigObj } from '@blocklet/meta/lib/util';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import ClickToCopy from '../../click-to-copy';
+import { useNodeContext } from '../../contexts/node';
+import tableIcons from '../../table-icons';
+import TableStyle from '../../table';
+import Permission from '../../permission';
+import { formatError, isInstalling, isValidClusterSize, isBlockletDev, BlockletAdminRoles } from '../../util';
+import blockletIcons from '../icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getDescription = (data, t) => {
+  let {
+    description
+  } = data;
+  if (Object.values(CHAIN_PROP_MAP).includes(data.key)) {
+    if (description) {
+      description = `${description} (${t('blocklet.config.sharedToAllComponents')})`;
+    } else {
+      description = t('blocklet.config.sharedToAllComponents');
+    }
+  }
+  return description && /*#__PURE__*/_jsx("div", {
+    style: {
+      marginLeft: 12
+    },
+    children: description
+  });
+};
+export default function ComponentEnvironment({
+  blocklet,
+  ancestors
+}) {
+  const node = useNodeContext();
+  const {
+    inService
+  } = node;
+  const {
+    t
+  } = useContext(LocaleContext);
+  const dids = [...ancestors.map(x => x.meta.did), blocklet.meta.did];
+  const onConfigChanged = () => Toast.success(t('blocklet.config.changedTip'));
+  const isConfigEditable = x => x.custom;
+  if (isInstalling(blocklet.status)) {
+    return null;
+  }
+  if (blocklet.status === 'unknown' && isInstalling(blocklet.status)) {
+    return null;
+  }
+  const onAddConfig = async data => {
+    if (!data.key.trim() || !data.value.trim()) {
+      Toast.error(t('blocklet.config.environment.keyValueRequired'));
+      return;
+    }
+    if (data.key.startsWith('BLOCKLET_') || data.key.startsWith('COMPONENT_')) {
+      Toast.error(t('blocklet.config.environment.invalidKey'));
+      return;
+    }
+    data.custom = true;
+    const result = await node.api.configBlocklet({
+      input: {
+        did: dids,
+        configs: [data]
+      }
+    });
+    if (result.code === 'ok') {
+      onConfigChanged(result.blocklet);
+    }
+  };
+  const onEditConfig = async (newData, oldData) => {
+    // only required field can't be empty
+    if (newData.required && (!newData.key.trim() || !newData.value.trim())) {
+      Toast.error(t('blocklet.config.environment.keyValueRequired'));
+      return;
+    }
+    if (newData.key.startsWith('BLOCKLET_') && !BLOCKLET_CONFIGURABLE_KEY[newData.key]) {
+      Toast.error(t('blocklet.config.environment.invalidKey'));
+      return;
+    }
+    if (newData.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE) {
+      const errMessage = isValidClusterSize(newData);
+      if (errMessage) {
+        Toast.error(errMessage);
+        return;
+      }
+    }
+    const configs = [newData];
+    if (newData.key !== oldData.key) {
+      if (!newData.custom) {
+        Toast.error('Only key of custom env can be changed');
+        return;
+      }
+      configs.push({
+        key: oldData.key,
+        custom: true
+      });
+    }
+    try {
+      const result = await node.api.configBlocklet({
+        input: {
+          did: dids,
+          configs
+        }
+      });
+      if (result.code === 'ok') {
+        onConfigChanged(result.blocklet);
+      }
+    } catch (err) {
+      Toast.error(formatError(err));
+    }
+  };
+  const onDeleteConfig = async data => {
+    if (data.required) {
+      Toast.error(t('blocklet.config.environment.deleteForbidden'));
+      return;
+    }
+    if (!data.custom) {
+      Toast.error('Only key of custom env can be changed');
+      return;
+    }
+    const result = await node.api.configBlocklet({
+      input: {
+        did: dids,
+        configs: [{
+          key: data.key,
+          custom: true
+        }]
+      }
+    });
+    if (result.code === 'ok') {
+      onConfigChanged(result.blocklet);
+    }
+  };
+
+  // configs
+  const componentConfigs = (blocklet.configs || []).filter(x => !BLOCKLET_CONFIGURABLE_KEY[x.key]);
+  const sharedConfigObj = getSharedConfigObj(blocklet, ancestors);
+  const missingRequiredConfigs = getComponentMissingConfigs(blocklet, ancestors);
+  const configs = componentConfigs.map(x => ({
+    ...x,
+    value: Object.values(CHAIN_PROP_MAP).includes(x.key) && Object.keys(sharedConfigObj).includes(x.key) ? sharedConfigObj[x.key] : sharedConfigObj[x.key] || x.value
+  }));
+  const hasBWAConfig = configs.some(x => x.key && x.key.startsWith('BWA_'));
+  const action = {
+    onRowAdd: onAddConfig,
+    onRowUpdate: onEditConfig,
+    onRowDelete: onDeleteConfig,
+    // environment declare in blocklet.yml can't be deleted, only custom env can be deleted
+    isDeletable: isConfigEditable
+  };
+  const onColumns = () => [{
+    title: t('common.key'),
+    field: 'key',
+    initialEditValue: 'Key',
+    width: '30%',
+    render: d => /*#__PURE__*/_jsx(ClickToCopy, {
+      value: d.value,
+      style: {
+        color: d.required && !d.value ? '#ff4436' : '#222222',
+        fontWeight: d.required ? 'bold' : 'normal'
+      },
+      children: d.key
+    }),
+    editComponent: props => {
+      const {
+        value,
+        rowData,
+        onChange
+      } = props;
+      return /*#__PURE__*/_jsx(EditDiv, {
+        children: /*#__PURE__*/_jsx(TextField, {
+          fullWidth: true,
+          size: "small",
+          disabled: isConfigEditable(rowData) === false,
+          value: value,
+          onChange: e => onChange(e.target.value),
+          variant: "outlined",
+          label: "Key",
+          placeholder: t('blocklet.config.environment.key'),
+          margin: "dense",
+          autoFocus: true
+        })
+      });
+    }
+  }, {
+    title: t('common.value'),
+    field: 'value',
+    initialEditValue: 'Value',
+    width: 'calc((100% - (96px + 30%)) / 1)',
+    render: d => {
+      if (!d.value) {
+        return null;
+      }
+      if (d.secure) {
+        return '******';
+      }
+      return /*#__PURE__*/_jsx(ClickToCopy, {
+        unstyled: true,
+        value: d.value,
+        style: {
+          wordBreak: 'break-all'
+        },
+        children: d.value
+      });
+    },
+    // eslint-disable-next-line no-shadow
+    editComponent: props => {
+      const {
+        value,
+        rowData,
+        onChange
+      } = props;
+      return /*#__PURE__*/_jsxs(EditDiv, {
+        children: [/*#__PURE__*/_jsx(TextField, {
+          fullWidth: true,
+          size: "small",
+          value: value === '__encrypted__' ? '' : value,
+          onChange: e => onChange(e.target.value),
+          variant: "outlined",
+          label: t('common.value'),
+          placeholder: t('blocklet.config.environment.value'),
+          margin: "dense",
+          autoFocus: true
+        }), getDescription(rowData, t)]
+      });
+    }
+  }];
+  return /*#__PURE__*/_jsxs(Div, {
+    children: [!!missingRequiredConfigs.length && /*#__PURE__*/_jsx(Alert, {
+      severity: "error",
+      style: {
+        marginTop: 24
+      },
+      children: t('blocklet.config.missingRequired')
+    }), hasBWAConfig && /*#__PURE__*/_jsx(Alert, {
+      severity: "info",
+      children: t('blocklet.config.environment.tip')
+    }), /*#__PURE__*/_jsx(Permission, {
+      permission: inService ? '' : 'mutate_blocklets',
+      role: inService ? BlockletAdminRoles : [],
+      children: hasPermission => /*#__PURE__*/_jsx(TableStyle, {
+        className: isBlockletDev(blocklet) ? 'readonly-block config-table' : 'config-table',
+        "data-disabled-text": t('blocklet.config.disabledText'),
+        children: /*#__PURE__*/_jsx(MaterialTable, {
+          title: /*#__PURE__*/_jsx("h4", {
+            children: t('common.environment')
+          }),
+          columns: onColumns(),
+          icons: {
+            ...blockletIcons,
+            ...tableIcons
+          },
+          options: {
+            emptyRowsWhenPaging: false,
+            actionsColumnIndex: -1,
+            tableLayout: 'auto',
+            maxBodyHeight: '100%',
+            paging: false,
+            search: false
+          },
+          localization: {
+            header: {
+              actions: t('common.actions')
+            },
+            body: {
+              emptyDataSourceMessage: t('common.noData')
+            }
+          },
+          data: configs,
+          editable: hasPermission ? action : {}
+        })
+      })
+    })]
+  });
+}
+ComponentEnvironment.propTypes = {
+  blocklet: PropTypes.object.isRequired,
+  ancestors: PropTypes.array
+};
+ComponentEnvironment.defaultProps = {
+  ancestors: []
+};
+const Div = styled.div`
+  .readonly-block {
+    position: relative;
+    &::after {
+      content: attr(data-disabled-text);
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: rgba(230, 230, 230, 0.7);
+      font-size: 24px;
+      letter-spacing: 2px;
+      color: #e33371;
+      padding: 20px;
+      word-break: break-all;
+      word-wrap: break-word;
+      z-index: 10;
+    }
+  }
+  .config-table {
+    margin-bottom: 24px;
+    position: relative;
+    .hide-control {
+      position: absolute;
+      top: 10px;
+      left: 200px;
+      @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+        left: 160px;
+      }
+    }
+
+    .MuiToolbar-root {
+      display: flex;
+    }
+
+    .MuiTableRow-head {
+      display: none;
+    }
+
+    &.hide-header {
+      .MuiToolbar-root {
+        display: none;
+      }
+    }
+  }
+
+  .accordion {
+    margin-bottom: 16px;
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+    padding: 8px 0 8px 0px;
+    &.MuiAccordion-root {
+      background: transparent;
+      box-shadow: none;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      &::before,
+      &::after {
+        height: 0;
+      }
+      .MuiAccordionSummary-root {
+        padding-left: 0;
+      }
+      .accordion-title {
+        font-weight: bold;
+        padding-left: 16px;
+      }
+    }
+  }
+`;
+const EditDiv = styled.div`
+  height: 60px;
+`;