@abtnode/ux 1.16.7 → 1.16.8-beta-ca58a421

package/lib/blocklet/storage/index.js

@@ -0,0 +1,434 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Storage;
+var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _constant = require("@blocklet/constant");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _material = require("@mui/material");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _Datatable = _interopRequireDefault(require("@arcblock/ux/lib/Datatable"));
+var _ahooks = require("ahooks");
+var _Tag = _interopRequireDefault(require("@arcblock/ux/lib/Tag"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _HelpOutline = _interopRequireDefault(require("@mui/icons-material/HelpOutline"));
+var _lodash = require("lodash");
+var _node = require("../../contexts/node");
+var _blocklet = require("../../../lib/contexts/blocklet");
+var _toast = _interopRequireDefault(require("../../toast"));
+var _switchDidSpaces = _interopRequireDefault(require("./switch-did-spaces"));
+var _spaces = require("../../util/spaces");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const Container = (0, _styled.default)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow-y: auto;\n"])));
+
+/**
+ * @description 实时显示备份的进度
+ * @param {{appDid: string}} {appDid}
+ * @return {{message: string, progress: number, completed: boolean}}
+ */
+function useBackupProgress(_ref) {
+  let {
+    appDid
+  } = _ref;
+  const [progress, setProgress] = (0, _react.useState)({
+    message: '',
+    progress: 0,
+    completed: false
+  });
+  const node = (0, _node.useNodeContext)();
+  const {
+    ws: {
+      useSubscription
+    }
+  } = node;
+  useSubscription(_constant.BlockletEvents.backupProgress, data => {
+    setProgress(() => _objectSpread({}, data));
+  }, [appDid]);
+  return progress;
+}
+
+/**
+ * @description
+ * @param {{ blocklet: import('@abtnode/client').BlockletState }} { blocklet }
+ * @return {{backups: import('@abtnode/client').Backup[]}}
+ */
+function useBackups(_ref2) {
+  let {
+    blocklet,
+    loading
+  } = _ref2;
+  const [backups, setBackups] = (0, _react.useState)([]);
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  (0, _ahooks.useAsyncEffect)(async () => {
+    var _blocklet$meta;
+    const {
+      backups: data
+    } = await api.getBlockletBackups({
+      input: {
+        did: blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did
+      }
+    });
+    setBackups(data !== null && data !== void 0 ? data : []);
+  }, [blocklet, loading]);
+  return {
+    backups
+  };
+}
+function useSpaceGateways(_ref3) {
+  let {
+    blocklet
+  } = _ref3;
+  const [spaceGateways, setSpaceGateways] = (0, _react.useState)( /** @type {SpaceGateway[]} */
+  []);
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  (0, _ahooks.useAsyncEffect)(async () => {
+    const {
+      spaceGateways: _spaceGateways
+    } = await api.getBlockletSpaceGateways({
+      input: {
+        did: blocklet.meta.did
+      }
+    });
+    setSpaceGateways([{
+      name: 'Prod DID Spaces',
+      url: 'https://www.didspaces.com/app',
+      protected: true
+    }, ...(_spaceGateways !== null && _spaceGateways !== void 0 ? _spaceGateways : [])]);
+  }, [blocklet]);
+  return {
+    spaceGateways
+  };
+}
+function Storage() {
+  /** @type {{ api: import('@abtnode/client').ABTNodeClient, info: import('@abtnode/client').NodeState  }} */
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const {
+    t,
+    locale
+  } = (0, _react.useContext)(_context.LocaleContext);
+  /** @type {{ blocklet: import('@abtnode/client').BlockletState }} */
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const endpoint = (0, _react.useMemo)(() => (0, _spaces.getSpaceBackupEndpoint)(blocklet === null || blocklet === void 0 ? void 0 : blocklet.environments), [blocklet]);
+  const progress = useBackupProgress({
+    appDid: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appDid
+  });
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const {
+    backups
+  } = useBackups({
+    blocklet,
+    loading
+  });
+  const {
+    spaceGateways
+  } = useSpaceGateways({
+    blocklet
+  });
+  const handleManualBackup = async () => {
+    try {
+      if (loading) {
+        return;
+      }
+      setLoading(true);
+      await api.backupBlocklet({
+        input: {
+          appDid: blocklet.appDid,
+          to: 'spaces'
+        }
+      });
+    } catch (error) {
+      _toast.default.error(error.message);
+      console.error(error);
+    }
+  };
+  const columns = [{
+    label: 'DID Spaces',
+    name: 'target',
+    options: {
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRenderLite: index => {
+        var _spaceGateways$find$n, _spaceGateways$find;
+        // eslint-disable-next-line no-unused-vars
+        const {
+          targetUrl
+        } = backups[index];
+        const spaceName = (_spaceGateways$find$n = (_spaceGateways$find = spaceGateways.find(spaceGateway => targetUrl === null || targetUrl === void 0 ? void 0 : targetUrl.includes(spaceGateway === null || spaceGateway === void 0 ? void 0 : spaceGateway.url))) === null || _spaceGateways$find === void 0 ? void 0 : _spaceGateways$find.name) !== null && _spaceGateways$find$n !== void 0 ? _spaceGateways$find$n : 'DID Spaces';
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
+          fontSize: "16px",
+          href: targetUrl,
+          target: "_blank",
+          children: spaceName
+        });
+      }
+    }
+  }, {
+    label: t('common.strategy'),
+    name: 'strategy',
+    options: {
+      /**
+       * @param {0 | 1} strategy
+       * @returns {React.ReactNode}
+       */
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRender: strategy => {
+        const text = strategy === 0 ? t('common.auto') : t('common.manual');
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
+          children: text
+        });
+      }
+    }
+  }, {
+    label: t('common.startTime'),
+    name: 'createdAt',
+    options: {
+      /**
+       * @param {0 | 1} strategy
+       * @returns {React.ReactNode}
+       */
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRender: createdAt => {
+        return (0, _dayjs.default)(createdAt).format('YYYY-MM-DD HH:mm:ss');
+      }
+    }
+  }, {
+    label: t('common.endTime'),
+    name: 'updatedAt',
+    options: {
+      /**
+       * @param {string} updatedAt
+       * @returns {React.ReactNode}
+       */
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRender: updatedAt => {
+        if ((0, _lodash.isEmpty)(updatedAt)) {
+          return '';
+        }
+        return (0, _dayjs.default)(updatedAt).format('YYYY-MM-DD HH:mm:ss');
+      }
+    }
+  }, {
+    label: t('common.status'),
+    name: 'status',
+    options: {
+      /**
+       * @param {string} status
+       * @returns {React.ReactNode}
+       */
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRenderLite: index => {
+        var _backups$index;
+        const {
+          status,
+          message
+        } = (_backups$index = backups === null || backups === void 0 ? void 0 : backups[index]) !== null && _backups$index !== void 0 ? _backups$index : {};
+        if ((0, _lodash.isNull)(status)) {
+          return t('common.progress');
+        }
+        const node = !status ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
+          type: "success",
+          children: t('common.success')
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          display: "inline-flex",
+          alignItems: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
+            type: "error",
+            children: t('common.failed')
+          }), " \xA0", /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            style: {
+              display: 'flex',
+              alignItems: 'center'
+            },
+            title: message,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Icon, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelpOutline.default, {
+                color: "error"
+              })
+            })
+          })]
+        });
+        return node;
+      }
+    }
+  }];
+  (0, _react.useEffect)(() => {
+    if (progress !== null && progress !== void 0 && progress.completed) {
+      if ((progress === null || progress === void 0 ? void 0 : progress.progress) === 100) {
+        _toast.default.success(t('storage.spaces.backupSuccessfully'));
+      } else if ((progress === null || progress === void 0 ? void 0 : progress.progress) === -1) {
+        _toast.default.error(progress === null || progress === void 0 ? void 0 : progress.message);
+      }
+      setLoading(false);
+      progress.progress = 0;
+    } else if (progress.progress) {
+      setLoading(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [progress]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    style: {
+      maxWidth: '1280px'
+    },
+    children: [endpoint && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            fontSize: "1.2rem",
+            fontWeight: "bold",
+            sx: {
+              flexGrow: 1
+            },
+            children: t('storage.spaces.strategy.title')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "small",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              variant: "contained",
+              size: "small",
+              onClick: handleManualBackup,
+              loading: loading && Boolean(progress === null || progress === void 0 ? void 0 : progress.progress),
+              children: t('storage.spaces.strategy.backupNow')
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          marginTop: "16px",
+          display: "flex",
+          alignItems: "center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            flex: 1,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+              children: [t('storage.spaces.strategy.autoBackup'), ": "]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: "coming soon",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Switch, {
+                size: "small",
+                disabled: true
+              })
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          marginTop: "16px",
+          display: "flex",
+          alignItems: "center",
+          children: (backups === null || backups === void 0 ? void 0 : backups.some(b => !b.status && (b === null || b === void 0 ? void 0 : b.targetUrl.includes((0, _spaces.getSpaceGatewayFromEndpoint)(endpoint))))) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            variant: "outlined",
+            size: "small",
+            onClick: () => window.open((0, _spaces.getBackupFilesUrlFromEndpoint)(endpoint)),
+            children: t('storage.spaces.strategy.viewBackupFiles')
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        marginTop: "16px",
+        hidden: !(loading && progress !== null && progress !== void 0 && progress.progress),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          marginTop: "8px",
+          marginBottom: "8px",
+          fontSize: "1.2rem",
+          fontWeight: "bold",
+          children: t('storage.spaces.progress.title')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), loading && !!(progress !== null && progress !== void 0 && progress.progress) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          sx: {
+            overflow: 'hidden'
+          },
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
+          marginTop: "24px",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            color: "primary",
+            children: progress === null || progress === void 0 ? void 0 : progress.message
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            sx: {
+              display: 'flex',
+              alignItems: 'center'
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              sx: {
+                width: '100%',
+                mr: 1
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {
+                color: "primary",
+                variant: "determinate",
+                value: progress === null || progress === void 0 ? void 0 : progress.progress
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              sx: {
+                minWidth: 35
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+                variant: "body2",
+                color: "text.secondary",
+                children: [progress === null || progress === void 0 ? void 0 : progress.progress, "%"]
+              })
+            })]
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          marginTop: "16px",
+          display: "flex",
+          justifyContent: "center",
+          alignContent: "center",
+          height: "44px",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            children: t('storage.spaces.notYet')
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        marginTop: "24px",
+        hidden: !(backups !== null && backups !== void 0 && backups.length),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          marginTop: "8px",
+          marginBottom: "8px",
+          fontSize: "1.2rem",
+          fontWeight: "bold",
+          children: t('storage.spaces.record.title')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datatable.default, {
+          data: backups,
+          columns: columns,
+          emptyNode: t('storage.spaces.record.emptyData', locale),
+          options: {
+            download: false,
+            filter: false,
+            print: false
+          }
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      marginTop: endpoint ? '24px' : '0px',
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        marginBottom: "8px",
+        fontSize: "1.2rem",
+        fontWeight: "bold",
+        children: t('storage.spaces.gateway.connect.title')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_switchDidSpaces.default, {
+        mode: endpoint ? 'switch' : 'add'
+      })]
+    })]
+  });
+}

