@elice/material-runbox 1.230325.0 → 1.230418.0

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

@@ -0,0 +1,139 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var reactIntl = require('react-intl');
+var runboxClient = require('@elice/runbox-client');
+var styled = require('@emotion/styled');
+var iconsMaterial = require('@mui/icons-material');
+var material = require('@mui/material');
+var context = require('./context.js');
+require('@elice/openapi-client-material-runbox');
+var useRunboxControl = require('./hooks/useRunboxControl.js');
+var runbox_logo = require('../../assets/runbox_logo.png.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject;
+//
+//
+//
+var StyledHeader = styled__default["default"].div(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  position: relative;\n  flex: 0 0 3rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 1rem;\n  width: 100%;\n  border-bottom: 1px solid ", ";\n  overflow: hidden;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette.divider;
+});
+//
+//
+//
+var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
+  var runbox = _ref2.runbox,
+    runtime = _ref2.runtime,
+    runtimeTemplate = _ref2.runtimeTemplate,
+    courseId = _ref2.courseId,
+    refetch = _ref2.refetch;
+  var intl = reactIntl.useIntl();
+  var _React$useContext = React__default["default"].useContext(context.MaterialRunboxContext),
+    materialRunboxApi = _React$useContext.materialRunboxApi;
+  var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
+    status = _useEliceRunboxRunnin.status;
+  var _useRunboxControl = useRunboxControl.useRunboxControl({
+      runbox: runbox,
+      courseId: courseId,
+      refetch: refetch
+    }),
+    start = _useRunboxControl.start;
+  var isRunboxRunning = status === 'running';
+  /**
+   *
+   */
+  var handleAutoShutdownSwitchChange = function handleAutoShutdownSwitchChange(_, shutdown) {
+    if (!runtime) {
+      return;
+    }
+    materialRunboxApi.runtime.runtimeRuntimeIdPatch({
+      runtimeId: runtime.id,
+      runtimePatchRequest: {
+        autoShutdown: !shutdown
+      },
+      eliceCourseId: courseId
+    }).then(refetch).catch(function () {
+      //
+    });
+  };
+  /**
+   *
+   */
+  var renderHeaderAutoShutdownSwitch = function renderHeaderAutoShutdownSwitch() {
+    var _a;
+    return React__default["default"].createElement(material.Tooltip, {
+      title: intl.formatMessage({
+        id: runtimeTemplate.autoShutdown ? 'material.runbox.header.autoShutdownDisabledTooltip' : 'material.runbox.header.autoShutdownTooltip'
+      }, {
+        time: intl.formatNumber((_a = runtimeTemplate.quotaPerSession) !== null && _a !== void 0 ? _a : 2880, {
+          style: 'unit',
+          unit: 'minute',
+          unitDisplay: 'short'
+        })
+      })
+    }, React__default["default"].createElement(material.FormControlLabel, {
+      control: React__default["default"].createElement(material.Switch, {
+        checked: !(runtime === null || runtime === void 0 ? void 0 : runtime.autoShutdown),
+        disabled: !runtime || runtimeTemplate.autoShutdown,
+        onChange: handleAutoShutdownSwitchChange
+      }),
+      label: intl.formatMessage({
+        id: 'material.runbox.header.autoShutdown'
+      }),
+      componentsProps: {
+        typography: {
+          variant: 'body2'
+        }
+      }
+    }));
+  };
+  /**
+   *
+   */
+  var renderHeaderRestartButton = function renderHeaderRestartButton() {
+    return React__default["default"].createElement(material.Tooltip, {
+      title: intl.formatMessage({
+        id: 'material.runbox.header.restart'
+      })
+    }, React__default["default"].createElement(material.IconButton, {
+      disabled: !isRunboxRunning,
+      sx: {
+        width: '38px'
+      },
+      onClick: function onClick() {
+        return start(true);
+      }
+    }, React__default["default"].createElement(iconsMaterial.RestartAlt, null)));
+  };
+  //
+  //
+  //
+  return React__default["default"].createElement(StyledHeader, null, React__default["default"].createElement(material.Stack, {
+    direction: "row",
+    sx: {
+      height: '100%',
+      padding: '0.75rem 0'
+    }
+  }, React__default["default"].createElement(material.Box, {
+    component: "img",
+    src: runbox_logo["default"],
+    alt: "elice runbox",
+    sx: {
+      width: 'auto',
+      height: '100%'
+    }
+  })), React__default["default"].createElement(material.Stack, {
+    direction: "row"
+  }, renderHeaderAutoShutdownSwitch(), renderHeaderRestartButton()));
+};
+
+exports["default"] = MaterialRunboxHeader;

