@elice/material-runbox 1.260908.0 → 1.260910.0

package/es/components/material-runbox/runtime/RuntimeOverlayLoading.js

@@ -0,0 +1,275 @@
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { useInterval } from 'react-use';
+import { IntlComponentBuilder } from '@elice/intl';
+import { EliceIcon } from '@elice/mui-elements';
+import { colors } from '@elice/mui-system';
+import { faCheck } from '@fortawesome/pro-solid-svg-icons';
+import { ThemeProvider, Stack, Typography, Box, CircularProgress, alpha, LinearProgress, Fade } from '@mui/material';
+import { runboxLightTheme } from '../theme.js';
+import { getRuntimeLoadingTips } from './runtime-loading-tips.js';
+import img from '../../../assets/runbox-loading.svg.js';
+import messageEn from '../locales/en.json.js';
+import messageKo from '../locales/ko.json.js';
+
+//
+//
+//
+var STEPS = [{
+  labelId: 'runbox.runtime.loading.step.prepare',
+  progressId: 'runbox.runtime.loading.step.prepare_progress'
+}, {
+  labelId: 'runbox.runtime.loading.step.connect',
+  progressId: 'runbox.runtime.loading.step.connect_progress'
+}, {
+  labelId: 'runbox.runtime.loading.step.material',
+  progressId: 'runbox.runtime.loading.step.material_progress'
+}];
+var STEP_STATUS_ID = Object.freeze({
+  completed: 'runbox.runtime.loading.step.status.completed',
+  active: 'runbox.runtime.loading.step.status.active',
+  pending: 'runbox.runtime.loading.step.status.pending'
+});
+/** Two tips fit side by side, and one pair holds long enough to read. */
+var TIPS_PER_PAGE = 2;
+var PAGE_DURATION_MS = 7000;
+//
+//
+//
+var RuntimeOverlayLoading = function RuntimeOverlayLoading(_ref) {
+  var intl = _ref.__intl,
+    activeStep = _ref.activeStep,
+    containerImageName = _ref.containerImageName;
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    page = _React$useState2[0],
+    setPage = _React$useState2[1];
+  var tips = getRuntimeLoadingTips(containerImageName);
+  var shownTips = tips.slice(page * TIPS_PER_PAGE, page * TIPS_PER_PAGE + TIPS_PER_PAGE);
+  var pageCount = Math.floor(tips.length / TIPS_PER_PAGE);
+  //
+  //
+  //
+  useInterval(function () {
+    return setPage(function (current) {
+      return (current + 1) % pageCount;
+    });
+  }, pageCount > 1 ? PAGE_DURATION_MS : null);
+  //
+  //
+  //
+  return jsx(ThemeProvider, {
+    theme: runboxLightTheme,
+    children: jsxs(Stack, {
+      sx: {
+        width: '100%',
+        height: '100%',
+        padding: {
+          xs: '1.5rem',
+          sm: '2.5rem'
+        },
+        gap: '2.5rem',
+        overflow: 'auto',
+        backgroundColor: 'background.paper',
+        color: 'text.primary'
+      },
+      children: [jsxs(Stack, {
+        direction: {
+          xs: 'column',
+          md: 'row'
+        },
+        sx: {
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: {
+            xs: '1rem',
+            md: '2rem'
+          }
+        },
+        children: [jsxs(Stack, {
+          sx: {
+            width: '100%',
+            maxWidth: '30rem',
+            flex: {
+              md: '1 1 0'
+            },
+            gap: '1.5rem'
+          },
+          children: [jsxs(Stack, {
+            gap: "0.5rem",
+            children: [jsx(Typography, {
+              variant: "h4",
+              color: "text.primary",
+              children: intl.formatMessage({
+                id: 'runbox.runtime.loading.title'
+              })
+            }), jsx(Typography, {
+              variant: "body1",
+              color: "text.secondary",
+              children: intl.formatMessage({
+                id: 'runbox.runtime.loading.description'
+              })
+            })]
+          }), jsx(Stack, {
+            children: STEPS.map(function (step, index) {
+              var stepNumber = index + 1;
+              var isActive = stepNumber === activeStep;
+              var isCompleted = stepNumber < activeStep;
+              return jsxs(Stack, {
+                direction: "row",
+                sx: {
+                  alignItems: 'center',
+                  gap: '0.75rem',
+                  padding: '0.625rem 0.75rem',
+                  borderRadius: '0.5rem',
+                  backgroundColor: isActive ? alpha(colors.elicepurple[700], 0.04) : 'transparent'
+                },
+                children: [jsx(Box, {
+                  sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    width: '1rem'
+                  },
+                  children: isActive ? jsx(CircularProgress, {
+                    size: "1rem",
+                    sx: {
+                      color: colors.elicepurple[700]
+                    }
+                  }) : isCompleted ? jsx(EliceIcon, {
+                    icon: faCheck,
+                    sx: {
+                      fontSize: '1rem',
+                      color: colors.elicepurple[700]
+                    }
+                  }) : jsx(Typography, {
+                    variant: "body2",
+                    color: "text.tertiary",
+                    children: stepNumber
+                  })
+                }), jsx(Typography, {
+                  variant: "body2",
+                  fontWeight: isActive ? 700 : 500,
+                  color: isActive ? 'text.primary' : 'text.secondary',
+                  sx: {
+                    flex: 1
+                  },
+                  children: intl.formatMessage({
+                    id: step.labelId
+                  })
+                }), jsx(Typography, {
+                  variant: "caption",
+                  color: "text.tertiary",
+                  whiteSpace: "nowrap",
+                  children: intl.formatMessage({
+                    id: isCompleted ? STEP_STATUS_ID.completed : isActive ? STEP_STATUS_ID.active : STEP_STATUS_ID.pending
+                  })
+                })]
+              }, step.labelId);
+            })
+          }), jsxs(Stack, {
+            direction: "row",
+            sx: {
+              alignItems: 'center',
+              gap: '0.75rem'
+            },
+            children: [jsx(LinearProgress, {
+              variant: "determinate",
+              value: activeStep / STEPS.length * 100,
+              sx: _defineProperty({
+                flex: 1,
+                height: '0.25rem',
+                borderRadius: '0.25rem',
+                backgroundColor: alpha(colors.elicepurple[700], 0.2)
+              }, "& .MuiLinearProgress-bar", {
+                backgroundColor: colors.elicepurple[700]
+              })
+            }), jsx(Typography, {
+              variant: "caption",
+              color: "text.tertiary",
+              whiteSpace: "nowrap",
+              children: intl.formatMessage({
+                id: STEPS[activeStep - 1].progressId
+              }, {
+                current: activeStep,
+                total: STEPS.length
+              })
+            })]
+          })]
+        }), jsx(Box, {
+          sx: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flex: {
+              md: 1
+            }
+          },
+          children: jsx(Box, {
+            component: "img",
+            src: img,
+            alt: intl.formatMessage({
+              id: 'runbox.runtime.loading.illustration_alt'
+            }),
+            sx: {
+              width: '100%',
+              maxWidth: {
+                xs: '9.625rem',
+                md: '13rem'
+              },
+              height: 'auto'
+            }
+          })
+        })]
+      }), jsx(Fade, {
+        "in": true,
+        appear: page > 0,
+        children: jsx(Stack, {
+          direction: {
+            xs: 'column',
+            md: 'row'
+          },
+          gap: "1rem",
+          children: shownTips.map(function (tip) {
+            return jsxs(Stack, {
+              direction: "row",
+              sx: {
+                flex: 1,
+                gap: '0.75rem'
+              },
+              children: [jsx(EliceIcon, {
+                icon: tip.icon,
+                sx: {
+                  fontSize: '1.25rem',
+                  color: 'text.secondary',
+                  marginTop: '0.125rem'
+                }
+              }), jsxs(Stack, {
+                gap: "0.125rem",
+                children: [jsx(Typography, {
+                  variant: "body1",
+                  fontWeight: 700,
+                  color: "text.primary",
+                  children: intl.formatMessage({
+                    id: tip.titleId
+                  })
+                }), jsx(Typography, {
+                  variant: "caption",
+                  color: "text.tertiary",
+                  children: intl.formatMessage({
+                    id: tip.descriptionId
+                  })
+                })]
+              })]
+            }, tip.titleId);
+          })
+        })
+      }, page)]
+    })
+  });
+};
+var RuntimeOverlayLoading$1 = new IntlComponentBuilder(RuntimeOverlayLoading).add('en', messageEn).add('ko', messageKo).addAsync('th', import('../locales/th.json.js')).addAsync('ja', import('../locales/ja.json.js')).build();
+
+export { RuntimeOverlayLoading$1 as default };

