@nualang/nualang-ui-components 0.1.1237 → 0.1.1238

package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _material = require("@mui/material");
-var _PlayCircleOutline = _interopRequireDefault(require("@mui/icons-material/PlayCircleOutline"));
 var _Message = _interopRequireDefault(require("@mui/icons-material/Message"));
 var _RateReview = _interopRequireDefault(require("@mui/icons-material/RateReview"));
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
@@ -16,9 +15,77 @@ var _Forum = _interopRequireDefault(require("@mui/icons-material/Forum"));
 var _Headphones = _interopRequireDefault(require("@mui/icons-material/Headphones"));
 var _RecordVoiceOver = _interopRequireDefault(require("@mui/icons-material/RecordVoiceOver"));
 var _SpaceBar = _interopRequireDefault(require("@mui/icons-material/SpaceBar"));
+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 : ""
+});
+const sxInfoColor = theme => ({
+  color: theme.palette.info ? theme.palette.info.main : ""
+});
+function ProgressBadge({
+  completions,
+  t,
+  gameName
+}) {
+  let completionCounter = 0;
+  if (completions && completions.length > 0) {
+    for (let i = 0; i < completions.length; i++) {
+      if (completions[i].exercise === gameName) {
+        completionCounter += 1;
+      }
+    }
+  }
+  return completionCounter > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Badge, {
+    sx: sxGreenColor,
+    badgeContent: completionCounter,
+    color: "default",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Done, {
+      titleAccess: completionCounter === 1 ? t("roleplay_game_completed_icon", {
+        counter: `${completionCounter}`,
+        roleplay_name: `${gameName}`
+      }) : t("roleplay_games_completed_icon", {
+        counter: `${completionCounter}`,
+        roleplay_name: `${gameName}`
+      }),
+      "aria-label": completionCounter === 1 ? t("roleplay_game_completed_icon", {
+        counter: `${completionCounter}`,
+        roleplay_name: `${gameName}`
+      }) : t("roleplay_games_completed_icon", {
+        counter: `${completionCounter}`,
+        roleplay_name: `${gameName}`
+      })
+    })
+  }) : null;
+}
+function InProgressBadge({
+  roleplayProgress,
+  t,
+  gameName
+}) {
+  let progressCount = 0;
+  if (roleplayProgress && roleplayProgress.length > 0) {
+    for (let i = 0; i < roleplayProgress.length; i++) {
+      if (roleplayProgress[i].exercise === gameName && roleplayProgress[i].existingMessages && roleplayProgress[i].existingMessages !== null && Object.keys(roleplayProgress[i].existingMessages).length) {
+        progressCount = Object.keys(roleplayProgress[i].existingMessages).length;
+      }
+    }
+  }
+  return progressCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Badge, {
+    sx: sxInfoColor,
+    color: "default",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Timelapse, {
+      titleAccess: t("roleplay_game_in_progress_icon", {
+        roleplay_name: `${gameName}`
+      }),
+      "aria-label": t("roleplay_game_in_progress_icon", {
+        roleplay_name: `${gameName}`
+      })
+    })
+  }) : null;
+}
 function Roleplay({
   roleplay,
   courseSectionTopicId,
@@ -29,13 +96,18 @@ function Roleplay({
   selectedExercises,
   useCase,
   assignment,
-  lastClickedExerciseId
+  memberCourseCompletions,
+  topicProgress,
+  isCreator,
+  lastClickedExerciseId,
+  topics
 }) {
   const navigate = (0, _reactRouterDom.useNavigate)();
   const params = (0, _reactRouterDom.useParams)();
   const {
     classroomId
   } = params;
+  const [selectedGames, setSelectedGames] = (0, _react.useState)([]);
   const [courseId, sectionId, topicId] = courseSectionTopicId ? courseSectionTopicId.split("|") : "";
   const [lasClickedCourseId, lasClickedSectionId, lasClickedTopicId, lastClickedAssignmentId, lastClickedRoleplayId] = lastClickedExerciseId?.split("|") || [];
   const addSearchParams = exercise => {
@@ -47,7 +119,6 @@ function Roleplay({
       courseSectionTopicId: `${courseSectionTopicId}|${assignment.assignmentId}|${roleplay.roleplayId}`
     };
     localStorage.setItem("lastClickedExercise", JSON.stringify(lastClickedExercise));
-    const assignmentParam = encodeURIComponent(JSON.stringify(assignment));
     navigate(`/classrooms/${classroomId}/${courseId}/${sectionId}/${topicId}/roleplays/${roleplay?.roleplayId}?game=${encodeURIComponent(exercise)}&assignmentId=${assignment.assignmentId}`);
   };
   const [open, setOpen] = (0, _react.useState)(lastClickedRoleplayId === roleplay.roleplayId && lastClickedAssignmentId === assignment.assignmentId);
@@ -56,6 +127,8 @@ function Roleplay({
   (0, _react.useEffect)(() => {
     const count = selectedExercises?.filter(exercise => exercise.roleplayId === roleplay.roleplayId).length;
     setIsSelectAllChecked(count === games.length);
+    const roleplayNames = selectedExercises?.filter(ex => ex.roleplayId === roleplay.roleplayId).map(ex => ex.game);
+    setSelectedGames(roleplayNames);
   }, [selectedExercises, roleplay.roleplayId, games.length]);
   const handleSelectAll = () => {
     if (isSelectAllChecked) {
@@ -92,22 +165,22 @@ function Roleplay({
       fontSize: "small"
     })]
   });
-  const getIconForGame = game => {
+  const getIconAndStatusForGame = game => {
     switch (game) {
       case "roleplay-story":
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoStories.default, {});
+        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoStories.default, {}), selectedGames?.includes(game)];
       case "roleplay-fill-in-the-blanks":
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpaceBar.default, {});
+        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpaceBar.default, {}), selectedGames?.includes(game)];
       case "roleplay-act-it-out":
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, {});
+        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, {}), selectedGames?.includes(game)];
       case "roleplay-act-it-out-listening":
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Headphones.default, {});
+        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Headphones.default, {}), selectedGames?.includes(game)];
       case "roleplay-act-it-out-speaking":
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RecordVoiceOver.default, {});
+        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RecordVoiceOver.default, {}), selectedGames?.includes(game)];
       case "roleplay-act-it-out-listening-speaking":
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(ActItOutListeningSpeakingIcon, {});
+        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(ActItOutListeningSpeakingIcon, {}), selectedGames?.includes(game)];
       default:
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Forum.default, {});
+        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Forum.default, {}), true];
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -235,7 +308,7 @@ function Roleplay({
             }
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
-            children: getIconForGame(game)
+            children: getIconAndStatusForGame(game)[0]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
             primary: t(game.replace(/roleplay-/, "").replace(/-/g, "_")),
             secondary: t(game.replace(/roleplay-/, "").replace(/-/g, "_") + "_description")
@@ -244,7 +317,10 @@ function Roleplay({
               checked: selectedExercises?.some(e => e.roleplayId === roleplay.roleplayId && e.game === game)
             })
           })]