package/cjs/components/material-runbox/context.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { UseMaterialRunboxApiReturn } from './hooks';
+export declare type MaterialRunboxContextValue = MaterialRunboxContextExternalValue & MaterialRunboxContextInternalValue;
+export interface MaterialRunboxContextExternalValue {
+    /**  */
+    locale: string;
+    /**  */
+    showMessenger: () => void;
+}
+export declare type MaterialRunboxContextInternalValue = UseMaterialRunboxApiReturn;
+export declare const MaterialRunboxContext: import("react").Context<MaterialRunboxContextValue>;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+//
+//
+//
+var MaterialRunboxContext = React.createContext({});
+
+exports.MaterialRunboxContext = MaterialRunboxContext;

package/cjs/components/material-runbox/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useMaterialRunboxApi';
+export * from './useRunboxControl';

package/cjs/components/material-runbox/hooks/useMaterialRunboxApi.d.ts

@@ -0,0 +1,14 @@
+import { RunboxApi as EliceMaterialRunboxRunboxApi, RuntimeApi as EliceMaterialRunboxRuntimeApi, RuntimeTemplateApi as EliceMaterialRuntimeTemplateApi } from '@elice/openapi-client-material-runbox';
+import type { Configuration as EliceMaterialRunboxApiConfiguration } from '@elice/openapi-client-material-runbox';
+export interface UseMaterialRunboxApiProps {
+    eliceMaterialRunboxApiConfiguration: EliceMaterialRunboxApiConfiguration;
+}
+export interface UseMaterialRunboxApiReturnMaterialRunbox {
+    runbox: EliceMaterialRunboxRunboxApi;
+    runtime: EliceMaterialRunboxRuntimeApi;
+    runtimeTemplate: EliceMaterialRuntimeTemplateApi;
+}
+export interface UseMaterialRunboxApiReturn {
+    materialRunboxApi: UseMaterialRunboxApiReturnMaterialRunbox;
+}
+export declare const useMaterialRunboxApi: (props: UseMaterialRunboxApiProps) => UseMaterialRunboxApiReturn;

package/cjs/components/material-runbox/hooks/useMaterialRunboxApi.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var openapiClientMaterialRunbox = require('@elice/openapi-client-material-runbox');
+
+//
+//
+//
+var useMaterialRunboxApi = function useMaterialRunboxApi(props) {
+  var _return = React.useRef({});
+  //
+  //
+  //
+  var createMaterialRunboxApi = function createMaterialRunboxApi() {
+    return Object.freeze({
+      runbox: new openapiClientMaterialRunbox.RunboxApi(props.eliceMaterialRunboxApiConfiguration),
+      runtime: new openapiClientMaterialRunbox.RuntimeApi(props.eliceMaterialRunboxApiConfiguration),
+      runtimeTemplate: new openapiClientMaterialRunbox.RuntimeTemplateApi(props.eliceMaterialRunboxApiConfiguration)
+    });
+  };
+  //
+  //
+  //
+  var _useState = React.useState(createMaterialRunboxApi),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    materialRunboxApi = _useState2[0],
+    setMaterialRunboxApi = _useState2[1];
+  //
+  //
+  //
+  React.useEffect(function () {
+    return setMaterialRunboxApi(createMaterialRunboxApi);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.eliceMaterialRunboxApiConfiguration]);
+  //
+  //
+  //
+  _return.current.materialRunboxApi = materialRunboxApi;
+  return _return.current;
+};
+
+exports.useMaterialRunboxApi = useMaterialRunboxApi;

package/cjs/components/material-runbox/hooks/useRunboxControl.d.ts

@@ -0,0 +1,11 @@
+import type { RuntimeProps } from '../runtime/Runtime';
+declare type UseRunboxControlProps = Pick<RuntimeProps, 'runbox' | 'courseId' | 'refetch'>;
+interface UseRunboxControlReturn {
+    start: (force?: boolean) => Promise<void>;
+    stop: () => Promise<void>;
+}
+/**
+ * Hook for runbox control and status.
+ */
+export declare const useRunboxControl: (props: UseRunboxControlProps) => UseRunboxControlReturn;
+export {};

