@nualang/nualang-ui-components 0.1.1289 → 0.1.1291

package/README.md

@@ -1,65 +1,65 @@
-# Nualang ui-components
-This is the ui-components repository for the Nualang product. The components
-are developed, reviewed and tested with storybook and a library is then published
-to `npm` and consumed from there by nualang web apps.
-
-## Getting Started
-Clone this repository and then execute `npm install`. `npm start` will start
-[stoybook](https://storybook.js.org) and allow you to brrowse the available components.
-
-## Develop
-```
-npm start
-```
-
-## Create Local Package
-Compile and pack (This will create a '.tgz' file):
-```
-npm run localpack
-```
-
-Install package (Inside webapp):
-```
-npm i ../ui-components/fathomtech-nualang-ui-components-0.1.XXX.tgz
-```
-
-If webapp is caching previous versions (Add a character to the end of the .tgz, e.g 'a') and install again:
-```
-yarn add ../ui-components/fathomtech-nualang-ui-components-0.1.XXXa.tgz
-```
-
-## Publish to npm
-Make sure that the version number has been updayed in package.json.
-Ensure that you have committed the latest version to git.
-Execute:-
-```bash
-npm run postversion
-```
-npm will complain if you try to re-publish a previously used version number.
-
-
-## Additional Scripts
-In the project directory, you can run:
-
-### `npm run storybook`
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.<br />
-You should also see any lint errors in the console.
-
-### `npm run test`
-Launches the test runner in interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run lint`
-Check for any lint errors or warnings.
-
-### `npm run compile`
-Run the babel compiler to compile es6 to js.
-
-### `npm run postversion`
-Publish a new version of the pacakage to npm. npm will complain
-
-### `npm run chromatic`
+# Nualang ui-components
+This is the ui-components repository for the Nualang product. The components
+are developed, reviewed and tested with storybook and a library is then published
+to `npm` and consumed from there by nualang web apps.
+
+## Getting Started
+Clone this repository and then execute `npm install`. `npm start` will start
+[stoybook](https://storybook.js.org) and allow you to brrowse the available components.
+
+## Develop
+```
+npm start
+```
+
+## Create Local Package
+Compile and pack (This will create a '.tgz' file):
+```
+npm run localpack
+```
+
+Install package (Inside webapp):
+```
+npm i ../ui-components/fathomtech-nualang-ui-components-0.1.XXX.tgz
+```
+
+If webapp is caching previous versions (Add a character to the end of the .tgz, e.g 'a') and install again:
+```
+yarn add ../ui-components/fathomtech-nualang-ui-components-0.1.XXXa.tgz
+```
+
+## Publish to npm
+Make sure that the version number has been updayed in package.json.
+Ensure that you have committed the latest version to git.
+Execute:-
+```bash
+npm run postversion
+```
+npm will complain if you try to re-publish a previously used version number.
+
+
+## Additional Scripts
+In the project directory, you can run:
+
+### `npm run storybook`
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You should also see any lint errors in the console.
+
+### `npm run test`
+Launches the test runner in interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run lint`
+Check for any lint errors or warnings.
+
+### `npm run compile`
+Run the babel compiler to compile es6 to js.
+
+### `npm run postversion`
+Publish a new version of the pacakage to npm. npm will complain
+
+### `npm run chromatic`
 Publish a new version of the pacakage to https://www.chromatic.com/ 

package/dist/Assignments/AssignmentBotSelection/AssignmentBotSelection.js

@@ -1,41 +1,34 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.InProgressBadge = InProgressBadge;
-exports.ProgressBadge = ProgressBadge;
-exports.default = void 0;
-var _react = require("react");
-var _material = require("@mui/material");
-var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
-var _iconsMaterial = require("@mui/icons-material");
-var _reactRouterDom = require("react-router-dom");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import { useState, useEffect, Fragment } from "react";
+import { Box, ListItemText, ListItemButton, Avatar, Checkbox, ListItemIcon, Badge, IconButton, Chip, Typography } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import { Done, Timelapse } from "@mui/icons-material";
+import { useNavigate, useParams } from "react-router-dom";
+import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
+import { styled } from "@mui/material/styles";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const sxGreenColor = theme => ({
   color: theme.palette.success ? theme.palette.success.dark : ""
 });
 const sxInfoColor = theme => ({
   color: theme.palette.info ? theme.palette.info.main : ""
 });
-function ProgressBadge({
+export function ProgressBadge({
   completions
 }) {
-  return completions > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Badge, {
+  return completions > 0 ? /*#__PURE__*/_jsx(Badge, {
     sx: sxGreenColor,
     badgeContent: completions,
     color: "default",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Done, {})
+    children: /*#__PURE__*/_jsx(Done, {})
   }) : null;
 }
-function InProgressBadge({
+export function InProgressBadge({
   progressCount
 }) {
-  return progressCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Badge, {
+  return progressCount > 0 ? /*#__PURE__*/_jsx(Badge, {
     sx: sxInfoColor,
     color: "default",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Timelapse, {})
+    children: /*#__PURE__*/_jsx(Timelapse, {})
   }) : null;
 }
 function Bot({
@@ -53,10 +46,11 @@ function Bot({
   topicProgress,
   isCreator,
   handleRemoveExercise,
-  isPreview
+  isPreview,
+  isCreateMode
 }) {
-  const navigate = (0, _reactRouterDom.useNavigate)();
-  const params = (0, _reactRouterDom.useParams)();
+  const navigate = useNavigate();
+  const params = useParams();
   const {
     classroomId
   } = params;
@@ -73,9 +67,9 @@ function Bot({
     localStorage.setItem("lastClickedExercise", JSON.stringify(lastClickedExercise));
     navigate(`/classrooms/${classroomId}/${courseId}/${sectionId}/${topicId}/bots/${bot?.botId}?assignmentId=${assignment.assignmentId}`);
   };
-  const [open, setOpen] = (0, _react.useState)(lastClickedBotId === bot.botId && lastClickedAssignmentId === assignment.assignmentId);
-  const [isSelected, setIsSelected] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
+  const [open, setOpen] = useState(lastClickedBotId === bot.botId && lastClickedAssignmentId === assignment.assignmentId);
+  const [isSelected, setIsSelected] = useState(false);
+  useEffect(() => {
     // Check if this exercise is selected
     const exerciseSelected = selectedExercises?.some(exercise => exercise.botId === bot.botId);
     setIsSelected(exerciseSelected);
@@ -99,9 +93,56 @@ function Bot({
     const progress = topicProgress?.filter(progress => progress.botId === bot.botId && progress.existingMessages && progress.existingMessages !== null);
     return progress?.length || 0;
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
+  const ChallengeModeHtmlTooltip = styled(({
+    className,
+    ...props
+  }) => /*#__PURE__*/_jsx(Tooltip, {
+    ...props,
+    classes: {
+      popper: className
+    },
+    title: /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          fontWeight: "bold",
+          marginBottom: "8px"
+        },
+        children: t("challenge_bot")
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          marginBottom: "8px"
+        },
+        children: t("challenge_bot_desc")
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          fontSize: "12px"
+        },
+        children: t("freely_changed")
+      })]
+    })
+  }))(({
+    theme
+  }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+      padding: theme.spacing(2),
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.text.primary,
+      fontSize: theme.typography.pxToRem(12),
+      border: `1px solid ${theme.palette.divider}`
+    },
+    [`& ul`]: {
+      listStyleType: "disc",
+      paddingLeft: theme.spacing(2),
+      margin: 0
+    },
+    [`& li`]: {
+      display: "list-item",
+      marginBottom: theme.spacing(0.5)
+    }
+  }));
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsxs(ListItemButton, {
         onClick: () => {
           if (useCase === "assignment-start") {
             addSearchParams();
@@ -119,23 +160,52 @@ function Bot({
           },
           marginLeft: "60px"
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [/*#__PURE__*/_jsxs(Box, {
           display: "flex",
           alignItems: "center",
           width: {
             xs: "100%",
             sm: "85%"
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+          children: [/*#__PURE__*/_jsx(Avatar, {
             src: bot.picture
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
-            primary: bot.botName,
-            secondary: bot.description,
+          }), /*#__PURE__*/_jsx(ListItemText, {
             sx: {
               marginLeft: 2
-            }
+            },
+            primary: /*#__PURE__*/_jsxs(Box, {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "body1",
+                children: bot.botName
+              }), bot?.isChallengeBot && /*#__PURE__*/_jsx(_Fragment, {
+                children: isCreator || isCreateMode ? /*#__PURE__*/_jsx(ChallengeModeHtmlTooltip, {
+                  placement: "right",
+                  children: /*#__PURE__*/_jsx(Chip, {
+                    label: t("challenge_bot"),
+                    size: "small",
+                    variant: "outlined",
+                    color: "primary",
+                    sx: {
+                      fontWeight: "normal"
+                    }
+                  })
+                }) : /*#__PURE__*/_jsx(Chip, {
+                  label: t("challenge_bot"),
+                  size: "small",
+                  variant: "outlined",
+                  color: "primary",
+                  sx: {
+                    fontWeight: "normal"
+                  }
+                })
+              })]
+            }),
+            secondary: bot.description
           })]
-        }), useCase === "assignment-select" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+        }), useCase === "assignment-select" && /*#__PURE__*/_jsx(Checkbox, {
           sx: {
             marginRight: "15px"
           },
@@ -144,8 +214,8 @@ function Bot({
             e.stopPropagation();
             handleClick();
           }
-        }), useCase === "assignment-view" && isPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+        }), useCase === "assignment-view" && isPreview && /*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(IconButton, {
             edge: "end",
             "aria-label": "remove-bot",
             onClick: e => {
@@ -155,14 +225,14 @@ function Bot({
                 handleRemoveExercise(exerciseToRemove);
               }
             },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clear.default, {
+            children: /*#__PURE__*/_jsx(ClearIcon, {
               fontSize: "small"
             })
           })
-        }), useCase === "assignment-start" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemIcon, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InProgressBadge, {
+        }), useCase === "assignment-start" && /*#__PURE__*/_jsxs(ListItemIcon, {
+          children: [/*#__PURE__*/_jsx(InProgressBadge, {
             progressCount: getBotProgress()
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressBadge, {
+          }), /*#__PURE__*/_jsx(ProgressBadge, {
             completions: getBotCompletion()
           })]
         })]