-        }, `${roleplay.roleplayId}-${game}-${index}`)), useCase === "assignment-view" || useCase === "assignment-start" ? games.map(game => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
+        }, `${roleplay.roleplayId}-${game}-${index}`)), useCase === "assignment-view" || useCase === "assignment-start" ? games.map(game => getIconAndStatusForGame(game)[1] &&
+        /*#__PURE__*/
+        // eslint-disable-next-line react/jsx-key
+        (0, _jsxRuntime.jsxs)(_material.ListItemButton, {
           onClick: () => {
             useCase === "assignment-start" ? addSearchParams(game.replace(/roleplay-/, "")) : null;
           },
@@ -258,14 +334,20 @@ function Roleplay({
             }
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
-            children: getIconForGame(game)
+            children: getIconAndStatusForGame(game)[0]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
             primary: t(game.replace(/roleplay-/, "").replace(/-/g, "_")),
             secondary: t(game.replace(/roleplay-/, "").replace(/-/g, "_") + "_description")
-          }), useCase === "assignment-start" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayCircleOutline.default, {
-              color: "primary"
-            })
+          }), useCase === "assignment-start" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InProgressBadge, {
+              roleplayProgress: topicProgress,
+              t: t,
+              gameName: game
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressBadge, {
+              completions: memberCourseCompletions,
+              t: t,
+              gameName: game
+            })]
           })]
         })) : null]
       })
