@elice/material-runbox 1.260908.0 → 1.260910.0

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

@@ -6,9 +6,13 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var intl = require('@elice/intl');
+var muiElements = require('@elice/mui-elements');
 var runboxClient = require('@elice/runbox-client');
+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 }; }
 
@@ -17,12 +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],
@@ -44,6 +51,23 @@ var MaterialRunboxActionDisconnect = function MaterialRunboxActionDisconnect(_re
    *
    */
   var renderActionButton = function renderActionButton() {
+    if (isSmallTabletOrSmaller) {
+      return jsxRuntime.jsx(material.Tooltip, {
+        title: intl$1.formatMessage({
+          id: 'runbox.action.disconnect.title'
+        }),
+        children: jsxRuntime.jsx("span", {
+          children: jsxRuntime.jsx(material.IconButton, {
+            size: "small",
+            disabled: isRunboxTerminated,
+            onClick: handleClickAction,
+            children: jsxRuntime.jsx(muiElements.EliceIcon, {
+              icon: proSolidSvgIcons.faLinkSlash
+            })
+          })
+        })
+      });
+    }
     return jsxRuntime.jsx(material.Button, {
       disabled: isRunboxTerminated,
       variant: "contained",
@@ -73,6 +97,9 @@ var MaterialRunboxActionDisconnect = function MaterialRunboxActionDisconnect(_re
   //
   //
   //
+  if (isMobileOrSmaller) {
+    return null;
+  }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [renderActionButton(), renderDisconnectDialog()]
   });

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MaterialRunboxActionDisconnectMenuItem: React.FC;
+export default MaterialRunboxActionDisconnectMenuItem;

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

@@ -0,0 +1,90 @@
+'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 runboxClient = require('@elice/runbox-client');
+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 }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+//
+//
+//
+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 handleConfirmDisconnect = /*#__PURE__*/function () {
+    var _ref = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee() {
+      return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            setDisconnectDialogOpen(false);
+            _context.n = 1;
+            return stopRuntime();
+          case 1:
+            return _context.a(2);
+        }
+      }, _callee);
+    }));
+    return function handleConfirmDisconnect() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  //
+  //
+  //
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(material.MenuItem, {
+      fullWidth: true,
+      component: lab.LoadingButton,
+      color: "inherit",
+      loading: isStopping,
+      disabled: isRunboxTerminated,
+      onClick: function onClick() {
+        return setDisconnectDialogOpen(true);
+      },
+      children: [jsxRuntime.jsx(material.ListItemIcon, {
+        children: jsxRuntime.jsx(muiElements.EliceIcon, {
+          icon: proSolidSvgIcons.faLinkSlash
+        })
+      }), jsxRuntime.jsx(material.ListItemText, {
+        children: intl$1.formatMessage({
+          id: 'runbox.action.disconnect.title'
+        })
+      })]
+    }), jsxRuntime.jsx(MaterialRunboxActionDisconnectDialog.default, {
+      open: isDisconnectDialogOpen,
+      onClose: function onClose() {
+        return setDisconnectDialogOpen(false);
+      },
+      onConfirm: function onConfirm() {
+        return void handleConfirmDisconnect();
+      }
+    })]
+  });
+};
+
+exports.default = MaterialRunboxActionDisconnectMenuItem;

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { RuntimeProps } from '../runtime/Runtime';
-type MaterialRunboxActionMenuProps = Pick<RuntimeProps, 'runbox' | 'runtime' | 'courseId' | 'refetch' | 'studentUserId' | 'isTutoring' | 'getAchievementColor'> & {
+type MaterialRunboxActionMenuProps = Pick<RuntimeProps, 'runbox' | 'runtime' | 'runtimeTemplate' | 'courseId' | 'refetch' | 'studentUserId' | 'isTutoring' | 'getAchievementColor'> & {
     menuAnchorEl: null | HTMLButtonElement;
+    /** Whether the auto-shutdown toggle is available. Decided by the header. */
+    enableAutoShutdown?: boolean;
     handleMenuClose: () => void;
 };
 declare const MaterialRunboxActionMenu: React.FC<MaterialRunboxActionMenuProps>;

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

@@ -10,10 +10,13 @@ var runboxClient = require('@elice/runbox-client');
 var types = require('@elice/types');
 var material = require('@mui/material');
 var reactQuery = require('@tanstack/react-query');
+var MaterialRunboxActionAutoShutdown = require('./MaterialRunboxActionAutoShutdown.js');
+var MaterialRunboxActionDisconnectMenuItem = require('./MaterialRunboxActionDisconnectMenuItem.js');
 var MaterialRunboxActionReset = require('./MaterialRunboxActionReset.js');
 var MaterialRunboxActionRestart = require('./MaterialRunboxActionRestart.js');
 var MaterialRunboxActionShare = require('./MaterialRunboxActionShare.js');
 var MaterialRunboxActionSubmitLog = require('./MaterialRunboxActionSubmitLog.js');
+var useBreakpoint = require('../../shared/hooks/useBreakpoint.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -25,9 +28,12 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 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,
@@ -35,6 +41,7 @@ var MaterialRunboxActionMenu = function MaterialRunboxActionMenu(_ref) {
   var _a, _b;
   var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
     status = _useEliceRunboxRunnin.status;
+  var isMobileOrSmaller = useBreakpoint.useBreakpoint('sm', 'down');
   var isRunboxRunning = status === 'running';
   //
   //
@@ -87,16 +94,28 @@ var MaterialRunboxActionMenu = function MaterialRunboxActionMenu(_ref) {
       vertical: 'top',
       horizontal: 'right'
     },
+    TransitionComponent: material.Fade,
     onClose: handleMenuClose,
-    children: [jsxRuntime.jsx(MaterialRunboxActionShare.default, {
+    children: [enableAutoShutdown ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        padding: "0.25rem 0.5rem",
+        children: jsxRuntime.jsx(MaterialRunboxActionAutoShutdown.default, {
+          runtime: runtime,
+          runtimeTemplate: runtimeTemplate,
+          courseId: courseId,
+          refetch: refetch
+        })
+      }), jsxRuntime.jsx(material.Divider, {
+        sx: {
+          margin: '0.5rem 0'
+        }
+      })]
+    }) : 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,
@@ -109,7 +128,7 @@ var MaterialRunboxActionMenu = function MaterialRunboxActionMenu(_ref) {
       courseId: courseId,
       envMode: envMode,
       handleMenuClose: handleMenuClose
-    })]
+    }), 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, RunningRunboxLinkProps, } 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/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/cjs/components/material-runbox/disk/MaterialRunboxDiskUsageAlert.js

@@ -0,0 +1,71 @@
+'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 runtimeTemplateId = _ref.runtimeTemplateId,
+    courseId = _ref.courseId,
+    userId = _ref.userId;
+  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
+      }),
+      runtimeTemplateId: runtimeTemplateId,
+      courseId: courseId,
+      userId: userId
+    }),
+    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,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;