@elice/material-runbox-legacy 1.230418.0

package/es/components/material-runbox-legacy/MaterialRunboxLegacyContent.js

@@ -0,0 +1,303 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { usePrevious } from 'react-use';
+import { Flex, Hspace, Text, IconButton, Tooltip, Vspace, LaptopOrLarger, AntProgress, Box, Spinner, Notification } from '@elice/blocks';
+import { eilShare, eilReset } from '@elice/icons';
+import { WSMaterialRunboxLegacyStdio } from './websocket.js';
+import { RunboxHeader, RunboxStatusLight, RunboxBody, RunboxBodyOverlay, RunboxBodyIframe } from './MaterialRunboxLegacyContent.styled.js';
+
+var MaterialRunboxLegacyStatus;
+(function (MaterialRunboxLegacyStatus) {
+  MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Idle"] = 0] = "Idle";
+  MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Connecting"] = 1] = "Connecting";
+  MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Loading"] = 2] = "Loading";
+  MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Done"] = 3] = "Done";
+  MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Disconnected"] = 4] = "Disconnected";
+  MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Terminated"] = 5] = "Terminated";
+  MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Error"] = 6] = "Error";
+})(MaterialRunboxLegacyStatus || (MaterialRunboxLegacyStatus = {}));
+var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
+  var runboxUrl = _ref.runboxUrl,
+    isRunboxTerminated = _ref.isRunboxTerminated,
+    isRunboxJoinError = _ref.isRunboxJoinError,
+    reconnect = _ref.reconnect;
+  var intl = useIntl();
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    runboxStats = _React$useState2[0],
+    setRunboxStats = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isRunboxUrlLoaded = _React$useState4[0],
+    setRunboxUrlLoaded = _React$useState4[1];
+  var isRunboxUrlLoadedPrev = usePrevious(isRunboxUrlLoaded);
+  var _React$useState5 = React.useState(MaterialRunboxLegacyStatus.Idle),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    runboxStatus = _React$useState6[0],
+    setRunboxStatus = _React$useState6[1];
+  var isRunboxPreparing = runboxStatus !== MaterialRunboxLegacyStatus.Done && runboxStatus !== MaterialRunboxLegacyStatus.Terminated;
+  WSMaterialRunboxLegacyStdio.useMessage(function (message) {
+    if (message.type === 'stats') {
+      setRunboxStats(message.data);
+    }
+  }, {
+    camelize: true
+  });
+  var handleReconnect = function handleReconnect() {
+    setRunboxStats(null);
+    setRunboxUrlLoaded(false);
+    reconnect();
+  };
+  var handleShare = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (runboxUrl) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            _context.prev = 2;
+            _context.next = 5;
+            return navigator.clipboard.writeText(runboxUrl);
+          case 5:
+            Notification.success(intl.formatMessage({
+              id: 'runboxLegacy.share.success'
+            }));
+            _context.next = 11;
+            break;
+          case 8:
+            _context.prev = 8;
+            _context.t0 = _context["catch"](2);
+            alert(runboxUrl);
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 8]]);
+    }));
+    return function handleShare() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  //
+  // Change `isRunboxUrlLoaded` flag to false, when runbox url removed.
+  //
+  React.useEffect(function () {
+    if (!runboxUrl) {
+      setRunboxUrlLoaded(false);
+    }
+  }, [runboxUrl]);
+  //
+  // Determine runbox status.
+  //
+  React.useEffect(function () {
+    setRunboxStatus(function () {
+      switch (true) {
+        case isRunboxJoinError:
+          return MaterialRunboxLegacyStatus.Error;
+        case !runboxUrl && isRunboxTerminated:
+          return MaterialRunboxLegacyStatus.Terminated;
+        case !runboxUrl && !isRunboxTerminated && isRunboxUrlLoadedPrev:
+          return MaterialRunboxLegacyStatus.Disconnected;
+        case !runboxUrl && !isRunboxTerminated && !isRunboxUrlLoadedPrev:
+          return MaterialRunboxLegacyStatus.Connecting;
+        case Boolean(runboxUrl) && !isRunboxUrlLoaded:
+          return MaterialRunboxLegacyStatus.Loading;
+        case Boolean(runboxUrl) && isRunboxUrlLoaded:
+          return MaterialRunboxLegacyStatus.Done;
+        default:
+          return MaterialRunboxLegacyStatus.Idle;
+      }
+    }());
+  }, [isRunboxJoinError, isRunboxTerminated, isRunboxUrlLoaded, isRunboxUrlLoadedPrev, runboxUrl]);
+  /**
+   * Runbox status message shown at header.
+   */
+  var renderRunboxStatusMessage = function renderRunboxStatusMessage() {
+    switch (runboxStatus) {
+      case MaterialRunboxLegacyStatus.Idle:
+        return React.createElement(FormattedMessage, {
+          id: "runboxLegacy.status.idle"
+        });
+      case MaterialRunboxLegacyStatus.Connecting:
+        return React.createElement(FormattedMessage, {
+          id: "runboxLegacy.status.connecting"
+        });
+      case MaterialRunboxLegacyStatus.Loading:
+        return React.createElement(FormattedMessage, {
+          id: "runboxLegacy.status.loading"
+        });
+      case MaterialRunboxLegacyStatus.Done:
+        return React.createElement(FormattedMessage, {
+          id: "runboxLegacy.status.done"
+        });
+      case MaterialRunboxLegacyStatus.Disconnected:
+        return React.createElement(FormattedMessage, {
+          id: "runboxLegacy.status.disconnected"
+        });
+      case MaterialRunboxLegacyStatus.Terminated:
+        return React.createElement(FormattedMessage, {
+          id: "runboxLegacy.status.terminated"
+        });
+    }
+  };
+  /**
+   * Header of runbox.
+   */
+  var renderRunboxHeader = function renderRunboxHeader() {
+    var runboxStatsInfo = runboxStats ? React.createElement(LaptopOrLarger, null, React.createElement(Flex, null, React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray7",
+      bold: true
+    }, "CPU:\xA0"), React.createElement(Flex, {
+      align: "center",
+      width: "30px"
+    }, React.createElement(AntProgress, {
+      type: "line",
+      percent: runboxStats.cpu.percent,
+      status: 'active',
+      showInfo: false
+    })), React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray5"
+    }, "\xA0", "".concat(runboxStats.cpu.percent.toFixed(0), "%"))), React.createElement(Hspace, {
+      width: 1
+    }), React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray7",
+      bold: true
+    }, "MEM:\xA0"), React.createElement(Flex, {
+      align: "center",
+      width: "30px"
+    }, React.createElement(AntProgress, {
+      percent: runboxStats.memory.currentBytes / runboxStats.memory.limitBytes * 100,
+      status: 'active',
+      showInfo: false
+    })), React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray5"
+    }, "\xA0", "".concat((runboxStats.memory.currentBytes / 1024 / 1024).toFixed(0), "M / ").concat((runboxStats.memory.limitBytes / 1024 / 1024).toFixed(0), "M"))), React.createElement(Hspace, {
+      width: 1
+    }), React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray7",
+      bold: true
+    }, "DISK:\xA0"), React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray5"
+    }, "Read ".concat((runboxStats.block.rxBytes / 1024 / 1024).toFixed(0), "M Write ").concat((runboxStats.block.txBytes / 1024 / 1024).toFixed(0), "M")), React.createElement(Hspace, {
+      width: 1
+    }), React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray7",
+      bold: true
+    }, "NET:\xA0"), React.createElement(Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray5"
+    }, "\u2193".concat((runboxStats.network.rxBytes / 1024 / 1024).toFixed(0), "M \u2191").concat((runboxStats.network.txBytes / 1024 / 1024).toFixed(0), "M")), React.createElement(Hspace, {
+      width: 1
+    }))) : null;
+    return React.createElement(RunboxHeader, null, runboxStatsInfo, React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(RunboxStatusLight, {
+      status: runboxStatus
+    }), React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(Text, {
+      size: "small"
+    }, renderRunboxStatusMessage())), React.createElement(Hspace, {
+      width: 1
+    }), React.createElement(IconButton, {
+      icon: eilShare,
+      role: "greyfb",
+      size: "small",
+      border: true,
+      disabled: isRunboxPreparing,
+      onClick: handleShare
+    }), React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(Tooltip, {
+      title: isRunboxPreparing ? intl.formatMessage({
+        id: 'runboxLegacy.reloadButton.tooltip'
+      }) : undefined
+    }, React.createElement("span", null, React.createElement(IconButton, {
+      icon: eilReset,
+      iconSpin: isRunboxPreparing,
+      role: "greyfb",
+      size: "small",
+      border: true,
+      disabled: isRunboxPreparing,
+      onClick: handleReconnect
+    }))));
+  };
+  /**
+   * Body of runbox.
+   */
+  var renderRunboxBody = function renderRunboxBody() {
+    if (runboxStatus === MaterialRunboxLegacyStatus.Terminated) {
+      return React.createElement(RunboxBody, null, React.createElement(RunboxBodyOverlay, null, React.createElement(Box, null, React.createElement(Text, {
+        size: "small",
+        preWrap: true,
+        lineHeight: 1.5,
+        textAlign: "center"
+      }, React.createElement(FormattedMessage, {
+        id: "runboxLegacy.overlay.message.terminated"
+      })))));
+    }
+    if (runboxStatus === MaterialRunboxLegacyStatus.Error) {
+      return React.createElement(RunboxBody, null, React.createElement(RunboxBodyOverlay, null, React.createElement(Box, null, React.createElement(Text, {
+        size: "small",
+        preWrap: true,
+        lineHeight: 1.5,
+        textAlign: "center"
+      }, React.createElement(FormattedMessage, {
+        id: "runboxLegacy.overlay.message.error"
+      })))));
+    }
+    return React.createElement(RunboxBody, null, React.createElement(RunboxBodyOverlay, {
+      "aria-hidden": !isRunboxPreparing
+    }, React.createElement(Box, null, React.createElement(Spinner, null), React.createElement(Vspace, {
+      height: 1
+    }), React.createElement(Text, {
+      size: "small",
+      preWrap: true,
+      lineHeight: 1.5,
+      textAlign: "center"
+    }, runboxStatus === MaterialRunboxLegacyStatus.Disconnected ? React.createElement(FormattedMessage, {
+      id: "runboxLegacy.overlay.message.disconnected"
+    }) : React.createElement(FormattedMessage, {
+      id: "runboxLegacy.overlay.message.connecting"
+    })))), runboxUrl ? React.createElement(RunboxBodyIframe, {
+      src: runboxUrl + '/?folder=/mnt/elice/workspace',
+      title: "material-runbox-legacy",
+      onLoad: function onLoad() {
+        return setRunboxUrlLoaded(true);
+      },
+      allow: "clipboard-read; clipboard-write; camera *; microphone *"
+    }) : null);
+  };
+  //
+  //
+  //
+  return React.createElement(React.Fragment, null, renderRunboxHeader(), React.createElement(Vspace, {
+    height: 0.5
+  }), renderRunboxBody());
+};
+
+export { MaterialRunboxLegacyStatus, MaterialRunboxLegacyContent as default };