@@ -281,6 +363,10 @@ function AssignmentRoleplaySelection({
   selectedExercises,
   useCase,
   assignment,
+  memberCourseCompletions,
+  topicProgress,
+  topics,
+  isCreator,
   lastClickedExerciseId
 }) {
   const [isRoleplaySelected, setIsRoleplaySelected] = (0, _react.useState)(false);
@@ -295,6 +381,10 @@ function AssignmentRoleplaySelection({
     selectedExercises: selectedExercises,
     useCase: useCase,
     assignment: assignment,
+    memberCourseCompletions: memberCourseCompletions,
+    topicProgress: topicProgress,
+    topics: topics,
+    isCreator: isCreator,
     lastClickedExerciseId: lastClickedExerciseId
   }, index));
 }

package/dist/Assignments/AssignmentSelectExercise/AssignmentSelectExercise.js

@@ -22,7 +22,11 @@ function AssignmentSelectExercise({
   useCase,
   selectedExercises = [],
   setSelectedExercises,
-  setSubmittedExercises
+  setSubmittedExercises,
+  completions,
+  preferred_username,
+  progressHelpers,
+  memberCourseCompletions
 }) {
   const [isExerciseSelected, setIsExerciseSelected] = (0, _react.useState)(false);
   const handleSelectExercise = (exercises = []) => {
@@ -71,7 +75,11 @@ function AssignmentSelectExercise({
         useCase: useCase,
         selectedExercises: selectedExercises,
         handleSelectExercise: useCase === "assignment-select" ? handleSelectExercise : null,
-        viewOnly: false
+        viewOnly: false,
+        completions: completions,
+        preferred_username: preferred_username,
+        progressHelpers: progressHelpers,
+        memberCourseCompletions: memberCourseCompletions
       })
     })]
   });

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -60,7 +60,7 @@ function CreateAssignmentDialog({
   const {
     classes
   } = useStyles();
-  const [selectedExercises, setSelectedExercises] = (0, _react.useState)([]);
+  const [selectedExercises, setSelectedExercises] = (0, _react.useState)(initialData.exercises ? initialData.exercises : []);
   const [submittedExercises, setSubmittedExercises] = (0, _react.useState)(initialData.exercises ? initialData.exercises : []);
   const [members, setMembers] = (0, _react.useState)([]);
   const [assignment, setAssignment] = (0, _react.useState)({

package/dist/Lists/CourseOutline/CourseOutline.js

@@ -30,24 +30,12 @@ var _FileCopy = _interopRequireDefault(require("@mui/icons-material/FileCopy"));
 var _ImageSearch = _interopRequireDefault(require("@mui/icons-material/ImageSearch"));
 var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _OndemandVideo = _interopRequireDefault(require("@mui/icons-material/OndemandVideo"));
+var _ColorLinearProgress = _interopRequireDefault(require("../../Misc/ColorLinearProgress/ColorLinearProgress"));
 var _index = require("../../utils/index");
 var _SelectClassroom = _interopRequireDefault(require("../../Dialogs/SelectClassroom/SelectClassroom"));
 var _CardElements = require("../../Cards/CardElements");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ColorLinearProgress = (0, _mui.withStyles)(_material.LinearProgress, theme => ({
-  root: {
-    height: 8,
-    borderRadius: 4,
-    border: `1px solid ${theme.palette.success.main}`
-  },
-  colorPrimary: {
-    backgroundColor: (0, _styles.alpha)(theme.palette.success.light, 0.25)
-  },
-  barColorPrimary: {
-    backgroundColor: theme.palette.success.main
-  }
-}));
 const useStyles = (0, _mui.makeStyles)()(theme => ({
   root: {
     width: "100%"
@@ -546,7 +534,7 @@ function Topic({
                 flexGrow: 1,
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
                   title: `Completed ${completion.completed} / ${completion.total} exercises`,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorLinearProgress, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorLinearProgress.default, {
                     variant: "determinate",
                     value: completion.percentage
                   })
@@ -1285,7 +1273,7 @@ function CourseOutline({
             ml: 6,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
               title: `Completed ${completed} / ${total} exercises`,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorLinearProgress, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorLinearProgress.default, {
                 variant: "determinate",
                 value: percentage
               })

package/dist/Lists/Exercises/Exercises.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.InProgressBadge = InProgressBadge;
+exports.ProgressBadge = ProgressBadge;
 exports.default = exports.UnStyledComponent = void 0;
 var _react = require("react");
 var _reactRouterDom = require("react-router-dom");

package/dist/Misc/ColorLinearProgress/ColorLinearProgress.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _mui = require("tss-react/mui");
+var _system = require("@mui/system");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ProgressBar = (0, _mui.withStyles)(_material.LinearProgress, theme => ({
+  root: {
+    height: 8,
+    borderRadius: 4,
+    border: `1px solid ${theme.palette.success.main}`
+  },
+  colorPrimary: {
+    backgroundColor: (0, _system.alpha)(theme.palette.success.light, 0.25)
+  },
+  barColorPrimary: {
+    backgroundColor: theme.palette.success.main
+  }
+}));
+function ColorLinearProgress({
+  value,
+  variant
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressBar, {
+    variant: variant,
+    value: value
+  });
+}
+var _default = exports.default = ColorLinearProgress;

package/dist/Misc/ColorLinearProgress/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "ColorLinearProgress",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./ColorLinearProgress.js"
+}

package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js

@@ -392,6 +392,8 @@ function Classroom({
   handleEditAssignment,
   getCourses,
   refreshAssignments,
+  progressHelpers,
+  preferred_username,
   isUserInternal,
   ...otherProps
 }) {
@@ -851,28 +853,6 @@ function Classroom({
         onClick: handleReturnToClassrooms
       })]
     }, `tab-content-courses`)
-  }, {
-    label: t("progress"),
-    disabled: !(isMember || isCreator) || isMember && isSubscriptionExpired,
-    id: "Progress",
-    TabContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      py: 1,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.default, {
-        t: t,
-        courses: courses,
-        members: members,
-        courseIds: courseIds,
-        fetchMemberCourseCompletions: fetchMemberCourseCompletions,
-        classroomId: classroomId,
-        memberId: !isCreator && username,
-        username: username,
-        getCourseSections: getCourseSections,
-        assignments: assignments,
-        submissions: submissionsTableData,
-        featureFlags: featureFlags,
-        isVideoChatEnabled: isVideoChatEnabled && isVideoChatEnabledInSettings
-      })
-    }, `tab-content-progress`)
   }, ...(isUserInternal && process.env.REACT_APP_STAGE === "dev" ? [{
     label: t("assignments"),
     disabled: isMember && isSubscriptionExpired,
@@ -896,7 +876,9 @@ function Classroom({
         handleEditAssignment: handleEditAssignment,
         getRoleplays: getRoleplays,
         getCourses: getCourses,
-        refreshAssignments: refreshAssignments
+        refreshAssignments: refreshAssignments,
+        progressHelpers: progressHelpers,
+        preferred_username: preferred_username
       })
     }, `tab-content-assignments`)
   }] : []), ...(isVideoChatEnabled && isNualangLiveEnabled && (isMember && isVideoChatEnabledInSettings || isCreator) ? [{
@@ -1036,7 +1018,29 @@ function Classroom({
         })
       })
     })