package/lib/blocklet/storage/item.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SpaceItem;
+var _styles = require("@mui/styles");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _ListItemSecondaryAction = _interopRequireDefault(require("@mui/material/ListItemSecondaryAction"));
+var _Launch = _interopRequireDefault(require("@mui/icons-material/Launch"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Tag = _interopRequireDefault(require("@arcblock/ux/lib/Tag"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _delete = _interopRequireDefault(require("./delete"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["spaceGateway", "connected", "onDelete"];
+/* eslint-disable react/jsx-one-expression-per-line */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const useStyles = (0, _styles.makeStyles)(() => ({
+  buttonText: {
+    textTransform: 'none !important'
+  },
+  iconRoot: {
+    minWidth: 24
+  },
+  menuName: {
+    display: 'flex',
+    flexDirection: 'column',
+    marginRight: '100px',
+    '& span': {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }
+}));
+
+/**
+ * @typedef {{
+ *  name: string,
+ *  url: string,
+ *  protected?: boolean,
+ *  connected?: boolean,
+ * }} SpaceGateway
+ */
+
+/**
+ *
+ *
+ * @export
+ * @param {{
+ *  spaceGateway: SpaceGateway,
+ *  onDelete: (spaceGateway: SpaceGateway) => Promise<void> | void
+ * }} { spaceGateway, onDelete }
+ * @return {*}
+ */
+function SpaceItem(_ref) {
+  let {
+      spaceGateway,
+      connected,
+      onDelete
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const classes = useStyles();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
+    className: classes.menuName
+  }, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+      component: "span",
+      variant: "subtitle1",
+      style: {
+        fontWeight: '400'
+      },
+      children: [spaceGateway === null || spaceGateway === void 0 ? void 0 : spaceGateway.name, " ", connected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
+        color: "primary",
+        children: t('storage.spaces.gateway.connect.connected')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      className: "url",
+      component: "span",
+      variant: "inherit",
+      children: "".concat(spaceGateway === null || spaceGateway === void 0 ? void 0 : spaceGateway.url)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListItemSecondaryAction.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        onClick: e => {
+          e.stopPropagation();
+          window.open(spaceGateway.url);
+        },
+        size: "small",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Launch.default, {})
+      }), (spaceGateway === null || spaceGateway === void 0 ? void 0 : spaceGateway.protected) !== true && /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.default, {
+        spaceGateway: spaceGateway,
+        onDelete: onDelete
+      })]
+    })]
+  }));
+}
+SpaceItem.propTypes = {
+  teamDid: _propTypes.default.string.isRequired,
+  spaceGateway: _propTypes.default.shape({
+    name: _propTypes.default.string.isRequired,
+    url: _propTypes.default.string.isRequired,
+    protected: _propTypes.default.bool
+  }).isRequired,
+  connected: _propTypes.default.bool,
+  onDelete: _propTypes.default.func
+};
+SpaceItem.defaultProps = {
+  onDelete: () => {},
+  connected: false
+};