@elice/material-runbox 1.260825.0-runboxusability.7 → 1.260825.0-runboxusability.9

package/cjs/components/material-runbox/MaterialRunbox.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var intl = require('@elice/intl');
+var material = require('@mui/material');
 var MaterialRunboxContent = require('./MaterialRunboxContent.js');
+var theme = require('./theme.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 var MaterialRunboxContext = require('./contexts/MaterialRunboxContext.js');
@@ -28,16 +30,19 @@ var MaterialRunbox = function MaterialRunbox(_a) {
     eliceMaterialRunboxApiConfiguration = _a.eliceMaterialRunboxApiConfiguration,
     __intl = _a.__intl,
     contentProps = tslib.__rest(_a, ["enableAutoShutdownToggle", "enableUrlShare", "locale", "showMessenger", "eliceMaterialRunboxApiConfiguration", "__intl"]);
-  return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
-    value: __intl,
-    children: jsxRuntime.jsx(MaterialRunboxContext.default, {
-      enableAutoShutdownToggle: enableAutoShutdownToggle,
-      enableUrlShare: enableUrlShare,
-      locale: locale,
-      showMessenger: showMessenger,
-      children: jsxRuntime.jsx(MaterialRunboxApiContext.default, {
-        eliceMaterialRunboxApiConfiguration: eliceMaterialRunboxApiConfiguration,
-        children: jsxRuntime.jsx(MaterialRunboxContent.default, Object.assign({}, contentProps))
+  return jsxRuntime.jsx(material.ThemeProvider, {
+    theme: theme.runboxDarkTheme,
+    children: jsxRuntime.jsx(intl.RawEliceIntlProvider, {
+      value: __intl,
+      children: jsxRuntime.jsx(MaterialRunboxContext.default, {
+        enableAutoShutdownToggle: enableAutoShutdownToggle,
+        enableUrlShare: enableUrlShare,
+        locale: locale,
+        showMessenger: showMessenger,
+        children: jsxRuntime.jsx(MaterialRunboxApiContext.default, {
+          eliceMaterialRunboxApiConfiguration: eliceMaterialRunboxApiConfiguration,
+          children: jsxRuntime.jsx(MaterialRunboxContent.default, Object.assign({}, contentProps))
+        })
       })
     })
   });

package/cjs/components/material-runbox/MaterialRunboxContent.js

@@ -16,9 +16,11 @@ var MaterialAdminRunboxConfirmDialog = require('./MaterialAdminRunboxConfirmDial
 var MaterialRunboxAlert = require('./MaterialRunboxAlert.js');
 var MaterialRunboxBody = require('./MaterialRunboxBody.js');
 var MaterialRunboxHeader = require('./MaterialRunboxHeader.js');
+var theme = require('./theme.js');
 var MaterialRunboxContext = require('./contexts/MaterialRunboxContext.js');
 var MaterialRunboxApiContext = require('./contexts/MaterialRunboxApiContext.js');
 var MaterialRunboxCommandContext = require('./contexts/MaterialRunboxCommandContext.js');
+var MaterialRunboxControlContext = require('./contexts/MaterialRunboxControlContext.js');
 var MaterialRunboxDiskUsageAlert = require('./disk/MaterialRunboxDiskUsageAlert.js');
 var MaterialRunboxDiskUsageDialog = require('./disk/MaterialRunboxDiskUsageDialog.js');
 var useMaterialRunboxRunboxIdStarterGet = require('./hooks/useMaterialRunboxRunboxIdStarterGet.js');
@@ -159,66 +161,81 @@ var MaterialRunboxContent = function MaterialRunboxContent(_ref) {
   //
   //
   if (isInitialLoading || starterEnabled && isLoading) {
-    return jsxRuntime.jsx(StyledRunboxContainer, {
-      children: jsxRuntime.jsx(material.CircularProgress, {})
+    return jsxRuntime.jsx(material.ThemeProvider, {
+      theme: theme.runboxLightTheme,
+      children: jsxRuntime.jsx(StyledRunboxContainer, {
+        sx: {
+          backgroundColor: 'background.paper'
+        },
+        children: jsxRuntime.jsx(material.CircularProgress, {})
+      })
     });
   }
   if (isError) {
-    return jsxRuntime.jsx(StyledRunboxContainer, {
-      children: jsxRuntime.jsxs(material.Stack, {
-        gap: "1.5rem",
-        children: [jsxRuntime.jsx(material.Typography, {
-          variant: "h6",
-          children: intl$1.formatMessage({
-            id: 'runbox.runtime.message.startError'
-          })
-        }), jsxRuntime.jsxs(material.Stack, {
-          gap: "0.5rem",
-          children: [jsxRuntime.jsx(material.Button, {
-            startIcon: jsxRuntime.jsx(iconsMaterial.Refresh, {}),
-            onClick: function onClick() {
-              return refetch();
-            },
-            children: intl$1.formatMessage({
-              id: 'runbox.common.retry'
-            })
-          }), typeof showMessenger === 'function' ? jsxRuntime.jsx(material.Button, {
-            variant: "outlined",
-            onClick: function onClick() {
-              return showMessenger();
-            },
+    return jsxRuntime.jsx(material.ThemeProvider, {
+      theme: theme.runboxLightTheme,
+      children: jsxRuntime.jsx(StyledRunboxContainer, {
+        sx: {
+          backgroundColor: 'background.paper',
+          color: 'text.primary'
+        },
+        children: jsxRuntime.jsxs(material.Stack, {
+          gap: "1.5rem",
+          children: [jsxRuntime.jsx(material.Typography, {
+            variant: "h6",
             children: intl$1.formatMessage({
-              id: 'runbox.common.support'
+              id: 'runbox.runtime.message.startError'
             })
-          }) : null]
-        })]
+          }), jsxRuntime.jsxs(material.Stack, {
+            gap: "0.5rem",
+            children: [jsxRuntime.jsx(material.Button, {
+              startIcon: jsxRuntime.jsx(iconsMaterial.Refresh, {}),
+              onClick: function onClick() {
+                return refetch();
+              },
+              children: intl$1.formatMessage({
+                id: 'runbox.common.retry'
+              })
+            }), typeof showMessenger === 'function' ? jsxRuntime.jsx(material.Button, {
+              variant: "outlined",
+              onClick: function onClick() {
+                return showMessenger();
+              },
+              children: intl$1.formatMessage({
+                id: 'runbox.common.support'
+              })
+            }) : null]
+          })]
+        })
       })
     });
   }
   if (!enabledLxpPlan) {
-    return jsxRuntime.jsx(StyledRunboxContainer, {
-      sx: {
-        backgroundColor: function backgroundColor(theme) {
-          return theme.palette.background.paper;
-        }
-      },
-      children: jsxRuntime.jsxs(material.Stack, {
-        gap: "0.5rem",
-        textAlign: "center",
-        children: [jsxRuntime.jsx(material.Typography, {
-          variant: "h6",
-          color: "text.secondary",
-          children: intl$1.formatMessage({
-            id: 'runbox.runtime.message.runbox_unavailable'
-          })
-        }), jsxRuntime.jsx(material.Typography, {
-          variant: "body1",
-          whiteSpace: "pre-line",
-          color: "text.tertiary",
-          children: intl$1.formatMessage({
-            id: 'runbox.runtime.message.lxp_plan_required'
-          })
-        })]
+    return jsxRuntime.jsx(material.ThemeProvider, {
+      theme: theme.runboxLightTheme,
+      children: jsxRuntime.jsx(StyledRunboxContainer, {
+        sx: {
+          backgroundColor: 'background.paper',
+          color: 'text.primary'
+        },
+        children: jsxRuntime.jsxs(material.Stack, {
+          gap: "0.5rem",
+          textAlign: "center",
+          children: [jsxRuntime.jsx(material.Typography, {
+            variant: "h6",
+            color: "text.secondary",
+            children: intl$1.formatMessage({
+              id: 'runbox.runtime.message.runbox_unavailable'
+            })
+          }), jsxRuntime.jsx(material.Typography, {
+            variant: "body1",
+            whiteSpace: "pre-line",
+            color: "text.tertiary",
+            children: intl$1.formatMessage({
+              id: 'runbox.runtime.message.lxp_plan_required'
+            })
+          })]
+        })
       })
     });
   }
@@ -277,28 +294,30 @@ var MaterialRunboxContent = function MaterialRunboxContent(_ref) {
       },
       onRunboxRefetchRequest: refetch,
       children: jsxRuntime.jsx(StyledRunboxContainer, {
-        children: jsxRuntime.jsxs(muiXSnackbar.SnackbarProvider, {
+        children: jsxRuntime.jsx(muiXSnackbar.SnackbarProvider, {
           domRoot: snackbarRoot !== null && snackbarRoot !== void 0 ? snackbarRoot : document.body,
           classes: {
             containerRoot: SNACKBAR_CONTAINER_CLASS
           },
-          children: [jsxRuntime.jsx(MaterialRunboxHeader.default, Object.assign({}, props, {
-            hideTimerPopover: hideTimerPopover
-          })), jsxRuntime.jsx(MaterialRunboxAlert.default, {
-            runbox: runbox,
-            courseId: courseId,
-            studentUserId: studentUserId,
-            userId: userId,
-            isTutoring: isTutoring
-          }), jsxRuntime.jsx(MaterialRunboxDiskUsageAlert.default, {
-            runtimeTemplateId: runtimeTemplate.id,
-            courseId: courseId,
-            userId: studentUserId
-          }), jsxRuntime.jsx(MaterialRunboxDiskUsageDialog.default, {
-            runboxId: runbox.id
-          }), jsxRuntime.jsx(MaterialRunboxBody.default, Object.assign({
-            setSnackbarRoot: setSnackbarRoot
-          }, props))]
+          children: jsxRuntime.jsxs(MaterialRunboxControlContext.default, Object.assign({}, props, {
+            children: [jsxRuntime.jsx(MaterialRunboxHeader.default, Object.assign({}, props, {
+              hideTimerPopover: hideTimerPopover
+            })), jsxRuntime.jsx(MaterialRunboxAlert.default, {
+              runbox: runbox,
+              courseId: courseId,
+              studentUserId: studentUserId,
+              userId: userId,
+              isTutoring: isTutoring
+            }), jsxRuntime.jsx(MaterialRunboxDiskUsageAlert.default, {
+              runtimeTemplateId: runtimeTemplate.id,
+              courseId: courseId,
+              userId: studentUserId
+            }), jsxRuntime.jsx(MaterialRunboxDiskUsageDialog.default, {
+              runboxId: runbox.id
+            }), jsxRuntime.jsx(MaterialRunboxBody.default, Object.assign({
+              setSnackbarRoot: setSnackbarRoot
+            }, props))]
+          }))
         })
       })
     })

package/cjs/components/material-runbox/MaterialRunboxHeader.js

@@ -23,7 +23,6 @@ var MaterialRunboxApiContext = require('./contexts/MaterialRunboxApiContext.js')
 var MaterialRunboxTimer = require('./timer/MaterialRunboxTimer.js');
 var MaterialRunboxStatusButton = require('./status/MaterialRunboxStatusButton.js');
 var useBreakpoint = require('../shared/hooks/useBreakpoint.js');
-var useRunboxControl = require('./hooks/useRunboxControl.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -71,16 +70,6 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref4) {
   var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
     status = _useEliceRunboxRunnin.status;
   var isRunboxRunning = status === 'running';
-  var _useRunboxControl = useRunboxControl.useRunboxControl({
-      runbox: runbox,
-      runtime: runtime,
-      courseId: courseId,
-      refetch: refetch,
-      userId: userId,
-      studentUserId: studentUserId,
-      isTutoring: isTutoring
-    }),
-    stopRuntime = _useRunboxControl.stop;
   //
   var _useQuery = reactQuery.useQuery({
       queryKey: ['getGlobalOrganizationGet', orgNameShort],
@@ -211,7 +200,6 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref4) {
         studentUserId: studentUserId,
         isTutoring: isTutoring,
         enableAutoShutdown: enableAutoShutdown,
-        stopRuntime: stopRuntime,
         menuAnchorEl: menuAnchorEl,
         refetch: refetch,
         handleMenuClose: handleMenuClose,
@@ -226,9 +214,7 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref4) {
     if (isTutoring) {
       return null;
     }
-    return jsxRuntime.jsx(MaterialRunboxActionDisconnect.default, {
-      stopRuntime: stopRuntime
-    });
+    return jsxRuntime.jsx(MaterialRunboxActionDisconnect.default, {});
   };
   //
   //
@@ -239,7 +225,6 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref4) {
       runboxId: runbox.id,
       userId: userId,
       headerElement: headerRef.current,
-      stopRuntime: stopRuntime,
       hideTimerPopover: hideTimerPopover,
       isTutoring: isTutoring
     }) : null, jsxRuntime.jsx(MaterialRunboxStatusButton.default, {

package/cjs/components/material-runbox/actions/MaterialRunboxActionDisconnect.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
-interface MaterialRunboxActionDisconnectProps {
-    stopRuntime: () => Promise<void>;
-}
-declare const MaterialRunboxActionDisconnect: React.FC<MaterialRunboxActionDisconnectProps>;
+declare const MaterialRunboxActionDisconnect: React.FC;
 export default MaterialRunboxActionDisconnect;

package/cjs/components/material-runbox/actions/MaterialRunboxActionDisconnect.js

@@ -12,6 +12,7 @@ var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var material = require('@mui/material');
 var MaterialRunboxActionDisconnectDialog = require('./MaterialRunboxActionDisconnectDialog.js');
 var useBreakpoint = require('../../shared/hooks/useBreakpoint.js');
+var MaterialRunboxControlContext = require('../contexts/MaterialRunboxControlContext.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -20,14 +21,15 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 //
 //
 //
-var MaterialRunboxActionDisconnect = function MaterialRunboxActionDisconnect(_ref) {
-  var stopRuntime = _ref.stopRuntime;
+var MaterialRunboxActionDisconnect = function MaterialRunboxActionDisconnect() {
   var intl$1 = intl.useRawEliceIntl();
   var isSmallTabletOrSmaller = useBreakpoint.useBreakpoint('md', 'down');
   var isMobileOrSmaller = useBreakpoint.useBreakpoint('sm', 'down');
   var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
     status = _useEliceRunboxRunnin.status;
   var isRunboxTerminated = status === 'terminated';
+  var _useMaterialRunboxCon = MaterialRunboxControlContext.useMaterialRunboxControlContext(),
+    stopRuntime = _useMaterialRunboxCon.stop;
   var _React$useState = React__default.default.useState(false),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     isDisconnectDialogOpen = _React$useState2[0],

package/cjs/components/material-runbox/actions/MaterialRunboxActionDisconnectMenuItem.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
-interface MaterialRunboxActionDisconnectMenuItemProps {
-    stopRuntime: () => Promise<void>;
-}
-declare const MaterialRunboxActionDisconnectMenuItem: React.FC<MaterialRunboxActionDisconnectMenuItemProps>;
+declare const MaterialRunboxActionDisconnectMenuItem: React.FC;
 export default MaterialRunboxActionDisconnectMenuItem;

package/cjs/components/material-runbox/actions/MaterialRunboxActionDisconnectMenuItem.js

@@ -12,6 +12,7 @@ var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var lab = require('@mui/lab');
 var material = require('@mui/material');
 var MaterialRunboxActionDisconnectDialog = require('./MaterialRunboxActionDisconnectDialog.js');
+var MaterialRunboxControlContext = require('../contexts/MaterialRunboxControlContext.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -20,44 +21,36 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 //
 //
 //
-var MaterialRunboxActionDisconnectMenuItem = function MaterialRunboxActionDisconnectMenuItem(_ref) {
-  var stopRuntime = _ref.stopRuntime;
+var MaterialRunboxActionDisconnectMenuItem = function MaterialRunboxActionDisconnectMenuItem() {
   var intl$1 = intl.useRawEliceIntl();
   var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
     status = _useEliceRunboxRunnin.status;
   var isRunboxTerminated = status === 'terminated';
+  var _useMaterialRunboxCon = MaterialRunboxControlContext.useMaterialRunboxControlContext(),
+    stopRuntime = _useMaterialRunboxCon.stop,
+    isStopping = _useMaterialRunboxCon.isStopping;
   var _React$useState = React__default.default.useState(false),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     isDisconnectDialogOpen = _React$useState2[0],
     setDisconnectDialogOpen = _React$useState2[1];
-  var _React$useState3 = React__default.default.useState(false),
-    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-    isStopRuntimeLoading = _React$useState4[0],
-    setStopRuntimeLoading = _React$useState4[1];
   /**
    *
    */
   var handleConfirmDisconnect = /*#__PURE__*/function () {
-    var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee() {
+    var _ref = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee() {
       return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
-        while (1) switch (_context.p = _context.n) {
+        while (1) switch (_context.n) {
           case 0:
             setDisconnectDialogOpen(false);
-            setStopRuntimeLoading(true);
-            _context.p = 1;
-            _context.n = 2;
+            _context.n = 1;
             return stopRuntime();
-          case 2:
-            _context.p = 2;
-            setStopRuntimeLoading(false);
-            return _context.f(2);
-          case 3:
+          case 1:
             return _context.a(2);
         }
-      }, _callee, null, [[1,, 2, 3]]);
+      }, _callee);
     }));
     return function handleConfirmDisconnect() {
-      return _ref2.apply(this, arguments);
+      return _ref.apply(this, arguments);
     };
   }();
   //
@@ -65,9 +58,10 @@ var MaterialRunboxActionDisconnectMenuItem = function MaterialRunboxActionDiscon
   //
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs(material.MenuItem, {
+      fullWidth: true,
       component: lab.LoadingButton,
       color: "inherit",
-      loading: isStopRuntimeLoading,
+      loading: isStopping,
       disabled: isRunboxTerminated,
       onClick: function onClick() {
         return setDisconnectDialogOpen(true);

package/cjs/components/material-runbox/actions/MaterialRunboxActionMenu.d.ts

@@ -4,7 +4,6 @@ type MaterialRunboxActionMenuProps = Pick<RuntimeProps, 'runbox' | 'runtime' | '
     menuAnchorEl: null | HTMLButtonElement;
     /** Whether the auto-shutdown toggle is available. Decided by the header. */
     enableAutoShutdown?: boolean;
-    stopRuntime: () => Promise<void>;
     handleMenuClose: () => void;
 };
 declare const MaterialRunboxActionMenu: React.FC<MaterialRunboxActionMenuProps>;

package/cjs/components/material-runbox/actions/MaterialRunboxActionMenu.js

@@ -34,7 +34,6 @@ var MaterialRunboxActionMenu = function MaterialRunboxActionMenu(_ref) {
     isTutoring = _ref.isTutoring,
     _ref$enableAutoShutdo = _ref.enableAutoShutdown,
     enableAutoShutdown = _ref$enableAutoShutdo === void 0 ? false : _ref$enableAutoShutdo,
-    stopRuntime = _ref.stopRuntime,
     menuAnchorEl = _ref.menuAnchorEl,
     refetch = _ref.refetch,
     getAchievementColor = _ref.getAchievementColor,
@@ -116,12 +115,7 @@ var MaterialRunboxActionMenu = function MaterialRunboxActionMenu(_ref) {
     }) : null, jsxRuntime.jsx(MaterialRunboxActionShare.default, {
       handleMenuClose: handleMenuClose
     }), jsxRuntime.jsx(MaterialRunboxActionRestart.default, {
-      runbox: runbox,
-      runtime: runtime,
-      courseId: courseId,
       envMode: envMode,
-      studentUserId: studentUserId,
-      refetch: refetch,
       handleMenuClose: handleMenuClose
     }), isTutoring && studentUserId ? jsxRuntime.jsx(MaterialRunboxActionSubmitLog.default, {
       runboxId: runbox === null || runbox === void 0 ? void 0 : runbox.id,
@@ -134,9 +128,7 @@ var MaterialRunboxActionMenu = function MaterialRunboxActionMenu(_ref) {
       courseId: courseId,
       envMode: envMode,
       handleMenuClose: handleMenuClose
-    }), isMobileOrSmaller && !isTutoring ? jsxRuntime.jsx(MaterialRunboxActionDisconnectMenuItem.default, {
-      stopRuntime: stopRuntime
-    }) : null]
+    }), isMobileOrSmaller && !isTutoring ? jsxRuntime.jsx(MaterialRunboxActionDisconnectMenuItem.default, {}) : null]
   });
 };
 

package/cjs/components/material-runbox/actions/MaterialRunboxActionRestart.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { enums } from '@elice/types';
-import type { RuntimeProps } from '../runtime/Runtime';
-type MaterialRunboxActionRestartProps = Pick<RuntimeProps, 'runbox' | 'runtime' | 'courseId' | 'refetch' | 'studentUserId'> & {
+type MaterialRunboxActionRestartProps = {
     envMode: enums.LeaderboardEnvModeType;
     handleMenuClose: () => void;
 };

package/cjs/components/material-runbox/actions/MaterialRunboxActionRestart.js

@@ -11,7 +11,7 @@ var types = require('@elice/types');
 var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var lab = require('@mui/lab');
 var material = require('@mui/material');
-var useRunboxControl = require('../hooks/useRunboxControl.js');
+var MaterialRunboxControlContext = require('../contexts/MaterialRunboxControlContext.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -21,31 +21,16 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 //
 //
 var MaterialRunboxActionRestart = function MaterialRunboxActionRestart(_ref) {
-  var runbox = _ref.runbox,
-    runtime = _ref.runtime,
-    courseId = _ref.courseId,
-    refetch = _ref.refetch,
-    studentUserId = _ref.studentUserId,
-    envMode = _ref.envMode,
+  var envMode = _ref.envMode,
     handleMenuClose = _ref.handleMenuClose;
   var intl$1 = intl.useRawEliceIntl();
   var _React$useState = React__default.default.useState(false),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    isLoading = _React$useState2[0],
-    setIsLoading = _React$useState2[1];
-  var _React$useState3 = React__default.default.useState(false),
-    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-    isDialogOpened = _React$useState4[0],
-    setDialogOpened = _React$useState4[1];
-  // restart
-  var _useRunboxControl = useRunboxControl.useRunboxControl({
-      runbox: runbox,
-      runtime: runtime,
-      courseId: courseId,
-      refetch: refetch,
-      userId: studentUserId
-    }),
-    start = _useRunboxControl.start;
+    isDialogOpened = _React$useState2[0],
+    setDialogOpened = _React$useState2[1];
+  var _useMaterialRunboxCon = MaterialRunboxControlContext.useMaterialRunboxControlContext(),
+    start = _useMaterialRunboxCon.start,
+    isStarting = _useMaterialRunboxCon.isStarting;
   /**
    *
    */
@@ -56,7 +41,6 @@ var MaterialRunboxActionRestart = function MaterialRunboxActionRestart(_ref) {
    *
    */
   var handleRestartAction = function handleRestartAction() {
-    setIsLoading(true);
     start({
       force: true
     })["catch"](function () {
@@ -64,7 +48,6 @@ var MaterialRunboxActionRestart = function MaterialRunboxActionRestart(_ref) {
     })["finally"](function () {
       handleDialogClose();
       handleMenuClose();
-      setIsLoading(false);
     });
   };
   /**
@@ -116,7 +99,7 @@ var MaterialRunboxActionRestart = function MaterialRunboxActionRestart(_ref) {
       }), jsxRuntime.jsxs(material.DialogActions, {
         children: [jsxRuntime.jsx(material.Button, {
           color: "inherit",
-          disabled: isLoading,
+          disabled: isStarting,
           onClick: handleDialogClose,
           children: intl$1.formatMessage({
             id: 'runbox.common.close'
@@ -124,7 +107,7 @@ var MaterialRunboxActionRestart = function MaterialRunboxActionRestart(_ref) {
         }), jsxRuntime.jsx(lab.LoadingButton, {
           variant: "contained",
           color: "warning",
-          loading: isLoading,
+          loading: isStarting,
           onClick: handleRestartAction,
           children: intl$1.formatMessage({
             id: 'runbox.action.restart.dialog.actions.confirm'

package/cjs/components/material-runbox/contexts/MaterialRunboxControlContext.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { UseRunboxControlProps, UseRunboxControlReturn } from '../hooks/useRunboxControl';
+export type MaterialRunboxControlContextValue = UseRunboxControlReturn;
+export interface MaterialRunboxControlContextProps extends UseRunboxControlProps {
+    children?: React.ReactNode;
+}
+export declare const MaterialRunboxControlContext: React.Context<UseRunboxControlReturn>;
+export declare const useMaterialRunboxControlContext: () => UseRunboxControlReturn;
+/**
+ * Owns the single `useRunboxControl` instance for one runbox, so every consumer
+ * shares one abort controller and one pre-check result.
+ */
+declare const MaterialRunboxControlContextProvider: React.FC<MaterialRunboxControlContextProps>;
+export default MaterialRunboxControlContextProvider;

package/cjs/components/material-runbox/contexts/MaterialRunboxControlContext.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useRunboxControl = require('../hooks/useRunboxControl.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+//
+//
+//
+var MaterialRunboxControlContext = React__default.default.createContext({});
+var useMaterialRunboxControlContext = function useMaterialRunboxControlContext() {
+  return React__default.default.useContext(MaterialRunboxControlContext);
+};
+//
+//
+//
+/**
+ * Owns the single `useRunboxControl` instance for one runbox, so every consumer
+ * shares one abort controller and one pre-check result.
+ */
+var MaterialRunboxControlContextProvider = function MaterialRunboxControlContextProvider(_a) {
+  var children = _a.children,
+    props = tslib.__rest(_a, ["children"]);
+  var _useRunboxControl = useRunboxControl.useRunboxControl(props),
+    start = _useRunboxControl.start,
+    stop = _useRunboxControl.stop,
+    isStarting = _useRunboxControl.isStarting,
+    isStopping = _useRunboxControl.isStopping,
+    preCheckStatus = _useRunboxControl.preCheckStatus;
+  // The hook hands back one mutated ref, so a stable value would leave
+  // consumers reading stale fields once anything below here is memoized.
+  var value = React__default.default.useMemo(function () {
+    return {
+      start: start,
+      stop: stop,
+      isStarting: isStarting,
+      isStopping: isStopping,
+      preCheckStatus: preCheckStatus
+    };
+  }, [start, stop, isStarting, isStopping, preCheckStatus]);
+  return jsxRuntime.jsx(MaterialRunboxControlContext.Provider, {
+    children: children,
+    value: value
+  });
+};
+
+exports.MaterialRunboxControlContext = MaterialRunboxControlContext;
+exports.default = MaterialRunboxControlContextProvider;
+exports.useMaterialRunboxControlContext = useMaterialRunboxControlContext;

package/cjs/components/material-runbox/contexts/index.d.ts

@@ -1,6 +1,8 @@
 export { default as MaterialRunboxApiContextProvider, MaterialRunboxApiContext, useMaterialRunboxApiContext, } from './MaterialRunboxApiContext';
 export { default as MaterialRunboxCommandContextProvider, MaterialRunboxCommandContext, useMaterialRunboxCommandContext, } from './MaterialRunboxCommandContext';
+export { default as MaterialRunboxControlContextProvider, MaterialRunboxControlContext, useMaterialRunboxControlContext, } from './MaterialRunboxControlContext';
 export { default as MaterialRunboxContextProvider, MaterialRunboxContext, useMaterialRunboxContext, } from './MaterialRunboxContext';
 export type { MaterialRunboxApiContextProps, MaterialRunboxApiContextValue, } from './MaterialRunboxApiContext';
 export type { MaterialRunboxCommandContextProps, MaterialRunboxCommandContextValue, } from './MaterialRunboxCommandContext';
 export type { MaterialRunboxContextProps, MaterialRunboxContextValue, } from './MaterialRunboxContext';
+export type { MaterialRunboxControlContextProps, MaterialRunboxControlContextValue, } from './MaterialRunboxControlContext';

package/cjs/components/material-runbox/contexts/index.js

@@ -2,6 +2,7 @@
 
 var MaterialRunboxApiContext = require('./MaterialRunboxApiContext.js');
 var MaterialRunboxCommandContext = require('./MaterialRunboxCommandContext.js');
+var MaterialRunboxControlContext = require('./MaterialRunboxControlContext.js');
 var MaterialRunboxContext = require('./MaterialRunboxContext.js');
 
 
@@ -12,6 +13,9 @@ exports.useMaterialRunboxApiContext = MaterialRunboxApiContext.useMaterialRunbox
 exports.MaterialRunboxCommandContext = MaterialRunboxCommandContext.MaterialRunboxCommandContext;
 exports.MaterialRunboxCommandContextProvider = MaterialRunboxCommandContext.default;
 exports.useMaterialRunboxCommandContext = MaterialRunboxCommandContext.useMaterialRunboxCommandContext;
+exports.MaterialRunboxControlContext = MaterialRunboxControlContext.MaterialRunboxControlContext;
+exports.MaterialRunboxControlContextProvider = MaterialRunboxControlContext.default;
+exports.useMaterialRunboxControlContext = MaterialRunboxControlContext.useMaterialRunboxControlContext;
 exports.MaterialRunboxContext = MaterialRunboxContext.MaterialRunboxContext;
 exports.MaterialRunboxContextProvider = MaterialRunboxContext.default;
 exports.useMaterialRunboxContext = MaterialRunboxContext.useMaterialRunboxContext;

package/cjs/components/material-runbox/disk/MaterialRunboxEnvResetButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { ButtonProps } from '@mui/material';
-export interface MaterialRunboxEnvResetButtonProps extends Omit<ButtonProps, 'onClick'> {
+import type { LoadingButtonProps } from '@mui/lab';
+export interface MaterialRunboxEnvResetButtonProps extends Omit<LoadingButtonProps, 'onClick' | 'loading'> {
     runtimeTemplateId: string;
     courseId: number;
     userId?: number;