package/cjs/components/material-runbox/hooks/useRunboxControl.js

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var reactIntl = require('react-intl');
+var runboxClient = require('@elice/runbox-client');
+var notistack = require('notistack');
+var context = require('../context.js');
+
+//
+//
+//
+/**
+ * Hook for runbox control and status.
+ */
+var useRunboxControl = function useRunboxControl(props) {
+  var _return = React.useRef({});
+  var intl = reactIntl.useIntl();
+  var _useSnackbar = notistack.useSnackbar(),
+    enqueueSnackbar = _useSnackbar.enqueueSnackbar;
+  var _useContext = React.useContext(context.MaterialRunboxContext),
+    materialRunboxApi = _useContext.materialRunboxApi;
+  var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
+    runboxStart = _useEliceRunboxRunnin.start,
+    runboxStop = _useEliceRunboxRunnin.stop;
+  /**
+   * Start project.
+   */
+  var start = React.useCallback( /*#__PURE__*/_rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
+    var force,
+      _args = arguments;
+    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          force = _args.length > 0 && _args[0] !== undefined ? _args[0] : false;
+          return _context.abrupt("return", runboxStart(function (signal) {
+            return materialRunboxApi.runbox.runboxRunboxIdStartPost({
+              runboxId: props.runbox.id,
+              eliceCourseId: props.courseId
+            }, {
+              signal: signal
+            });
+          }, force).then(function () {
+            return void props.refetch();
+          }).catch(function (err) {
+            if (err.name !== 'AbortError') {
+              enqueueSnackbar(intl.formatMessage({
+                id: 'material.runbox.runtime.message.startError'
+              }), {
+                variant: 'error'
+              });
+            }
+          }));
+        case 2:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.runbox.id, props.courseId, runboxStart]);
+  /**
+   * Stop project.
+   */
+  var stop = React.useCallback( /*#__PURE__*/_rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2() {
+    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          return _context2.abrupt("return", runboxStop(function (signal) {
+            return materialRunboxApi.runbox.runboxRunboxIdStopPost({
+              runboxId: props.runbox.id,
+              eliceCourseId: props.courseId
+            }, {
+              signal: signal
+            });
+          }).then(function () {
+            //
+          }).catch(function (err) {
+            if (err.name !== 'AbortError') ;
+          }));
+        case 1:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.runbox.id, props.courseId, runboxStop]);
+  //
+  //
+  //
+  _return.current.start = start;
+  _return.current.stop = stop;
+  return _return.current;
+};
+
+exports.useRunboxControl = useRunboxControl;

