@nualang/nualang-ui-components 0.1.1265 → 0.1.1267

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

@@ -8,9 +8,11 @@ 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 }; }
 const sxGreenColor = theme => ({
   color: theme.palette.success ? theme.palette.success.dark : ""
 });
@@ -49,7 +51,9 @@ function Bot({
   lastClickedExerciseId,
   memberCourseCompletions,
   topicProgress,
-  isCreator
+  isCreator,
+  handleRemoveExercise,
+  isPreview
 }) {
   const navigate = (0, _reactRouterDom.useNavigate)();
   const params = (0, _reactRouterDom.useParams)();
@@ -137,6 +141,21 @@ function Bot({
             e.stopPropagation();
             handleClick();
           }
+        }), useCase === "assignment-view" && isPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+            edge: "end",
+            "aria-label": "remove-bot",
+            onClick: e => {
+              e.stopPropagation();
+              const exerciseToRemove = selectedExercises.find(ex => ex.botId === bot.botId && ex.courseSectionTopicId === courseSectionTopicId);
+              if (exerciseToRemove) {
+                handleRemoveExercise(exerciseToRemove);
+              }
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clear.default, {
+              fontSize: "small"
+            })
+          })
         }), useCase === "assignment-start" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemIcon, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InProgressBadge, {
             progressCount: getBotProgress()
@@ -159,9 +178,12 @@ function AssignmentBotSelection({
   assignment,
   lastClickedExerciseId,
   memberCourseCompletions,
-  topicProgress
+  topicProgress,
+  handleRemoveExercise,
+  isPreview
 }) {
-  return bots.map((bot, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Bot, {
+  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, {
     bot: bot,
     courseSectionTopicId: courseSectionTopicId,
     t: t,
@@ -172,7 +194,9 @@ function AssignmentBotSelection({
     assignment: assignment,
     lastClickedExerciseId: lastClickedExerciseId,
     memberCourseCompletions: memberCourseCompletions,
-    topicProgress: topicProgress
+    topicProgress: topicProgress,
+    handleRemoveExercise: handleRemoveExercise,
+    isPreview: isPreview
   }, index));
 }
 var _default = exports.default = AssignmentBotSelection;

package/dist/Assignments/AssignmentCourseSelection/AssignmentCourseSelection.js

@@ -35,7 +35,9 @@ function Course({
   preferred_username,
   progressHelpers,
   memberCourseCompletions,
-  lastClickedExerciseId
+  lastClickedExerciseId,
+  handleRemoveExercise,
+  isPreview
 }) {
   const numOfIds = lastClickedExerciseId ? lastClickedExerciseId.split("|") : [];
   const [open, setOpen] = (0, _react.useState)(lastClickedExerciseId && (numOfIds.length === 4 && lastClickedExerciseId.endsWith(`|${assignment.assignmentId}`) || numOfIds.length === 5 && lastClickedExerciseId.split("|")[3] === assignment.assignmentId));
@@ -198,7 +200,9 @@ function Course({
         progressHelpers: progressHelpers,
         memberCourseCompletions: memberCourseCompletions,
         lastClickedExerciseId: lastClickedExerciseId,
-        course: course
+        course: course,
+        handleRemoveExercise: handleRemoveExercise,
+        isPreview: isPreview
       })
     })
   });
@@ -223,6 +227,8 @@ function AssignmentCourseSelection({
   progressHelpers,
   memberCourseCompletions,
   lastClickedExerciseId,
+  handleRemoveExercise,
+  isPreview,
   ...otherProps
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -246,7 +252,9 @@ function AssignmentCourseSelection({
       preferred_username: preferred_username,
       memberCourseCompletions: memberCourseCompletions,
       progressHelpers: progressHelpers,
-      lastClickedExerciseId: lastClickedExerciseId
+      lastClickedExerciseId: lastClickedExerciseId,
+      handleRemoveExercise: handleRemoveExercise,
+      isPreview: isPreview
     }, course.courseId || index))
   });
 }

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -9,6 +9,7 @@ var _material = require("@mui/material");
 var _styles = require("@mui/material/styles");
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _ImageSearch = _interopRequireDefault(require("@mui/icons-material/ImageSearch"));
+var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
 var _Hearing = _interopRequireDefault(require("@mui/icons-material/Hearing"));
 var _SwapHoriz = _interopRequireDefault(require("@mui/icons-material/SwapHoriz"));
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
@@ -25,6 +26,7 @@ var _Exercises = require("../../Lists/Exercises/Exercises");
 var _ColorLinearProgress = _interopRequireDefault(require("../../Misc/ColorLinearProgress/ColorLinearProgress"));
 var _utils = require("../../utils");
 var _AssignmentBotSelection = _interopRequireDefault(require("../AssignmentBotSelection/AssignmentBotSelection"));