package/es/components/material-runbox-legacy/MaterialRunboxLegacyContent.styled.d.ts

@@ -0,0 +1,8 @@
+import { MaterialRunboxLegacyStatus } from './MaterialRunboxLegacyContent';
+export declare const RunboxHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RunboxBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RunboxBodyOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RunboxBodyIframe: import("styled-components").StyledComponent<"iframe", any, {}, never>;
+export declare const RunboxStatusLight: import("styled-components").StyledComponent<"span", any, {
+    status: MaterialRunboxLegacyStatus;
+}, never>;

package/es/components/material-runbox-legacy/MaterialRunboxLegacyContent.styled.js

@@ -0,0 +1,35 @@
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+import { MaterialRunboxLegacyStatus } from './MaterialRunboxLegacyContent.js';
+
+var RunboxHeader = styled.div.withConfig({
+  componentId: "sc-18a3wux-0"
+})(["flex:0 0 2.5rem;display:flex;justify-content:flex-end;align-items:center;padding:0 0.5rem;"]);
+var RunboxBody = styled.div.withConfig({
+  componentId: "sc-18a3wux-1"
+})(["position:relative;flex:1;"]);
+var RunboxBodyOverlay = styled.div.withConfig({
+  componentId: "sc-18a3wux-2"
+})(["position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;flex:1;width:100%;height:100%;background:rgba(255,255,255,0.8);&[aria-hidden='true']{display:none;}"]);
+var RunboxBodyIframe = styled.iframe.withConfig({
+  componentId: "sc-18a3wux-3"
+})(["width:100%;height:100%;border:none;"]);
+var RunboxStatusLight = styled.span.withConfig({
+  componentId: "sc-18a3wux-4"
+})(["display:block;width:0.5rem;height:0.5rem;border-radius:50%;background-color:", ";"], function (props) {
+  switch (props.status) {
+    case MaterialRunboxLegacyStatus.Loading:
+    case MaterialRunboxLegacyStatus.Connecting:
+      return base.color.yellow3;
+    case MaterialRunboxLegacyStatus.Disconnected:
+      return base.color.red7;
+    case MaterialRunboxLegacyStatus.Done:
+      return base.color.green7;
+    case MaterialRunboxLegacyStatus.Idle:
+    case MaterialRunboxLegacyStatus.Terminated:
+    default:
+      return base.color.white;
+  }
+});
+
+export { RunboxBody, RunboxBodyIframe, RunboxBodyOverlay, RunboxHeader, RunboxStatusLight };

