@elice/material-runbox 1.231212.0 → 1.231228.0

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

@@ -1,68 +1,73 @@
-import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Tag } from '@elice/mui-elements';
-import styled from '@emotion/styled';
-import { Box, Stack } from '@mui/material';
+import { Tag, EliceIcon } from '@elice/mui-elements';
+import { useEliceRunboxRunning } from '@elice/runbox-client';
+import { faEllipsisVertical } from '@fortawesome/pro-solid-svg-icons';
+import { Box, Stack, IconButton } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
 import MaterialRunboxActionAutoShutdown from './actions/MaterialRunboxActionAutoShutdown.js';
 import MaterialRunboxActionGrade from './actions/MaterialRunboxActionGrade.js';
-import MaterialRunboxActionReset from './actions/MaterialRunboxActionReset.js';
-import MaterialRunboxActionRestart from './actions/MaterialRunboxActionRestart.js';
-import MaterialRunboxActionShare from './actions/MaterialRunboxActionShare.js';
+import MaterialRunboxActionMenu from './actions/MaterialRunboxActionMenu.js';
 import { useMaterialRunboxApiContext } from './contexts/MaterialRunboxApiContext.js';
 import './contexts/MaterialRunboxCommandContext.js';
 import { useMaterialRunboxContext } from './contexts/MaterialRunboxContext.js';
 import runboxLogoImage from '../../assets/runbox_logo.png.js';
 
-var _templateObject;
+const StyledHeader = /*#__PURE__*/_styled("div", {
+  target: "e110d0bp0"
+})("position:relative;flex:0 0 3rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;width:100%;border-bottom:1px solid ", ({
+  theme
+}) => theme.palette.divider, ";overflow:hidden;");
 //
 //
 //
