CSC/ECE 517 Fall 2024 - E2488 Reimplementation of Add TA to course

From Expertiza_Wiki
Jump to navigation Jump to search

Introduction

The Expertiza project is an open-source, Ruby on Rails-based platform designed to facilitate peer reviews, enabling students to learn from each other. The platform serves faculty and students for managing courses, assignments, and peer evaluations. The management screens in Expertiza provide essential information on users, courses, assignments, questionnaires, and reviews. The project’s goal is to make the course and assignment management process more efficient while improving the user experience for both instructors and students.This document outlines design improvements for the course management application, focusing on the management of Teaching Assistants (TAs) and interface modifications for the course pages. The document will walk through both front-end and back-end updates, including interface changes, TA search functionality, error handling, and the addition of multiple TAs to a course.

Problem Statement

The current TA management and course pages lack several functionalities, resulting in usability issues. Specifically:

  • Course Interface: The interface requires rearrangement of elements, better iconography, and enhanced user interactions.
  • TA Management: The TA assignment process needs improved filtering, error handling and assigning users as a TA for a course.
  • Backend TA Handling: The backend API requires updates to accurately handle TA assignments, role changes, and validations.

Current Implementation

  • Course Management: Includes a course list with an actions column for editing, deletion, and user management.
  • TA Management: TA addition is handled through add_ta in courses_controller.rb, which currently uses incorrect parameters.
  • TA Utility: The TAUtils.ts manages TA addition in the frontend, but lacks error differentiation and does not limit TA suggestions to unassigned users only.

Issue with Current Implementation

  • Interface Usability: The course management page lacks an intuitive layout and functionality for managing TAs.
  • Parameter Mismatch: Backend add_ta method incorrectly uses ta_id, causing issues with TA assignments.
  • Limited TA Assignment: The backend and frontend do not currently support assigning multiple TAs at once, and all users, regardless of current assignment, are displayed.
  • Error Handling: No specific error messaging is provided for TA assignment failures.

Overview of Updates

Front-End Enhancements

  • Manage Courses Page:
    • Replaced the "Manage Users" icon for intuitive user association.
    • Added hover tooltips on action buttons (Edit, Delete, Assign TA, Copy).
    • Added ColumnButton UI component for Button with Tooltips. This component can be extended in other components and can act as a wrapper.
    • Relocated the Delete button to the end for better UX flow.

height=200px

  • Manage TAs Page:
    • Displayed a message, "No TAs assigned currently," in the absence of TA assignments.
    • Updated the button with an improved icon and tooltip.

  • Add TAs Page:
    • Introduced a TA search by name functionality.
    • Shows an error popup with separated title and error details.
    • Confirmation if a student is selected to be added as a TA to convert the users role to TA.

Backend Enhancements

  • Controller Modification:
    • Updated add_ta in courses_controller.rb to use params[:id] instead of params[:ta_id].
    • User Retrieval: The code now fetches the user based on the user_id parameter (params[:user_id]) instead of ta_id, which means it is no longer using params[:ta_id] for the user lookup.
    • Error Handling: If the user doesn't exist, an error message indicating the invalid user_id is returned.

High-Level System Overview

The following diagram illustrates the high-level architecture of the system, showcasing the interaction flow between the frontend and backend components involved in adding TAs to a course.

High-Level Request Flow:

  • User Interaction: The instructor interacts with the frontend (via a web interface).
  • Frontend Requests: The frontend sends an API request to the backend with the selected TA and course details.
  • Backend Processing: The backend validates the TA or User, assigns roles, and creates TA mappings between the user and the course.
  • Response to Frontend: Success or error responses are sent back to the frontend, where they are displayed to the user.

Detailed Flow Description:

  • 1. User Interaction (Frontend):
    • The instructor selects a TA or students and submits the form to add them to a specific course.
  • Frontend API Call:
    • A GET request is sent to the backend API at /courses/:id/add_tas, including the user_id (IDs of the TAs to be added).
  • Backend Processing:
    • Controller: The backend courses_controller.rb processes the request.
      • The backend checks if the provided TAs are valid (exist in the system and are not already assigned).
      • Each TA’s role is updated to TEACHING_ASSISTANT in the users table.
      • A new entry in the TaMapping table is created, associating the TA with the course.
  • Database Update (Backend Models):
    • TaMapping Table: A new mapping is added to associate the user (TA) with the course.
    • User Table: The role of the user is updated to TEACHING_ASSISTANT to reflect the new responsibilities.
  • Response:
    • If successful, the backend returns a 200 OK status, and the frontend updates the UI to reflect the changes.
    • If any errors occur (e.g., invalid TA or duplicate assignment), the backend returns a 400 Bad Request response with error details.
  • UI Update:
    • The frontend receives the response and updates the UI, either displaying a success message or showing the appropriate error message.
  • UML Diagram:

Test Plan

  • UI Testing:
    • Verify course page modifications (icon and button placements).
    • Confirm TA search and dropdown limitations.
    • Validate successful addition and error messaging for single and multiple TA assignments.
    • Unit test cases written in Jest - This code contains a set of unit tests for the `ColumnButton` component in a React application, using `@testing-library/react` and `jest`. It mocks components from the `react-bootstrap` library, such as `Button`, `Tooltip`, and `OverlayTrigger`, to simplify the tests without relying on the actual library. The tests check the behavior of the `ColumnButton` component by verifying its functionality under different conditions. First, it ensures that the `onClick` function is called when the button is clicked. The second test checks that a tooltip is rendered when the `tooltip` prop is provided, while the third test confirms that the tooltip is not rendered when the `tooltip` prop is undefined. These tests ensure the component behaves correctly with respect to user interaction and conditional rendering of the tooltip.

UML Diagrams

  • High-Level System Architecture:
    • Show interaction flow between the frontend, courses_controller, and course.rb model.
  • TA Addition Sequence Diagram:
    • Depict the sequence for assigning multiple TAs and handling responses.

Project Mentor

  • Devansh Shah (dshah8@ncsu.edu)

Team Members

  • Makarand Pundlik (mpundli@ncsu.edu)
  • Anurag Gorkar (adgorkar@ncsu.edu)
  • Rutvik Kulkarni (rvkulkar@ncsu.edu)

References

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2488_Reimplementation_of_Add_TA_to_course&oldid=160375"