package/es/components/material-runbox-legacy/MaterialRunboxLegacyRunnerRoomWrapper.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface MaterialRunboxLegacyRunnerRoomWrapperProps {
+    materialRunboxId: number;
+}
+declare const MaterialRunboxLegacyRunnerRoomWrapper: React.FC<MaterialRunboxLegacyRunnerRoomWrapperProps>;
+export default MaterialRunboxLegacyRunnerRoomWrapper;

package/es/components/material-runbox-legacy/MaterialRunboxLegacyRunnerRoomWrapper.js

@@ -0,0 +1,94 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { postOrgMaterialRunboxRunboxRunningCancel, postOrgRunnerRoomMaterialRunboxJoin } from '@elice/api-client';
+import { useMaterialConfig } from '@elice/material-shared-utils';
+import MaterialRunboxLegacyStdioWrapper from './MaterialRunboxLegacyStdioWrapper.js';
+import { WSMaterialRunboxLegacyRunnerRoom } from './websocket.js';
+
+var MaterialRunboxLegacyRunnerRoomWrapper = function MaterialRunboxLegacyRunnerRoomWrapper(_ref) {
+  var materialRunboxId = _ref.materialRunboxId;
+  var _useMaterialConfig = useMaterialConfig(),
+    apiWsOriginUrl = _useMaterialConfig.apiWsOriginUrl;
+  var abortCtrlRef = React.useRef(new AbortController());
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    runboxRunningId = _React$useState2[0],
+    setRunboxRunningId = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isRunboxJoinError = _React$useState4[0],
+    setRunboxJoinError = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isRunboxRunningCanceling = _React$useState6[0],
+    setRunboxRunningCanceling = _React$useState6[1];
+  /**
+   * Resolve runner room token.
+   */
+  var resolveRunnerRoomToken = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          setRunboxJoinError(false);
+          abortCtrlRef.current.abort();
+          abortCtrlRef.current = new AbortController();
+          return _context.abrupt("return", postOrgRunnerRoomMaterialRunboxJoin({
+            materialRunboxId: materialRunboxId
+          }, {
+            signal: abortCtrlRef.current.signal
+          }).then(function (res) {
+            setRunboxJoinError(false);
+            setRunboxRunningId(res.runboxRunningId);
+            return res.roomToken;
+          }).catch(function (err) {
+            setRunboxJoinError(true);
+            throw err;
+          }));
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [materialRunboxId]);
+  /**
+   * Reconnect runbox.
+   */
+  var reconnectRunnerRoomWebSocket = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          if (runboxRunningId) {
+            _context2.next = 2;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 2:
+          setRunboxRunningCanceling(true);
+          return _context2.abrupt("return", postOrgMaterialRunboxRunboxRunningCancel({
+            runboxRunningId: runboxRunningId
+          }).then(function () {
+            return setRunboxRunningCanceling(false);
+          }).catch(function () {
+            return setRunboxRunningCanceling(false);
+          }));
+        case 4:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })), [runboxRunningId]);
+  //
+  //
+  //
+  return React.createElement(WSMaterialRunboxLegacyRunnerRoom.Provider, {
+    enable: !isRunboxRunningCanceling,
+    endpoint: "".concat(apiWsOriginUrl, "/runner_room"),
+    tokenProvider: resolveRunnerRoomToken,
+    connectionTimeout: 8000
+  }, React.createElement(MaterialRunboxLegacyStdioWrapper, {
+    isRunboxJoinError: isRunboxJoinError,
+    reconnectRunnerRoomWebSocket: reconnectRunnerRoomWebSocket
+  }));
+};
+
+export { MaterialRunboxLegacyRunnerRoomWrapper as default };

