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

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

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

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

@@ -16,6 +16,7 @@ var MaterialAdminRunboxConfirmDialog = require('./MaterialAdminRunboxConfirmDial
 var MaterialRunboxAlert = require('./MaterialRunboxAlert.js');
 var MaterialRunboxBody = require('./MaterialRunboxBody.js');
 var MaterialRunboxHeader = require('./MaterialRunboxHeader.js');
+var theme = require('./theme.js');
 var MaterialRunboxContext = require('./contexts/MaterialRunboxContext.js');
 var MaterialRunboxApiContext = require('./contexts/MaterialRunboxApiContext.js');
 var MaterialRunboxCommandContext = require('./contexts/MaterialRunboxCommandContext.js');
@@ -160,66 +161,81 @@ var MaterialRunboxContent = function MaterialRunboxContent(_ref) {
   //
   //
   if (isInitialLoading || starterEnabled && isLoading) {
-    return jsxRuntime.jsx(StyledRunboxContainer, {
-      children: jsxRuntime.jsx(material.CircularProgress, {})
+    return jsxRuntime.jsx(material.ThemeProvider, {
+      theme: theme.runboxLightTheme,
+      children: jsxRuntime.jsx(StyledRunboxContainer, {
+        sx: {
+          backgroundColor: 'background.paper'
+        },
+        children: jsxRuntime.jsx(material.CircularProgress, {})
+      })
     });
   }
   if (isError) {
-    return jsxRuntime.jsx(StyledRunboxContainer, {
-      children: jsxRuntime.jsxs(material.Stack, {
-        gap: "1.5rem",
-        children: [jsxRuntime.jsx(material.Typography, {
-          variant: "h6",
-          children: intl$1.formatMessage({
-            id: 'runbox.runtime.message.startError'
-          })
-        }), jsxRuntime.jsxs(material.Stack, {
-          gap: "0.5rem",
-          children: [jsxRuntime.jsx(material.Button, {
-            startIcon: jsxRuntime.jsx(iconsMaterial.Refresh, {}),
-            onClick: function onClick() {
-              return refetch();
-            },
-            children: intl$1.formatMessage({
-              id: 'runbox.common.retry'
-            })
-          }), typeof showMessenger === 'function' ? jsxRuntime.jsx(material.Button, {
-            variant: "outlined",
-            onClick: function onClick() {
-              return showMessenger();
-            },
+    return jsxRuntime.jsx(material.ThemeProvider, {
+      theme: theme.runboxLightTheme,
+      children: jsxRuntime.jsx(StyledRunboxContainer, {
+        sx: {
+          backgroundColor: 'background.paper',
+          color: 'text.primary'
+        },
+        children: jsxRuntime.jsxs(material.Stack, {
+          gap: "1.5rem",
+          children: [jsxRuntime.jsx(material.Typography, {
+            variant: "h6",
             children: intl$1.formatMessage({
-              id: 'runbox.common.support'
+              id: 'runbox.runtime.message.startError'
             })
-          }) : null]
-        })]
+          }), jsxRuntime.jsxs(material.Stack, {
+            gap: "0.5rem",
+            children: [jsxRuntime.jsx(material.Button, {
+              startIcon: jsxRuntime.jsx(iconsMaterial.Refresh, {}),
+              onClick: function onClick() {
+                return refetch();
+              },
+              children: intl$1.formatMessage({
+                id: 'runbox.common.retry'
+              })
+            }), typeof showMessenger === 'function' ? jsxRuntime.jsx(material.Button, {
+              variant: "outlined",
+              onClick: function onClick() {
+                return showMessenger();
+              },
+              children: intl$1.formatMessage({
+                id: 'runbox.common.support'
+              })
+            }) : null]
+          })]
+        })
       })
     });
   }
   if (!enabledLxpPlan) {
-    return jsxRuntime.jsx(StyledRunboxContainer, {
-      sx: {
-        backgroundColor: function backgroundColor(theme) {
-          return theme.palette.background.paper;
-        }
-      },
-      children: jsxRuntime.jsxs(material.Stack, {
-        gap: "0.5rem",
-        textAlign: "center",
-        children: [jsxRuntime.jsx(material.Typography, {
-          variant: "h6",
-          color: "text.secondary",
-          children: intl$1.formatMessage({
-            id: 'runbox.runtime.message.runbox_unavailable'
-          })
-        }), jsxRuntime.jsx(material.Typography, {
-          variant: "body1",
-          whiteSpace: "pre-line",
-          color: "text.tertiary",
-          children: intl$1.formatMessage({
-            id: 'runbox.runtime.message.lxp_plan_required'
-          })
-        })]
+    return jsxRuntime.jsx(material.ThemeProvider, {
+      theme: theme.runboxLightTheme,
+      children: jsxRuntime.jsx(StyledRunboxContainer, {
+        sx: {
+          backgroundColor: 'background.paper',
+          color: 'text.primary'
+        },
+        children: jsxRuntime.jsxs(material.Stack, {
+          gap: "0.5rem",
+          textAlign: "center",
+          children: [jsxRuntime.jsx(material.Typography, {
+            variant: "h6",
+            color: "text.secondary",
+            children: intl$1.formatMessage({
+              id: 'runbox.runtime.message.runbox_unavailable'
+            })
+          }), jsxRuntime.jsx(material.Typography, {
+            variant: "body1",
+            whiteSpace: "pre-line",
+            color: "text.tertiary",
+            children: intl$1.formatMessage({
+              id: 'runbox.runtime.message.lxp_plan_required'
+            })
+          })]
+        })
       })
     });
   }

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

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

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

@@ -8,7 +8,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var intl = require('@elice/intl');
 var muiXSnackbar = require('@elice/mui-x-snackbar');
+var lab = require('@mui/lab');
 var material = require('@mui/material');
+var theme = require('../theme.js');
 var MaterialRunboxEnvResetDialog = require('./MaterialRunboxEnvResetDialog.js');
 var MaterialRunboxApiContext = require('../contexts/MaterialRunboxApiContext.js');
 var MaterialRunboxControlContext = require('../contexts/MaterialRunboxControlContext.js');
@@ -24,7 +26,8 @@ var MaterialRunboxEnvResetButton = function MaterialRunboxEnvResetButton(_a) {
   var runtimeTemplateId = _a.runtimeTemplateId,
     courseId = _a.courseId,
     userId = _a.userId,
-    props = tslib.__rest(_a, ["runtimeTemplateId", "courseId", "userId"]);
+    onSuccess = _a.onSuccess,
+    props = tslib.__rest(_a, ["runtimeTemplateId", "courseId", "userId", "onSuccess"]);
   var intl$1 = intl.useRawEliceIntl();
   var _useSnackbar = muiXSnackbar.useSnackbar(),
     enqueueSnackbar = _useSnackbar.enqueueSnackbar;
@@ -48,6 +51,7 @@ var MaterialRunboxEnvResetButton = function MaterialRunboxEnvResetButton(_a) {
       return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
         while (1) switch (_context.p = _context.n) {
           case 0:
+            setDialogOpened(false);
             setResetting(true);
             _context.p = 1;
             _context.n = 2;
@@ -79,12 +83,12 @@ var MaterialRunboxEnvResetButton = function MaterialRunboxEnvResetButton(_a) {
               eliceCourseId: courseId
             });
           case 4:
-            setDialogOpened(false);
             enqueueSnackbar(intl$1.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.
@@ -121,22 +125,25 @@ var MaterialRunboxEnvResetButton = function MaterialRunboxEnvResetButton(_a) {
   //
   //
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(material.Button, Object.assign({}, props, {
+    children: [jsxRuntime.jsx(lab.LoadingButton, Object.assign({}, props, {
+      loading: isResetting,
       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 handleConfirm();
-      }
+    })), jsxRuntime.jsx(material.ThemeProvider, {
+      theme: theme.runboxDarkTheme,
+      children: jsxRuntime.jsx(MaterialRunboxEnvResetDialog.default, {
+        open: isDialogOpened,
+        onClose: function onClose() {
+          return setDialogOpened(false);
+        },
+        onConfirm: function onConfirm() {
+          return void handleConfirm();
+        }
+      })
     })]
   });
 };

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

@@ -1,7 +1,6 @@
 import React from 'react';
 export interface MaterialRunboxEnvResetDialogProps {
     open: boolean;
-    isResetting?: boolean;
     onClose: () => void;
     onConfirm: () => void;
 }

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

@@ -8,7 +8,6 @@ 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 }; }
@@ -25,8 +24,6 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  */
 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();
@@ -82,14 +79,12 @@ var MaterialRunboxEnvResetDialog = function MaterialRunboxEnvResetDialog(_ref) {
     }), 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, {
+      }), jsxRuntime.jsx(material.Button, {
         color: "error",
-        loading: isResetting,
         disabled: !isAcknowledged,
         onClick: onConfirm,
         children: intl$1.formatMessage({

package/cjs/components/material-runbox/runtime/RuntimeOverlayConflicted.js

@@ -8,10 +8,10 @@ var React = require('react');
 var apiClient = require('@elice/api-client');
 var intl = require('@elice/intl');
 var muiElements = require('@elice/mui-elements');
-var muiSystem = require('@elice/mui-system');
 var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var material = require('@mui/material');
 var reactQuery = require('@tanstack/react-query');
+var theme = require('../theme.js');
 var RuntimeChangeMaterialDialog = require('./RuntimeChangeMaterialDialog.js');
 var terminated = require('../../../assets/terminated.png.js');
 var en = require('../locales/en.json.js');
@@ -87,7 +87,7 @@ var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
         width: '32rem',
         maxWidth: '100%',
         padding: '1rem',
-        color: 'text.primary.contrastText',
+        color: 'text.primary',
         bgcolor: 'grey.100',
         '&:hover': {
           bgcolor: 'grey.200'
@@ -101,10 +101,10 @@ var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
         direction: "column",
         alignItems: "flex-start",
         children: [courseId !== runningCourse.id ? jsxRuntime.jsx(material.Typography, {
-          color: "text.tertiary.contrastText",
+          color: "text.tertiary",
           children: runningCourse === null || runningCourse === void 0 ? void 0 : runningCourse.title
         }) : null, jsxRuntime.jsx(material.Typography, {
-          color: "text.primary.contrastText",
+          color: "text.primary",
           children: runningRunbox.title
         })]
       })
@@ -117,12 +117,15 @@ var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
     if (!isChangeMaterialDialogOpen) {
       return null;
     }
-    return jsxRuntime.jsx(RuntimeChangeMaterialDialog.default, {
-      intl: intl,
-      open: isChangeMaterialDialogOpen,
-      onClose: function onClose() {
-        return setChangeMaterialDialogOpen(false);
-      }
+    return jsxRuntime.jsx(material.ThemeProvider, {
+      theme: theme.runboxDarkTheme,
+      children: jsxRuntime.jsx(RuntimeChangeMaterialDialog.default, {
+        intl: intl,
+        open: isChangeMaterialDialogOpen,
+        onClose: function onClose() {
+          return setChangeMaterialDialogOpen(false);
+        }
+      })
     });
   };
   /**
@@ -135,58 +138,61 @@ var RuntimeOverlayConflicted = function RuntimeOverlayConflicted(_ref) {
   //
   //
   var renderOverlay = function renderOverlay() {
-    return jsxRuntime.jsx(material.Box, {
-      sx: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-        height: '100%'
-      },
-      children: jsxRuntime.jsxs(material.Stack, {
-        gap: "1.5rem",
-        alignItems: "center",
-        children: [jsxRuntime.jsx(material.Box, {
-          component: "img",
-          src: terminated.default,
-          alt: "terminated",
-          sx: {
-            maxWidth: '10rem',
-            height: 'auto'
-          }
-        }), jsxRuntime.jsx(material.Typography, {
-          variant: "h6",
-          textAlign: "center",
-          children: intl.formatMessage({
-            id: 'runbox.runtime.overlay.conflicted.title'
-          })
-        }), renderNavButton(), jsxRuntime.jsx(material.Typography, {
-          variant: "body1",
-          textAlign: "center",
-          whiteSpace: "pre-line",
-          children: intl.formatMessage({
-            id: 'runbox.runtime.overlay.conflicted.description'
-          })
-        }), jsxRuntime.jsx(material.Button, {
-          variant: "contained",
-          color: "primary",
-          startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
-            icon: proSolidSvgIcons.faLinkSimple
-          }),
-          sx: {
-            width: '20rem',
-            maxWidth: '100%',
-            color: 'text.primary',
-            bgcolor: muiSystem.colors.elicepurple[700],
-            '&:hover': {
-              bgcolor: muiSystem.colors.elicepurple[800]
+    return jsxRuntime.jsx(material.ThemeProvider, {
+      theme: theme.runboxLightTheme,
+      children: jsxRuntime.jsx(material.Box, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%',
+          height: '100%',
+          backgroundColor: 'background.paper',
+          color: 'text.primary'
+        },
+        children: jsxRuntime.jsxs(material.Stack, {
+          gap: "1.5rem",
+          alignItems: "center",
+          children: [jsxRuntime.jsx(material.Box, {
+            component: "img",
+            src: terminated.default,
+            alt: "terminated",
+            sx: {
+              maxWidth: '10rem',
+              height: 'auto'
             }
-          },
-          onClick: handleClickConnect,
-          children: intl.formatMessage({
-            id: 'runbox.common.connect'
-          })
-        })]
+          }), jsxRuntime.jsx(material.Typography, {
+            variant: "h6",
+            textAlign: "center",
+            children: intl.formatMessage({
+              id: 'runbox.runtime.overlay.conflicted.title'
+            })
+          }), renderNavButton(), jsxRuntime.jsx(material.Typography, {
+            variant: "body1",
+            textAlign: "center",
+            whiteSpace: "pre-line",
+            children: intl.formatMessage({
+              id: 'runbox.runtime.overlay.conflicted.description'
+            })
+          }), jsxRuntime.jsx(material.Box, {
+            sx: {
+              width: '20rem',
+              maxWidth: '100%'
+            },
+            children: jsxRuntime.jsx(material.Button, {
+              fullWidth: true,
+              variant: "contained",
+              color: "primary",
+              startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+                icon: proSolidSvgIcons.faLinkSimple
+              }),
+              onClick: handleClickConnect,
+              children: intl.formatMessage({
+                id: 'runbox.common.connect'
+              })
+            })
+          })]
+        })
       })
     });
   };