+var _iconsMaterial = require("@mui/icons-material");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Exercise({
@@ -36,6 +38,8 @@ function Exercise({
   isExerciseSelected,
   roleplays,
   bots,
+  roleplayId,
+  botId,
   phrases,
   handleSelectExercise = null,
   selectedExercises,
@@ -48,7 +52,9 @@ function Exercise({
   isCreator,
   memberCourseCompletions,
   completion,
-  lastClickedExerciseId
+  lastClickedExerciseId,
+  isPreview,
+  handleRemoveExercise = null
 }) {
   const [listeningHidden, setListeningHidden] = (0, _react.useState)(false);
   const [translationHidden, setTranslationHidden] = (0, _react.useState)(false);
@@ -187,9 +193,9 @@ function Exercise({
           primary: t(name),
           secondary: t(description)
         })
-      }), name.toLowerCase() === "roleplays" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+      }), name.toLowerCase() === "roleplays" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
         children: roleplaysOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})
-      }), name.toLowerCase() === "bots" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+      }), name.toLowerCase() === "bots" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
         children: botsOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})
       }), (name.toLowerCase() === "listening" || name.toLowerCase() === "translation" || name.toLowerCase() === "pronunciation") && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemIcon, {
         children: [useCase === "assignment-select" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
@@ -204,7 +210,20 @@ function Exercise({
               courseSectionTopicId
             }]);
           }
-        }), useCase === "assignment-view" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {}), !isCreator && name.toLowerCase() === "pronunciation" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        }), useCase === "assignment-view" && isPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          edge: "end",
+          "aria-label": "remove-exercise",
+          onClick: e => {
+            e.stopPropagation();
+            handleRemoveExercise({
+              courseSectionTopicId,
+              name
+            });
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clear.default, {
+            fontSize: "small"
+          })
+        }), !isCreator && name.toLowerCase() === "pronunciation" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Exercises.InProgressBadge, {
             progressCount: pronunciationProgress && pronunciationProgress.remainingQuestions?.length || 0
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Exercises.ProgressBadge, {
@@ -243,7 +262,9 @@ function Exercise({
           memberCourseCompletions: memberCourseCompletions,
           topicProgress: topicProgress,
           isCreator: isCreator,
-          lastClickedExerciseId: lastClickedExerciseId
+          lastClickedExerciseId: lastClickedExerciseId,
+          handleRemoveExercise: handleRemoveExercise,
+          isPreview: isPreview
         })
       })
     }), name.toLowerCase() === "bots" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
@@ -265,7 +286,9 @@ function Exercise({
           memberCourseCompletions: memberCourseCompletions,
           topicProgress: topicProgress,
           isCreator: isCreator,
-          lastClickedExerciseId: lastClickedExerciseId
+          lastClickedExerciseId: lastClickedExerciseId,
+          handleRemoveExercise: handleRemoveExercise,
+          isPreview: isPreview
         })
       })
     })]
@@ -297,6 +320,8 @@ function ExerciseList({
   preferred_username,
   lastClickedExerciseId,
   completion,
+  handleRemoveExercise,
+  isPreview,
   ...otherProps
 }) {
   const courseSectionTopicId = `${courseId}|${sectionId}|${topicId}`;
@@ -332,6 +357,8 @@ function ExerciseList({
         memberCourseCompletions: memberCourseCompletions,
         lastClickedExerciseId: lastClickedExerciseId,
         completion: completion,
+        handleRemoveExercise: handleRemoveExercise,
+        isPreview: isPreview,
         ...otherProps
       }, keyId);
     })
@@ -369,6 +396,8 @@ function Topic({
   viewOnly,
   getRoleplays,
   getBots,
+  handleRemoveExercise,
+  isPreview,
   ...otherProps
 }) {
   const theme = (0, _styles.useTheme)();
@@ -617,7 +646,7 @@ function Topic({
             fontWeight: "bold",
             marginRight: 3
           }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
           children: isExerciseListOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})
         }), useCase === "assignment-select" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
@@ -628,6 +657,17 @@ function Topic({
             },
             onChange: handleSelectAll
           })