package/es/components/material-runbox-legacy/MaterialRunboxLegacyStdioWrapper.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MaterialRunboxLegacyStdioWrapperProps {
+    isRunboxJoinError: boolean;
+    reconnectRunnerRoomWebSocket: () => Promise<void>;
+}
+declare const MaterialRunboxLegacyStdioWrapper: React.FC<MaterialRunboxLegacyStdioWrapperProps>;
+export default MaterialRunboxLegacyStdioWrapper;

package/es/components/material-runbox-legacy/MaterialRunboxLegacyStdioWrapper.js

@@ -0,0 +1,99 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import MaterialRunboxLegacyContent from './MaterialRunboxLegacyContent.js';
+import { WSMaterialRunboxLegacyRunnerRoom, WSMaterialRunboxLegacyStdio } from './websocket.js';
+
+var RECONNECT_DELAY = 500;
+var MaterialRunboxLegacyStdioWrapper = function MaterialRunboxLegacyStdioWrapper(_ref) {
+  var isRunboxJoinError = _ref.isRunboxJoinError,
+    reconnectRunnerRoomWebSocket = _ref.reconnectRunnerRoomWebSocket;
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    roomToken = _React$useState2[0],
+    setRoomToken = _React$useState2[1];
+  var _React$useState3 = React.useState(''),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    wsUri = _React$useState4[0],
+    setWsUri = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    runboxUrl = _React$useState6[0],
+    setRunboxUrl = _React$useState6[1];
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isRunboxTerminated = _React$useState8[0],
+    setRunboxTerminated = _React$useState8[1];
+  var _WSMaterialRunboxLega = WSMaterialRunboxLegacyRunnerRoom.useControls(),
+    closeRunnerRoom = _WSMaterialRunboxLega.close;
+  var runnerRoomWsStatus = WSMaterialRunboxLegacyRunnerRoom.useReadyState();
+  /**
+   * Reconnect runbox.
+   */
+  var reconnect = function reconnect() {
+    setRunboxUrl(null);
+    setRunboxTerminated(false);
+    setTimeout(function () {
+      return void reconnectRunnerRoomWebSocket();
+    }, RECONNECT_DELAY);
+  };
+  //
+  //
+  //
+  WSMaterialRunboxLegacyRunnerRoom.useMessage(function (message) {
+    switch (message.type) {
+      case 'ROOM_PREPARED':
+        setRoomToken(message.data.roomToken);
+        setWsUri(message.data.forwarder.wsUri);
+        setRunboxUrl(message.data.forwarder.httpUri);
+        break;
+      case 'EXECUTE_DONE':
+        closeRunnerRoom();
+        setRunboxTerminated(true);
+        break;
+    }
+  }, {
+    camelize: true
+  });
+  //
+  // Remove runbox url, when websocket is not open state.
+  //
+  React.useEffect(function () {
+    if (runnerRoomWsStatus !== WebSocket.OPEN) {
+      setRunboxUrl(null);
+    }
+  }, [runnerRoomWsStatus]);
+  //
+  //
+  //
+  var isReady = Boolean(wsUri) && Boolean(roomToken);
+  return React.createElement(WSMaterialRunboxLegacyStdio.Provider, {
+    enable: isReady,
+    endpoint: "".concat(wsUri, "/client/stdio"),
+    tokenProvider: function () {
+      var _tokenProvider = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", roomToken);
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function tokenProvider() {
+        return _tokenProvider.apply(this, arguments);
+      }
+      return tokenProvider;
+    }(),
+    maxRetries: 5,
+    heartAttack: true
+  }, isReady ? React.createElement(MaterialRunboxLegacyContent, {
+    runboxUrl: runboxUrl,
+    isRunboxJoinError: isRunboxJoinError,
+    isRunboxTerminated: isRunboxTerminated,
+    reconnect: reconnect
+  }) : null);
+};
+
+export { MaterialRunboxLegacyStdioWrapper as default };

