@elice/material-runbox 1.260825.0-runboxusability.2 → 1.260825.0-runboxusability.3

package/cjs/_virtual/_rollupPluginBabelHelpers.js

@@ -8,6 +8,13 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithHoles(r) {
   if (Array.isArray(r)) return r;
 }
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
   try {
     var i = n[a](c),
@@ -33,6 +40,24 @@ function _asyncToGenerator(n) {
     });
   };
 }
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+function _construct(t, e, r) {
+  if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
+  var o = [null];
+  o.push.apply(o, e);
+  var p = new (t.bind.apply(t, o))();
+  return r && _setPrototypeOf(p, r.prototype), p;
+}
+function _createClass(e, r, t) {
+  return Object.defineProperty(e, "prototype", {
+    writable: false
+  }), e;
+}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -41,6 +66,41 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
+function _getPrototypeOf(t) {
+  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
+    return t.__proto__ || Object.getPrototypeOf(t);
+  }, _getPrototypeOf(t);
+}
+function _inherits(t, e) {
+  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
+  t.prototype = Object.create(e && e.prototype, {
+    constructor: {
+      value: t,
+      writable: true,
+      configurable: true
+    }
+  }), Object.defineProperty(t, "prototype", {
+    writable: false
+  }), e && _setPrototypeOf(t, e);
+}
+function _isNativeFunction(t) {
+  try {
+    return -1 !== Function.toString.call(t).indexOf("[native code]");
+  } catch (n) {
+    return "function" == typeof t;
+  }
+}
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function () {
+    return !!t;
+  })();
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -71,6 +131,14 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _possibleConstructorReturn(t, e) {
+  if (e && ("object" == typeof e || "function" == typeof e)) return e;
+  if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
+  return _assertThisInitialized(t);
+}
 function _regenerator() {
   /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
   var e,
@@ -179,6 +247,11 @@ function _regeneratorDefine(e, r, n, t) {
     }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
   }, _regeneratorDefine(e, r, n, t);
 }
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
@@ -189,6 +262,9 @@ function _taggedTemplateLiteral(e, t) {
     }
   }));
 }
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -210,17 +286,55 @@ function _unsupportedIterableToArray(r, a) {
     return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
 }
+function _wrapNativeSuper(t) {
+  var r = "function" == typeof Map ? new Map() : void 0;
+  return _wrapNativeSuper = function (t) {
+    if (null === t || !_isNativeFunction(t)) return t;
+    if ("function" != typeof t) throw new TypeError("Super expression must either be null or a function");
+    if (void 0 !== r) {
+      if (r.has(t)) return r.get(t);
+      r.set(t, Wrapper);
+    }
+    function Wrapper() {
+      return _construct(t, arguments, _getPrototypeOf(this).constructor);
+    }
+    return Wrapper.prototype = Object.create(t.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    }), _setPrototypeOf(Wrapper, t);
+  }, _wrapNativeSuper(t);
+}
 
 exports.arrayLikeToArray = _arrayLikeToArray;
 exports.arrayWithHoles = _arrayWithHoles;
+exports.arrayWithoutHoles = _arrayWithoutHoles;
+exports.assertThisInitialized = _assertThisInitialized;
 exports.asyncToGenerator = _asyncToGenerator;
+exports.callSuper = _callSuper;
+exports.classCallCheck = _classCallCheck;
+exports.construct = _construct;
+exports.createClass = _createClass;
 exports.defineProperty = _defineProperty;
+exports.getPrototypeOf = _getPrototypeOf;
+exports.inherits = _inherits;
+exports.isNativeFunction = _isNativeFunction;
+exports.isNativeReflectConstruct = _isNativeReflectConstruct;
+exports.iterableToArray = _iterableToArray;
 exports.iterableToArrayLimit = _iterableToArrayLimit;
 exports.nonIterableRest = _nonIterableRest;
+exports.nonIterableSpread = _nonIterableSpread;
+exports.possibleConstructorReturn = _possibleConstructorReturn;
 exports.regenerator = _regenerator;
 exports.regeneratorDefine = _regeneratorDefine;
+exports.setPrototypeOf = _setPrototypeOf;
 exports.slicedToArray = _slicedToArray;
 exports.taggedTemplateLiteral = _taggedTemplateLiteral;
+exports.toConsumableArray = _toConsumableArray;
 exports.toPrimitive = _toPrimitive;
 exports.toPropertyKey = _toPropertyKey;
 exports.unsupportedIterableToArray = _unsupportedIterableToArray;