-  }] : []), ...(isCreator ? [{
+  }] : []), {
+    label: t("progress"),
+    disabled: !(isMember || isCreator) || isMember && isSubscriptionExpired,
+    id: "Progress",
+    TabContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      py: 1,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.default, {
+        t: t,
+        courses: courses,
+        members: members,
+        courseIds: courseIds,
+        fetchMemberCourseCompletions: fetchMemberCourseCompletions,
+        classroomId: classroomId,
+        memberId: !isCreator && username,
+        username: username,
+        getCourseSections: getCourseSections,
+        assignments: assignments,
+        submissions: submissionsTableData,
+        featureFlags: featureFlags,
+        isVideoChatEnabled: isVideoChatEnabled && isVideoChatEnabledInSettings
+      })
+    }, `tab-content-progress`)
+  }, ...(isCreator ? [{
     label: `${t("members")} (${members.length < 1000 ? members.length : "999+"})`,
     id: "Members",
     disabled: !(isMember || isCreator),

package/dist/Screens/Courses/ViewCourse/ViewTopic/ViewTopic.js

@@ -51,21 +51,9 @@ var _iconsMaterial = require("@mui/icons-material");
 var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
 var _FileCopy = _interopRequireDefault(require("@mui/icons-material/FileCopy"));
 var _logger = _interopRequireDefault(require("../../../../logger"));
+var _ColorLinearProgress = _interopRequireDefault(require("../../../../Misc/ColorLinearProgress/ColorLinearProgress"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ColorLinearProgress = (0, _mui.withStyles)(_LinearProgress.default, theme => ({
-  root: {
-    height: 8,
-    borderRadius: 4,
-    border: `1px solid ${theme.palette.success.main}`
-  },
-  colorPrimary: {
-    backgroundColor: (0, _styles.alpha)(theme.palette.success.light, 0.25)
-  },
-  barColorPrimary: {
-    backgroundColor: theme.palette.success.main
-  }
-}));
 const useStyles = (0, _mui.makeStyles)()(theme => ({
   root: {
     height: "100%",
@@ -1087,7 +1075,7 @@ function Topic({
         flexGrow: 1,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
           title: `Completed ${completed} / ${total} exercises`,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorLinearProgress, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorLinearProgress.default, {
             variant: "determinate",
             value: percentage
           })

package/dist/Tables/Progress/Progress.js

@@ -42,9 +42,6 @@ const TableToolbar = ({
   reportTypes,
   setReportType,
   reportType,
-  assignments,
-  selectedAssignment,
-  setSelectedAssignment,
   currentView
 }) => {
   const {
@@ -106,26 +103,6 @@ const TableToolbar = ({
         },
         children: reportFilterOptions
       })
-    }), reportType === "assignments" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
-      item: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
-        select: true,
-        id: "assignment",
-        name: t("assignment"),
-        "data-cy": "assignment",
-        label: t("assignment"),
-        value: selectedAssignment?.assignmentId,
-        onChange: e => setSelectedAssignment(assignments.find(a => a.assignmentId === e.target.value)),
-        margin: "dense",
-        variant: "outlined",
-        sx: {
-          minWidth: 250
-        },
-        children: assignments.map((assignment, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-          value: assignment.assignmentId,
-          children: t(assignment.title)
-        }, `assignment_${idx}`))
-      })
     }), reportType !== "discuss" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
       item: true,
       mt: 0.5,
@@ -218,11 +195,6 @@ function Progress({
       setBots(selectedTopic?.bots);
     }
   }, [selectedTopic]);
-  (0, _react.useEffect)(() => {
-    if (!selectedAssignment && assignments && assignments.length) {
-      setSelectedAssignment(assignments[0]);
-    }
-  }, [selectedAssignment, assignments]);
   const courseSectionsQueries = useQueries({
     queries: (courses || []).map(({
       courseId
@@ -259,6 +231,15 @@ function Progress({
       window.history.pushState(null, "", newRelativePathQuery);
     }
   };
+  const deleteAssignmentId = () => {
+    if ("URLSearchParams" in window) {
+      const searchParams = (0, _utils2.searchStringToObj)(window.location.search);
+      delete searchParams["assignmentId"];
+      setSelectedAssignment(null);
+      const newRelativePathQuery = window.location.pathname + "?" + (0, _utils2.objToSearchString)(searchParams) + window.location.hash;
+      window.history.pushState(null, "", newRelativePathQuery);
+    }
+  };
   (0, _react.useEffect)(() => {
     if ("URLSearchParams" in window) {
       const searchParams = (0, _utils2.searchStringToObj)(window.location.search);
@@ -308,8 +289,6 @@ function Progress({
       }
       if (selectedAssignment) {
         searchParams["assignmentId"] = selectedAssignment.assignmentId;
-      } else {
-        delete searchParams["assignmentId"];
       }
       if (selectedCourse) {
         searchParams["courseId"] = selectedCourse.courseId;
@@ -356,8 +335,10 @@ function Progress({
     currentView = "assignment-roleplay";
   } else if (reportType === "assignments" && selectedTopic) {
     currentView = "assignment-topic";
-  } else if (reportType === "assignments") {
+  } else if (reportType === "assignments" && selectedAssignment) {
     currentView = "assignment-topics";
+  } else if (reportType === "assignments") {
+    currentView = "assignments";
   } else if (selectedCourse && selectedSection && selectedTopic && selectedRoleplay) {
     currentView = "roleplay";
   } else if (selectedCourse && selectedSection && selectedTopic) {
@@ -476,9 +457,6 @@ function Progress({
         reportTypes: reportTypes,
         setReportType: setReportType,
         reportType: reportType,
-        assignments: assignments,
-        selectedAssignment: selectedAssignment,
-        setSelectedAssignment: setSelectedAssignment,
         currentView: currentView
       }), reportType === "discuss" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
         container: true,
@@ -511,6 +489,7 @@ function Progress({
         currentView: currentView,
         selectedCourse: selectedCourse,
         deleteCourseId: deleteCourseId,
+        deleteAssignmentId: deleteAssignmentId,
         setSelectedCourse: setSelectedCourse,
         selectedSection: selectedSection,
         setSelectedSection: setSelectedSection,
@@ -519,6 +498,8 @@ function Progress({
         selectedRoleplay: selectedRoleplay,
         setSelectedRoleplay: setSelectedRoleplay,
         selectedAssignment: selectedAssignment,
+        setSelectedAssignment: setSelectedAssignment,
+        assignments: assignments,
         courses: coursesWithSections,
         members: classroomMembers,
         courseIds: courseIds,
@@ -545,9 +526,6 @@ function Progress({
       reportTypes: reportTypes,
       setReportType: setReportType,
       reportType: reportType,
-      assignments: assignments,
-      selectedAssignment: selectedAssignment,
-      setSelectedAssignment: setSelectedAssignment,
       currentView: currentView
     }), reportType === "discuss" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
       container: true,
@@ -583,6 +561,7 @@ function Progress({
       currentView: currentView,
       selectedCourse: selectedCourse,
       deleteCourseId: deleteCourseId,
+      deleteAssignmentId: deleteAssignmentId,
       setSelectedCourse: setSelectedCourse,
       selectedSection: selectedSection,
       setSelectedSection: setSelectedSection,
@@ -591,6 +570,8 @@ function Progress({
       selectedRoleplay: selectedRoleplay,
       setSelectedRoleplay: setSelectedRoleplay,
       selectedAssignment: selectedAssignment,
+      setSelectedAssignment: setSelectedAssignment,
+      assignments: assignments,
       courses: coursesWithSections,
       members: classroomMembers,
       fetchMemberCourseCompletions: fetchMemberCourseCompletions,

package/dist/Tables/Progress/ProgressList.js

@@ -659,7 +659,7 @@ function ProgressList({
           sx: () => ({
             fontWeight: "bold"
           }),
-          children: t("student_progress")
+          children: t("courses")
         })
       }), currentView === "course" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListSubheader.default, {
         component: "div",
@@ -691,7 +691,7 @@ function ProgressList({
               sx: {
                 fontWeight: "bold"
               },
-              children: t("student_progress")
+              children: t("courses")
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
               variant: "subtitle1",
               sx: {
@@ -731,7 +731,7 @@ function ProgressList({
               sx: {
                 fontWeight: "bold"
               },
-              children: [t("student_progress"), " | ", selectedCourse.courseName]
+              children: [t("courses"), " | ", selectedCourse.courseName]
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
               variant: "subtitle1",
               sx: {
@@ -771,7 +771,7 @@ function ProgressList({
               sx: {
                 fontWeight: "bold"
               },
-              children: [t("student_progress"), " | ", selectedCourse.courseName]
+              children: [t("courses"), " | ", selectedCourse.courseName]
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
               variant: "subtitle1",
               sx: {