CSC/ECE 517 Spring 2026 - E2603. Implement ViewSubmissions frontend

View Submissions Page – E2603

Overview

This feature implements the View Submissions page for the Expertiza reimplementation. It allows instructors to view all team submissions for a given assignment, displaying each team's name, member information, and (in future iterations) submitted links and files.

This work spans both the front-end and back-end repositories:

• Front-end PR: reimplementation-front-end #157
• Back-end PR: reimplementation-back-end #312

---

Back-End Changes

New API Endpoint: GET /assignments/:id/view_submissions

A new action, view_submissions, was added to AssignmentsController. This endpoint accepts an assignment ID and returns a JSON payload containing the assignment's metadata and a list of all team submissions.

Route added (config/routes.rb):

get '/:id/view_submissions', action: :view_submissions

Controller action (app/controllers/assignments_controller.rb):

The action performs the following steps:

1. Finds the assignment by the provided :id. Returns a 404 error if not found.
2. Iterates over all teams associated with the assignment.
3. For each team, fetches member details (full name and email) via the teams_users association.
4. Returns a structured JSON response containing the assignment ID, assignment name, and an array of submission objects.

Response structure:

{
  "assignment_id": 1,
  "assignment_name": "Assignment 1",
  "submissions": [
    {
      "id": 10,
      "team_id": 10,
      "team_name": "Team Alpha",
      "members": [
        {
          "full_name": "Jane Doe",
          "github": "",
          "email": "jdoe@example.com"
        }
      ],
      "links": [],
      "files": []
    }
  ]
}

Note: links and files are included as empty arrays in this initial implementation, laying the groundwork for future submission artifact support.

---

Front-End Changes

Example of view submissions page

New Component: ViewSubmissions.tsx

A new React component was created at src/pages/Assignments/ViewSubmissions.tsx. This component:

• Reads the assignment ID from the URL parameters via React Router.
• Fetches submission data from the back-end API endpoint GET /assignments/:id/view_submissions.
• Displays the assignment name as a page header.
• Renders a table listing each team and its members, including their name and email.
• Handles loading and error states gracefully.

Tests: ViewSubmissions.test.tsx

A test file was created at src/pages/Assignments/__tests__/ViewSubmissions.test.tsx to cover the component's behavior, including rendering with mocked API responses.

.gitignore Update

A minor addition was made to .gitignore to exclude the /dist build output directory.

---

Files Changed

Repository	File	Change
Back-end	app/controllers/assignments_controller.rb	Added view_submissions action (+32 lines)
Back-end	config/routes.rb	Registered new GET route
Front-end	src/pages/Assignments/ViewSubmissions.tsx	New component
Front-end	src/pages/Assignments/__tests__/ViewSubmissions.test.tsx	New test file
Front-end	.gitignore	Added /dist

---

Design Notes

• The github field in the member object is currently returned as an empty string. This is a placeholder for a future integration with GitHub profile links.
• links and files arrays are scaffolded but not yet populated; these represent submission artifacts to be implemented in a subsequent iteration.
• The back-end follows existing Expertiza controller conventions, using render json: with appropriate HTTP status codes.

---

Final Project Overview

To further iterate on the OSS project, we will:

• Update implementation to utilize the Submitted Content Controller
• Ensure proper handling of file/ link uploads
• Update submissions page to display all files/ links uploaded
• Make uploaded files/ links clickable/ downloadable

Problem Statements

• Connecting Submitted Content Controller with current front-end TypeScript
• Allow student to upload, delete, and view submitted files through submitted content controller
• Allow admin to view submitted files
• Test that submitted content controller pulls files properly through a GET api call

Implementation

Problem	Design Goals
assignments_controller is currently being used to get information and display view submissions page This should be running through submitted_content_controller as it is meant to handle all submitted content being displayed.	Connecting Submitted Content Controller with current front-end TypeScript
	Test that submitted content controller pulls files properly through a GET api call

submitted_content_controller will be updated with a new GET call similar to what already exists in assignments_controller

Old Code

New Code

# GET /assignments/:id/view_submissions def view_submissions assignment = Assignment.find_by(id: params[:id]) return render json: { error: "Assignment not found" }, status: :not_found if assignment.nil? submissions = assignment.teams.map do |team| members = team.teams_users.includes(:user).map do |tu| user = tu.user { full_name: user&.full_name, github: "", email: user&.email } end { id: team.id, team_id: team.id, team_name: team.name, members: members, links: [], files: [] } end render json: { assignment_id: assignment.id, assignment_name: assignment.name, submissions: submissions }, status: :ok end

TBD

Test Plan

• Test files call from submitted_content_controller and are linked to be downloadable
• Test links call from submitted_content_controller and are linked

Team

Mentor

• Ed Gehringer

Members

• Cameron Bhatnagar
• Reece McArthur

Links

Pull Request: [TBD Expertiza Pull Request #]