@elice/material-runbox 1.260908.0 → 1.260910.0

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

@@ -6,16 +6,19 @@ import { SnackbarProvider } from '@elice/mui-x-snackbar';
 import { RunboxStarterGetResponseStatusEnum } from '@elice/openapi-client-material-runbox';
 import { EliceRunboxProvider } from '@elice/runbox-client';
 import { Refresh } from '@mui/icons-material';
-import { styled, CircularProgress, Stack, Typography, Button } from '@mui/material';
+import { styled, ThemeProvider, CircularProgress, Stack, Typography, Button } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
 import MaterialAdminRunboxConfirmDialog from './MaterialAdminRunboxConfirmDialog.js';
 import MaterialRunboxAlert from './MaterialRunboxAlert.js';
 import MaterialRunboxBody from './MaterialRunboxBody.js';
-import MaterialRunboxFooter from './MaterialRunboxFooter.js';
 import MaterialRunboxHeader from './MaterialRunboxHeader.js';
+import { runboxLightTheme } from './theme.js';
 import { useMaterialRunboxContext } from './contexts/MaterialRunboxContext.js';
 import { useMaterialRunboxApiContext } from './contexts/MaterialRunboxApiContext.js';
 import MaterialRunboxCommandContextProvider from './contexts/MaterialRunboxCommandContext.js';
+import MaterialRunboxControlContextProvider from './contexts/MaterialRunboxControlContext.js';
+import MaterialRunboxDiskUsageAlert from './disk/MaterialRunboxDiskUsageAlert.js';
+import MaterialRunboxDiskUsageDialog from './disk/MaterialRunboxDiskUsageDialog.js';
 import { useMaterialRunboxRunboxIdStarterGet } from './hooks/useMaterialRunboxRunboxIdStarterGet.js';
 
 var _templateObject;