+        }), useCase === "assignment-view" && isPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          edge: "end",
+          "aria-label": "remove-topic",
+          onClick: e => {
+            e.stopPropagation();
+            const topicExercises = selectedExercises.filter(ex => ex.courseSectionTopicId?.split("|")[2] === topicId);
+            handleRemoveExercise(topicExercises);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clear.default, {
+            fontSize: "small"
+          })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
         in: isExerciseListOpen,
@@ -663,7 +703,9 @@ function Topic({
           lastClickedExerciseId: lastClickedExerciseId,
           bots: bots,
           ...otherProps,
-          completion: completion
+          completion: completion,
+          handleRemoveExercise: handleRemoveExercise,
+          isPreview: isPreview
         })
       })]
     })
@@ -695,6 +737,8 @@ function Section({
   lastClickedExerciseId,
   completion,
   course,
+  handleRemoveExercise,
+  isPreview,
   ...otherProps
 }) {
   const root = {
@@ -720,11 +764,15 @@ function Section({
   }, [selectedExercises]);
   (0, _react.useEffect)(() => {
     if (viewOnly) {
-      setFilteredTopics(topics.filter(topic => selectedTopicIds.includes(topic.topicId)));
+      setFilteredTopics(topics.filter(topic => {
+        const topicId = topic.topicId;
+        const hasExercises = assignment?.exercises?.some(e => e.courseSectionTopicId?.split("|")[2] === topicId);
+        return selectedTopicIds.includes(topicId) && hasExercises;
+      }));
     }
-  }, [topics, selectedTopicIds, viewOnly]);
+  }, [topics, selectedTopicIds, viewOnly, assignment?.exercises]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: !isHidden && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
+    children: !isHidden && (viewOnly ? filteredTopics.length > 0 : topics.length > 0) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
       subheader: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListSubheader, {
           disableGutters: true,
@@ -766,6 +814,8 @@ function Section({
         username: username,
         preferred_username: preferred_username,
         progressHelpers: progressHelpers,
+        handleRemoveExercise: handleRemoveExercise,
+        isPreview: isPreview,
         memberCourseCompletions: memberCourseCompletions
       }, `${sectionId}-${topic.topicId}`)) : topics.map((topic, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Topic, {
         viewOnly: viewOnly,
@@ -822,6 +872,8 @@ function SectionList({
   memberCourseCompletions,
   lastClickedExerciseId,
   course,
+  handleRemoveExercise,
+  isPreview,
   ...otherProps
 }) {
   const [courseSectionWithProgress, setCourseSectionWithProgress] = (0, _react.useState)([]);
@@ -859,6 +911,8 @@ function SectionList({
         memberCourseCompletions: memberCourseCompletions,
         lastClickedExerciseId: lastClickedExerciseId,
         course: course,
+        handleRemoveExercise: handleRemoveExercise,
+        isPreview: isPreview,
         ...otherProps
       }, section.sectionId);
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -893,6 +947,8 @@ function AssignmentExerciseSelection({
   memberCourseCompletions,
   lastClickedExerciseId,
   course,
+  handleRemoveExercise,
+  isPreview,
   ...otherProps
 }) {
   if (isLoading) {
@@ -920,6 +976,8 @@ function AssignmentExerciseSelection({
         memberCourseCompletions: memberCourseCompletions,
         lastClickedExerciseId: lastClickedExerciseId,
         course: course,
+        handleRemoveExercise: handleRemoveExercise,
+        isPreview: isPreview,
         ...otherProps
       })
     });
@@ -948,6 +1006,8 @@ function AssignmentExerciseSelection({
       memberCourseCompletions: memberCourseCompletions,
       lastClickedExerciseId: lastClickedExerciseId,
       course: course,
+      handleRemoveExercise: handleRemoveExercise,
+      isPreview: isPreview,
       ...otherProps
     })
   });

package/dist/Assignments/AssignmentExerciseSelector/AssignmentExerciseSelector.js

@@ -24,7 +24,9 @@ function AssignmentExerciseSelector({
   preferred_username,
   progressHelpers,
   memberCourseCompletions,
-  lastClickedExerciseId
+  lastClickedExerciseId,
+  handleRemoveExercise,
+  isPreview
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Box, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentCourseSelection.default, {
@@ -43,7 +45,9 @@ function AssignmentExerciseSelector({
       preferred_username: preferred_username,
       progressHelpers: progressHelpers,
       memberCourseCompletions: memberCourseCompletions,
-      lastClickedExerciseId: lastClickedExerciseId
+      lastClickedExerciseId: lastClickedExerciseId,
+      handleRemoveExercise: handleRemoveExercise,
+      isPreview: isPreview
     })
   });
 }

package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _material = require("@mui/material");
+var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
 var _Message = _interopRequireDefault(require("@mui/icons-material/Message"));
 var _RateReview = _interopRequireDefault(require("@mui/icons-material/RateReview"));
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
@@ -91,7 +92,9 @@ function Roleplay({
   assignment,
   memberCourseCompletions,
   topicProgress,
-  lastClickedExerciseId
+  lastClickedExerciseId,
+  handleRemoveExercise,
+  isPreview
 }) {
   const navigate = (0, _reactRouterDom.useNavigate)();
   const params = (0, _reactRouterDom.useParams)();
@@ -258,7 +261,7 @@ function Roleplay({
                 })
               })
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
             onClick: () => setOpen(!open),
             children: open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {
               sx: {
@@ -269,6 +272,19 @@ function Roleplay({
                 color: "#757575"
               }
             })
+          }), useCase === "assignment-view" && isPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+              edge: "end",
+              "aria-label": "remove-roleplay",
+              onClick: e => {
+                e.stopPropagation();
+                const roleplayExercises = selectedExercises.filter(ex => ex.roleplayId === roleplay.roleplayId);
+                handleRemoveExercise(roleplayExercises);
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clear.default, {
+                fontSize: "small"
+              })
+            })
           }), useCase === "assignment-select" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
             title: t("select_all"),
             placement: "top",
