@abtnode/ux 1.8.26 → 1.8.28

package/lib/blocklet/component/environment.js

@@ -0,0 +1,277 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ComponentEnvironment;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _core = _interopRequireDefault(require("@material-table/core"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
+var _constant = require("@blocklet/constant");
+var _util = require("@blocklet/meta/lib/util");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _clickToCopy = _interopRequireDefault(require("../../click-to-copy"));
+var _toast = _interopRequireDefault(require("../../toast"));
+var _node = require("../../contexts/node");
+var _tableIcons = _interopRequireDefault(require("../../table-icons"));
+var _table = _interopRequireDefault(require("../../table"));
+var _permission = _interopRequireDefault(require("../../permission"));
+var _util2 = require("../../util");
+var _icons = _interopRequireDefault(require("../icons"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function ComponentEnvironment(_ref) {
+  let {
+    blocklet,
+    ancestors
+  } = _ref;
+  const node = (0, _node.useNodeContext)();
+  const {
+    inService
+  } = node;
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const dids = [...ancestors.map(x => x.meta.did), blocklet.meta.did];
+  const onConfigChanged = () => _toast.default.success(t('blocklet.config.changedTip'));
+  const isConfigEditable = x => x.custom;
+  if ((0, _util2.isInstalling)(blocklet.status)) {
+    return null;
+  }
+  if (blocklet.status === 'unknown' && (0, _util2.isInstalling)(blocklet.status)) {
+    return null;
+  }
+  const onAddConfig = async data => {
+    if (!data.key.trim() || !data.value.trim()) {
+      _toast.default.error(t('blocklet.config.environment.keyValueRequired'));
+      return;
+    }
+    if (data.key.startsWith('BLOCKLET_')) {
+      _toast.default.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.default.error(t('blocklet.config.environment.keyValueRequired'));
+      return;
+    }
+    if (newData.key.startsWith('BLOCKLET_') && !_constant.BLOCKLET_CONFIGURABLE_KEY[newData.key]) {
+      _toast.default.error(t('blocklet.config.environment.invalidKey'));
+      return;
+    }
+    if (newData.key === _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE) {
+      const errMessage = (0, _util2.isValidClusterSize)(newData);
+      if (errMessage) {
+        _toast.default.error(errMessage);
+        return;
+      }
+    }
+    const configs = [newData];
+    if (newData.key !== oldData.key) {
+      configs.push({
+        key: oldData.key
+      });
+    }
+    try {
+      const result = await node.api.configBlocklet({
+        input: {
+          did: dids,
+          configs
+        }
+      });
+      if (result.code === 'ok') {
+        onConfigChanged(result.blocklet);
+      }
+    } catch (err) {
+      _toast.default.error((0, _util2.formatError)(err));
+    }
+  };
+  const onDeleteConfig = async data => {
+    if (data.required) {
+      _toast.default.error(t('blocklet.config.environment.deleteForbidden'));
+      return;
+    }
+    const result = await node.api.configBlocklet({
+      input: {
+        did: dids,
+        configs: [{
+          key: data.key
+        }]
+      }
+    });
+    if (result.code === 'ok') {
+      onConfigChanged(result.blocklet);
+    }
+  };
+
+  // configs
+  const componentConfigs = (blocklet.configs || []).filter(x => !_constant.BLOCKLET_CONFIGURABLE_KEY[x.key]);
+  const sharedConfigObj = (0, _util.getSharedConfigObj)(blocklet, ancestors);
+  const missingRequiredConfigs = (0, _util.getComponentMissingConfigs)(blocklet, ancestors);
+  const configs = componentConfigs.map(x => _objectSpread(_objectSpread({}, x), {}, {
+    value: 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__*/(0, _jsxRuntime.jsx)(_clickToCopy.default, {
+      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: _onChange
+      } = props;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(EditDiv, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          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.secure) {
+        return '******';
+      }
+      if (!d.value) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickToCopy.default, {
+        unstyled: true,
+        value: d.value,
+        style: {
+          wordBreak: 'break-all'
+        },
+        children: d.value
+      });
+    },
+    // eslint-disable-next-line no-shadow
+    editComponent: props => {
+      const {
+        value,
+        rowData,
+        onChange: _onChange2
+      } = props;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(EditDiv, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          fullWidth: true,
+          size: "small",
+          value: value === '__encrypted__' ? '' : value,
+          onChange: e => _onChange2(e.target.value),
+          variant: "outlined",
+          label: t('common.value'),
+          placeholder: t('blocklet.config.environment.value'),
+          margin: "dense",
+          autoFocus: true
+        }), rowData.description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            marginLeft: 12
+          },
+          children: rowData.description
+        })]
+      });
+    }
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+    children: [!!missingRequiredConfigs.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+      severity: "error",
+      style: {
+        marginTop: 24
+      },
+      children: t('blocklet.config.missingRequired')
+    }), hasBWAConfig && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+      severity: "info",
+      children: t('blocklet.config.environment.tip')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+      permission: inService ? '' : 'mutate_blocklet',
+      role: inService ? _util2.BlockletAdminRoles : [],
+      children: hasPermission => /*#__PURE__*/(0, _jsxRuntime.jsx)(_table.default, {
+        className: (0, _util2.isBlockletDev)(blocklet) ? 'readonly-block config-table' : 'config-table',
+        "data-disabled-text": t('blocklet.config.disabledText'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_core.default, {
+          title: /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
+            children: t('common.environment')
+          }),
+          columns: onColumns(),
+          icons: _objectSpread(_objectSpread({}, _icons.default), _tableIcons.default),
+          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.default.object.isRequired,
+  ancestors: _propTypes.default.array
+};
+ComponentEnvironment.defaultProps = {
+  ancestors: []
+};
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .readonly-block {\n    position: relative;\n    &::after {\n      content: attr(data-disabled-text);\n      position: absolute;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      background-color: rgba(230, 230, 230, 0.7);\n      font-size: 24px;\n      letter-spacing: 2px;\n      color: #e33371;\n      padding: 20px;\n      word-break: break-all;\n      word-wrap: break-word;\n      z-index: 10;\n    }\n  }\n  .config-table {\n    margin-bottom: 24px;\n    position: relative;\n    .hide-control {\n      position: absolute;\n      top: 10px;\n      left: 200px;\n      @media (max-width: ", "px) {\n        left: 160px;\n      }\n    }\n\n    .MuiToolbar-root {\n      display: flex;\n    }\n\n    .MuiTableRow-head {\n      display: none;\n    }\n\n    &.hide-header {\n      .MuiToolbar-root {\n        display: none;\n      }\n    }\n  }\n\n  .accordion {\n    margin-bottom: 16px;\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n    padding: 8px 0 8px 0px;\n    &.MuiAccordion-root {\n      background: transparent;\n      box-shadow: none;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      &::before,\n      &::after {\n        height: 0;\n      }\n      .MuiAccordionSummary-root {\n        padding-left: 0;\n      }\n      .accordion-title {\n        font-weight: bold;\n        padding-left: 16px;\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.values.sm);
+const EditDiv = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 60px;\n"])));