+exports.wrapNativeSuper = _wrapNativeSuper;

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

@@ -19,6 +19,8 @@ var MaterialRunboxHeader = require('./MaterialRunboxHeader.js');
 var MaterialRunboxContext = require('./contexts/MaterialRunboxContext.js');
 var MaterialRunboxApiContext = require('./contexts/MaterialRunboxApiContext.js');
 var MaterialRunboxCommandContext = require('./contexts/MaterialRunboxCommandContext.js');
+var MaterialRunboxDiskUsageAlert = require('./disk/MaterialRunboxDiskUsageAlert.js');
+var MaterialRunboxDiskUsageDialog = require('./disk/MaterialRunboxDiskUsageDialog.js');
 var useMaterialRunboxRunboxIdStarterGet = require('./hooks/useMaterialRunboxRunboxIdStarterGet.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -288,6 +290,11 @@ var MaterialRunboxContent = function MaterialRunboxContent(_ref) {
             studentUserId: studentUserId,
             userId: userId,
             isTutoring: isTutoring
+          }), jsxRuntime.jsx(MaterialRunboxDiskUsageAlert.default, {
+            runboxId: runbox.id,
+            courseId: courseId
+          }), jsxRuntime.jsx(MaterialRunboxDiskUsageDialog.default, {
+            runboxId: runbox.id
           }), jsxRuntime.jsx(MaterialRunboxBody.default, Object.assign({
             setSnackbarRoot: setSnackbarRoot
           }, props))]

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

@@ -22,7 +22,6 @@ var MaterialRunboxContext = require('./contexts/MaterialRunboxContext.js');
 var MaterialRunboxApiContext = require('./contexts/MaterialRunboxApiContext.js');
 var MaterialRunboxTimer = require('./timer/MaterialRunboxTimer.js');
 var MaterialRunboxStatusButton = require('./status/MaterialRunboxStatusButton.js');
-var MaterialRunboxDiskAlmostFullSnackbar = require('./disk/MaterialRunboxDiskAlmostFullSnackbar.js');
 var useRunboxControl = require('./hooks/useRunboxControl.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -35,25 +34,28 @@ var StyledHeader = /*#__PURE__*/_styled__default.default("div", {
 })("position:relative;flex:0 0 3rem;display:flex;justify-content:flex-start;align-items:center;gap:1rem;padding:0 1rem;width:100%;border-bottom:1px solid ", function (_ref) {
   var theme = _ref.theme;
   return theme.palette.divider;
-}, ";overflow:hidden;background-color:", function (_ref2) {
+}, ";overflow:hidden;color:", function (_ref2) {
   var theme = _ref2.theme;
+  return theme.palette.text.primary;
+}, ";background-color:", function (_ref3) {
+  var theme = _ref3.theme;
   return theme.palette.background.paper;
 }, ";");
 //
 //
 //
-var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
-  var runbox = _ref3.runbox,
-    runtime = _ref3.runtime,
-    runtimeTemplate = _ref3.runtimeTemplate,
-    courseId = _ref3.courseId,
-    userId = _ref3.userId,
-    studentUserId = _ref3.studentUserId,
-    isTutoring = _ref3.isTutoring,
-    refetch = _ref3.refetch,
-    getAchievementColor = _ref3.getAchievementColor,
-    _ref3$hideTimerPopove = _ref3.hideTimerPopover,
-    hideTimerPopover = _ref3$hideTimerPopove === void 0 ? false : _ref3$hideTimerPopove;
+var MaterialRunboxHeader = function MaterialRunboxHeader(_ref4) {
+  var runbox = _ref4.runbox,
+    runtime = _ref4.runtime,
+    runtimeTemplate = _ref4.runtimeTemplate,
+    courseId = _ref4.courseId,
+    userId = _ref4.userId,
+    studentUserId = _ref4.studentUserId,
+    isTutoring = _ref4.isTutoring,
+    refetch = _ref4.refetch,
+    getAchievementColor = _ref4.getAchievementColor,
+    _ref4$hideTimerPopove = _ref4.hideTimerPopover,
+    hideTimerPopover = _ref4$hideTimerPopove === void 0 ? false : _ref4$hideTimerPopove;
   var intl$1 = intl.useRawEliceIntl();
   var _useMaterialRunboxCon = MaterialRunboxContext.useMaterialRunboxContext(),
     enableAutoShutdownToggle = _useMaterialRunboxCon.enableAutoShutdownToggle;
@@ -104,8 +106,8 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
         courseId: courseId,
         runtime: runtime
       }],