package/es/components/material-runbox-legacy/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MaterialRunboxLegacy } from './MaterialRunboxLegacy';
+export type { MaterialRunboxLegacyProps } from './MaterialRunboxLegacy';

package/es/components/material-runbox-legacy/locales.d.ts

@@ -0,0 +1,15 @@
+export declare const en: {
+    'runboxLegacy.status.idle': string;
+    'runboxLegacy.status.connecting': string;
+    'runboxLegacy.status.loading': string;
+    'runboxLegacy.status.done': string;
+    'runboxLegacy.status.disconnected': string;
+    'runboxLegacy.status.terminated': string;
+    'runboxLegacy.reloadButton.tooltip': string;
+    'runboxLegacy.overlay.message.terminated': string;
+    'runboxLegacy.overlay.message.error': string;
+    'runboxLegacy.overlay.message.disconnected': string;
+    'runboxLegacy.overlay.message.connecting': string;
+    'runboxLegacy.share.success': string;
+};
+export declare const ko: typeof en;

package/es/components/material-runbox-legacy/locales.js

@@ -0,0 +1,30 @@
+var en = {
+  'runboxLegacy.status.idle': 'Prepare notebook',
+  'runboxLegacy.status.connecting': 'Connecting notebook',
+  'runboxLegacy.status.loading': 'Loading notebook',
+  'runboxLegacy.status.done': 'Connected',
+  'runboxLegacy.status.disconnected': 'Disconnected',
+  'runboxLegacy.status.terminated': 'Terminated',
+  'runboxLegacy.reloadButton.tooltip': 'Reconnecting',
+  'runboxLegacy.overlay.message.terminated': 'The connection has been terminated.\nTo reconnect, click the refresh button at the top.',
+  'runboxLegacy.overlay.message.error': 'An error occurred connecting to the notebook server.\nClose all open notebook windows, please try again in a few minutes.',
+  'runboxLegacy.overlay.message.disconnected': 'Reconnection is being attempted.\nIf the connection is delayed, check the network environment.',
+  'runboxLegacy.overlay.message.connecting': 'Connecting.\nThis may take up to 5 minutes.',
+  'runboxLegacy.share.success': 'Copied share URL to clipboard.'
+};
+var ko = {
+  'runboxLegacy.status.idle': '준비 중...',
+  'runboxLegacy.status.connecting': '페이지 연결 중...',
+  'runboxLegacy.status.loading': '페이지 로드 중...',
+  'runboxLegacy.status.done': '연결됨',
+  'runboxLegacy.status.disconnected': '연결 끊김',
+  'runboxLegacy.status.terminated': '종료됨',
+  'runboxLegacy.reloadButton.tooltip': '재연결 중',
+  'runboxLegacy.overlay.message.terminated': '연결이 종료되었습니다.\n다시 연결하시려면 상단의 새로고침 버튼을 눌려주세요.',
+  'runboxLegacy.overlay.message.error': '노트북 서버에 연결 중 오류가 발생했습니다.\n열려 있는 모든 노트북 창을 닫고, 몇 분 뒤에 다시 시도해 주십시오.',
+  'runboxLegacy.overlay.message.disconnected': '재연결 시도 중 입니다.\n연결이 지연될 시에는 네트워크 환경을 확인해주세요.',
+  'runboxLegacy.overlay.message.connecting': '연결 중 입니다.\n최대 5분까지 소요될 수 있습니다.',
+  'runboxLegacy.share.success': '공유 URL이 클립보드에 복사되었습니다.'
+};
+
+export { en, ko };