package/es/components/material-runbox/runtime/RuntimeOverlayQueued.d.ts

@@ -1,5 +1,7 @@
-import type { WithIntlComponentBuilderProps } from '@elice/intl';
 import type { EliceRunboxViewerOverlayQueuedComponentProps as QueuedComponentProps } from '@elice/runbox-client';
 import type React from 'react';
-declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<QueuedComponentProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
-export default _default;
+export interface RuntimeOverlayQueuedProps extends QueuedComponentProps {
+    containerImageName?: string;
+}
+declare const RuntimeOverlayQueued: React.FC<RuntimeOverlayQueuedProps>;
+export default RuntimeOverlayQueued;

package/es/components/material-runbox/runtime/RuntimeOverlayQueued.js

@@ -1,70 +1,12 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { IntlComponentBuilder } from '@elice/intl';
-import { colors } from '@elice/mui-system';
-import { QuestionAnswer } from '@mui/icons-material';
-import { Stack, Box, Typography, Button } from '@mui/material';
-import img from '../../../assets/queue.gif.js';
-import messageEn from '../locales/en.json.js';
-import messageKo from '../locales/ko.json.js';
-import { useMaterialRunboxContext } from '../contexts/MaterialRunboxContext.js';
+import { jsx } from 'react/jsx-runtime';
+import RuntimeOverlayLoading from './RuntimeOverlayLoading.js';
 