@@ -41,7 +44,8 @@ var MaterialRunboxContent = function MaterialRunboxContent(_ref) {
     isTutoring = _ref$isTutoring === void 0 ? false : _ref$isTutoring,
     _ref$hideTimerPopover = _ref.hideTimerPopover,
     hideTimerPopover = _ref$hideTimerPopover === void 0 ? false : _ref$hideTimerPopover,
-    getAchievementColor = _ref.getAchievementColor;
+    getAchievementColor = _ref.getAchievementColor,
+    onRunboxRunningIdChange = _ref.onRunboxRunningIdChange;
   var _a;
   var intl = useRawEliceIntl();
   var _useMaterialRunboxCon = useMaterialRunboxContext(),
@@ -150,66 +154,81 @@ var MaterialRunboxContent = function MaterialRunboxContent(_ref) {
   //
   //
   if (isInitialLoading || starterEnabled && isLoading) {
-    return jsx(StyledRunboxContainer, {
-      children: jsx(CircularProgress, {})
+    return jsx(ThemeProvider, {
+      theme: runboxLightTheme,
+      children: jsx(StyledRunboxContainer, {
+        sx: {
+          backgroundColor: 'background.paper'
+        },
+        children: jsx(CircularProgress, {})
+      })
     });
   }
   if (isError) {
-    return jsx(StyledRunboxContainer, {
-      children: jsxs(Stack, {
-        gap: "1.5rem",
-        children: [jsx(Typography, {
-          variant: "h6",
-          children: intl.formatMessage({
-            id: 'runbox.runtime.message.startError'
-          })
-        }), jsxs(Stack, {
-          gap: "0.5rem",
-          children: [jsx(Button, {
-            startIcon: jsx(Refresh, {}),
-            onClick: function onClick() {
-              return refetch();
-            },
-            children: intl.formatMessage({
-              id: 'runbox.common.retry'
-            })
-          }), typeof showMessenger === 'function' ? jsx(Button, {
-            variant: "outlined",
-            onClick: function onClick() {
-              return showMessenger();
-            },
+    return jsx(ThemeProvider, {
+      theme: runboxLightTheme,
+      children: jsx(StyledRunboxContainer, {
+        sx: {
+          backgroundColor: 'background.paper',
+          color: 'text.primary'
+        },
+        children: jsxs(Stack, {
+          gap: "1.5rem",
+          children: [jsx(Typography, {
+            variant: "h6",
             children: intl.formatMessage({
-              id: 'runbox.common.support'
+              id: 'runbox.runtime.message.startError'
             })
-          }) : null]
-        })]
+          }), jsxs(Stack, {
+            gap: "0.5rem",
+            children: [jsx(Button, {
+              startIcon: jsx(Refresh, {}),
+              onClick: function onClick() {
+                return refetch();
+              },
+              children: intl.formatMessage({
+                id: 'runbox.common.retry'
+              })
+            }), typeof showMessenger === 'function' ? jsx(Button, {
+              variant: "outlined",
+              onClick: function onClick() {
+                return showMessenger();
+              },
+              children: intl.formatMessage({
+                id: 'runbox.common.support'
+              })
+            }) : null]
+          })]
+        })
       })
     });
   }
   if (!enabledLxpPlan) {
-    return jsx(StyledRunboxContainer, {
-      sx: {
-        backgroundColor: function backgroundColor(theme) {
-          return theme.palette.background.paper;
-        }
-      },
-      children: jsxs(Stack, {
-        gap: "0.5rem",
-        textAlign: "center",
-        children: [jsx(Typography, {
-          variant: "h6",
-          color: "text.secondary",
-          children: intl.formatMessage({
-            id: 'runbox.runtime.message.runbox_unavailable'
-          })
-        }), jsx(Typography, {
-          variant: "body1",
-          whiteSpace: "pre-line",
-          color: "text.tertiary",
-          children: intl.formatMessage({
-            id: 'runbox.runtime.message.lxp_plan_required'
-          })
-        })]
+    return jsx(ThemeProvider, {
+      theme: runboxLightTheme,
+      children: jsx(StyledRunboxContainer, {
+        sx: {
+          backgroundColor: 'background.paper',
+          color: 'text.primary'
+        },
+        children: jsxs(Stack, {
+          gap: "0.5rem",
+          textAlign: "center",
+          children: [jsx(Typography, {
+            variant: "h6",
+            color: "text.secondary",
+            children: intl.formatMessage({
+              id: 'runbox.runtime.message.runbox_unavailable'
+            })
+          }), jsx(Typography, {
+            variant: "body1",
+            whiteSpace: "pre-line",
+            color: "text.tertiary",
+            children: intl.formatMessage({
+              id: 'runbox.runtime.message.lxp_plan_required'
+            })
+          })]
+        })
       })
     });
   }
@@ -267,23 +286,32 @@ var MaterialRunboxContent = function MaterialRunboxContent(_ref) {
         });
       },
       onRunboxRefetchRequest: refetch,
+      onRunboxRunningIdChange: onRunboxRunningIdChange,
       children: jsx(StyledRunboxContainer, {
-        children: jsxs(SnackbarProvider, {
+        children: jsx(SnackbarProvider, {
           domRoot: snackbarRoot !== null && snackbarRoot !== void 0 ? snackbarRoot : document.body,
           classes: {
             containerRoot: SNACKBAR_CONTAINER_CLASS
           },
-          children: [jsx(MaterialRunboxHeader, Object.assign({}, props, {
-            hideTimerPopover: hideTimerPopover
-          })), jsx(MaterialRunboxAlert, {
-            runbox: runbox,
-            courseId: courseId,
-            studentUserId: studentUserId,
-            userId: userId,
-            isTutoring: isTutoring
-          }), jsx(MaterialRunboxBody, Object.assign({
-            setSnackbarRoot: setSnackbarRoot
-          }, props)), jsx(MaterialRunboxFooter, Object.assign({}, props))]
+          children: jsxs(MaterialRunboxControlContextProvider, Object.assign({}, props, {
+            children: [jsx(MaterialRunboxHeader, Object.assign({}, props, {
+              hideTimerPopover: hideTimerPopover
+            })), jsx(MaterialRunboxAlert, {
+              runbox: runbox,
+              courseId: courseId,
+              studentUserId: studentUserId,
+              userId: userId,
+              isTutoring: isTutoring
+            }), jsx(MaterialRunboxDiskUsageAlert, {
+              runtimeTemplateId: runtimeTemplate.id,
+              courseId: courseId,
+              userId: studentUserId
+            }), jsx(MaterialRunboxDiskUsageDialog, {
+              runboxId: runbox.id
+            }), jsx(MaterialRunboxBody, Object.assign({
+              setSnackbarRoot: setSnackbarRoot
+            }, props))]
+          }))
         })
       })
     })

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

@@ -9,43 +9,44 @@ import { Tag, EliceIcon } from '@elice/mui-elements';
 import { useEliceRunboxRunning } from '@elice/runbox-client';
 import { enums } from '@elice/types';
 import { faEllipsisVertical } from '@fortawesome/pro-solid-svg-icons';
-import { Box, Stack, Button } from '@mui/material';
+import { Stack, IconButton, Button } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
-import MaterialRunboxActionAutoShutdown from './actions/MaterialRunboxActionAutoShutdown.js';
 import MaterialRunboxActionDisconnect from './actions/MaterialRunboxActionDisconnect.js';
 import MaterialRunboxActionGrade from './actions/MaterialRunboxActionGrade.js';
 import MaterialRunboxActionMenu from './actions/MaterialRunboxActionMenu.js';
-import img from '../../assets/runbox_logo.png.js';
 import { useMaterialRunboxContext } from './contexts/MaterialRunboxContext.js';
 import { useMaterialRunboxApiContext } from './contexts/MaterialRunboxApiContext.js';
 import MaterialRunboxTimer from './timer/MaterialRunboxTimer.js';
-import MaterialRunboxDiskAlmostFullSnackbar from './disk/MaterialRunboxDiskAlmostFullSnackbar.js';
-import { useRunboxControl } from './hooks/useRunboxControl.js';
+import MaterialRunboxStatusButton from './status/MaterialRunboxStatusButton.js';
+import { useBreakpoint } from '../shared/hooks/useBreakpoint.js';
 
 var StyledHeader = /*#__PURE__*/_styled("div", {
   target: "e110d0bp0"
 })("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 = useRawEliceIntl();
   var _useMaterialRunboxCon = useMaterialRunboxContext(),
     enableAutoShutdownToggle = _useMaterialRunboxCon.enableAutoShutdownToggle;
@@ -56,19 +57,10 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     menuAnchorEl = _React$useState2[0],
     setMenuAnchorEl = _React$useState2[1];
+  var isSmallTabletOrSmaller = useBreakpoint('md', 'down');
   var _useEliceRunboxRunnin = useEliceRunboxRunning(),
     status = _useEliceRunboxRunnin.status;
   var isRunboxRunning = status === 'running';
-  var _useRunboxControl = useRunboxControl({
-      runbox: runbox,
-      runtime: runtime,
-      courseId: courseId,
-      refetch: refetch,
-      userId: userId,
-      studentUserId: studentUserId,
-      isTutoring: isTutoring
-    }),
-    stopRuntime = _useRunboxControl.stop;
   //
   var _useQuery = useQuery({
       queryKey: ['getGlobalOrganizationGet', orgNameShort],
@@ -96,8 +88,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
@@ -138,20 +130,11 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
     });
   };
   /**
-   *
+   * Whether the auto-shutdown toggle is available.
+   * The toggle itself lives in the option menu. (PLAT-4181)
    */
-  var renderHeaderActionAutoShutdown = function renderHeaderActionAutoShutdown() {
-    var isAidtOrg = (organization === null || organization === void 0 ? void 0 : organization.organizationType) === enums.OrganizationType.Aidt;
-    if (!enableAutoShutdownToggle || isTutoring || isAidtOrg) {
-      return null;
-    }
-    return jsx(MaterialRunboxActionAutoShutdown, {
-      runtime: runtime,
-      runtimeTemplate: runtimeTemplate,
-      courseId: courseId,
-      refetch: refetch
-    });
-  };
+  var isAidtOrg = (organization === null || organization === void 0 ? void 0 : organization.organizationType) === enums.OrganizationType.Aidt;
+  var enableAutoShutdown = Boolean(enableAutoShutdownToggle) && !isTutoring && !isAidtOrg;
   /**
    *
    */
@@ -164,12 +147,29 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
       courseId: courseId
     });
   };
+  /**
+   *
+   */
+  var handleMenuButtonClick = function handleMenuButtonClick(e) {
+    if (menuAnchorEl) {
+      setMenuAnchorEl(null);
+    } else {
+      setMenuAnchorEl(e.currentTarget);
+    }
+  };
   /**
    *
    */
   var renderOptionMenu = function renderOptionMenu() {
     return jsxs(Fragment, {
-      children: [jsx(Button, {
+      children: [isSmallTabletOrSmaller ? jsx(IconButton, {
+        size: "small",
+        disabled: !isRunboxRunning,
+        onClick: handleMenuButtonClick,
+        children: jsx(EliceIcon, {
+          icon: faEllipsisVertical
+        })
+      }) : jsx(Button, {
         disabled: !isRunboxRunning,
         startIcon: jsx(EliceIcon, {
           icon: faEllipsisVertical
@@ -179,22 +179,18 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
         sx: {
           color: 'text.primary'
         },
-        onClick: function onClick(e) {
-          if (menuAnchorEl) {
-            setMenuAnchorEl(null);
-          } else {
-            setMenuAnchorEl(e.currentTarget);
-          }
-        },
+        onClick: handleMenuButtonClick,
         children: intl.formatMessage({
           id: 'runbox.action.menu.title'
         })
       }), jsx(MaterialRunboxActionMenu, {
         runbox: runbox,
         runtime: runtime,
+        runtimeTemplate: runtimeTemplate,
         courseId: courseId,
         studentUserId: studentUserId,
         isTutoring: isTutoring,
+        enableAutoShutdown: enableAutoShutdown,
         menuAnchorEl: menuAnchorEl,
         refetch: refetch,
         handleMenuClose: handleMenuClose,
@@ -209,39 +205,29 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
     if (isTutoring) {
       return null;
     }
-    return jsx(MaterialRunboxActionDisconnect, {
-      stopRuntime: stopRuntime
-    });
+    return jsx(MaterialRunboxActionDisconnect, {});
   };
   //
   //
   //
   return jsxs(StyledHeader, {
     ref: headerRef,
-    children: [jsx(Box, {
-      component: "img",
-      src: img,
-      alt: "elice runbox",
-      sx: {
-        width: 'auto',
-        height: '100%',
-        imageRendering: 'auto',
-        padding: '0.465rem 0'
-      }
-    }), runtime ? jsx(MaterialRunboxTimer, {
+    children: [runtime ? jsx(MaterialRunboxTimer, {
       runboxId: runbox.id,
       userId: userId,
       headerElement: headerRef.current,
-      stopRuntime: stopRuntime,
-      hideTimerPopover: hideTimerPopover
-    }) : null, jsx(MaterialRunboxDiskAlmostFullSnackbar, {
-      runboxId: runbox.id
+      hideTimerPopover: hideTimerPopover,
+      isTutoring: isTutoring
+    }) : null, jsx(MaterialRunboxStatusButton, {
+      runtimeTemplateId: runtimeTemplate.id,
+      courseId: courseId,
+      userId: studentUserId
     }), jsxs(Stack, {
       direction: "row",
       alignItems: "center",
       gap: "0.5rem",
       marginLeft: "auto",
-      children: [renderHeaderSubmitInfo(), renderHeaderActionAutoShutdown(), renderOptionMenu(), renderHeaderActionDisconnect(), renderHeaderActionGrade()]
+      children: [renderHeaderSubmitInfo(), renderOptionMenu(), renderHeaderActionDisconnect(), renderHeaderActionGrade()]
     })]
   });
 };

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

@@ -2,19 +2,26 @@ import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPlugin
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useRawEliceIntl } from '@elice/intl';
+import { EliceIcon } from '@elice/mui-elements';
 import { useEliceRunboxRunning } from '@elice/runbox-client';
-import { Button } from '@mui/material';
+import { faLinkSlash } from '@fortawesome/pro-solid-svg-icons';
+import { Tooltip, IconButton, Button } from '@mui/material';
 import MaterialRunboxActionDisconnectDialog from './MaterialRunboxActionDisconnectDialog.js';
+import { useBreakpoint } from '../../shared/hooks/useBreakpoint.js';
+import { useMaterialRunboxControlContext } from '../contexts/MaterialRunboxControlContext.js';
 
 //
 //
 //
-var MaterialRunboxActionDisconnect = function MaterialRunboxActionDisconnect(_ref) {
-  var stopRuntime = _ref.stopRuntime;
+var MaterialRunboxActionDisconnect = function MaterialRunboxActionDisconnect() {
   var intl = useRawEliceIntl();
+  var isSmallTabletOrSmaller = useBreakpoint('md', 'down');
+  var isMobileOrSmaller = useBreakpoint('sm', 'down');
   var _useEliceRunboxRunnin = useEliceRunboxRunning(),
     status = _useEliceRunboxRunnin.status;
   var isRunboxTerminated = status === 'terminated';
+  var _useMaterialRunboxCon = useMaterialRunboxControlContext(),
+    stopRuntime = _useMaterialRunboxCon.stop;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isDisconnectDialogOpen = _React$useState2[0],
@@ -36,6 +43,23 @@ var MaterialRunboxActionDisconnect = function MaterialRunboxActionDisconnect(_re
    *
    */
   var renderActionButton = function renderActionButton() {
+    if (isSmallTabletOrSmaller) {
+      return jsx(Tooltip, {
+        title: intl.formatMessage({
+          id: 'runbox.action.disconnect.title'
+        }),
+        children: jsx("span", {
+          children: jsx(IconButton, {
+            size: "small",
+            disabled: isRunboxTerminated,
+            onClick: handleClickAction,
+            children: jsx(EliceIcon, {
+              icon: faLinkSlash
+            })
+          })
+        })
+      });
+    }
     return jsx(Button, {
       disabled: isRunboxTerminated,
       variant: "contained",
@@ -65,6 +89,9 @@ var MaterialRunboxActionDisconnect = function MaterialRunboxActionDisconnect(_re
   //
   //
   //
+  if (isMobileOrSmaller) {
+    return null;
+  }
   return jsxs(Fragment, {
     children: [renderActionButton(), renderDisconnectDialog()]
   });

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

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

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

@@ -0,0 +1,82 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useRawEliceIntl } from '@elice/intl';
+import { EliceIcon } from '@elice/mui-elements';
+import { useEliceRunboxRunning } from '@elice/runbox-client';
+import { faLinkSlash } from '@fortawesome/pro-solid-svg-icons';
+import { LoadingButton } from '@mui/lab';
+import { MenuItem, ListItemIcon, ListItemText } from '@mui/material';
+import MaterialRunboxActionDisconnectDialog from './MaterialRunboxActionDisconnectDialog.js';
+import { useMaterialRunboxControlContext } from '../contexts/MaterialRunboxControlContext.js';
+
+//
+//
+//
+var MaterialRunboxActionDisconnectMenuItem = function MaterialRunboxActionDisconnectMenuItem() {
+  var intl = useRawEliceIntl();
+  var _useEliceRunboxRunnin = useEliceRunboxRunning(),
+    status = _useEliceRunboxRunnin.status;
+  var isRunboxTerminated = status === 'terminated';
+  var _useMaterialRunboxCon = useMaterialRunboxControlContext(),
+    stopRuntime = _useMaterialRunboxCon.stop,
+    isStopping = _useMaterialRunboxCon.isStopping;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isDisconnectDialogOpen = _React$useState2[0],
+    setDisconnectDialogOpen = _React$useState2[1];
+  /**
+   *
+   */
+  var handleConfirmDisconnect = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      return _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 jsxs(Fragment, {
+    children: [jsxs(MenuItem, {
+      fullWidth: true,
+      component: LoadingButton,
+      color: "inherit",
+      loading: isStopping,
+      disabled: isRunboxTerminated,
+      onClick: function onClick() {
+        return setDisconnectDialogOpen(true);
+      },
+      children: [jsx(ListItemIcon, {
+        children: jsx(EliceIcon, {
+          icon: faLinkSlash
+        })
+      }), jsx(ListItemText, {
+        children: intl.formatMessage({
+          id: 'runbox.action.disconnect.title'
+        })
+      })]
+    }), jsx(MaterialRunboxActionDisconnectDialog, {
+      open: isDisconnectDialogOpen,
+      onClose: function onClose() {
+        return setDisconnectDialogOpen(false);
+      },
+      onConfirm: function onConfirm() {
+        return void handleConfirmDisconnect();
+      }
+    })]
+  });
+};
+
+export { MaterialRunboxActionDisconnectMenuItem as default };

package/es/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>;