@@ -349,6 +365,20 @@ function Roleplay({
               t: t,
               gameName: name
             })]
+          }), useCase === "assignment-view" && isPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+            edge: "end",
+            "aria-label": "remove-roleplay-game",
+            onClick: e => {
+              e.stopPropagation();
+              handleRemoveExercise({
+                roleplayId: roleplay.roleplayId,
+                name,
+                courseSectionTopicId: roleplay.courseSectionTopicId
+              });
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clear.default, {
+              fontSize: "small"
+            })
           })]
         })) : null]
       })
@@ -369,6 +399,8 @@ function AssignmentRoleplaySelection({
   topics,
   isCreator,
   lastClickedExerciseId,
+  handleRemoveExercise,
+  isPreview,
   viewOnly
 }) {
   const [isRoleplaySelected, setIsRoleplaySelected] = (0, _react.useState)(false);
@@ -390,7 +422,9 @@ function AssignmentRoleplaySelection({
     topicProgress: topicProgress,
     topics: topics,
     isCreator: isCreator,
-    lastClickedExerciseId: lastClickedExerciseId
+    lastClickedExerciseId: lastClickedExerciseId,
+    handleRemoveExercise: handleRemoveExercise,
+    isPreview: isPreview
   }, roleplay.roleplayId));
 }
 var _default = exports.default = AssignmentRoleplaySelection;

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -275,6 +275,10 @@ function CreateAssignmentDialog({
       console.error("Error creating assignments:", error);
     }
   };
+  const handleRemoveExercise = toRemove => {
+    setSubmittedExercises(exs => exs.filter(e => !(Array.isArray(toRemove) ? toRemove.some(tr => tr.courseSectionTopicId === e.courseSectionTopicId && tr.name === e.name && tr.roleplayId === e.roleplayId && tr.botId === e.botId) : e.courseSectionTopicId === toRemove.courseSectionTopicId && e.name === toRemove.name && e.roleplayId === toRemove.roleplayId && e.botId === toRemove.botId)));
+    setSelectedExercises(exs => exs.filter(e => !(Array.isArray(toRemove) ? toRemove.some(tr => tr.courseSectionTopicId === e.courseSectionTopicId && tr.name === e.name && tr.roleplayId === e.roleplayId && tr.botId === e.botId) : e.courseSectionTopicId === toRemove.courseSectionTopicId && e.name === toRemove.name && e.roleplayId === toRemove.roleplayId && e.botId === toRemove.botId)));
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
     fullScreen: true,
     open: open,
@@ -432,7 +436,9 @@ function CreateAssignmentDialog({
             getRoleplays: getRoleplays,
             getBots: getBots,
             viewOnly: true,
-            useCase: "assignment-view"
+            useCase: "assignment-view",
+            handleRemoveExercise: handleRemoveExercise,
+            isPreview: true
           })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, {

package/dist/Cards/Course/Course.js

@@ -92,7 +92,7 @@ function OverflowMenu({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
         children: t("leave_course")
       })]
-    }), classroomId && !isClassroomArchived && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+    }), isCreator && classroomId && !isClassroomArchived && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
       onClick: () => {
         localStorage.setItem("focusCourseSettings", true);
         window.location.hash = "Settings";