-//
-//
-//
 var RuntimeOverlayQueued = function RuntimeOverlayQueued(_ref) {
-  var intl = _ref.__intl,
-    numWaiters = _ref.numWaiters;
-  var _useMaterialRunboxCon = useMaterialRunboxContext(),
-    showMessenger = _useMaterialRunboxCon.showMessenger;
-  //
-  //
-  //
-  return jsxs(Stack, {
-    gap: "1.5rem",
-    sx: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: '100%',
-      height: '100%'
-    },
-    children: [jsx(Box, {
-      component: "img",
-      src: img,
-      alt: "queue",
-      sx: {
-        width: '100%',
-        height: 'auto',
-        maxWidth: '13.375rem'
-      }
-    }), jsx(Typography, {
-      variant: "subtitle2",
-      color: "text:secondary",
-      sx: {
-        whiteSpace: 'pre-wrap',
-        textAlign: 'center'
-      },
-      children: numWaiters > 0 ? intl.formatMessage({
-        id: 'runbox.runtime.overlay.queued.description'
-      }, {
-        waiters: numWaiters
-      }) : intl.formatMessage({
-        id: 'runbox.runtime.overlay.queued.description_zero'
-      })
-    }), typeof showMessenger === 'function' ? jsx(Button, {
-      variant: "outlined",
-      startIcon: jsx(QuestionAnswer, {}),
-      sx: {
-        color: colors.elicepurple[700],
-        borderColor: colors.elicepurple[700]
-      },
-      onClick: showMessenger,
-      children: intl.formatMessage({
-        id: 'runbox.common.support'
-      })
-    }) : null]
+  var containerImageName = _ref.containerImageName;
+  return jsx(RuntimeOverlayLoading, {
+    activeStep: 1,
+    containerImageName: containerImageName
   });
 };
-var RuntimeOverlayQueued$1 = new IntlComponentBuilder(RuntimeOverlayQueued).add('en', messageEn).add('ko', messageKo).addAsync('th', import('../locales/th.json.js')).addAsync('ja', import('../locales/ja.json.js')).build();
 
-export { RuntimeOverlayQueued$1 as default };
+export { RuntimeOverlayQueued as default };

package/es/components/material-runbox/runtime/RuntimeOverlayTerminated.d.ts

@@ -2,7 +2,10 @@ import type { WithIntlComponentBuilderProps } from '@elice/intl';
 import type { EliceRunboxViewerOverlayTerminatedComponentProps as TerminatedComponentProps } from '@elice/runbox-client';
 import type React from 'react';
 interface RuntimeOverlayTerminatedProps extends TerminatedComponentProps {
-    startRuntime: () => Promise<void>;
+    runtimeTemplateId: string;
+    courseId: number;
+    /** User ID for tutoring. */
+    studentUserId?: number;
 }
 declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<RuntimeOverlayTerminatedProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
 export default _default;

package/es/components/material-runbox/runtime/RuntimeOverlayTerminated.js

@@ -1,14 +1,16 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { IntlComponentBuilder } from '@elice/intl';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { EliceIcon } from '@elice/mui-elements';
-import { colors } from '@elice/mui-system';
 import { useEliceRunboxQuota } from '@elice/runbox-client';
-import { faLinkSimple } from '@fortawesome/pro-solid-svg-icons';
-import { Box, Stack, Typography, Button, Card, Divider } from '@mui/material';
+import { faArrowsRotate, faLinkSimple } from '@fortawesome/pro-solid-svg-icons';
+import { ThemeProvider, Box, Stack, Typography, Button, Card, Divider } from '@mui/material';
+import { runboxLightTheme } from '../theme.js';
 import img from '../../../assets/terminated.png.js';
 import messageEn from '../locales/en.json.js';
 import messageKo from '../locales/ko.json.js';
+import { useMaterialRunboxControlContext } from '../contexts/MaterialRunboxControlContext.js';
 import { useMaterialRunboxContext } from '../contexts/MaterialRunboxContext.js';
+import MaterialRunboxEnvResetButton from '../disk/MaterialRunboxEnvResetButton.js';
 
 //
 //
@@ -16,11 +18,15 @@ import { useMaterialRunboxContext } from '../contexts/MaterialRunboxContext.js';
 var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
   var intl = _ref.__intl,
     reason = _ref.reason,
-    startRuntime = _ref.startRuntime;
+    runtimeTemplateId = _ref.runtimeTemplateId,
+    courseId = _ref.courseId,
+    studentUserId = _ref.studentUserId;
   var _useEliceRunboxQuota = useEliceRunboxQuota(),
     quotaInfo = _useEliceRunboxQuota.quotaInfo;
-  var _useMaterialRunboxCon = useMaterialRunboxContext(),
-    showMessenger = _useMaterialRunboxCon.showMessenger;
+  var _useMaterialRunboxCon = useMaterialRunboxControlContext(),
+    startRuntime = _useMaterialRunboxCon.start;
+  var _useMaterialRunboxCon2 = useMaterialRunboxContext(),
+    showMessenger = _useMaterialRunboxCon2.showMessenger;
   /**
    *
    */
@@ -31,23 +37,22 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
    *
    */
   var renderConnectButton = function renderConnectButton() {
-    return jsx(Button, {
-      variant: "contained",
-      startIcon: jsx(EliceIcon, {
-        icon: faLinkSimple
-      }),
+    return jsx(Box, {
       sx: {
         width: '20rem',
-        maxWidth: '100%',
-        color: 'text.primary',
-        bgcolor: colors.elicepurple[700],
-        '&:hover': {
-          bgcolor: colors.elicepurple[800]
-        }
+        maxWidth: '100%'
       },
-      onClick: handleClickConnect,
-      children: intl.formatMessage({
-        id: 'runbox.runtime.overlay.terminated.connect'
+      children: jsx(Button, {
+        fullWidth: true,
+        variant: "contained",
+        color: "primary",
+        startIcon: jsx(EliceIcon, {
+          icon: faLinkSimple
+        }),
+        onClick: handleClickConnect,
+        children: intl.formatMessage({
+          id: 'runbox.runtime.overlay.terminated.connect'
+        })
       })
     });
   };
@@ -58,9 +63,6 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
     return jsx(Button, {
       variant: "text",
       color: "primary",
-      sx: {
-        color: colors.elicepurple[700]
-      },
       onClick: showMessenger,
       children: intl.formatMessage({
         id: 'runbox.runtime.overlay.terminated.contact'
@@ -76,7 +78,7 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
       sx: {
         width: '20rem',
         maxWidth: '100%',
-        color: 'secondary.contrastText',
+        color: 'text.primary',
         bgcolor: 'grey.100',
         padding: '1rem'
       },
@@ -110,37 +112,51 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
    *
    */
   var renderOverlay = function renderOverlay(args) {
-    return jsx(Box, {
-      sx: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-        height: '100%'
-      },
-      children: jsxs(Stack, {
-        gap: "1.5rem",
-        alignItems: "center",
-        children: [jsx(Box, {
-          component: "img",
-          src: img,
-          alt: "terminated",
-          sx: {
-            maxWidth: '10rem',
-            height: 'auto'
-          }
-        }), jsx(Typography, {
-          variant: "h6",
-          textAlign: "center",
-          children: args.title
-        }), jsx(Typography, {
-          variant: "body1",
-          textAlign: "center",
-          whiteSpace: "pre-line",
-          children: args.description
-        }), args.body]
+    return (
+      // EliceRunboxView shadows the consumer intl context with the runbox-client
+      // bundle, so re-provide this package's messages for descendants that call
+      // useRawEliceIntl (e.g. MaterialRunboxEnvResetButton and its dialog).
+      jsx(RawEliceIntlProvider, {
+        value: intl,
+        children: jsx(ThemeProvider, {
+          theme: runboxLightTheme,
+          children: jsx(Box, {
+            sx: {
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              width: '100%',
+              height: '100%',
+              backgroundColor: 'background.paper',
+              color: 'text.primary'
+            },
+            children: jsxs(Stack, {
+              gap: "1.5rem",
+              alignItems: "center",
+              children: [jsx(Box, {
+                component: "img",
+                src: img,
+                alt: "terminated",
+                sx: {
+                  maxWidth: '10rem',
+                  height: 'auto'
+                }
+              }), jsx(Typography, {
+                variant: "h6",
+                textAlign: "center",
+                whiteSpace: "pre-line",
+                children: args.title
+              }), jsx(Typography, {
+                variant: "body1",
+                textAlign: "center",
+                whiteSpace: "pre-line",
+                children: args.description
+              }), args.body]
+            })
+          })
+        })
       })
-    });
+    );
   };
   //
   //
@@ -149,14 +165,20 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
   if (reason === 'os_disk_is_full') {
     return renderOverlay({
       title: intl.formatMessage({
-        id: 'runbox.runtime.overlay.terminated.title'
+        id: 'runbox.runtime.overlay.terminated.title.os_disk_is_full'
       }),
       description: intl.formatMessage({
         id: 'runbox.runtime.overlay.terminated.description.os_disk_is_full'
       }),
-      body:
-      // TODO: Add disk usage information.
-      renderContactButton()
+      body: jsx(MaterialRunboxEnvResetButton, {
+        variant: "contained",
+        startIcon: jsx(EliceIcon, {
+          icon: faArrowsRotate
+        }),
+        runtimeTemplateId: runtimeTemplateId,
+        courseId: courseId,
+        userId: studentUserId
+      })
     });
   } else if (reason === 'quota_exceeded') {
     return renderOverlay({

package/es/components/material-runbox/runtime/runtime-loading-tips.d.ts

@@ -0,0 +1,7 @@
+import type { EliceIconDefinition } from '@elice/mui-elements';
+export interface RuntimeLoadingTip {
+    icon: EliceIconDefinition;
+    titleId: string;
+    descriptionId: string;
+}
+export declare const getRuntimeLoadingTips: (containerImageName?: string) => RuntimeLoadingTip[];