CSC/ECE 517 Fall 2025 - E2556 Assign Reviewer and Create Teams

From Expertiza_Wiki
Jump to navigation Jump to search

Background

Expertiza is an open-source project that was made to manage classes and assignments for CSC/ECE 517. Currently, it is being rebuilt with Ruby on Rails as the backend and React as the frontend. The original project allowed for the course admin to manage things such as teams or reviewers on assignments. However, the old implementation of the project was not built to standard and was purely Ruby on Rails, so a reimplementation was initiated. This reimplementation was done using TypeScript, which meant that the old pages needed to be redone in a new format according to best practices.

Problem Description

Since reimplementation needed to be done, the Assign Reviewer and Create Teams pages were assigned to our team to recreate in Typescript. On top of recreating this page, we needed to add cosmetic changes to improve the format and increase the readability. The requested changes included decreasing the width of the tables, adding a toggle for names/usernames, moving mentors to the team line, and other cosmetic changes.

How to Access the Pages

1. Log in with these credentials: admin/password123

2. Navigate to Manage -> Assignments

3. Click the "Edit" button for any assignment

4. Click on the "etc" tab

5 Choose either Create Teams or Assign Reviewers

What We Did

Assign Reviewers Page

Old Page

New Page

Description

  • Assignment ID Parsing: Implemented robust parsing logic to extract the assignment ID from the URL path or query string.
  • Local Persistence: Reviewer assignments, teams, users, and responses are stored in localStorage under a unique key. This allows page refreshes without losing progress.
  • Demo Data Loader: Added a button to seed demo data with teams, mentors, members, and sample reviewers. This helps test functionality without backend calls.
  • Reviewer Management:
    • Add a reviewer by specifying a user_id
    • Delete individual reviewers
    • Delete all outstanding reviewers for a team
    • "Unsubmit" a submitted review to reset its state
  • Dynamic Status Tracking: For each reviewer, the system shows whether their review is Not saved, Saved, or Submitted based on the most recent response.
  • UI Enhancements:
    • Replaced raw HTML tables with Bootstrap’s table table-striped for consistency
    • Centered the table and ensured it only stretches to content width
    • Styled alerts (alert-info, alert-danger) to highlight page state
    • Adjusted text line-height and layout to prevent clipping and improve readability

Future Running

This page is not connected to the backend currently. The following functions will need to be changed to do such:

  • onAddReviewer
  • onDeleteReviewer
  • onUnsubmit
  • onDeleteAll

Create Teams Page

Old Page

New Page

Description

Purpose: Manage teams for an assignment/course—create, edit, copy, import/export, and organize members.

Toolbar (text-only):

    • Create team, Import teams, Export teams, Delete all teams, Copy teams to course, Copy teams from course, Back
    • Styled as links with pipes (no icons), per style guide.

Username/Name Toggle: Switch to show either usernames or full names; labels update dynamically (Showing usernames / Showing names).

Teams Table (carded layout):

    • Header columns: Details | Actions
    • Expand/collapse per team (caret) to reveal members.
    • Mentor shown inline as “(Mentor)”; dedicated button to Remove mentor.
    • Members rendered as compact chips; each chip includes a delete icon to remove from team.

Actions (icons only where required):

    • Add member (person-add icon)
    • Delete team (delete icon)
    • Edit team name (pencil icon)
    • Member removal uses the delete icon on the chip.

Modals:

    • Add member: Select from unassigned list and append to the chosen team.
    • Edit team name: Update team name and propagate to each member’s teamName.
    • Create team: Enter name, prevent duplicates, and create an empty team.
    • Copy teams to/from course: Stub dialogs for selecting a source/destination (wire to backend later).

Import/Export (JSON):

    • Import: Reads a JSON file with { teams, unassigned }; filters out already-assigned members by ID.
    • Export: Downloads current state as prettified JSON for portability or debugging.

State Management:

    • React hooks for teams, unassigned, expanded rows, and modal visibility.
    • Derived helpers via useMemo/useCallback to avoid unnecessary re-renders.
    • Stable utilities (e.g., normalize team names, mentor/member matching).

Demo Data Fallback: If no loader data is provided, seeds sensible demo teams, mentors, and students for local testing.