package/cjs/components/material-runbox/runtime/Runtime.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { RunboxGetAndListResponse, RuntimeGetAndListResponse, RuntimeTemplateGetAndListResponse } from '@elice/openapi-client-material-runbox';
+import type { QueryObserverResult } from '@tanstack/react-query';
+export interface RuntimeProps {
+    /**  */
+    runbox: RunboxGetAndListResponse;
+    /**  */
+    runtime: RuntimeGetAndListResponse | null;
+    /**  */
+    runtimeTemplate: RuntimeTemplateGetAndListResponse;
+    /**  */
+    courseId: number;
+    /**  */
+    refetch: () => Promise<QueryObserverResult<[
+        RunboxGetAndListResponse,
+        RuntimeGetAndListResponse,
+        RuntimeTemplateGetAndListResponse
+    ], unknown>>;
+}
+declare const Runtime: React.FC<RuntimeProps>;
+export default Runtime;

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

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var runboxClient = require('@elice/runbox-client');
+require('@elice/openapi-client-material-runbox');
+var useRunboxControl = require('../hooks/useRunboxControl.js');
+var RuntimeOverlayAssigned = require('./RuntimeOverlayAssigned.js');
+var RuntimeOverlayQueued = require('./RuntimeOverlayQueued.js');
+var RuntimeOverlayTerminated = require('./RuntimeOverlayTerminated.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+//
+//
+//
+var Runtime = function Runtime(props) {
+  var _useRunboxControl = useRunboxControl.useRunboxControl(props),
+    startRuntime = _useRunboxControl.start;
+  //
+  //
+  //
+  React__default["default"].useEffect(function () {
+    if (!props.runbox.id) {
+      return;
+    }
+    void startRuntime(
+    // check whether runtime is already assigned, or not.
+    // if runtime not assigned, should be restarted (ignore previous running state)
+    !props.runtime);
+    // NOTICE: do not stop runtime when unmounting,
+    // since it will automatically stopped by the server.
+    // return () => {
+    //   if (props.runtimeTemplate.autoShutdown) {
+    //     stopRuntime();
+    //   }
+    // };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.runbox.id]);
+  //
+  //
+  //
+  return React__default["default"].createElement(runboxClient.EliceRunboxView, {
+    OverlayAssigned: RuntimeOverlayAssigned["default"],
+    OverlayQueued: RuntimeOverlayQueued["default"],
+    OverlayTerminated: function OverlayTerminated(props) {
+      return React__default["default"].createElement(RuntimeOverlayTerminated["default"], Object.assign({}, props, {
+        startRuntime: startRuntime
+      }));
+    }
+  });
+};
+
+exports["default"] = Runtime;

package/cjs/components/material-runbox/runtime/RuntimeOverlayAssigned.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { EliceRunboxViewerOverlayAssignedComponentProps as AssignedComponentProps } from '@elice/runbox-client';
+declare const RuntimeOverlayAssigned: React.FC<AssignedComponentProps>;
+export default RuntimeOverlayAssigned;

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

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var material = require('@mui/material');
+var queue = require('../../../assets/queue.gif.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+//
+//
+//
+var RuntimeOverlayAssigned = function RuntimeOverlayAssigned() {
+  return React__default["default"].createElement(material.Stack, {
+    gap: "1.5rem",
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      height: '100%'
+    }
+  }, React__default["default"].createElement(material.Box, {
+    component: "img",
+    src: queue["default"],
+    alt: "queue",
+    sx: {
+      width: '100%',
+      height: 'auto',
+      maxWidth: '13.375rem'
+    }
+  }), React__default["default"].createElement(material.Typography, {
+    variant: "subtitle2",
+    color: "text:secondary",
+    sx: {
+      whiteSpace: 'pre-wrap',
+      textAlign: 'center'
+    }
+  }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "material.runbox.runtime.overlay.assigned.description"
+  })));
+};
+
+exports["default"] = RuntimeOverlayAssigned;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { EliceRunboxViewerOverlayQueuedComponentProps as QueuedComponentProps } from '@elice/runbox-client';
+declare const RuntimeOverlayQueued: React.FC<QueuedComponentProps>;
+export default RuntimeOverlayQueued;

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

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var iconsMaterial = require('@mui/icons-material');
+var material = require('@mui/material');
+var context = require('../context.js');
+var queue = require('../../../assets/queue.gif.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+//
+//
+//
+var RuntimeOverlayQueued = function RuntimeOverlayQueued(_ref) {
+  var numWaiters = _ref.numWaiters;
+  var _React$useContext = React__default["default"].useContext(context.MaterialRunboxContext),
+    showMessenger = _React$useContext.showMessenger;
+  //
+  //
+  //
+  return React__default["default"].createElement(material.Stack, {
+    gap: "1.5rem",
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      height: '100%'
+    }
+  }, React__default["default"].createElement(material.Box, {
+    component: "img",
+    src: queue["default"],
+    alt: "queue",
+    sx: {
+      width: '100%',
+      height: 'auto',
+      maxWidth: '13.375rem'
+    }
+  }), React__default["default"].createElement(material.Typography, {
+    variant: "subtitle2",
+    color: "text:secondary"
+  }, numWaiters > 0 ? React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "material.runbox.runtime.overlay.queued.description",
+    values: {
+      waiters: numWaiters
+    }
+  }) : React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "material.runbox.runtime.overlay.queued.description_zero"
+  })), React__default["default"].createElement(material.Button, {
+    variant: "outlined",
+    startIcon: React__default["default"].createElement(iconsMaterial.QuestionAnswer, null),
+    onClick: showMessenger
+  }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "common.support"
+  })));
+};
+
+exports["default"] = RuntimeOverlayQueued;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { EliceRunboxViewerOverlayTerminatedComponentProps as TerminatedComponentProps } from '@elice/runbox-client';
+interface RuntimeOverlayTerminatedProps extends TerminatedComponentProps {
+    startRuntime: () => Promise<void>;
+}
+declare const RuntimeOverlayTerminated: React.FC<RuntimeOverlayTerminatedProps>;
+export default RuntimeOverlayTerminated;