@elice/material-runbox 1.260908.0 → 1.260910.0

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

@@ -1,15 +1,18 @@
 import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { getOrgCourseGet } from '@elice/api-client';
 import { useEliceRunboxRunning } from '@elice/runbox-client';
 import { enums } from '@elice/types';
-import { Menu } from '@mui/material';
+import { Menu, Fade, Stack, Divider } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
+import MaterialRunboxActionAutoShutdown from './MaterialRunboxActionAutoShutdown.js';
+import MaterialRunboxActionDisconnectMenuItem from './MaterialRunboxActionDisconnectMenuItem.js';
 import MaterialRunboxActionReset from './MaterialRunboxActionReset.js';
 import MaterialRunboxActionRestart from './MaterialRunboxActionRestart.js';
 import MaterialRunboxActionShare from './MaterialRunboxActionShare.js';
 import MaterialRunboxActionSubmitLog from './MaterialRunboxActionSubmitLog.js';
+import { useBreakpoint } from '../../shared/hooks/useBreakpoint.js';
 
 //
 //
@@ -17,9 +20,12 @@ import MaterialRunboxActionSubmitLog from './MaterialRunboxActionSubmitLog.js';
 var MaterialRunboxActionMenu = function MaterialRunboxActionMenu(_ref) {
   var runbox = _ref.runbox,
     runtime = _ref.runtime,
+    runtimeTemplate = _ref.runtimeTemplate,
     courseId = _ref.courseId,
     studentUserId = _ref.studentUserId,
     isTutoring = _ref.isTutoring,
+    _ref$enableAutoShutdo = _ref.enableAutoShutdown,
+    enableAutoShutdown = _ref$enableAutoShutdo === void 0 ? false : _ref$enableAutoShutdo,
     menuAnchorEl = _ref.menuAnchorEl,
     refetch = _ref.refetch,
     getAchievementColor = _ref.getAchievementColor,
@@ -27,6 +33,7 @@ var MaterialRunboxActionMenu = function MaterialRunboxActionMenu(_ref) {
   var _a, _b;
   var _useEliceRunboxRunnin = useEliceRunboxRunning(),
     status = _useEliceRunboxRunnin.status;
+  var isMobileOrSmaller = useBreakpoint('sm', 'down');
   var isRunboxRunning = status === 'running';
   //
   //
@@ -79,16 +86,28 @@ var MaterialRunboxActionMenu = function MaterialRunboxActionMenu(_ref) {
       vertical: 'top',
       horizontal: 'right'
     },
+    TransitionComponent: Fade,
     onClose: handleMenuClose,
-    children: [jsx(MaterialRunboxActionShare, {
+    children: [enableAutoShutdown ? jsxs(Fragment, {
+      children: [jsx(Stack, {
+        direction: "row",
+        alignItems: "center",
+        padding: "0.25rem 0.5rem",
+        children: jsx(MaterialRunboxActionAutoShutdown, {
+          runtime: runtime,
+          runtimeTemplate: runtimeTemplate,
+          courseId: courseId,
+          refetch: refetch
+        })
+      }), jsx(Divider, {
+        sx: {
+          margin: '0.5rem 0'
+        }
+      })]
+    }) : null, jsx(MaterialRunboxActionShare, {
       handleMenuClose: handleMenuClose
     }), jsx(MaterialRunboxActionRestart, {
-      runbox: runbox,
-      runtime: runtime,
-      courseId: courseId,
       envMode: envMode,
-      studentUserId: studentUserId,
-      refetch: refetch,
       handleMenuClose: handleMenuClose
     }), isTutoring && studentUserId ? jsx(MaterialRunboxActionSubmitLog, {
       runboxId: runbox === null || runbox === void 0 ? void 0 : runbox.id,
@@ -101,7 +120,7 @@ var MaterialRunboxActionMenu = function MaterialRunboxActionMenu(_ref) {
       courseId: courseId,
       envMode: envMode,
       handleMenuClose: handleMenuClose
-    })]
+    }), isMobileOrSmaller && !isTutoring ? jsx(MaterialRunboxActionDisconnectMenuItem, {}) : null]
   });
 };
 

package/es/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/es/components/material-runbox/actions/MaterialRunboxActionRestart.js

