feat: implement design for new CTM page #463

Faraz32123 · 2025-08-04T07:16:04Z

Ticket: TNL2-136
Implement design for new Course Team Management Page.

Course Team Bulk Management Page Design:
Complete Flow: ⬇️

Screen.Recording.2025-08-14.at.8.28.25.AM.mp4

In case if there are some errors for some course while updating the course roles: ⬇️

Screen.Recording.2025-08-13.at.6.49.05.PM.mov

Error(400, 500 etc) if any from update API: ⬇️

Screen.Recording.2025-08-13.at.5.24.45.PM.mov

Error(400, 500 etc) if any from get API: ⬇️

codecov · 2025-08-05T07:11:20Z

Codecov Report

❌ Patch coverage is 88.27434% with 53 lines in your changes missing coverage. Please review.
✅ Project coverage is 86.00%. Comparing base (4e29750) to head (479d5e4).

Files with missing lines	Patch %	Lines
...seTeamManagement/CourseTeamManagementIndexPage.jsx	0.00%	20 Missing ⚠️
src/CourseTeamManagement/utils.js	76.00%	9 Missing and 3 partials ⚠️
src/users/UserPage.jsx	82.60%	8 Missing ⚠️
.../CourseTeamManagement/CourseUpdatesErrorsAlert.jsx	0.00%	7 Missing ⚠️
src/CourseTeamManagement/CoursesChangesModal.jsx	95.23%	1 Missing and 1 partial ⚠️
src/CourseTeamManagement/OrgDropdownWithSearch.jsx	95.45%	2 Missing ⚠️
src/CourseTeamManagement/CoursesTable.jsx	99.27%	1 Missing ⚠️
src/supportHeader/Header.jsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #463      +/-   ##
==========================================
+ Coverage   85.94%   86.00%   +0.05%     
==========================================
  Files         185      197      +12     
  Lines        3879     4315     +436     
  Branches      959     1089     +130     
==========================================
+ Hits         3334     3711     +377     
- Misses        527      582      +55     
- Partials       18       22       +4

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Implement design for new Course Team Management Page, - This commit covers TNL2-310, TNL2-311, TNL2-312, TNL2-315 which offers a course team management table with get request intgeration and it provides add user to a course, delete user from a course & change role feature for a user in a course. - This also covers unit tests for above mentioned tickets.

This commit covers - TNL2-313 - Changes Confirmation Modal with all edge cases. - TNL2-314 - stop user with a popup from refreshing or navigation when having unsaved changes. - This also includes test coverage for the added code.

this commit includes - sorting improvement as now manual sorting handles numeric cases "test 5" < "test 15" and it is now case insensitive. - now course table is using course_id as unique key instead of run which wasn't unique as used in earlier commits

This commit covers TNL2-316 & TNL2-317, and - adds error modal incase of unsaved changes after update API is called. Which include custom Alert to show the modal. - It also include edge case handling for different cases and also updated the unit tests. - It also show an alert in case of backend error e.g. 500, 400, 401 etc - test coverage.

papphelix · 2025-08-18T09:20:57Z

src/CourseTeamManagement/CoursesChangesModal.jsx