-      queryFn: function queryFn(_ref4) {
-        var signal = _ref4.signal;
+      queryFn: function queryFn(_ref5) {
+        var signal = _ref5.signal;
         return materialRunboxApi.runbox.runboxRunboxIdSubmitInfoGet({
           eliceCourseId: courseId,
           runboxId: runtime === null || runtime === void 0 ? void 0 : runtime.runboxId
@@ -226,8 +228,9 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
       stopRuntime: stopRuntime,
       hideTimerPopover: hideTimerPopover,
       isTutoring: isTutoring
-    }) : null, jsxRuntime.jsx(MaterialRunboxStatusButton.default, {}), jsxRuntime.jsx(MaterialRunboxDiskAlmostFullSnackbar.default, {
-      runboxId: runbox.id
+    }) : null, jsxRuntime.jsx(MaterialRunboxStatusButton.default, {
+      runboxId: runbox.id,
+      courseId: courseId
     }), jsxRuntime.jsxs(material.Stack, {
       direction: "row",
       alignItems: "center",

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

@@ -0,0 +1,11 @@
+import type React from 'react';
+export interface MaterialRunboxDiskUsageAlertProps {
+    runboxId: string;
+    courseId: 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/cjs/components/material-runbox/disk/MaterialRunboxDiskUsageAlert.js

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var intl = require('@elice/intl');
+var muiElements = require('@elice/mui-elements');
+var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
+var material = require('@mui/material');
+var MaterialRunboxEnvResetButton = require('./MaterialRunboxEnvResetButton.js');
+var useRunboxDiskUsage = require('../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 runboxId = _ref.runboxId,
+    courseId = _ref.courseId;
+  var intl$1 = intl.useRawEliceIntl();
+  var _useRunboxDiskUsage = useRunboxDiskUsage.useRunboxDiskUsage(),
+    severity = _useRunboxDiskUsage.severity,
+    diskCurrent = _useRunboxDiskUsage.diskCurrent,
+    diskTotal = _useRunboxDiskUsage.diskTotal;
+  if (!severity) {
+    return null;
+  }
+  //
+  //
+  //
+  return jsxRuntime.jsx(material.Alert, {
+    severity: severity,
+    sx: {
+      width: '100%',
+      borderRadius: '0',
+      alignItems: 'center'
+    },
+    action: jsxRuntime.jsx(MaterialRunboxEnvResetButton.default, {
+      variant: "text",
+      size: "small",
+      color: "inherit",
+      startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+        icon: proSolidSvgIcons.faArrowsRotate
+      }),
+      runboxId: runboxId,
+      courseId: courseId
+    }),
+    children: jsxRuntime.jsx(material.Typography, {
+      variant: "body2",
+      children: intl$1.formatMessage({
+        id: "runbox.disk.usage.alert.".concat(severity)
+      }, {
+        used: intl$1.formatDataSize(diskCurrent, {
+          unitSystem: 'iec',
+          maximumFractionDigits: 2
+        }),
+        total: intl$1.formatDataSize(diskTotal, {
+          unitSystem: 'iec',
+          maximumFractionDigits: 2
+        })
+      })
+    })
+  });
+};
+
+exports.default = MaterialRunboxDiskUsageAlert;

package/cjs/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/cjs/components/material-runbox/disk/MaterialRunboxDiskUsageDialog.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
+var reactUse = require('react-use');
+var intl = require('@elice/intl');
+var muiElements = require('@elice/mui-elements');
+var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
+var material = require('@mui/material');
+var useRunboxDiskUsage = require('../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$1 = intl.useRawEliceIntl();
+  var _useRunboxDiskUsage = useRunboxDiskUsage.useRunboxDiskUsage(),
+    severity = _useRunboxDiskUsage.severity,
+    diskCurrent = _useRunboxDiskUsage.diskCurrent,
+    diskTotal = _useRunboxDiskUsage.diskTotal;
+  var _useSessionStorage = reactUse.useSessionStorage(SEEN_STORAGE_KEY, {}),
+    _useSessionStorage2 = _rollupPluginBabelHelpers.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), _rollupPluginBabelHelpers.defineProperty({}, runboxId, [].concat(_rollupPluginBabelHelpers.toConsumableArray(seenSeverities), [severity]))));
+  };
+  //
+  //
+  //
+  if (!severity) {
+    return null;
+  }
+  return jsxRuntime.jsxs(material.Dialog, {
+    fullWidth: true,
+    open: !seenSeverities.includes(severity),
+    maxWidth: "xs",
+    onClose: handleClose,
+    children: [jsxRuntime.jsx(material.DialogTitle, {
+      children: jsxRuntime.jsxs(material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        gap: "0.5rem",
+        children: [jsxRuntime.jsx(muiElements.EliceIcon, {
+          icon: severity === 'error' ? proSolidSvgIcons.faCircleExclamation : proSolidSvgIcons.faTriangleExclamation,
+          color: severity
+        }), intl$1.formatMessage({
+          id: 'runbox.disk.usage.dialog.title'
+        })]
+      })
+    }), jsxRuntime.jsx(material.DialogContent, {
+      children: jsxRuntime.jsx(material.DialogContentText, {
+        whiteSpace: "pre-line",
+        children: intl$1.formatMessage({
+          id: "runbox.disk.usage.dialog.description.".concat(severity)
+        }, {
+          used: intl$1.formatDataSize(diskCurrent, {
+            unitSystem: 'iec',
+            maximumFractionDigits: 2
+          }),
+          total: intl$1.formatDataSize(diskTotal, {
+            unitSystem: 'iec',
+            maximumFractionDigits: 2
+          })
+        })
+      })
+    }), jsxRuntime.jsx(material.DialogActions, {
+      children: jsxRuntime.jsx(material.Button, {
+        color: "inherit",
+        onClick: handleClose,
+        children: intl$1.formatMessage({
+          id: 'runbox.disk.usage.dialog.actions.close'
+        })
+      })
+    })]
+  });
+};
+
+exports.default = MaterialRunboxDiskUsageDialog;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ButtonProps } from '@mui/material';
+export interface MaterialRunboxEnvResetButtonProps extends Omit<ButtonProps, 'onClick'> {
+    runboxId: string;
+    courseId: number;
+    /** User ID for tutoring. */
+    userId?: number;
+    /** Called once the clear has finished. */
+    onSuccess?: () => void;
+}
+/**
+ * Shared "실습 환경 초기화" CTA: owns the confirm dialog and the clear request,
+ * and leaves the appearance to whoever renders it.
+ */
+declare const MaterialRunboxEnvResetButton: React.FC<MaterialRunboxEnvResetButtonProps>;
+export default MaterialRunboxEnvResetButton;

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

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var intl = require('@elice/intl');
+var material = require('@mui/material');
+var MaterialRunboxEnvResetDialog = require('./MaterialRunboxEnvResetDialog.js');
+var useRunboxEnvReset = require('../hooks/useRunboxEnvReset.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+//
+//
+//
+/**
+ * Shared "실습 환경 초기화" CTA: owns the confirm dialog and the clear request,
+ * and leaves the appearance to whoever renders it.
+ */
+var MaterialRunboxEnvResetButton = function MaterialRunboxEnvResetButton(_a) {
+  var runboxId = _a.runboxId,
+    courseId = _a.courseId,
+    userId = _a.userId,
+    _onSuccess = _a.onSuccess,
+    props = tslib.__rest(_a, ["runboxId", "courseId", "userId", "onSuccess"]);
+  var intl$1 = intl.useRawEliceIntl();
+  var _React$useState = React__default.default.useState(false),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    isDialogOpened = _React$useState2[0],
+    setDialogOpened = _React$useState2[1];
+  var _useRunboxEnvReset = useRunboxEnvReset.useRunboxEnvReset({
+      onSuccess: function onSuccess() {
+        setDialogOpened(false);
+        _onSuccess === null || _onSuccess === void 0 ? void 0 : _onSuccess();
+      }
+    }),
+    reset = _useRunboxEnvReset.reset,
+    isResetting = _useRunboxEnvReset.isResetting;
+  //
+  //
+  //
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(material.Button, Object.assign({}, props, {
+      onClick: function onClick() {
+        return setDialogOpened(true);
+      },
+      children: intl$1.formatMessage({
+        id: 'runbox.disk.env_reset.title'
+      })
+    })), jsxRuntime.jsx(MaterialRunboxEnvResetDialog.default, {
+      open: isDialogOpened,
+      isResetting: isResetting,
+      onClose: function onClose() {
+        return setDialogOpened(false);
+      },
+      onConfirm: function onConfirm() {
+        return void reset({
+          runboxId: runboxId,
+          courseId: courseId,
+          userId: userId
+        });
+      }
+    })]
+  });
+};
+
+exports.default = MaterialRunboxEnvResetButton;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface MaterialRunboxEnvResetDialogProps {
+    open: boolean;
+    isResetting?: 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;

package/cjs/components/material-runbox/disk/MaterialRunboxEnvResetDialog.js

@@ -0,0 +1,103 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var intl = require('@elice/intl');
+var muiElements = require('@elice/mui-elements');
+var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
+var lab = require('@mui/lab');
+var material = require('@mui/material');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+//
+//
+//
+/**
+ * Confirms clearing the practice environment. The checkbox is the explicit
+ * acknowledgement `[R-3]` asks for: the delete action stays disabled until it
+ * is ticked.
+ */
+var MaterialRunboxEnvResetDialog = function MaterialRunboxEnvResetDialog(_ref) {
+  var open = _ref.open,
+    _ref$isResetting = _ref.isResetting,
+    isResetting = _ref$isResetting === void 0 ? false : _ref$isResetting,
+    onClose = _ref.onClose,
+    onConfirm = _ref.onConfirm;
+  var intl$1 = intl.useRawEliceIntl();
+  var _React$useState = React__default.default.useState(false),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    isAcknowledged = _React$useState2[0],
+    setAcknowledged = _React$useState2[1];
+  React__default.default.useEffect(function () {
+    if (!open) {
+      setAcknowledged(false);
+    }
+  }, [open]);
+  //
+  //
+  //
+  return jsxRuntime.jsxs(material.Dialog, {
+    fullWidth: true,
+    open: open,
+    maxWidth: "xs",
+    onClose: onClose,
+    children: [jsxRuntime.jsx(material.DialogTitle, {
+      children: jsxRuntime.jsxs(material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        gap: "0.5rem",
+        children: [jsxRuntime.jsx(muiElements.EliceIcon, {
+          icon: proSolidSvgIcons.faCircleExclamation,
+          color: "error"
+        }), intl$1.formatMessage({
+          id: 'runbox.disk.env_reset.dialog.title'
+        })]
+      })
+    }), jsxRuntime.jsxs(material.DialogContent, {
+      children: [jsxRuntime.jsx(material.DialogContentText, {
+        whiteSpace: "pre-line",
+        children: intl$1.formatMessage({
+          id: 'runbox.disk.env_reset.dialog.description'
+        })
+      }), jsxRuntime.jsx(material.FormControlLabel, {
+        sx: {
+          marginTop: '1rem'
+        },
+        control: jsxRuntime.jsx(material.Checkbox, {
+          checked: isAcknowledged,
+          onChange: function onChange(e) {
+            return setAcknowledged(e.target.checked);
+          }
+        }),
+        label: intl$1.formatMessage({
+          id: 'runbox.disk.env_reset.dialog.acknowledge'
+        })
+      })]
+    }), jsxRuntime.jsxs(material.DialogActions, {
+      children: [jsxRuntime.jsx(material.Button, {
+        color: "inherit",
+        disabled: isResetting,
+        onClick: onClose,
+        children: intl$1.formatMessage({
+          id: 'runbox.disk.env_reset.dialog.actions.cancel'
+        })
+      }), jsxRuntime.jsx(lab.LoadingButton, {
+        color: "error",
+        loading: isResetting,
+        disabled: !isAcknowledged,
+        onClick: onConfirm,
+        children: intl$1.formatMessage({
+          id: 'runbox.disk.env_reset.dialog.actions.confirm'
+        })
+      })]
+    })]
+  });
+};
+
+exports.default = MaterialRunboxEnvResetDialog;

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

@@ -1 +1,8 @@
-export { default as MaterialRunboxDiskAlmostFullSnackbar } from './MaterialRunboxDiskAlmostFullSnackbar';
+export { default as MaterialRunboxDiskUsageAlert } from './MaterialRunboxDiskUsageAlert';
+export { default as MaterialRunboxDiskUsageDialog } from './MaterialRunboxDiskUsageDialog';
+export { default as MaterialRunboxEnvResetButton } from './MaterialRunboxEnvResetButton';
+export { default as MaterialRunboxEnvResetDialog } from './MaterialRunboxEnvResetDialog';
+export type { MaterialRunboxDiskUsageAlertProps } from './MaterialRunboxDiskUsageAlert';
+export type { MaterialRunboxDiskUsageDialogProps } from './MaterialRunboxDiskUsageDialog';
+export type { MaterialRunboxEnvResetButtonProps } from './MaterialRunboxEnvResetButton';
+export type { MaterialRunboxEnvResetDialogProps } from './MaterialRunboxEnvResetDialog';