@@ -7,37 +7,22 @@ import { enums } from '@elice/types';
 import { faRotateRight } from '@fortawesome/pro-solid-svg-icons';
 import { LoadingButton } from '@mui/lab';
 import { MenuItem, ListItemIcon, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material';
-import { useRunboxControl } from '../hooks/useRunboxControl.js';
+import { useMaterialRunboxControlContext } from '../contexts/MaterialRunboxControlContext.js';
 
 //
 //
 //
 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 = useRawEliceIntl();
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    isLoading = _React$useState2[0],
-    setIsLoading = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    isDialogOpened = _React$useState4[0],
-    setDialogOpened = _React$useState4[1];
-  // restart
-  var _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 = useMaterialRunboxControlContext(),
+    start = _useMaterialRunboxCon.start,
+    isStarting = _useMaterialRunboxCon.isStarting;
   /**
    *
    */
@@ -48,7 +33,6 @@ var MaterialRunboxActionRestart = function MaterialRunboxActionRestart(_ref) {
    *
    */
   var handleRestartAction = function handleRestartAction() {
-    setIsLoading(true);
     start({
       force: true
     })["catch"](function () {
@@ -56,7 +40,6 @@ var MaterialRunboxActionRestart = function MaterialRunboxActionRestart(_ref) {
     })["finally"](function () {
       handleDialogClose();
       handleMenuClose();
-      setIsLoading(false);
     });
   };
   /**
@@ -108,7 +91,7 @@ var MaterialRunboxActionRestart = function MaterialRunboxActionRestart(_ref) {
       }), jsxs(DialogActions, {
         children: [jsx(Button, {
           color: "inherit",
-          disabled: isLoading,
+          disabled: isStarting,
           onClick: handleDialogClose,
           children: intl.formatMessage({
             id: 'runbox.common.close'
@@ -116,7 +99,7 @@ var MaterialRunboxActionRestart = function MaterialRunboxActionRestart(_ref) {
         }), jsx(LoadingButton, {
           variant: "contained",
           color: "warning",
-          loading: isLoading,
+          loading: isStarting,
           onClick: handleRestartAction,
           children: intl.formatMessage({
             id: 'runbox.action.restart.dialog.actions.confirm'

package/es/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/es/components/material-runbox/contexts/MaterialRunboxControlContext.js

@@ -0,0 +1,46 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useRunboxControl } from '../hooks/useRunboxControl.js';
+
+//
+//
+//
+var MaterialRunboxControlContext = React.createContext({});
+var useMaterialRunboxControlContext = function useMaterialRunboxControlContext() {
+  return React.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 = __rest(_a, ["children"]);
+  var _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.useMemo(function () {
+    return {
+      start: start,
+      stop: stop,
+      isStarting: isStarting,
+      isStopping: isStopping,
+      preCheckStatus: preCheckStatus
+    };
+  }, [start, stop, isStarting, isStopping, preCheckStatus]);
+  return jsx(MaterialRunboxControlContext.Provider, {
+    children: children,
+    value: value
+  });
+};
+
+export { MaterialRunboxControlContext, MaterialRunboxControlContextProvider as default, useMaterialRunboxControlContext };

package/es/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, RunningRunboxLinkProps, } from './MaterialRunboxContext';
+export type { MaterialRunboxControlContextProps, MaterialRunboxControlContextValue, } from './MaterialRunboxControlContext';

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

@@ -1,3 +1,4 @@
 export { MaterialRunboxApiContext, default as MaterialRunboxApiContextProvider, useMaterialRunboxApiContext } from './MaterialRunboxApiContext.js';
 export { MaterialRunboxCommandContext, default as MaterialRunboxCommandContextProvider, useMaterialRunboxCommandContext } from './MaterialRunboxCommandContext.js';
+export { MaterialRunboxControlContext, default as MaterialRunboxControlContextProvider, useMaterialRunboxControlContext } from './MaterialRunboxControlContext.js';
 export { MaterialRunboxContext, default as MaterialRunboxContextProvider, useMaterialRunboxContext } from './MaterialRunboxContext.js';

package/es/components/material-runbox/disk/MaterialRunboxDiskUsageAlert.d.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+export interface MaterialRunboxDiskUsageAlertProps {
+    runtimeTemplateId: string;
+    courseId: number;
+    /** User ID for tutoring. */
+    userId?: number;
+}
+/**
+ * Persistent bar under the header once disk usage passes 80%. Unlike the notice
+ * dialog it stays put, because it carries the only way out — the reset CTA.
+ */
+declare const MaterialRunboxDiskUsageAlert: React.FC<MaterialRunboxDiskUsageAlertProps>;
+export default MaterialRunboxDiskUsageAlert;

package/es/components/material-runbox/disk/MaterialRunboxDiskUsageAlert.js

@@ -0,0 +1,67 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRawEliceIntl } from '@elice/intl';
+import { EliceIcon } from '@elice/mui-elements';
+import { faArrowsRotate } from '@fortawesome/pro-solid-svg-icons';
+import { Alert, Typography } from '@mui/material';
+import MaterialRunboxEnvResetButton from './MaterialRunboxEnvResetButton.js';
+import { useRunboxDiskUsage } from '../hooks/useRunboxDiskUsage.js';
+
+//
+//
+//
+/**
+ * Persistent bar under the header once disk usage passes 80%. Unlike the notice
+ * dialog it stays put, because it carries the only way out — the reset CTA.
+ */
+var MaterialRunboxDiskUsageAlert = function MaterialRunboxDiskUsageAlert(_ref) {
+  var runtimeTemplateId = _ref.runtimeTemplateId,
+    courseId = _ref.courseId,
+    userId = _ref.userId;
+  var intl = useRawEliceIntl();
+  var _useRunboxDiskUsage = useRunboxDiskUsage(),
+    severity = _useRunboxDiskUsage.severity,
+    diskCurrent = _useRunboxDiskUsage.diskCurrent,
+    diskTotal = _useRunboxDiskUsage.diskTotal;
+  if (!severity) {
+    return null;
+  }
+  //
+  //
+  //
+  return jsx(Alert, {
+    severity: severity,
+    sx: {
+      width: '100%',
+      borderRadius: '0',
+      alignItems: 'center'
+    },
+    action: jsx(MaterialRunboxEnvResetButton, {
+      variant: "text",
+      size: "small",
+      color: "inherit",
+      startIcon: jsx(EliceIcon, {
+        icon: faArrowsRotate
+      }),
+      runtimeTemplateId: runtimeTemplateId,
+      courseId: courseId,
+      userId: userId
+    }),
+    children: jsx(Typography, {
+      variant: "body2",
+      children: intl.formatMessage({
+        id: "runbox.disk.usage.alert.".concat(severity)
+      }, {
+        used: intl.formatDataSize(diskCurrent, {
+          unitSystem: 'iec',
+          maximumFractionDigits: 2
+        }),
+        total: intl.formatDataSize(diskTotal, {
+          unitSystem: 'iec',
+          maximumFractionDigits: 2
+        })
+      })
+    })
+  });
+};
+
+export { MaterialRunboxDiskUsageAlert as default };

package/es/components/material-runbox/disk/MaterialRunboxDiskUsageDialog.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+export interface MaterialRunboxDiskUsageDialogProps {
+    runboxId: string;
+}
+/**
+ * Notice shown once per severity per runbox for the browser session. The reset
+ * CTA lives in the alert bar, so this only has to be acknowledged.
+ */
+declare const MaterialRunboxDiskUsageDialog: React.FC<MaterialRunboxDiskUsageDialogProps>;
+export default MaterialRunboxDiskUsageDialog;

package/es/components/material-runbox/disk/MaterialRunboxDiskUsageDialog.js

@@ -0,0 +1,94 @@
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useSessionStorage } from 'react-use';
+import { useRawEliceIntl } from '@elice/intl';
+import { EliceIcon } from '@elice/mui-elements';
+import { faCircleExclamation, faTriangleExclamation } from '@fortawesome/pro-solid-svg-icons';
+import { Dialog, DialogTitle, Stack, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material';
+import { useRunboxDiskUsage } from '../hooks/useRunboxDiskUsage.js';
+
+//
+//
+//
+var SEEN_STORAGE_KEY = 'MaterialRunboxDiskUsage.seenNotice';
+//
+//
+//
+/**
+ * Notice shown once per severity per runbox for the browser session. The reset
+ * CTA lives in the alert bar, so this only has to be acknowledged.
+ */
+var MaterialRunboxDiskUsageDialog = function MaterialRunboxDiskUsageDialog(_ref) {
+  var runboxId = _ref.runboxId;
+  var _a;
+  var intl = useRawEliceIntl();
+  var _useRunboxDiskUsage = useRunboxDiskUsage(),
+    severity = _useRunboxDiskUsage.severity,
+    diskCurrent = _useRunboxDiskUsage.diskCurrent,
+    diskTotal = _useRunboxDiskUsage.diskTotal;
+  var _useSessionStorage = useSessionStorage(SEEN_STORAGE_KEY, {}),
+    _useSessionStorage2 = _slicedToArray(_useSessionStorage, 2),
+    seen = _useSessionStorage2[0],
+    setSeen = _useSessionStorage2[1];
+  var seenSeverities = (_a = seen === null || seen === void 0 ? void 0 : seen[runboxId]) !== null && _a !== void 0 ? _a : [];
+  /**
+   *
+   */
+  var handleClose = function handleClose() {
+    if (!severity) {
+      return;
+    }
+    setSeen(Object.assign(Object.assign({}, seen), _defineProperty({}, runboxId, [].concat(_toConsumableArray(seenSeverities), [severity]))));
+  };
+  //
+  //
+  //
+  if (!severity) {
+    return null;
+  }
+  return jsxs(Dialog, {
+    fullWidth: true,
+    open: !seenSeverities.includes(severity),
+    maxWidth: "xs",
+    onClose: handleClose,
+    children: [jsx(DialogTitle, {
+      children: jsxs(Stack, {
+        direction: "row",
+        alignItems: "center",
+        gap: "0.5rem",
+        children: [jsx(EliceIcon, {
+          icon: severity === 'error' ? faCircleExclamation : faTriangleExclamation,
+          color: severity
+        }), intl.formatMessage({
+          id: 'runbox.disk.usage.dialog.title'
+        })]
+      })
+    }), jsx(DialogContent, {
+      children: jsx(DialogContentText, {
+        whiteSpace: "pre-line",
+        children: intl.formatMessage({
+          id: "runbox.disk.usage.dialog.description.".concat(severity)
+        }, {
+          used: intl.formatDataSize(diskCurrent, {
+            unitSystem: 'iec',
+            maximumFractionDigits: 2
+          }),
+          total: intl.formatDataSize(diskTotal, {
+            unitSystem: 'iec',
+            maximumFractionDigits: 2
+          })
+        })
+      })
+    }), jsx(DialogActions, {
+      children: jsx(Button, {
+        color: "inherit",
+        onClick: handleClose,
+        children: intl.formatMessage({
+          id: 'runbox.disk.usage.dialog.actions.close'
+        })
+      })
+    })]
+  });
+};
+
+export { MaterialRunboxDiskUsageDialog as default };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { LoadingButtonProps } from '@mui/lab';
+export interface MaterialRunboxEnvResetButtonProps extends Omit<LoadingButtonProps, 'onClick' | 'loading'> {
+    runtimeTemplateId: string;
+    courseId: number;
+    userId?: number;
+    onSuccess?: () => void;
+}
+declare const MaterialRunboxEnvResetButton: React.FC<MaterialRunboxEnvResetButtonProps>;
+export default MaterialRunboxEnvResetButton;

package/es/components/material-runbox/disk/MaterialRunboxEnvResetButton.js

@@ -0,0 +1,143 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useRawEliceIntl } from '@elice/intl';
+import { useSnackbar } from '@elice/mui-x-snackbar';
+import { LoadingButton } from '@mui/lab';
+import { ThemeProvider } from '@mui/material';
+import { runboxDarkTheme } from '../theme.js';
+import MaterialRunboxEnvResetDialog from './MaterialRunboxEnvResetDialog.js';
+import { useMaterialRunboxApiContext } from '../contexts/MaterialRunboxApiContext.js';
+import { useMaterialRunboxControlContext } from '../contexts/MaterialRunboxControlContext.js';
+
+//
+//
+//
+var MaterialRunboxEnvResetButton = function MaterialRunboxEnvResetButton(_a) {
+  var runtimeTemplateId = _a.runtimeTemplateId,
+    courseId = _a.courseId,
+    userId = _a.userId,
+    onSuccess = _a.onSuccess,
+    props = __rest(_a, ["runtimeTemplateId", "courseId", "userId", "onSuccess"]);
+  var intl = useRawEliceIntl();
+  var _useSnackbar = useSnackbar(),
+    enqueueSnackbar = _useSnackbar.enqueueSnackbar;
+  var materialRunboxApi = useMaterialRunboxApiContext();
+  var _useMaterialRunboxCon = useMaterialRunboxControlContext(),
+    startRuntime = _useMaterialRunboxCon.start;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isDialogOpened = _React$useState2[0],
+    setDialogOpened = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isResetting = _React$useState4[0],
+    setResetting = _React$useState4[1];
+  /**
+   *
+   */
+  var handleConfirm = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var _yield$materialRunbox, _yield$materialRunbox2, runtime;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            setDialogOpened(false);
+            setResetting(true);
+            _context.p = 1;
+            _context.n = 2;
+            return materialRunboxApi.runtime.runtimeGet({
+              filterRuntimeTemplateId: runtimeTemplateId,
+              skip: 0,
+              count: 1,
+              userId: userId,
+              eliceCourseId: courseId
+            });
+          case 2:
+            _yield$materialRunbox = _context.v;
+            _yield$materialRunbox2 = _slicedToArray(_yield$materialRunbox, 1);
+            runtime = _yield$materialRunbox2[0];
+            if (runtime) {
+              _context.n = 3;
+              break;
+            }
+            enqueueSnackbar(intl.formatMessage({
+              id: 'runbox.disk.env_reset.noti.no_runtime'
+            }), {
+              variant: 'error'
+            });
+            return _context.a(2);
+          case 3:
+            _context.n = 4;
+            return materialRunboxApi.runtime.runtimeRuntimeIdDiskResetPost({
+              runtimeId: runtime.id,
+              eliceCourseId: courseId
+            });
+          case 4:
+            enqueueSnackbar(intl.formatMessage({
+              id: 'runbox.disk.env_reset.noti.success'
+            }), {
+              variant: 'success'
+            });
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+            // The reset replaces the disk, which the server can only do with the
+            // runtime detached, so the session is always gone by now. Start it back
+            // up so the learner lands on the practice screen instead of a dead one.
+            _context.n = 5;
+            return startRuntime({
+              force: true,
+              runPreCheck: false
+            });
+          case 5:
+            _context.n = 7;
+            break;
+          case 6:
+            _context.p = 6;
+            _context.v;
+            enqueueSnackbar(intl.formatMessage({
+              id: 'runbox.disk.env_reset.noti.error'
+            }), {
+              variant: 'error'
+            });
+          case 7:
+            _context.p = 7;
+            setResetting(false);
+            return _context.f(7);
+          case 8:
+            return _context.a(2);
+        }
+      }, _callee, null, [[1, 6, 7, 8]]);
+    }));
+    return function handleConfirm() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  //
+  //
+  //
+  return jsxs(Fragment, {
+    children: [jsx(LoadingButton, Object.assign({}, props, {
+      loading: isResetting,
+      onClick: function onClick() {
+        return setDialogOpened(true);
+      },
+      children: intl.formatMessage({
+        id: 'runbox.disk.env_reset.title'
+      })
+    })), jsx(ThemeProvider, {
+      theme: runboxDarkTheme,
+      children: jsx(MaterialRunboxEnvResetDialog, {
+        open: isDialogOpened,
+        onClose: function onClose() {
+          return setDialogOpened(false);
+        },
+        onConfirm: function onConfirm() {
+          return void handleConfirm();
+        }
+      })
+    })]
+  });
+};
+
+export { MaterialRunboxEnvResetButton as default };

package/es/components/material-runbox/disk/MaterialRunboxEnvResetDialog.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface MaterialRunboxEnvResetDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+}
+/**
+ * Confirms clearing the practice environment. The checkbox is the explicit
+ * acknowledgement `[R-3]` asks for: the delete action stays disabled until it
+ * is ticked.
+ */
+declare const MaterialRunboxEnvResetDialog: React.FC<MaterialRunboxEnvResetDialogProps>;
+export default MaterialRunboxEnvResetDialog;