+                courseName, number, runId, from, to,
+              }) => (
+                <p key={`role-${runId}`}>
+                  <span className="font-medium">{`${courseName} (${number} - ${runId}) ${from === 'instructor' ? 'Instructor' : 'Staff'} → ${to === 'instructor' ? 'Instructor' : 'Staff'}`}</span>


translation for this missing?

papphelix · 2025-08-18T09:21:53Z

src/CourseTeamManagement/CoursesChangesModal.jsx

+              labels={{
+                default: 'Save',
+                pending: 'Saving',
+                complete: 'Saved',


translations missing?

papphelix · 2025-08-18T09:25:34Z

src/CourseTeamManagement/CoursesTable.jsx

+      className="course-team-management-course-status-badge"
+      variant={value === 'active' ? 'success' : 'light'}
+    >
+      {value === 'active'


can we create cconstant file for all hardcoded strings, even for staff instructor,

papphelix · 2025-08-18T09:26:53Z

src/CourseTeamManagement/CoursesTable.jsx

+    const courseId = row.original.course_id;
+    const value = rowRoles[courseId];
+    // If role is 'null', default to staff for display only
+    const displayValue = value === 'null' ? 'staff' : value;


is null a string or there is value like that?

Nah, there isn't any 'null' value.
But I am changing null to 'null' str at the start. So that while sorting, 'null' which will be displayed as 'staff' stays together with 'staff' in case of ascending (Admin, null(string), staff) or descending(staff, null(string), admin) order.

Nothing to worry here as we have implemented custom sorting, so it was necessary!

papphelix · 2025-08-18T09:31:22Z

src/CourseTeamManagement/OrgDropdownWithSearch.jsx

+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {


use trim method, and use length 0 if that works

This doesn't apply here as we are only checking key press here.

papphelix · 2025-08-18T09:32:05Z

src/CourseTeamManagement/OrgDropdownWithSearch.jsx

+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {


use trim method, and use length 0 if that works

always create named function to reduce memory usage and useCallback should be used

same here, This comment doesn't apply here as we are only checking key press(enter/space) here.

papphelix · 2025-08-18T09:34:41Z

src/CourseTeamManagement/OrgDropdownWithSearch.jsx

+                {org === '' && <Icon src={Check} className="float-end" size="sm" />}
+              </div>
+            )}
+            {filteredChoices.map((choice) => (


add filteredChoices.length > 0 condition

This condition isn't required as map can handle empty arrays!

papphelix · 2025-08-18T09:36:44Z

src/CourseTeamManagement/TableActions.jsx

+            { value: '', label: messages.allCoursesFilterLabel },
+            { value: 'active', label: messages.activeCoursesFilterLabel },
+            { value: 'archived', label: messages.archivedCoursesFilterLabel },
+          ].map((option) => (


create a separate const instead of inline

I am not a fan of creating a const until it's not used twice.
But yes we can create 1 for this as it's written in multiline.

papphelix · 2025-08-18T09:37:46Z

src/CourseTeamManagement/TableActions.jsx

+          {[
+            { value: 'staff', label: messages.statusStaffFilterLabel },
+            { value: 'instructor', label: messages.statusAdminFilterLabel },
+          ].map((option) => (


create a const instead of inline

I am not a fan of creating a const until it's not used twice.
But yes we can create 1 for this as it's written in multiline.

papphelix · 2025-08-18T09:45:42Z

src/userMessages/Alert.jsx

        <div role="alert" className="flex-grow-1">
          {children}
        </div>
+        {dismissible && <Button variant="link" size="inline" className="dismiss-button" onClick={onDismiss}>Dismiss</Button>}


Shoudl we add button translations

In this commit, - localized missing strings - add constants for hardcoded values in constants.js file - add test coverage for AlertList

Faraz32123 · 2025-08-27T08:39:54Z

Closing this PR as we have no active maintainers for this repo to approve and merge this PR.

Faraz32123 force-pushed the feat/course_team_management branch from 4ac4bea to 7e8fb58 Compare August 5, 2025 07:07

Faraz32123 force-pushed the feat/course_team_management branch 8 times, most recently from d8747aa to 7d4e522 Compare August 5, 2025 13:41

Faraz32123 force-pushed the feat/course_team_management branch 4 times, most recently from cc89a7f to 862d04a Compare August 11, 2025 11:22

feat: implement UI+save functionality on CTM page

1609703

This commit covers - TNL2-313 - Changes Confirmation Modal with all edge cases. - TNL2-314 - stop user with a popup from refreshing or navigation when having unsaved changes. - This also includes test coverage for the added code.

Faraz32123 force-pushed the feat/course_team_management branch from 0f63c14 to 1609703 Compare August 11, 2025 13:05

Faraz32123 force-pushed the feat/course_team_management branch 4 times, most recently from d64ecf1 to 3262996 Compare August 13, 2025 16:21

Faraz32123 force-pushed the feat/course_team_management branch from 3262996 to f2dfd8c Compare August 14, 2025 03:12

Faraz32123 marked this pull request as ready for review August 14, 2025 04:06

Faraz32123 requested review from djoseph-apphelix, jristau1984, papphelix, pganesh-apphelix and rayzhou-bit August 14, 2025 04:07

Faraz32123 requested a review from brian-smith-tcril August 14, 2025 04:07

refactor: move inline styling class-based styles

f3cbda9

Faraz32123 requested a review from adamstankiewicz August 18, 2025 05:45

papphelix reviewed Aug 18, 2025

View reviewed changes

Faraz32123 force-pushed the feat/course_team_management branch 5 times, most recently from a1a0567 to 17baefe Compare August 18, 2025 12:11

refactor: localize missing strings & add constants

479d5e4

In this commit, - localized missing strings - add constants for hardcoded values in constants.js file - add test coverage for AlertList

Faraz32123 force-pushed the feat/course_team_management branch from 17baefe to 479d5e4 Compare August 18, 2025 12:16

Faraz32123 requested a review from papphelix August 18, 2025 12:24

papphelix approved these changes Aug 18, 2025

View reviewed changes

Faraz32123 requested review from AfaqShuaib09, hamza-56, jesperhodge, katrinan029, kiram15 and zawan-ila August 19, 2025 07:44

Faraz32123 mentioned this pull request Aug 27, 2025

Feat/course team management edx/frontend-app-support-tools#1

Merged

Faraz32123 closed this Aug 27, 2025

feat: implement design for new CTM page #463

feat: implement design for new CTM page #463

Uh oh!

Conversation

Faraz32123 commented Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Aug 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Faraz32123 commented Aug 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Faraz32123 commented Aug 4, 2025 •

edited

Loading

codecov bot commented Aug 5, 2025 •

edited

Loading