-var StyledHeader = styled.div(_templateObject || (_templateObject = _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 _useMaterialRunboxCon = useMaterialRunboxContext(),
-    enableAutoShutdownToggle = _useMaterialRunboxCon.enableAutoShutdownToggle,
-    enableUrlShare = _useMaterialRunboxCon.enableUrlShare;
-  var materialRunboxApi = useMaterialRunboxApiContext();
-  var leaderboardSubmitInfoQuery = useQuery({
+const MaterialRunboxHeader = ({
+  runbox,
+  runtime,
+  runtimeTemplate,
+  courseId,
+  refetch
+}) => {
+  const {
+    enableAutoShutdownToggle
+  } = useMaterialRunboxContext();
+  const [menuAnchorEl, setMenuAnchorEl] = React.useState(null);
+  const {
+    status
+  } = useEliceRunboxRunning();
+  const isRunboxRunning = status === 'running';
+  /**
+   *
+   */
+  const handleMenuClose = () => {
+    setMenuAnchorEl(null);
+  };
+  const materialRunboxApi = useMaterialRunboxApiContext();
+  const leaderboardSubmitInfoQuery = useQuery({
     queryKey: ['eliceMaterialRunboxRunboxApi.runboxRunboxIdSubmitInfoGet', {
-      courseId: courseId,
-      runtime: runtime
+      courseId,
+      runtime
     }],
-    queryFn: function queryFn(_ref3) {
-      var signal = _ref3.signal;
-      return materialRunboxApi.runbox.runboxRunboxIdSubmitInfoGet({
-        eliceCourseId: courseId,
-        runboxId: runtime === null || runtime === void 0 ? void 0 : runtime.runboxId
-      }, {
-        signal: signal
-      });
-    },
-    refetchInterval: function refetchInterval(data) {
-      return !(data === null || data === void 0 ? void 0 : data.remainSubmitCount) ? false : 5 * 1000;
-    },
+    queryFn: ({
+      signal
+    }) => materialRunboxApi.runbox.runboxRunboxIdSubmitInfoGet({
+      eliceCourseId: courseId,
+      runboxId: runtime === null || runtime === void 0 ? void 0 : runtime.runboxId
+    }, {
+      signal
+    }),
+    refetchInterval: data => !(data === null || data === void 0 ? void 0 : data.remainSubmitCount) ? false : 5 * 1000,
     enabled: Boolean(runtime === null || runtime === void 0 ? void 0 : runtime.runboxId),
     retry: false
   });
   /**
    *
    */
-  var renderHeaderSubmitInfo = function renderHeaderSubmitInfo() {
+  const renderHeaderSubmitInfo = () => {
     var _a, _b;
-    var remainSubmitCount = (_a = leaderboardSubmitInfoQuery.data) === null || _a === void 0 ? void 0 : _a.remainSubmitCount;
-    var totalSubmitCount = (_b = leaderboardSubmitInfoQuery.data) === null || _b === void 0 ? void 0 : _b.submitCountLimit;
+    const remainSubmitCount = (_a = leaderboardSubmitInfoQuery.data) === null || _a === void 0 ? void 0 : _a.remainSubmitCount;
+    const totalSubmitCount = (_b = leaderboardSubmitInfoQuery.data) === null || _b === void 0 ? void 0 : _b.submitCountLimit;
     if (leaderboardSubmitInfoQuery.isInitialLoading || remainSubmitCount === null) {
       return null;
     }
@@ -81,7 +86,7 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
   /**
    *
    */
-  var renderHeaderActionAutoShutdown = function renderHeaderActionAutoShutdown() {
+  const renderHeaderActionAutoShutdown = () => {
     if (!enableAutoShutdownToggle) {
       return null;
     }
@@ -95,27 +100,11 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
   /**
    *
    */
-  var renderHeaderActionShare = function renderHeaderActionShare() {
-    if (!enableUrlShare) {
+  const renderHeaderActionGrade = () => {
+    if (!runbox.submission.enabled) {
       return null;
     }
-    return React.createElement(MaterialRunboxActionShare, null);
-  };
-  /**
-   *
-   */
-  var renderHeaderActionRestart = function renderHeaderActionRestart() {
-    return React.createElement(MaterialRunboxActionRestart, {
-      runbox: runbox,
-      courseId: courseId,
-      refetch: refetch
-    });
-  };
-  /**
-   *
-   */
-  var renderHeaderActionReset = function renderHeaderActionReset() {
-    return React.createElement(MaterialRunboxActionReset, {
+    return React.createElement(MaterialRunboxActionGrade, {
       runtime: runtime,
       courseId: courseId
     });
@@ -123,14 +112,26 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
   /**
    *
    */
-  var renderHeaderActionGrade = function renderHeaderActionGrade() {
-    if (!runbox.submission.enabled) {
-      return null;
-    }
-    return React.createElement(MaterialRunboxActionGrade, {
+  const renderOptionMenu = () => {
+    return React.createElement(React.Fragment, null, React.createElement(IconButton, {
+      disabled: !isRunboxRunning,
+      onClick: e => {
+        if (Boolean(menuAnchorEl)) {
+          setMenuAnchorEl(null);
+        } else {
+          setMenuAnchorEl(e.currentTarget);
+        }
+      }
+    }, React.createElement(EliceIcon, {
+      icon: faEllipsisVertical
+    })), React.createElement(MaterialRunboxActionMenu, {
+      runbox: runbox,
       runtime: runtime,
-      courseId: courseId
-    });
+      courseId: courseId,
+      menuAnchorEl: menuAnchorEl,
+      refetch: refetch,
+      handleMenuClose: handleMenuClose
+    }));
   };
   //
   //
@@ -149,7 +150,7 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
     direction: "row",
     alignItems: "center",
     gap: "0.5rem"
-  }, renderHeaderSubmitInfo(), renderHeaderActionAutoShutdown(), renderHeaderActionShare(), renderHeaderActionRestart(), renderHeaderActionReset(), renderHeaderActionGrade()));
+  }, renderHeaderSubmitInfo(), renderHeaderActionAutoShutdown(), renderOptionMenu(), renderHeaderActionGrade()));
 };
 
 export { MaterialRunboxHeader as default };

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

@@ -1,32 +1,41 @@
-import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import React from 'react';
 import { useIntl } from 'react-intl';
-import styled from '@emotion/styled';
 import { FormControlLabel, Tooltip, Switch } from '@mui/material';
 import { useMaterialRunboxApiContext } from '../contexts/MaterialRunboxApiContext.js';
 import '../contexts/MaterialRunboxCommandContext.js';
 import '../contexts/MaterialRunboxContext.js';
 
-var _templateObject;
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 //
 //
 //
-var StyledFormControlLabel = styled(FormControlLabel)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 !important;\n"])));
+const StyledFormControlLabel = /*#__PURE__*/_styled(FormControlLabel, {
+  target: "e1ket70c0"
+})("production" === "production" ? {
+  name: "1ep9nyp",
+  styles: "margin:0!important"
+} : {
+  name: "1ep9nyp",
+  styles: "margin:0!important",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 //
 //
 //
-var MaterialRunboxActionAutoShutdown = function MaterialRunboxActionAutoShutdown(_ref) {
-  var runtime = _ref.runtime,
-    runtimeTemplate = _ref.runtimeTemplate,
-    courseId = _ref.courseId,
-    refetch = _ref.refetch;
+const MaterialRunboxActionAutoShutdown = ({
+  runtime,
+  runtimeTemplate,
+  courseId,
+  refetch
+}) => {
   var _a;
-  var intl = useIntl();
-  var materialRunboxApi = useMaterialRunboxApiContext();
+  const intl = useIntl();
+  const materialRunboxApi = useMaterialRunboxApiContext();
   /**
    *
    */
-  var handleAction = function handleAction(_, shutdown) {
+  const handleAction = (_, shutdown) => {
     if (!runtime) {
       return;
     }
@@ -36,7 +45,7 @@ var MaterialRunboxActionAutoShutdown = function MaterialRunboxActionAutoShutdown
         autoShutdown: !shutdown
       },
       eliceCourseId: courseId
-    }).then(refetch).catch(function () {
+    }).then(refetch).catch(() => {
       //
     });
   };

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

@@ -1,25 +1,24 @@
-import { taggedTemplateLiteral as _taggedTemplateLiteral, slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { Transition } from 'react-transition-group';
+import { useSnackbar } from '@elice/mui-x-snackbar';
 import { CommandType } from '@elice/openapi-client-material-runbox';
 import { useEliceRunboxRunning } from '@elice/runbox-client';
-import styled from '@emotion/styled';
 import { Terminal } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
-import { Button, Tooltip, ButtonGroup, Badge, Dialog, DialogTitle, DialogContent, Stack, Alert, DialogActions, Typography } from '@mui/material';
+import { Tooltip, ButtonGroup, Badge, Dialog, DialogTitle, DialogContent, Stack, Alert, DialogActions, Button, Typography } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
-import { useSnackbar } from 'notistack';
 import { useMaterialRunboxApiContext } from '../contexts/MaterialRunboxApiContext.js';
 import { useMaterialRunboxCommandContext } from '../contexts/MaterialRunboxCommandContext.js';
 import '../contexts/MaterialRunboxContext.js';
 
-var _templateObject, _templateObject2, _templateObject3;
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 //
 //
 //
-var TRANSITION_DURATION = 300;
-var TRANSITION_STYLE_MAP = {
+const TRANSITION_DURATION = 300;
+const TRANSITION_STYLE_MAP = {
   entering: {
     maxWidth: 0
   },
@@ -39,181 +38,149 @@ var TRANSITION_STYLE_MAP = {
 //
 //
 //
-var StyledMainActionButton = styled(LoadingButton)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 4rem !important;\n"])));
-var StyledSubActionButton = styled(Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  transition: max-width ", "ms\n    cubic-bezier(0.25, 0.46, 0.45, 1);\n"])), TRANSITION_DURATION);
-var StyledTerminal = styled.textarea(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 1rem;\n  width: 100%;\n  color: ", ";\n  background-color: ", ";\n  border: none;\n  border-radius: 0.5rem;\n  font-family: 'Elice Digital Coding', monospace;\n  font-size: ", ";\n  line-height: ", ";\n  outline: none;\n  resize: none;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.palette.common.white;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.palette.common.black;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.typography.body2.fontSize;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.typography.body2.lineHeight;
+const StyledMainActionButton = /*#__PURE__*/_styled(LoadingButton, {
+  target: "eae460y2"
+})("production" === "production" ? {
+  name: "tssn5p",
+  styles: "min-width:4rem!important"
+} : {
+  name: "tssn5p",
+  styles: "min-width:4rem!important",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
+const StyledSubActionButton = /*#__PURE__*/_styled(Button, {
+  target: "eae460y1"
+})("transition:max-width ", TRANSITION_DURATION, "ms cubic-bezier(0.25, 0.46, 0.45, 1);");
+const StyledTerminal = /*#__PURE__*/_styled("textarea", {
+  target: "eae460y0"
+})("padding:1rem;width:100%;color:", ({
+  theme
+}) => theme.palette.common.white, ";background-color:", ({
+  theme
+}) => theme.palette.common.black, ";border:none;border-radius:0.5rem;font-family:'Elice Digital Coding',monospace;font-size:", ({
+  theme
+}) => theme.typography.body2.fontSize, ";line-height:", ({
+  theme
+}) => theme.typography.body2.lineHeight, ";outline:none;resize:none;");
 //
 //
 //
-var MaterialRunboxActionGrade = function MaterialRunboxActionGrade(_ref5) {
-  var runtime = _ref5.runtime,
-    courseId = _ref5.courseId;
+const MaterialRunboxActionGrade = ({
+  runtime,
+  courseId
+}) => {
   var _a;
-  var _useSnackbar = useSnackbar(),
-    enqueueSnackbar = _useSnackbar.enqueueSnackbar;
-  var intl = useIntl();
-  var materialRunboxApi = useMaterialRunboxApiContext();
-  var _useMaterialRunboxCom = useMaterialRunboxCommandContext(),
-    isLastCommandRunning = _useMaterialRunboxCom.isLastCommandRunning,
-    lastCommand = _useMaterialRunboxCom.lastCommand,
-    setCommandIdToPing = _useMaterialRunboxCom.setCommandIdToPing;
-  var _useEliceRunboxRunnin = useEliceRunboxRunning(),
-    status = _useEliceRunboxRunnin.status;
-  var leaderboardSubmitInfoQuery = useQuery({
+  const intl = useIntl();
+  const {
+    enqueueSnackbar
+  } = useSnackbar();
+  const materialRunboxApi = useMaterialRunboxApiContext();
+  const {
+    isLastCommandRunning,
+    lastCommand,
+    setCommandIdToPing
+  } = useMaterialRunboxCommandContext();
+  const {
+    status
+  } = useEliceRunboxRunning();
+  const leaderboardSubmitInfoQuery = useQuery({
     queryKey: ['eliceMaterialRunboxRunboxApi.runboxRunboxIdSubmitInfoGet', {
-      courseId: courseId,
-      runtime: runtime
+      courseId,
+      runtime
     }],
-    queryFn: function queryFn(_ref6) {
-      var signal = _ref6.signal;
-      return materialRunboxApi.runbox.runboxRunboxIdSubmitInfoGet({
-        eliceCourseId: courseId,
-        runboxId: runtime === null || runtime === void 0 ? void 0 : runtime.runboxId
-      }, {
-        signal: signal
-      });
-    },
+    queryFn: ({
+      signal
+    }) => materialRunboxApi.runbox.runboxRunboxIdSubmitInfoGet({
+      eliceCourseId: courseId,
+      runboxId: runtime === null || runtime === void 0 ? void 0 : runtime.runboxId
+    }, {
+      signal
+    }),
     enabled: Boolean(runtime === null || runtime === void 0 ? void 0 : runtime.runboxId),
     retry: false
   });
-  var isSubmitCountRemained = ((_a = leaderboardSubmitInfoQuery.data) === null || _a === void 0 ? void 0 : _a.remainSubmitCount) !== 0;
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isActionLoading = _React$useState2[0],
-    setActionLoading = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    isGradeResultDialogOpen = _React$useState4[0],
-    setGradeResultDialogOpen = _React$useState4[1];
-  var _React$useState5 = React.useState(false),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    isSubmitCountInfoDialogOpen = _React$useState6[0],
-    setSubmitCountInfoDialogOpen = _React$useState6[1];
-  var _React$useState7 = React.useState(false),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    hasUnreadResult = _React$useState8[0],
-    setHasUnreadResult = _React$useState8[1];
-  var isRunboxRunning = status === 'running';
-  var isGradeDoneWithOutput = !isLastCommandRunning && (lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.commandType) === CommandType.Grade && Boolean(lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.output);
+  const isSubmitCountRemained = ((_a = leaderboardSubmitInfoQuery.data) === null || _a === void 0 ? void 0 : _a.remainSubmitCount) !== 0;
+  const [isActionLoading, setActionLoading] = React.useState(false);
+  const [isGradeResultDialogOpen, setGradeResultDialogOpen] = React.useState(false);
+  const [isSubmitCountInfoDialogOpen, setSubmitCountInfoDialogOpen] = React.useState(false);
+  const [hasUnreadResult, setHasUnreadResult] = React.useState(false);
+  const isRunboxRunning = status === 'running';
+  const isGradeDoneWithOutput = !isLastCommandRunning && (lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.commandType) === CommandType.Grade && Boolean(lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.output);
   /**
    *
    */
-  var handleGradeResultDialogOpen = function handleGradeResultDialogOpen() {
+  const handleGradeResultDialogOpen = () => {
     setGradeResultDialogOpen(true);
   };
   /**
    *
    */
-  var handleGradeResultDialogClose = function handleGradeResultDialogClose() {
+  const handleGradeResultDialogClose = () => {
     setGradeResultDialogOpen(false);
   };
   /**
    *
    */
-  var handleSubmitCountInfoDialogClose = function handleSubmitCountInfoDialogClose() {
+  const handleSubmitCountInfoDialogClose = () => {
     setSubmitCountInfoDialogOpen(false);
   };
   /**
    *
    */
-  var handleAction = /*#__PURE__*/function () {
-    var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var _yield$leaderboardSub, currentLeaderboardSubmitInfo, isCurrentSubmitCountEmpty, runtimeId, _yield$materialRunbox, commandId;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            setActionLoading(true);
-            _context.prev = 1;
-            _context.next = 4;
-            return leaderboardSubmitInfoQuery.refetch();
-          case 4:
-            _yield$leaderboardSub = _context.sent;
-            currentLeaderboardSubmitInfo = _yield$leaderboardSub.data;
-            isCurrentSubmitCountEmpty = (currentLeaderboardSubmitInfo === null || currentLeaderboardSubmitInfo === void 0 ? void 0 : currentLeaderboardSubmitInfo.remainSubmitCount) === 0;
-            if (!isCurrentSubmitCountEmpty) {
-              _context.next = 10;
-              break;
-            }
-            setSubmitCountInfoDialogOpen(true);
-            return _context.abrupt("return");
-          case 10:
-            runtimeId = runtime === null || runtime === void 0 ? void 0 : runtime.id;
-            _context.next = 13;
-            return materialRunboxApi.runtime.runtimeRuntimeIdCommandPost({
-              runtimeId: runtimeId,
-              eliceCourseId: courseId,
-              runboxCommandPostRequest: {
-                commandType: CommandType.Grade
-              }
-            });
-          case 13:
-            _yield$materialRunbox = _context.sent;
-            commandId = _yield$materialRunbox.id;
-            setCommandIdToPing(commandId);
-            _context.next = 21;
-            break;
-          case 18:
-            _context.prev = 18;
-            _context.t0 = _context["catch"](1);
-            enqueueSnackbar(intl.formatMessage({
-              id: 'runbox.action.grade.noti.error'
-            }), {
-              variant: 'error'
-            });
-          case 21:
-            _context.prev = 21;
-            setActionLoading(false);
-            return _context.finish(21);
-          case 24:
-          case "end":
-            return _context.stop();
+  const handleAction = async () => {
+    setActionLoading(true);
+    try {
+      const {
+        data: currentLeaderboardSubmitInfo
+      } = await leaderboardSubmitInfoQuery.refetch();
+      const isCurrentSubmitCountEmpty = (currentLeaderboardSubmitInfo === null || currentLeaderboardSubmitInfo === void 0 ? void 0 : currentLeaderboardSubmitInfo.remainSubmitCount) === 0;
+      if (isCurrentSubmitCountEmpty) {
+        setSubmitCountInfoDialogOpen(true);
+        return;
+      }
+      const runtimeId = runtime === null || runtime === void 0 ? void 0 : runtime.id;
+      const {
+        id: commandId
+      } = await materialRunboxApi.runtime.runtimeRuntimeIdCommandPost({
+        runtimeId,
+        eliceCourseId: courseId,
+        runboxCommandPostRequest: {
+          commandType: CommandType.Grade
         }
-      }, _callee, null, [[1, 18, 21, 24]]);
-    }));
-    return function handleAction() {
-      return _ref7.apply(this, arguments);
-    };
-  }();
+      });
+      setCommandIdToPing(commandId);
+    } catch (err) {
+      enqueueSnackbar(intl.formatMessage({
+        id: 'runbox.action.grade.noti.error'
+      }), {
+        variant: 'error'
+      });
+    } finally {
+      setActionLoading(false);
+    }
+  };
   //
   // set `hasUnreadResult` when last command output exists
   //
-  React.useEffect(function () {
-    return setHasUnreadResult(isGradeDoneWithOutput);
-  }, [isGradeDoneWithOutput]);
+  React.useEffect(() => setHasUnreadResult(isGradeDoneWithOutput), [isGradeDoneWithOutput]);
   //
   // reset `hasUnreadResult` when dialog state toggled
   //
-  React.useEffect(function () {
-    return setHasUnreadResult(false);
-  }, [isGradeResultDialogOpen]);
+  React.useEffect(() => setHasUnreadResult(false), [isGradeResultDialogOpen]);
   //
   // toggle dialog state when last command output exists
   //
-  React.useEffect(function () {
-    return setGradeResultDialogOpen(isGradeDoneWithOutput);
-  }, [isGradeDoneWithOutput]);
+  React.useEffect(() => setGradeResultDialogOpen(isGradeDoneWithOutput), [isGradeDoneWithOutput]);
   /**
    *
    */
-  var renderActionButton = function renderActionButton() {
-    var isGradeType = (lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.commandType) === CommandType.Grade;
-    var isGrading = isActionLoading || isLastCommandRunning && isGradeType;
+  const renderActionButton = () => {
+    const isGradeType = (lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.commandType) === CommandType.Grade;
+    const isGrading = isActionLoading || isLastCommandRunning && isGradeType;
     /**
      *
      */
-    var getActionTooltipMessage = function getActionTooltipMessage() {
+    const getActionTooltipMessage = () => {
       if (!isSubmitCountRemained) {
         return intl.formatMessage({
           id: 'runbox.action.submitCountInfo.tooltip.disabled'
@@ -239,30 +206,28 @@ var MaterialRunboxActionGrade = function MaterialRunboxActionGrade(_ref5) {
       onClick: handleAction
     }, React.createElement(FormattedMessage, {
       id: "runbox.action.grade.title"
-    })), React.createElement(Transition, {
+    })), isGradeDoneWithOutput ? React.createElement(Transition, {
       in: isGradeDoneWithOutput,
       timeout: 0,
       mountOnEnter: true,
       unmountOnExit: true
-    }, function (state) {
-      return React.createElement(StyledSubActionButton, {
-        size: "small",
-        disabled: isLastCommandRunning,
-        onClick: handleGradeResultDialogOpen,
-        style: TRANSITION_STYLE_MAP[state]
-      }, React.createElement(Badge, {
-        color: "error",
-        variant: "dot",
-        invisible: !hasUnreadResult
-      }, React.createElement(Terminal, {
-        fontSize: "small"
-      })));
-    })));
+    }, state => React.createElement(StyledSubActionButton, {
+      size: "small",
+      disabled: isLastCommandRunning,
+      onClick: handleGradeResultDialogOpen,
+      style: TRANSITION_STYLE_MAP[state]
+    }, React.createElement(Badge, {
+      color: "error",
+      variant: "dot",
+      invisible: !hasUnreadResult
+    }, React.createElement(Terminal, {
+      fontSize: "small"
+    })))) : null));
   };
   /**
    *
    */
-  var renderActionGradeResultDialog = function renderActionGradeResultDialog() {
+  const renderActionGradeResultDialog = () => {
     if ((lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.commandType) !== CommandType.Grade) {
       return null;
     }
@@ -298,7 +263,7 @@ var MaterialRunboxActionGrade = function MaterialRunboxActionGrade(_ref5) {
   /**
    *
    */
-  var renderActionSubmitCountInfoDialog = function renderActionSubmitCountInfoDialog() {
+  const renderActionSubmitCountInfoDialog = () => {
     return React.createElement(Dialog, {
       fullWidth: true,
       maxWidth: "xs",

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { RuntimeProps } from '../runtime/Runtime';
+type MaterialRunboxActionMenuProps = Pick<RuntimeProps, 'runbox' | 'runtime' | 'courseId' | 'refetch'> & {
+    menuAnchorEl: null | HTMLButtonElement;
+    handleMenuClose: () => void;
+};
+declare const MaterialRunboxActionMenu: React.FC<MaterialRunboxActionMenuProps>;
+export default MaterialRunboxActionMenu;