@@ -183,10 +253,19 @@ function AssignmentBotSelection({
   memberCourseCompletions,
   topicProgress,
   handleRemoveExercise,
-  isPreview
+  isPreview,
+  isChallengeModeStudent,
+  isCreator
 }) {
-  const filteredBots = useCase === "assignment-view" ? bots.filter(bot => selectedExercises.some(ex => ex.botId === bot.botId && ex.courseSectionTopicId === courseSectionTopicId)) : bots;
-  return filteredBots.map((bot, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Bot, {
+  const isCreateMode = location.pathname.includes("/assignments/create");
+  const visibleBots = bots.filter(bot => {
+    if (bot.isChallengeBot) {
+      return isCreateMode || isCreator || isChallengeModeStudent;
+    }
+    return true;
+  });
+  const filteredBots = useCase === "assignment-view" || useCase === "assignment-start" ? visibleBots.filter(bot => selectedExercises.some(ex => ex.botId === bot.botId && ex.courseSectionTopicId === courseSectionTopicId)) : visibleBots;
+  return filteredBots.map((bot, index) => /*#__PURE__*/_jsx(Bot, {
     bot: bot,
     courseSectionTopicId: courseSectionTopicId,
     t: t,
@@ -199,7 +278,10 @@ function AssignmentBotSelection({
     memberCourseCompletions: memberCourseCompletions,
     topicProgress: topicProgress,
     handleRemoveExercise: handleRemoveExercise,
-    isPreview: isPreview
+    isPreview: isPreview,
+    isChallengeModeStudent: isChallengeModeStudent,
+    isCreator: isCreator,
+    isCreateMode: isCreateMode
   }, index));
 }
-var _default = exports.default = AssignmentBotSelection;
+export default AssignmentBotSelection;

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -1,20 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = AssignmentCard;
-var _react = require("react");
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _material = require("@mui/material");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _AssignmentExerciseSelector = _interopRequireDefault(require("../AssignmentExerciseSelector/AssignmentExerciseSelector"));
-var _Queries = require("@nualang/nualang-api-and-queries/Queries");
-var _useConfirm = _interopRequireDefault(require("../../hooks/useConfirm"));
-var _iconsMaterial = require("@mui/icons-material");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function AssignmentCard({
+import { useMemo } from "react";
+import Typography from "@mui/material/Typography";
+import { Card, CardContent, Grid, Box, Divider, Button, LinearProgress, IconButton, Tooltip } from "@mui/material";
+import PropTypes from "prop-types";
+import AssignmentExerciseSelector from "../AssignmentExerciseSelector/AssignmentExerciseSelector";
+import { courses as courseQuerys, ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
+import useConfirm from "../../hooks/useConfirm";
+import { Delete } from "@mui/icons-material";
+import { Edit } from "@mui/icons-material";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function AssignmentCard({
   t = text => text,
   index = 0,
   assignment,
@@ -33,12 +27,13 @@ function AssignmentCard({
   lastClickedExerciseId,
   handleViewProgress,
   lastAssignmentFetch,
-  assignedStudents = []
+  assignedStudents = [],
+  isChallengeModeStudent
 }) {
-  const [confirm] = (0, _useConfirm.default)(t);
+  const [confirm] = useConfirm(t);
   const {
     useQuery
-  } = _Queries.ReactQuery;
+  } = ReactQuery;
   const handleDeleteAssignment = async (classroomId, assignmentId) => {
     const confirmed = await confirm(t("delete_assignment"), t("delete_assignment_confirmation"));
     if (confirmed) {
@@ -73,7 +68,7 @@ function AssignmentCard({
   };
   const {
     uniqueCourses
-  } = (0, _react.useMemo)(() => {
+  } = useMemo(() => {
     const courses = new Set();
     assignment?.exercises?.forEach(({
       courseSectionTopicId,
@@ -88,7 +83,7 @@ function AssignmentCard({
       uniqueCourses: [...courses]
     };
   }, [assignment?.exercises]);
-  const coursesQuery = _Queries.courses.useCourses(async filters => {
+  const coursesQuery = courseQuerys.useCourses(async filters => {
     const response = await getCourses(filters);
     return response;
   }, {
@@ -98,7 +93,7 @@ function AssignmentCard({
   }, {
     enabled: !!uniqueCourses?.length
   });
-  const courses = (0, _react.useMemo)(() => coursesQuery.isSuccess && Array.isArray(coursesQuery.data.Items) && coursesQuery.data.Items.length ? coursesQuery.data.Items : [], [coursesQuery.data, coursesQuery.isSuccess]);
+  const courses = useMemo(() => coursesQuery.isSuccess && Array.isArray(coursesQuery.data.Items) && coursesQuery.data.Items.length ? coursesQuery.data.Items : [], [coursesQuery.data, coursesQuery.isSuccess]);
   assignment = {
     ...assignment,
     courses
@@ -111,35 +106,35 @@ function AssignmentCard({
     },
     staleTime: 500000
   });
-  const memberCourseCompletions = (0, _react.useMemo)(() => memberCourseCompletionsQuery.isSuccess && memberCourseCompletionsQuery.data ? memberCourseCompletionsQuery.data : {}, [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess]);
+  const memberCourseCompletions = useMemo(() => memberCourseCompletionsQuery.isSuccess && memberCourseCompletionsQuery.data ? memberCourseCompletionsQuery.data : {}, [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess]);
   const lastFetch = lastAssignmentFetch?.current[assignment?.classroomId] || 0;
   const isNew = assignment?.updatedAt > lastFetch && !isCreator;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, {
+  return /*#__PURE__*/_jsx(Card, {
     sx: {
       display: "flex",
       marginBottom: 2,
       boxShadow: 3
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.CardContent, {
+    children: /*#__PURE__*/_jsxs(CardContent, {
       sx: {
         flexGrow: 1
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+      children: [/*#__PURE__*/_jsxs(Grid, {
         container: true,
         spacing: 2,
         alignItems: "center",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+        children: [/*#__PURE__*/_jsx(Grid, {
           size: "grow",
           flexDirection: "column",
           display: "flex",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          children: /*#__PURE__*/_jsxs(Box, {
             display: "flex",
             alignItems: "center",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            children: [/*#__PURE__*/_jsx(Typography, {
               variant: "body1",
               component: "div",
               children: assignment.title
-            }), isNew && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            }), isNew && /*#__PURE__*/_jsx(Box, {
               ml: 2,
               px: 1,
               py: 0.25,
@@ -151,52 +146,52 @@ function AssignmentCard({
               children: t("NEW")
             })]
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        }), /*#__PURE__*/_jsx(Grid, {
+          children: /*#__PURE__*/_jsx(Typography, {
             variant: "button",
             color: "text.secondary",
             children: calculateDaysUntilDue(assignment.dueDate, assignment.scheduleDate, t)
           })
-        }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        }), isCreator && /*#__PURE__*/_jsxs(Grid, {
+          children: [/*#__PURE__*/_jsx(Tooltip, {
             title: t("edit"),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.IconButton, {
+            children: /*#__PURE__*/_jsxs(IconButton, {
               "data-cy": `edit-assignment-${index}`,
               onClick: () => handleEditAssignment(assignment),
-              children: [" ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Edit, {}), " "]
+              children: [" ", /*#__PURE__*/_jsx(Edit, {}), " "]
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+          }), /*#__PURE__*/_jsx(Tooltip, {
             title: t("delete"),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.IconButton, {
+            children: /*#__PURE__*/_jsxs(IconButton, {
               "data-cy": `delete-assignment-${index}`,
               onClick: () => {
                 handleDeleteAssignment(assignment.classroomId, assignment.assignmentId);
               },
-              children: [" ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Delete, {}), " "]
+              children: [" ", /*#__PURE__*/_jsx(Delete, {}), " "]
             })
           })]
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      }), /*#__PURE__*/_jsxs(Box, {
         mt: 2,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+        children: [/*#__PURE__*/_jsx(Divider, {
           sx: {
             marginBottom: 1.5
           }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+        }), /*#__PURE__*/_jsxs(Grid, {
           container: true,
           spacing: 2,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+          children: [/*#__PURE__*/_jsxs(Grid, {
             size: {
               md: 10,
               xs: 12
             },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            children: [/*#__PURE__*/_jsx(Typography, {
               variant: "body2",
               children: assignment.instructions
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            }), /*#__PURE__*/_jsx(Box, {
               mt: 2,
               width: isCreator ? "80%" : "100%",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentExerciseSelector.default, {
+              children: /*#__PURE__*/_jsx(AssignmentExerciseSelector, {
                 t: t,
                 assignment: assignment,
                 handleStartExercise: handleStartExercise,
@@ -209,29 +204,30 @@ function AssignmentCard({
                 preferred_username: preferred_username,
                 progressHelpers: progressHelpers,
                 memberCourseCompletions: memberCourseCompletions,
-                lastClickedExerciseId: lastClickedExerciseId
+                lastClickedExerciseId: lastClickedExerciseId,
+                isChallengeModeStudent: isChallengeModeStudent
               })
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          }), /*#__PURE__*/_jsx(Grid, {
             size: {
               xs: 3,
               md: 2
             },
-            children: isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            children: isCreator && /*#__PURE__*/_jsxs(Box, {
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
               textAlign: "center",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              children: [/*#__PURE__*/_jsxs(Box, {
+                children: [/*#__PURE__*/_jsx(Typography, {
                   variant: "h4",
                   children: assignedStudents?.length
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                }), /*#__PURE__*/_jsx(Typography, {
                   variant: "body2",
                   color: "text.secondary",
                   children: t("assigned")
                 })]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              }), /*#__PURE__*/_jsx(Button, {
                 variant: "contained",
                 sx: {
                   marginTop: 2
@@ -249,14 +245,14 @@ function AssignmentCard({
   });
 }
 AssignmentCard.propTypes = {
-  assignment: _propTypes.default.shape({
-    image: _propTypes.default.string,
-    title: _propTypes.default.string,
-    description: _propTypes.default.string,
-    dueDate: _propTypes.default.string.isRequired,
-    completed: _propTypes.default.number,
-    assigned: _propTypes.default.number,
-    assignedStudents: _propTypes.default.array,
-    t: _propTypes.default.func
+  assignment: PropTypes.shape({
+    image: PropTypes.string,
+    title: PropTypes.string,
+    description: PropTypes.string,
+    dueDate: PropTypes.string.isRequired,
+    completed: PropTypes.number,
+    assigned: PropTypes.number,
+    assignedStudents: PropTypes.array,
+    t: PropTypes.func
   }).isRequired
 };