@elice/material-runbox 1.260825.0-runboxusability.12 → 1.260825.0-runboxusability.13

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

@@ -1,12 +1,14 @@
-import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+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 { faDisplayArrowDown, faFloppyDisk } from '@fortawesome/pro-regular-svg-icons';
 import { faCheck } from '@fortawesome/pro-solid-svg-icons';
-import { ThemeProvider, Stack, Typography, Box, CircularProgress, alpha, LinearProgress } from '@mui/material';
+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';
@@ -29,21 +31,34 @@ var STEP_STATUS_ID = Object.freeze({
   active: 'runbox.runtime.loading.step.status.active',
   pending: 'runbox.runtime.loading.step.status.pending'
 });
-var NOTES = [{
-  icon: faDisplayArrowDown,
-  titleId: 'runbox.runtime.loading.note.environment.title',
-  descriptionId: 'runbox.runtime.loading.note.environment.description'
-}, {
-  icon: faFloppyDisk,
-  titleId: 'runbox.runtime.loading.note.save.title',
-  descriptionId: 'runbox.runtime.loading.note.save.description'
-}];
+/** 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;
+    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, {
@@ -208,46 +223,50 @@ var RuntimeOverlayLoading = function RuntimeOverlayLoading(_ref) {
             }
           })
         })]
-      }), jsx(Stack, {
-        direction: {
-          xs: 'column',
-          md: 'row'
-        },
-        gap: "1rem",
-        children: NOTES.map(function (note) {
-          return jsxs(Stack, {
-            direction: "row",
-            sx: {
-              flex: 1,
-              gap: '0.75rem'
-            },
-            children: [jsx(EliceIcon, {
-              icon: note.icon,
+      }), 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: {
-                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: note.titleId
-                })
-              }), jsx(Typography, {
-                variant: "caption",
-                color: "text.tertiary",
-                children: intl.formatMessage({
-                  id: note.descriptionId
-                })
+                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
+                  })
+                })]
               })]
-            })]
-          }, note.titleId);
+            }, tip.titleId);
+          })
         })
-      })]
+      }, page)]
     })
   });
 };

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

@@ -1,4 +1,7 @@
 import type { EliceRunboxViewerOverlayQueuedComponentProps as QueuedComponentProps } from '@elice/runbox-client';
 import type React from 'react';
-declare const RuntimeOverlayQueued: React.FC<QueuedComponentProps>;
+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,12 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import RuntimeOverlayLoading from './RuntimeOverlayLoading.js';
 
-//
-//
-//
-var RuntimeOverlayQueued = function RuntimeOverlayQueued() {
+var RuntimeOverlayQueued = function RuntimeOverlayQueued(_ref) {
+  var containerImageName = _ref.containerImageName;
   return jsx(RuntimeOverlayLoading, {
-    activeStep: 1
+    activeStep: 1,
+    containerImageName: containerImageName
   });
 };
 

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[];

package/es/components/material-runbox/runtime/runtime-loading-tips.js

@@ -0,0 +1,146 @@
+import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { faListOl, faSquareTerminal, faRotate, faFloppyDisk, faTriangleExclamation, faSitemap, faTableCells, faDiagramProject, faWindowRestore, faDisplayArrowDown, faHourglassHalf, faCopy, faArrowsUpDownLeftRight, faHardDrive, faClock } from '@fortawesome/pro-regular-svg-icons';
+
+//
+//
+//
+/** Shown first, always. Not knowing these two is what costs a learner work. */
+var INTRO_TIPS = [{
+  icon: faDisplayArrowDown,
+  titleId: 'runbox.runtime.loading.note.environment.title',
+  descriptionId: 'runbox.runtime.loading.note.environment.description'
+}, {
+  icon: faFloppyDisk,
+  titleId: 'runbox.runtime.loading.note.save.title',
+  descriptionId: 'runbox.runtime.loading.note.save.description'
+}];
+/**
+ * Matched against the container image name, in order -- `VNC-VSCode` carries
+ * two keywords, and the editor is what the learner works in.
+ *
+ * The name is a display name an operator typed (`Jupyter Notebook`,
+ * `JupyterNotebook`, `VSCode`), so it is matched loosely rather than listed.
+ */
+var TIP_GROUPS = [{
+  keywords: ['jupyter'],
+  tips: [{
+    icon: faListOl,
+    titleId: 'runbox.runtime.loading.tip.jupyter.cell_order.title',
+    descriptionId: 'runbox.runtime.loading.tip.jupyter.cell_order.description'
+  }, {
+    icon: faSquareTerminal,
+    titleId: 'runbox.runtime.loading.tip.jupyter.run_cell.title',
+    descriptionId: 'runbox.runtime.loading.tip.jupyter.run_cell.description'
+  }, {
+    icon: faRotate,
+    titleId: 'runbox.runtime.loading.tip.jupyter.restart_kernel.title',
+    descriptionId: 'runbox.runtime.loading.tip.jupyter.restart_kernel.description'
+  }, {
+    icon: faListOl,
+    titleId: 'runbox.runtime.loading.tip.jupyter.cell_number.title',
+    descriptionId: 'runbox.runtime.loading.tip.jupyter.cell_number.description'
+  }]
+}, {
+  keywords: ['vscode', 'codeserver'],
+  tips: [{
+    icon: faFloppyDisk,
+    titleId: 'runbox.runtime.loading.tip.vscode.save_before_run.title',
+    descriptionId: 'runbox.runtime.loading.tip.vscode.save_before_run.description'
+  }, {
+    icon: faSquareTerminal,
+    titleId: 'runbox.runtime.loading.tip.vscode.terminal.title',
+    descriptionId: 'runbox.runtime.loading.tip.vscode.terminal.description'
+  }, {
+    icon: faTriangleExclamation,
+    titleId: 'runbox.runtime.loading.tip.vscode.browser_shortcut.title',
+    descriptionId: 'runbox.runtime.loading.tip.vscode.browser_shortcut.description'
+  }, {
+    icon: faSitemap,
+    titleId: 'runbox.runtime.loading.tip.vscode.explorer.title',
+    descriptionId: 'runbox.runtime.loading.tip.vscode.explorer.description'
+  }]
+}, {
+  keywords: ['orange'],
+  tips: [{
+    icon: faTableCells,
+    titleId: 'runbox.runtime.loading.tip.orange.widget.title',
+    descriptionId: 'runbox.runtime.loading.tip.orange.widget.description'
+  }, {
+    icon: faDiagramProject,
+    titleId: 'runbox.runtime.loading.tip.orange.connect.title',
+    descriptionId: 'runbox.runtime.loading.tip.orange.connect.description'
+  }, {
+    icon: faTableCells,
+    titleId: 'runbox.runtime.loading.tip.orange.load_data.title',
+    descriptionId: 'runbox.runtime.loading.tip.orange.load_data.description'
+  }, {
+    icon: faWindowRestore,
+    titleId: 'runbox.runtime.loading.tip.orange.open_settings.title',
+    descriptionId: 'runbox.runtime.loading.tip.orange.open_settings.description'
+  }]
+}, {
+  keywords: ['dify', 'n8n', 'comfyui', 'openwebui', 'sonarqube'],
+  tips: [{
+    icon: faDisplayArrowDown,
+    titleId: 'runbox.runtime.loading.tip.app.web_service.title',
+    descriptionId: 'runbox.runtime.loading.tip.app.web_service.description'
+  }, {
+    icon: faHourglassHalf,
+    titleId: 'runbox.runtime.loading.tip.app.slow_start.title',
+    descriptionId: 'runbox.runtime.loading.tip.app.slow_start.description'
+  }, {
+    icon: faFloppyDisk,
+    titleId: 'runbox.runtime.loading.tip.app.persisted.title',
+    descriptionId: 'runbox.runtime.loading.tip.app.persisted.description'
+  }]
+}, {
+  keywords: ['vnc', 'unityhub', 'pyqt', 'libreoffice', 'flutter', 'codap', 'jmeter'],
+  tips: [{
+    icon: faWindowRestore,
+    titleId: 'runbox.runtime.loading.tip.gui.desktop.title',
+    descriptionId: 'runbox.runtime.loading.tip.gui.desktop.description'
+  }, {
+    icon: faCopy,
+    titleId: 'runbox.runtime.loading.tip.gui.clipboard.title',
+    descriptionId: 'runbox.runtime.loading.tip.gui.clipboard.description'
+  }, {
+    icon: faArrowsUpDownLeftRight,
+    titleId: 'runbox.runtime.loading.tip.gui.move_window.title',
+    descriptionId: 'runbox.runtime.loading.tip.gui.move_window.description'
+  }, {
+    icon: faHourglassHalf,
+    titleId: 'runbox.runtime.loading.tip.gui.slow_start.title',
+    descriptionId: 'runbox.runtime.loading.tip.gui.slow_start.description'
+  }]
+}];
+/** Closes out every environment, and stands alone when no group matched. */
+var COMMON_TIPS = [{
+  icon: faTriangleExclamation,
+  titleId: 'runbox.runtime.loading.tip.common.conflict.title',
+  descriptionId: 'runbox.runtime.loading.tip.common.conflict.description'
+}, {
+  icon: faHardDrive,
+  titleId: 'runbox.runtime.loading.tip.common.disk.title',
+  descriptionId: 'runbox.runtime.loading.tip.common.disk.description'
+}, {
+  icon: faClock,
+  titleId: 'runbox.runtime.loading.tip.common.quota.title',
+  descriptionId: 'runbox.runtime.loading.tip.common.quota.description'
+}];
+//
+//
+//
+var getRuntimeLoadingTips = function getRuntimeLoadingTips() {
+  var containerImageName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var _a;
+  var name = containerImageName.toLowerCase().replace(/[^a-z0-9]/g, '');
+  var group = TIP_GROUPS.find(function (_ref) {
+    var keywords = _ref.keywords;
+    return keywords.some(function (keyword) {
+      return name.includes(keyword);
+    });
+  });
+  return [].concat(INTRO_TIPS, _toConsumableArray((_a = group === null || group === void 0 ? void 0 : group.tips) !== null && _a !== void 0 ? _a : []), COMMON_TIPS);
+};
+
+export { getRuntimeLoadingTips };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-runbox",
-  "version": "1.260825.0-runboxusability.12",
+  "version": "1.260825.0-runboxusability.13",
   "description": "User view and editing components of Elice material runbox",
   "repository": {
     "type": "git",
@@ -37,8 +37,8 @@
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
     "react-transition-group": "^4.4.0",
     "react-use": "^17.0.0",
-    "@elice/material-shared-types": "1.260825.0-runboxusability.12",
-    "@elice/material-shared-utils": "1.260825.0-runboxusability.12"
+    "@elice/material-shared-types": "1.260825.0-runboxusability.13",
+    "@elice/material-shared-utils": "1.260825.0-runboxusability.13"
   },
   "dependencies": {
     "classnames": "^2.2.0",
@@ -54,7 +54,7 @@
     "@elice/mui-elements": "5.251204.0",
     "@elice/mui-system": "5.251204.0",
     "@elice/mui-x-snackbar": "^5.250108.0-controllabel.0",
-    "@elice/openapi-client-material-runbox": "1.260826.0-improverunboxusability.0",
+    "@elice/openapi-client-material-runbox": "1.260826.0-improverunboxusability.1",
     "@elice/rollup-config": "^1.260406.0",
     "@elice/runbox-client": "1.260904.0-runboxiframeerror.2",
     "@elice/types": "1.260608.0",
@@ -77,8 +77,8 @@
     "react-use": "^17.2.4",
     "rollup": "^4.0.0",
     "typescript": "~5.9.3",
-    "@elice/material-shared-types": "1.260825.0-runboxusability.12",
-    "@elice/material-shared-utils": "1.260825.0-runboxusability.12"
+    "@elice/material-shared-types": "1.260825.0-runboxusability.13",
+    "@elice/material-shared-utils": "1.260825.0-runboxusability.13"
   },
   "scripts": {
     "start": "run-s watch",