package/es/components/material-runbox-legacy/websocket.d.ts

@@ -0,0 +1,10 @@
+import { EliceWebSocketReact } from '@elice/websocket';
+/**
+ * Websocket instance for material runbox runner room.
+ * - endpoint: `/runner_room`
+ */
+export declare const WSMaterialRunboxLegacyRunnerRoom: EliceWebSocketReact;
+/**
+ * Websocket instance for material runbox stdio.
+ */
+export declare const WSMaterialRunboxLegacyStdio: EliceWebSocketReact;

package/es/components/material-runbox-legacy/websocket.js

@@ -0,0 +1,13 @@
+import { EliceWebSocketReact } from '@elice/websocket';
+
+/**
+ * Websocket instance for material runbox runner room.
+ * - endpoint: `/runner_room`
+ */
+var WSMaterialRunboxLegacyRunnerRoom = new EliceWebSocketReact();
+/**
+ * Websocket instance for material runbox stdio.
+ */
+var WSMaterialRunboxLegacyStdio = new EliceWebSocketReact();
+
+export { WSMaterialRunboxLegacyRunnerRoom, WSMaterialRunboxLegacyStdio };

package/es/index.d.ts

@@ -0,0 +1 @@
+export * from './components/material-runbox-legacy';

package/es/index.js

@@ -0,0 +1 @@
+export { default as MaterialRunboxLegacy } from './components/material-runbox-legacy/MaterialRunboxLegacy.js';