CSC/ECE 517 Fall 2024 - E2467. UI for View Submissions

This page contains information about Expertiza Issue E2467. UI for View Submissions which was a project in CSC517 Fall 2024.

Please see below for a description of the design of the project.

Background

Expertiza is an open source project based on Ruby on Rails framework. Using this program instructors can create and mange assignments. It also allows the instructor to create a list of topics the students can sign up for. Students can form teams in Expertiza to work on their projects and assignments together. After submission has been closed students can be allowed access to other teams submissions so they can peer review. Expertiza is currently being reimplemented with the frontend being remade in typescript and the backend being updated to improve usability and efficiency.

Requirements

• Create an updated version of the view submissions page and history page which were previously made with ruby in typescript using react.
• Make sure that all links that were in the previous view direct to the correct view even if that view doesn't exist yet.
• Create extensive test cases for the new views.

Implementation

Main files which were added/edited are

Views:

• src/pages/Submissions/SubmissionHistoryView.tsx
• src/pages/Submissions/SubmissionView.tsx
• src/pages/Submissions/SubmissionsView.tsx
• src/pages/Submissions/SubmissionTable/SubmissionEntry.tsx
• src/pages/Submissions/SubmissionTable/SubmissionList.tsx

Misc:

• src/App.tsx

Details:

• For the submission list rather than having a long list that goes down the whole page we have instead implemented a paginator. This was done too have a more organized view that uses an already created react component to allow for easier customization and changes.
• The main commit for the submission view can be found here - [1]
• The main commit for the history view can be found here - [2]
• Since backend for submissions and history is not yet implemented in the reimplementation dummy data was used to test the functionality of the code. This is an example of how the mock data was created.

const fetchSubmissions = async () => {
     const date = new Date(Date.parse('04 Dec 2021 00:12:00 GMT'));
     const data = Array.from({ length: 23 }, (_, i) => {
       const id = i + 1;
       const teamNumber = 38121 + i;
       const assignmentNumber = (i % 5) + 1;
       const studentCount = (i % 3) + 1;
       const currentDate = new Date(new Date().setDate(date.getDate() + i));
     
       const members = Array.from({ length: studentCount }, (_, j) => ({
         name: `Student ${10000 + i * 10 + j}`,
         id: 10000 + i * 10 + j,
       }));
     
       const links = [
         { url: `https://github.com/example/repo${id}`, displayName: "GitHub Repository" },
         { url: `http://example.com/submission${id}`, displayName: "Submission Link" },
       ];
     
       const fileInfo = [
         {
           name: `README.md`,
           size: `${(Math.random() * 15 + 10).toFixed(1)} KB`,
           dateModified: formatDate(currentDate),
         },
       ];
     
       return {
         id,
         teamName: `Anonymized_Team_${teamNumber}`,
         assignment: `Assignment ${assignmentNumber}`,
         members,
         links,
         fileInfo,
       };
     });

Test Plan

Manual Testing

First login to the system using an admin account.

Next click on the assignments button on the navbar at the top of the screen.

Now you have been navigated to the submissions view which shows all submissions along with who they were assigned to and other information about each submission. This area should be filled with the mock data that was created.

Finally you can click on the history link for any of the submissions to be navigated to the file upload history for that submission which should be currently filled with mock data.

Automated Testing

All test cases have been automated to make sure both correct data and formatting appear in the relevant areas.

Added test files:

• src/pages/Submissions/SubmissionHistoryView.test.tsx - 5 test cases
• src/pages/Submissions/SubmissionsView.test.tsx - 3 test cases
• src/pages/Submissions/SubmissionTable/SubmissionEntry.test.tsx - 2 test cases
• src/pages/Submissions/SubmissionTable/SubmissionList.test.tsx - 3 test cases

Future Scope

1. Once backend of submissions is implemented create api calls to retrieve data rather and remove mock data temporary solution.
2. Create other views that are connected to this page such as view reviews, assign grade and student view.

Team Members

1. Chris Kastritis (crkastri@ncsu.edu)
2. Mark Feng (mjfeng@ncsu.edu)
3. Mason Horne (mjhorne2@ncsu.edu)

Mentor: Prathima Putreddy Niranjana (pniranj@ncsu.edu)

Code Details

Github Pull Request - https://github.com/expertiza/reimplementation-front-end/pull/57

Repo - https://github.com/masonhorne/reimplementation-front-end