Accessibility & UX:

    • Buttons and chips include aria-label and helpful title text.
    • Confirm dialog for “Delete all teams” to prevent destructive mistakes.
    • Empty states (e.g., “No students yet.”, “All students are on a team.”).

Typography & Styling (per PDF):

    • Standard text: 13px / 30px; Table data: 15px / 1.428em; Subheadings: 1.2em / 18px; Page heading larger for hierarchy.
    • Clean card frame with subtle borders/shadows; team rows in light khaki; consistent chip styling.
    • Toolbar uses brown link color with pipe separators to match legacy look.

Separation of Concerns:

    • Presentation styles centralized in reusable constants; logic kept in small, named handlers.
    • Small presentational helpers: <Icon />, <ToolbarLink />, <MentorRemovalButton />.

Future Running

Currently, this page is accessible from the Assignments page, but no such connection exists for Courses. In the future, courses will need to add the ability to access this page.

This page doesn't take in assignment or course info currently. It has the capability to through loader functionality. A Loader for Assignments and for Courses might need to be created to feed the information to this page. Currently, the page expects the loader data to be formatted like this:

  • contextType: ContextType;
  • contextName: string;
  • initialTeams: Team[];
  • initialUnassigned: Participant[];

Lastly, this page is not connected to the backend currently. The following functions will need to be changed to do such:

  • addToTeam
  • removeFromTeam
  • removeMentor
  • saveEdit
  • deleteTeam
  • createTeam
  • deleteAllTeams
  • copyTeamsToCourse
  • copyTeamsFromCourse
  • onImportFile

Testing

Test Framework and Structure

Our testing leverages the React Testing Library alongside Jest to write unit tests. These tools allow us to render pages, assert that the page is constructed correctly, and that the page functions correctly.

For this project, we created two testing files:

1. AssignReviewers.test.tsx: Unit testing for the rendering and functionality of the Assign Reviewers page.

2. CreateTeams.test.tsx: Unit testing for the rendering and functionality of the Create Teams page.

AssignReviewer.test.tsx (src/pages/)

AssignReviewer Rendering Tests

1. Check that the AssignReviewer page is rendered and the headers of the table are rendered correctly.

3. Check that all of the information in the Contributor Column is rendered correctly. Dynamically checks each row.

4. Check that all of the information in the Reviewed By Column is rendered correctly. Dynamically checks each row.

AssignReviewer Functional Tests

1. Test that assigning a reviewer to a team's submission works correctly.

CreateTeams.test.tsx (src/pages)

CreateTeams Rendering Tests

1. Checks that the page is rendered correctly when an assignment calls it.

2. Checks that the page is rendered correctly when a course calls it.

3. Checks that the table containing all of the teams is rendered correctly.

4. Checks that the "Students without teams" tab is rendered correctly.

CreateTeams Functional Tests

1. Tests that adding a student to a Team works correctly.

2. Tests that editing a team's name works correctly.

3. Tests that removing a team works correctly

4. Tests that removing a mentor from a team works correctly

5. Tests that removing a student from a team works correctly

6. Tests that show all unassigned users

CreateTeams Error Tests

1. Tests that when an empty name is entered while editing a team's name, the edit does not go through.

Steps to Run all tests

To run the tests, simply run this command in the root of the project: 

npm test

Steps To Run The Project

Prerequisites

  • Have Node.js installed.

Steps

1. npm install : Install the dependencies listed in the package.json into the folder node_modules

2. npm start : Run the application.


Running Considerations

There are a number of things we did during our implementation to make sure our environment ran smoothly.

1. Overrode our typescript version in package.json. The NPM project wouldn't start without this override, since there were conflicting versions of TypeScript used by different packages.

2. Upgraded React Testing Library version: (^13.4.0) -> (^15.0.6). The old version gave errors when trying to run code that could be fixed by updating this package. This allowed our tests to be able to run in the current version of React.

3. To get the backend to run with this project as well, we had to re-migrate and re-seed the database


Team

Mentor

  • Ed Gehringer

Members

  • Ananya Rao (arrao3)
  • Taylor Brown (tjbrown8)
  • Camille Jones (crjone24)
Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2025_-_E2556_Assign_Reviewer_and_Create_Teams&oldid=166911"