@blocklet/launcher-workflow 2.4.4 → 2.4.5

package/lib/components/launch-serverless/shared/common-components.js

@@ -0,0 +1,635 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionCardBox = ActionCardBox;
+exports.AppSuccessDisplay = AppSuccessDisplay;
+exports.ErrorDisplay = ErrorDisplay;
+exports.LoadingContainer = LoadingContainer;
+exports.ProductIntroCarousel = ProductIntroCarousel;
+exports.StyledProgress = StyledProgress;
+exports.TimeText = TimeText;
+exports.calculateEstimatedTime = void 0;
+exports.proxyUrl = proxyUrl;
+exports.useDisplayProgress = useDisplayProgress;
+exports.useFormatTime = exports.useElapsedTime = void 0;
+var _util = require("@blocklet/launcher-util/es/util");
+var _ContentCopy = _interopRequireDefault(require("@mui/icons-material/ContentCopy"));
+var _Dashboard = _interopRequireDefault(require("@mui/icons-material/Dashboard"));
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
+var _Inventory = _interopRequireDefault(require("@mui/icons-material/Inventory2"));
+var _OpenInNew = _interopRequireDefault(require("@mui/icons-material/OpenInNew"));
+var _TaskAlt = _interopRequireDefault(require("@mui/icons-material/TaskAlt"));
+var _material = require("@mui/material");
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _ufo = require("ufo");
+var _Img = _interopRequireDefault(require("@arcblock/ux/lib/Img"));
+var _locale = require("../../../contexts/locale");
+var _util2 = require("../../../util");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function proxyUrl(url) {
+  if (url.startsWith('/')) {
+    return (0, _ufo.joinURL)(window.location.origin, url);
+  }
+  return "".concat(window.location.origin, "/.well-known/service/proxy?url=").concat(url);
+}
+const COMPONENT_BASE_TIME = 2; // 每个组件基础处理时间 4s
+const SIZE_TIME_RATIO = 0.2; // 每 1MB 增加 1s
+// 计算预估安装时间
+const calculateEstimatedTime = exports.calculateEstimatedTime = function calculateEstimatedTime() {
+  let components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  if (!Array.isArray(components) || components.length === 0) {
+    return 0;
+  }
+
+  // 计算所有组件的总大小（MB）
+  const totalSizeMB = components.reduce((acc, comp) => {
+    var _comp$meta;
+    const sizeInMB = ((comp === null || comp === void 0 || (_comp$meta = comp.meta) === null || _comp$meta === void 0 || (_comp$meta = _comp$meta.dist) === null || _comp$meta === void 0 ? void 0 : _comp$meta.size) || 0) / (1024 * 1024);
+    return acc + sizeInMB;
+  }, 0);
+
+  // 计算总时间
+  const totalTime = components.length * COMPONENT_BASE_TIME + totalSizeMB * SIZE_TIME_RATIO;
+  return Math.ceil(totalTime);
+};
+function LoadingContainer(_ref) {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    sx: {
+      padding: '32px 16px 16px 16px',
+      maxWidth: 'sm',
+      width: '100%',
+      margin: '0 auto',
+      borderRadius: '16px',
+      position: 'relative',
+      overflow: 'hidden'
+    },
+    children: children
+  });
+}
+LoadingContainer.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+function StyledProgress(_ref2) {
+  let {
+    value
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {
+    variant: "determinate",
+    value: value,
+    sx: {
+      height: 8,
+      borderRadius: 4,
+      background: '#f5f5f5',
+      '& .MuiLinearProgress-bar': {
+        borderRadius: 4,
+        background: 'linear-gradient(90deg, #1976d2, #42a5f5)'
+      }
+    }
+  });
+}
+StyledProgress.propTypes = {
+  value: _propTypes.default.number.isRequired
+};
+function TimeText(_ref3) {
+  let {
+    children
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+    sx: {
+      fontSize: 14,
+      color: '#888',
+      marginLeft: 8,
+      minWidth: 90,
+      textAlign: 'right',
+      display: 'inline-block'
+    },
+    children: children
+  });
+}
+TimeText.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+function ActionCardBox(_ref4) {
+  let {
+    children,
+    tipFlag = null
+  } = _ref4;
+  const childrenRef = (0, _react.useRef)(children);
+  childrenRef.current = children;
+  const [isTransitioning, setIsTransitioning] = (0, _react.useState)(false);
+  const [currentContent, setCurrentContent] = (0, _react.useState)(children);
+  (0, _react.useEffect)(() => {
+    if (tipFlag !== null) {
+      // 开始动画：透明度 1 -> 0
+      setIsTransitioning(true);
+
+      // 400ms 后替换内容并开始显示：透明度 0 -> 1
+      const timer = setTimeout(() => {
+        setCurrentContent(childrenRef.current);
+        setIsTransitioning(false);
+      }, 400);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [tipFlag]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+    variant: "body1",
+    sx: {
+      textAlign: 'center',
+      opacity: isTransitioning ? 0 : 0.5,
+      transition: 'opacity 0.4s ease-in-out'
+    },
+    children: currentContent
+  });
+}
+ActionCardBox.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  tipFlag: _propTypes.default.any // 可以是任何类型，用于触发动画
+};
+
+// 公共 Hook：格式化时间
+const useFormatTime = () => {
+  const formatTime = seconds => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return "".concat(mins, ":").concat(secs.toString().padStart(2, '0'));
+  };
+  return formatTime;
+};
+
+// 公共 Hook：时间递增
+exports.useFormatTime = useFormatTime;
+const useElapsedTime = exports.useElapsedTime = function useElapsedTime() {
+  let elapsedSeconds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  const [time, setTime] = (0, _react.useState)(elapsedSeconds);
+  const timerRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    timerRef.current = setInterval(() => {
+      setTime(t => t + 1);
+    }, 1000);
+    return () => clearInterval(timerRef.current);
+  }, []);
+  return time;
+};
+
+// 公共 Hook：动态进度
+function useDisplayProgress(start) {
+  let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
+  const [progress, setProgress] = (0, _react.useState)(start);
+  (0, _react.useEffect)(() => {
+    setProgress(prev => Math.max(prev, start));
+  }, [start]);
+  (0, _react.useEffect)(() => {
+    const timerDuration = Math.round((duration || 1) * 1000 / 99);
+    const interval = setInterval(() => {
+      setProgress(prev => Math.min(prev + 1, 99));
+    }, timerDuration);
+    return () => clearInterval(interval);
+  }, [duration]);
+  return progress;
+}
+
+// 公共组件：产品介绍轮播
+function ProductIntroCarousel(_ref5) {
+  let {
+    tips
+  } = _ref5;
+  const [slideIndex, setSlideIndex] = (0, _react.useState)(Math.floor(Math.random() * tips.length));
+  const [slideIn, setSlideIn] = (0, _react.useState)(true);
+  const usedIndicesRef = (0, _react.useRef)(new Set([0]));
+  (0, _react.useEffect)(() => {
+    // 获取下一个随机索引（排除已使用的）
+    const getNextRandomIndex = () => {
+      const availableIndices = tips.map((_, index) => index).filter(index => !usedIndicesRef.current.has(index));
+
+      // 如果所有索引都用过了，重置并重新开始
+      if (availableIndices.length === 0) {
+        usedIndicesRef.current = new Set();
+        return Math.floor(Math.random() * tips.length);
+      }
+
+      // 从可用索引中随机选择一个
+      const randomIndex = Math.floor(Math.random() * availableIndices.length);
+      return availableIndices[randomIndex];
+    };
+    const timer = setInterval(() => {
+      setSlideIn(false);
+      setTimeout(() => {
+        const nextIndex = getNextRandomIndex();
+        setSlideIndex(nextIndex);
+        usedIndicesRef.current = new Set([...usedIndicesRef.current, nextIndex]);
+        setSlideIn(true);
+      }, 400);
+    }, 6000);
+    return () => clearInterval(timer);
+  }, [tips]);
+  if (!tips[slideIndex]) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Alert, {
+    severity: "info",
+    sx: {
+      mt: 8,
+      p: 1.5,
+      opacity: slideIn ? 0.8 : 0,
+      transform: slideIn ? 'translateY(0)' : 'translateY(6px)',
+      transition: 'all 0.4s ease-in-out'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AlertTitle, {
+      sx: {
+        textAlign: 'left'
+      },
+      children: tips[slideIndex].title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      sx: {
+        textAlign: 'left'
+      },
+      children: tips[slideIndex].desc
+    })]
+  });
+}
+ProductIntroCarousel.propTypes = {
+  tips: _propTypes.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string.isRequired,
+    desc: _propTypes.default.string.isRequired
+  })).isRequired
+};
+
+// 公共组件：错误处理
+function ErrorDisplay(_ref6) {
+  let {
+    error = null,
+    onRetry = null
+  } = _ref6;
+  const {
+    t
+  } = (0, _locale.useLocaleContext)();
+  if (!error) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      mt: 3,
+      p: 2,
+      bgcolor: 'error.light',
+      borderRadius: 1
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      color: "error",
+      variant: "body2",
+      children: error
+    }), onRetry && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        mt: 1
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        onClick: onRetry,
+        style: {
+          background: 'none',
+          border: '1px solid #f44336',
+          color: '#f44336',
+          padding: '4px 8px',
+          borderRadius: '4px',
+          cursor: 'pointer'
+        },
+        children: t('loading.retry')
+      })
+    })]
+  });
+}
+ErrorDisplay.propTypes = {
+  error: _propTypes.default.string,
+  onRetry: _propTypes.default.func
+};
+function AppSuccessDisplay(_ref7) {
+  let {
+    accessibleUrl,
+    sessionId,
+    blockletInfo,
+    urls,
+    launchSession
+  } = _ref7;
+  const theme = (0, _material.useTheme)();
+  const {
+    t
+  } = (0, _locale.useLocaleContext)();
+
+  // 获取应用基本信息
+  const appName = (blockletInfo === null || blockletInfo === void 0 ? void 0 : blockletInfo.appName) || t('startApp.unknownApp');
+  const appVersion = (blockletInfo === null || blockletInfo === void 0 ? void 0 : blockletInfo.appVersion) || '';
+  const appLogo = (blockletInfo === null || blockletInfo === void 0 ? void 0 : blockletInfo.appLogo) || '';
+  (0, _react.useEffect)(() => {
+    const stepActive = document.querySelector('.step-active');
+    if (stepActive) {
+      stepActive.classList.add('step-checked');
+    }
+  }, []);
+  const [accessibleUrls, setAccessibleUrls] = (0, _react.useState)([accessibleUrl]);
+  (0, _react.useEffect)(() => {
+    const checkUrls = urls.filter(url => !accessibleUrls.includes(url));
+    checkUrls.forEach(url => {
+      (0, _util2.checkUrlAccessible)(url, 10 * 60 * 1000).then(res => {
+        if (res) {
+          setAccessibleUrls(prev => {
+            const accessible = [...prev, url];
+            return urls.filter(item => accessible.includes(item));
+          });
+        }
+      });
+    });
+  }, [accessibleUrls, urls]);
+  const appUrl = accessibleUrls[0] || urls[0];
+
+  // 功能卡片数据 - 2x2 网格布局
+  const featureCards = [{
+    id: 'visit-app',
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OpenInNew.default, {
+      sx: {
+        fontSize: 24,
+        color: 'primary.main'
+      }
+    }),
+    title: t('startApp.visitApp'),
+    description: t('startApp.visitAppDesc'),
+    onClick: () => window.open((0, _ufo.joinURL)((0, _util.getBaseURL)(), "/api/launches/".concat(sessionId, "/redirect/app?appUrl=").concat(appUrl)), '_blank')
+  }, {
+    id: 'dashboard',
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dashboard.default, {
+      sx: {
+        fontSize: 24,
+        color: 'primary.main'
+      }
+    }),
+    title: t('startApp.dashboard'),
+    description: t('startApp.dashboardDesc'),
+    onClick: () => window.open((0, _ufo.joinURL)((0, _util.getBaseURL)(), "/api/launches/".concat(sessionId, "/redirect/dashboard?appUrl=").concat(appUrl)), '_blank')
+  }, {
+    id: 'subscription',
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Info.default, {
+      sx: {
+        fontSize: 24,
+        color: 'primary.main'
+      }
+    }),
+    title: t('startApp.subscription'),
+    description: t('startApp.subscriptionDesc'),
+    onClick: () => window.open((0, _util.getSubscriptionLink)(launchSession.subscriptionId), '_blank'),
+    show: !!launchSession.subscriptionId
+  }, {
+    id: 'my-orders',
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Inventory.default, {
+      sx: {
+        fontSize: 24,
+        color: 'primary.main'
+      }
+    }),
+    title: t('startApp.myOrders'),
+    description: t('startApp.myOrdersDesc'),
+    onClick: () => window.open((0, _ufo.joinURL)((0, _util.getBaseURL)(), '/u/orders'), '_blank')
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      width: '100%',
+      maxWidth: 800,
+      margin: '0 auto',
+      p: {
+        xs: 2,
+        sm: 3
+      }
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      textAlign: "center",
+      mb: 4,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          width: 80,
+          height: 80,
+          borderRadius: '50%',
+          backgroundColor: (0, _material.alpha)(theme.palette.success.main, 0.2),
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          margin: '0 auto 16px'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TaskAlt.default, {
+          sx: {
+            fontSize: 40,
+            color: 'success.main'
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        variant: "h3",
+        component: "h1",
+        fontWeight: "bold",
+        gutterBottom: true,
+        children: ["\uD83C\uDF89 ", t('startApp.started')]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "body1",
+        color: "text.secondary",
+        children: t('startApp.startedDescription')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        p: 3,
+        mb: 3,
+        borderRadius: 2,
+        border: '1px solid',
+        borderColor: 'divider',
+        backgroundColor: 'background.paper'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        gap: 2,
+        mb: 2,
+        flexWrap: "wrap",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          children: [appLogo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, {
+            src: (0, _ufo.joinURL)(appUrl, appLogo),
+            alt: appName,
+            width: 48,
+            height: 48,
+            style: {
+              borderRadius: 10,
+              overflow: 'hidden'
+            }
+          }, appUrl) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            flex: 1,
+            textAlign: "left",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "h6",
+              color: "text.hint",
+              mb: 1,
+              children: t('startApp.projectName')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "body1",
+              fontWeight: "medium",
+              children: appName
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          minWidth: {
+            xs: '100%',
+            sm: 'auto'
+          },
+          children: [appVersion ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            flex: 1,
+            textAlign: "left",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "h6",
+              color: "text.hint",
+              mb: 1,
+              children: t('startApp.version')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+              label: "v".concat(appVersion),
+              size: "small",
+              color: "primary",
+              variant: "outlined"
+            })]
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            flex: 1,
+            textAlign: "left",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "h6",
+              color: "text.hint",
+              mb: 1,
+              children: t('startApp.status')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+              label: t('startApp.running'),
+              size: "small",
+              color: "success"
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "h6",
+          color: "text.hint",
+          textAlign: "left",
+          children: t('startApp.visitUrl')
+        }), urls.map(url => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          display: "flex",
+          alignItems: "center",
+          mt: 1,
+          gap: 1,
+          sx: {
+            backgroundColor: 'divider',
+            borderRadius: 1,
+            py: 0.5,
+            px: 1.5,
+            flex: 1
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+              width: 8,
+              height: 8,
+              borderRadius: '50%',
+              backgroundColor: accessibleUrls.includes(url) ? 'success.main' : 'error.main'
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body2",
+            textAlign: "left",
+            sx: {
+              flex: 1,
+              fontSize: '0.875rem',
+              wordBreak: 'break-all'
+            },
+            children: url
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            size: "small",
+            onClick: () => navigator.clipboard.writeText(url),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ContentCopy.default, {
+              sx: {
+                fontSize: 16
+              }
+            })
+          })]
+        }, url))]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      display: "grid",
+      gridTemplateColumns: {
+        xs: '1fr',
+        sm: '1fr 1fr'
+      },
+      gap: 2,
+      children: featureCards.filter(card => card.show !== false).map(card => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          p: 3,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          cursor: 'pointer',
+          gap: 1,
+          borderRadius: 2,
+          border: '1px solid',
+          borderColor: 'divider',
+          backgroundColor: 'background.paper',
+          transition: 'all 0.2s ease',
+          '&:hover': {
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
+          }
+        },
+        onClick: card.onClick,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            width: 48,
+            height: 48,
+            borderRadius: 2,
+            backgroundColor: 'rgba(0, 0, 0, 0.04)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: card.icon
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "subtitle2",
+            fontWeight: "bold",
+            textAlign: "left",
+            gutterBottom: true,
+            children: card.title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "caption",
+            color: "text.secondary",
+            textAlign: "center",
+            sx: {
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+              fontSize: '0.75rem'
+            },
+            children: card.description
+          })]
+        })]
+      }, card.id))
+    }, appUrl)]
+  });
+}
+AppSuccessDisplay.propTypes = {
+  launchSession: _propTypes.default.object.isRequired,
+  urls: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  accessibleUrl: _propTypes.default.string.isRequired,
+  sessionId: _propTypes.default.string.isRequired,
+  blockletInfo: _propTypes.default.object.isRequired
+};