Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T02:58:51Z

Skalyan3: /* Introduction */

== Introduction ==

Expertiza is an open-source Ruby on Rails platform designed to facilitate peer learning by allowing students to create and submit assignments, review one another’s work, and collaborate on projects. One of its core features is the Participants interface: a tab linked directly to each Assignment that displays who is enrolled, their roles (e.g. student, reviewer, instructor), and allows administrators or instructors to add, edit, or remove participants.

=== Project Goals ===
The two goals of this project are

1. Seamless Frontend-Backend Integration

*Replace static stub data with real API calls to the Rails ParticipantsController, ensuring every CRUD operation (Create, Read, Update, Delete) happens in real time and reflects immediately in the UI.

*Implement proper loading states, retries, and error displays so users know exactly when an action is in progress or has failed.

2. Modernized, Consistent UI

*Rework the Participants table using React, TypeScript, SCSS/CSS Modules, and React-Bootstrap components to match the latest Expertiza design guidelines such as typography, spacing, color schemes.

*Add advanced table features—client-side sorting, server-driven filtering, and pagination controls so that instructors can efficiently navigate hundreds of participants.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 600px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 600px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 600px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 600px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 600px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 600px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 600px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 600px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 600px]]

=== Update Frontend UI ===

==== Problems ====
1. Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

Solution

As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025- E2540 After-participant-list-2.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|600px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|600px]]

2. Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

Solution

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|600px]]

3. Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

Solution

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|600px]]

4. Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

Solution

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|600px]]

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025- E2540 Font-size-test.png | 600px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/j8TTvYDc-3w here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [https://github.com/expertiza/reimplementation-front-end/pull/101].

You can find the changes made in the Backend of this project project through [https://github.com/expertiza/reimplementation-back-end/pull/201].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T02:58:35Z

Skalyan3: /* Introduction */

== Introduction ==

Expertiza is an open-source Ruby on Rails platform designed to facilitate peer learning by allowing students to create and submit assignments, review one another’s work, and collaborate on projects. One of its core features is the Participants interface: a tab linked directly to each Assignment that displays who is enrolled, their roles (e.g. student, reviewer, instructor), and allows administrators or instructors to add, edit, or remove participants.

=== Project Goals ===
The two goals of this project are

1. Seamless Frontend-Backend Integration

*Replace static stub data with real API calls to the Rails ParticipantsController, ensuring every CRUD operation (Create, Read, Update, Delete) happens in real time and reflects immediately in the UI.

*Implement proper loading states, retries, and error displays so users know exactly when an action is in progress or has failed.

Modernized, Consistent UI

*Rework the Participants table using React, TypeScript, SCSS/CSS Modules, and React-Bootstrap components to match the latest Expertiza design guidelines such as typography, spacing, color schemes.

*Add advanced table features—client-side sorting, server-driven filtering, and pagination controls so that instructors can efficiently navigate hundreds of participants.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 600px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 600px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 600px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 600px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 600px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 600px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 600px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 600px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 600px]]

=== Update Frontend UI ===

==== Problems ====
1. Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

Solution

As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025- E2540 After-participant-list-2.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|600px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|600px]]

2. Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

Solution

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|600px]]

3. Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

Solution

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|600px]]

4. Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

Solution

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|600px]]

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025- E2540 Font-size-test.png | 600px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/j8TTvYDc-3w here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [https://github.com/expertiza/reimplementation-front-end/pull/101].

You can find the changes made in the Backend of this project project through [https://github.com/expertiza/reimplementation-back-end/pull/201].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T02:54:56Z

Skalyan3: /* Introduction */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives. The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

Project Goals
There are 2 main goals for this project -

Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 600px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 600px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 600px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 600px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 600px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 600px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 600px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 600px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 600px]]

=== Update Frontend UI ===

==== Problems ====
1. Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

Solution

As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025- E2540 After-participant-list-2.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|600px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|600px]]

2. Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

Solution

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|600px]]

3. Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

Solution

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|600px]]

4. Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

Solution

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|600px]]

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025- E2540 Font-size-test.png | 600px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/j8TTvYDc-3w here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [https://github.com/expertiza/reimplementation-front-end/pull/101].

You can find the changes made in the Backend of this project project through [https://github.com/expertiza/reimplementation-back-end/pull/201].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T02:42:23Z

Skalyan3: /* Problems */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 600px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 600px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 600px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 600px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 600px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 600px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 600px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 600px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 600px]]

=== Update Frontend UI ===

==== Problems ====
1. Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

Solution

As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025- E2540 After-participant-list-2.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|600px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|600px]]

2. Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

Solution

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|600px]]

3. Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

Solution

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|600px]]

4. Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

Solution

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|600px]]

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025- E2540 Font-size-test.png | 600px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/j8TTvYDc-3w here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [https://github.com/expertiza/reimplementation-front-end/pull/101].

You can find the changes made in the Backend of this project project through [https://github.com/expertiza/reimplementation-back-end/pull/201].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T02:41:52Z

Skalyan3: /* Problem */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 600px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 600px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 600px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 600px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 600px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 600px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 600px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 600px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 600px]]

=== Update Frontend UI ===

==== Problems ====
1. Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

Solution

As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025- E2540 After-participant-list-2.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|600px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|600px]]

2. Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

Solution

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|600px]]

3. Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

Solution

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|600px]]

4. Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

Solution

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|600px]]

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025- E2540 Font-size-test.png | 600px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/j8TTvYDc-3w here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [https://github.com/expertiza/reimplementation-front-end/pull/101].

You can find the changes made in the Backend of this project project through [https://github.com/expertiza/reimplementation-back-end/pull/201].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T02:41:32Z

Skalyan3: /* Update Frontend UI */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 600px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 600px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 600px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 600px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 600px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 600px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 600px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 600px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 600px]]

=== Update Frontend UI ===

==== Problem ====
1. Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

Solution

As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025- E2540 After-participant-list-2.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|600px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|600px]]

2. Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

Solution

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|600px]]

3. Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

Solution

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|600px]]

4. Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

Solution

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|600px]]

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025- E2540 Font-size-test.png | 600px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/j8TTvYDc-3w here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [https://github.com/expertiza/reimplementation-front-end/pull/101].

You can find the changes made in the Backend of this project project through [https://github.com/expertiza/reimplementation-back-end/pull/201].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T02:40:18Z

Skalyan3: /* Update Frontend UI */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 600px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 600px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 600px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 600px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 600px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 600px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 600px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 600px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 600px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

Solution

As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025- E2540 After-participant-list-2.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|600px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|600px]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

Solution

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|600px]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

Solution

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|600px]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

Solution

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|600px]]

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025- E2540 Font-size-test.png | 600px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/j8TTvYDc-3w here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [https://github.com/expertiza/reimplementation-front-end/pull/101].

You can find the changes made in the Backend of this project project through [https://github.com/expertiza/reimplementation-back-end/pull/201].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T02:18:29Z

Skalyan3: /* Pull Requests */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 600px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 600px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 600px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 600px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 600px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 600px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 600px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 600px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 600px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025- E2540 After-participant-list-2.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|600px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|600px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|600px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|600px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|600px]]

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025- E2540 Font-size-test.png | 600px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/j8TTvYDc-3w here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [https://github.com/expertiza/reimplementation-front-end/pull/101].

You can find the changes made in the Backend of this project project through [https://github.com/expertiza/reimplementation-back-end/pull/201].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:20:26Z

Skalyan3: /* UI Tests */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 600px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 600px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 600px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 600px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 600px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 600px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 600px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 600px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 600px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|600px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|600px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|600px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|600px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|600px]]

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 600px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:19:39Z

Skalyan3: /* Implemented Changes */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 600px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 600px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 600px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 600px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 600px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 600px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 600px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 600px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 600px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|600px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|600px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|600px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|600px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|600px]]

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:18:50Z

Skalyan3: /* Implemented Changes */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 600px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 600px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 600px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 600px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 600px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 600px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 600px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 600px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 600px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|600px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|600px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|600px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|600px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|600px]]

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:17:54Z

Skalyan3: /* Manage Participant Frontend Integration */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 500px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 600px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 600px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 600px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 600px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 600px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:16:05Z

Skalyan3: /* Add/Edit/Remove Participants */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:15:28Z

Skalyan3: /* Technologies */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Backend: Ruby on Rails, ActiveRecord ORM, MySQL, JWT-based authentication

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:13:02Z

Skalyan3: /* 2. Backend */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:12:42Z

Skalyan3: /* 2. Backend */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====
The backend is implemented in Ruby on Rails (API mode), leveraging convention-over-configuration, the ActiveRecord ORM, and RESTful routing to provide rapid scaffolding, consistent database migrations, and built-in testing—resulting in a secure, maintainable, and robust service layer.

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:11:14Z

Skalyan3: /* 2. Backend */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:10:52Z

Skalyan3: /* Styling and UI */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.
* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

This backend design provides a clean, secure, and performant foundation for the React frontend to manage participants, while keeping the API surface minimal and well-documented.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:10:23Z

Skalyan3: /* Main Table Component: */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

======Main Table Component ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Component=====
*Represent individual units of data such as one Assignment participant entry or one review entry.
*Contain contextual actions like Delete, Edit, Confirm, Submit.
*Includes modal triggers or dynamic tooltips.

====2. Backend ====

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

This backend design provides a clean, secure, and performant foundation for the React frontend to manage participants, while keeping the API surface minimal and well-documented.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:09:39Z

Skalyan3: /* Main Table Component: */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

Row Components:
Represent individual units of data such as one Assignment participant entry or one review entry.
Contain contextual actions like Delete, Edit, Confirm, Submit.
Includes modal triggers or dynamic tooltips.

====2. Backend ====

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

This backend design provides a clean, secure, and performant foundation for the React frontend to manage participants, while keeping the API surface minimal and well-documented.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:08:11Z

Skalyan3: /* Styling and UI */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

====2. Backend ====

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

This backend design provides a clean, secure, and performant foundation for the React frontend to manage participants, while keeping the API surface minimal and well-documented.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:07:28Z

Skalyan3: /* 4. Backend */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====2. Backend ====

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

This backend design provides a clean, secure, and performant foundation for the React frontend to manage participants, while keeping the API surface minimal and well-documented.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:07:17Z

Skalyan3: /* 2. State Management */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

This backend design provides a clean, secure, and performant foundation for the React frontend to manage participants, while keeping the API surface minimal and well-documented.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:06:46Z

Skalyan3: /* 1. Frontend */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

==== Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

====4. Backend ====

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

This backend design provides a clean, secure, and performant foundation for the React frontend to manage participants, while keeping the API surface minimal and well-documented.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:06:31Z

Skalyan3: /* 3. Styling and UI */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

====4. Backend ====

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

This backend design provides a clean, secure, and performant foundation for the React frontend to manage participants, while keeping the API surface minimal and well-documented.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:06:20Z

Skalyan3: /* 1. Frontend */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

This backend design provides a clean, secure, and performant foundation for the React frontend to manage participants, while keeping the API surface minimal and well-documented.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T01:05:35Z

Skalyan3: /* 4. Backend */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

=====Framework & API Style=====

*Built as a Ruby on Rails API, using RESTful routes under /participants.

*All endpoints return JSON and follow standard HTTP status codes (200 for success, 401/403 for auth failures, 404 for missing records, 422 for validation errors).

=====Data Modeling & Validation=====

* Participant model links User, Assignment, and Role (each as a belongs_to).

* Validates presence of each foreign key and uniqueness of the (assignment_id, user_id) pair to prevent duplicate entries.

=====Authentication & Authorization=====

*Uses token-based authentication so only logged-in users can call the API.

*Public endpoints are skipped from auth checks but all /participants actions enforce a valid token.

*Role-based guards ensure that only instructors or super-admins can add, edit, or delete participants.

This backend design provides a clean, secure, and performant foundation for the React frontend to manage participants, while keeping the API surface minimal and well-documented.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T00:59:04Z

Skalyan3: /* Authentication & Authorization */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

=====Models & Validations=====

Participant:

*belongs_to :assignment, :user, and :role.

*Validates presence of all three foreign keys and uniqueness of assignment_id, user_id to prevent duplicates.

*Role, User, and Assignment models expose minimal JSON via ActiveModelSerializers so the frontend can render names, handles, and role labels without additional lookup.

=====Authentication & Authorization:=====

*Uses a custom JWT-based Authorization concern injected into ApplicationController.

*skip_before_action :authorize_request, only: [:login] on AuthenticationController#login to allow credential exchange

*All /participants routes require a valid token; unauthorized requests return 401.

*Role-based checks in a has_privileges_of? method (in authorization.rb) ensure only Super Administrators or Instructors for that assignment can add, edit, or delete participants.

This backend design ensures a secure, performant, and well-tested API that cleanly surfaces exactly the data the React frontend needs, supports pagination for large classes, and enforces role-based permissions at every step.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T00:58:28Z

Skalyan3: /* Authentication & Authorization */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

=====Models & Validations=====

Participant:

*belongs_to :assignment, :user, and :role.

*Validates presence of all three foreign keys and uniqueness of assignment_id, user_id to prevent duplicates.

*Role, User, and Assignment models expose minimal JSON via ActiveModelSerializers so the frontend can render names, handles, and role labels without additional lookup.

=====Authentication & Authorization=====

*Uses a custom JWT-based Authorization concern injected into ApplicationController.

*skip_before_action :authorize_request, only: [:login] on AuthenticationController#login to allow credential exchange

*All /participants routes require a valid token; unauthorized requests return 401.

*Role-based checks in a has_privileges_of? method (in authorization.rb) ensure only Super Administrators or Instructors for that assignment can add, edit, or delete participants.

This backend design ensures a secure, performant, and well-tested API that cleanly surfaces exactly the data the React frontend needs, supports pagination for large classes, and enforces role-based permissions at every step.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T00:58:08Z

Skalyan3: /* 4. Backend */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

=====Models & Validations=====

Participant:

*belongs_to :assignment, :user, and :role.

*Validates presence of all three foreign keys and uniqueness of assignment_id, user_id to prevent duplicates.

*Role, User, and Assignment models expose minimal JSON via ActiveModelSerializers so the frontend can render names, handles, and role labels without additional lookup.

=====Authentication & Authorization=====

*Uses a custom JWT-based Authorization concern injected into ApplicationController.

*skip_before_action :authorize_request, only: [:login] on AuthenticationController#login to allow credential exchange
.

*All /participants routes require a valid token; unauthorized requests return 401.

*Role-based checks in a has_privileges_of? method (in authorization.rb) ensure only Super Administrators or Instructors for that assignment can add, edit, or delete participants.

This backend design ensures a secure, performant, and well-tested API that cleanly surfaces exactly the data the React frontend needs, supports pagination for large classes, and enforces role-based permissions at every step.

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T00:19:11Z

Skalyan3: /* Design Principles */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

Must add relevant for Backend here

== Design Goals ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T00:19:00Z

Skalyan3: /* Design Principles */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

Must add relevant for Backend here

== Design Principles ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles like DRY to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T00:18:35Z

Skalyan3: /* Design principles */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

Must add relevant for Backend here

== Design Principles ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles (e.g., SRP, DRY) to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2

2025-04-23T00:18:00Z

Skalyan3: /* Design Principles */

== Introduction ==
Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review. This project provides the tools necessary for an instructor to manage courses and assignments, for which students can be assigned to teams and submit assignments. After submission, peer assessment allows for students to give feedback to each other, facilitating critical thinking and learning. Both the frontend and backend of Expertiza are currently going through reimplementations. In particular, the frontend is being developed in Typescript.

== Problem Statement ==
Expertiza is an open-source project, so many developers contribute to the project, and often with differing design choices. This UI project aims to provide more consistency between different pages and tools. In particular, the focus is on the Submissions and Courses pages, and subsequent pages/modals. The changes should reduce visual clutter and provide consistency between UI, making the interface much easier to use.

== Functional Requirements ==

==== Overall Requirements ====

====== Merging Past Pull Requests ======
The UI changes that were changed in this project are done on top of three pull requests of the frontend reimplementation project, and thus, the tasks of this project were separated in accordance to these pull requests. These pull requests were [https://github.com/expertiza/reimplementation-front-end/pull/70 UI for Courses], [https://github.com/expertiza/reimplementation-front-end/pull/72 Reimplement add TA], and [https://github.com/expertiza/reimplementation-front-end/pull/57 UI for View Submissions].

====== UI Design Guidelines ======
This project follows design guidelines shown in this document. All tables need to use the prebuilt Table component. This Table component uses a Pagination component, which allows users to select different pages of a table. However, this Pagination component should only be visible if there are more than one page. Another important guideline is the text formatting. Headings should follow camel case capitalization, while other text should capitalize only the first letter of the first word. Most changes done in this project are made to adhere to this guideline. Finally, the icons, buttons, and notifications all needed to follow particular styles provided in the design document.

====== Non-task Specific Requirements ======
There are some requirements that are applied to components used by all three tasks.
* Pagination should only be visible if there is more than one page of entries.
* The Table component needs to include a “disableGlobalFilter” option

==== Task 1 Requirements ====
Task 1 deals with the UI changes needed for UI for Courses. All of these changes are done to the Courses page.
* The page’s header needs to be updated to follow text formatting guidelines.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The date format used for the “Creation date” and “Updated date” should show the user’s local time and should not show seconds and milliseconds.
* The button for creating a course should be red, and contain the text “Create Course”.
* Confirmation buttons should be red.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.
* Note: Manage TAs is part of task 2

==== Task 2 Requirements ====
Task 2 deals with the UI changes needed for Reimplement add TA. All of these changes are done to the Manage TAs modal of the Courses page.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The button for adding a TA should be updated.
* Confirmation buttons should be red.
* Error notification should use the Alert component.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.

==== Task 3 Requirements ====
Task 3 deals with the UI changes needed for UI for View Submissions.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* Text labels should follow non-header capitalization guidelines.
* Submission History should also follow the same guidelines

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one TA entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

== Design principles ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

== Implementation Details ==

==== Task 1 ====

Manage Courses

Original UI

[[File:E2523-task-1-course-before.png|800px]]

Reimplemented UI

[[File:E2523-task-1-courses-after.png|800px]]

No pagination if there is only one page in the reimplemented UI:

[[File:E2523-task-1-courses-after-no-pagination.png|800px]]

Code snippet:

Global filter span in the Table component changed:

[[File: Tablespanchange.png|500px]]

This code snippet was added to allow the global filter to be disabled via a "disableGlobalFilter" option of the Table component.

==== Task 2 ====

Manage TA modal

Original UI

[[File:Manage-ta-before.png|800px]]

Reimplemented UI

[[File:E2523-TAmodal_after.png|800px]]

Add TA modal

Original UI

[[File:E2523-task-2-manage-ta-add-before.png|800px]]

Reimplemented UI

[[File:E2523-Manage-ta-add-after.png|800px]]

Add TA alert

Original UI

[[File:E2523-Old-alert.png|800px]]

Reimplemented UI

[[File:E2523-alert-after.png|800px]]

Code Snippet:

Icon change for adding TA:

[[File:E2523-Code_snippets_for_icons_-a.png|500px]]

This code snippet shows the updated button in the Manage TA modal of the Courses page.

Alert messages change:

[[File:E2523-alerts.png|400px]]

This code snippet shows the new Alert component that is consistent with the design guidelines.

==== Task 3 ====

Submissions Table

Original UI

[[File:E2523-Submission-before.png|800px]]

Reimplemented UI

[[File:Task3subafter.png|800px]]

Submissions History Table

Original UI

[[File:E2523-Submission-history-before.png|800px]]

Reimplemented UI

[[File:Task3subhistafter.png|800px]]

Navbar

Original UI

[[File:E2523-Navbar-before.png|500px]]

Reimplemented UI

[[File:Task3navbarafter.png|200px]]

Code Snippet:

New Table:

[[File:Task3-Code-Table.png|1000px]]

This code snippet shows the options used for the Table component that is in line with the design guidelines. In particular, both the global and column filters are disabled, and the table data uses the correct font size and line height.

New Navbar:

[[File:Codenavbar.png|400px]]

The Submissions page was incorrectly named "Assignment" in the navigation bar, so now it has been moved into the Manage dropdown.

== Demo Video ==
Please find the demo video going over the features at https://youtu.be/hhPBc9CfjSs

== List of Changes ==

==== Non-task Specific ====

* src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
* src/components/Table/Table.tsx - Updated table component to include a "disableGlobalFilter" option

==== Task 1 ====

* src/pages/Courses/Courses.tsx - Updated text, table, and button formatting
* src/pages/Courses/CourseColumns.tsx - Updated text and table formatting
* src/pages/Courses/CourseCopy.tsx - Updated text and button formatting
* src/pages/Courses/CourseDelete.tsx - Updated text and button formatting
* src/pages/Courses/CourseEditor.tsx - Updated text and button formatting

==== Task 2 ====

* /src/pages/TA/TA.tsx - Updated Icon, text and button formatting
* /src/pages/TA/TAColumns.tsx - Updated Icon
* /src/pages/TA/TAEditor.tsx - Updated Icon, button, text and warning message formatting
* /src/pages/TA/TADelete.tsx - Updated button formatting

==== Task 3 ====
* /src/pages/Submissions/SubmissionsView.tsx - Added new Table component. Updated text and button formatting

* /src/pages/Submissions/SubmissionsHistoryView.tsx - Added new Table component. Updated text and button formatting.

* /src/pages/Submissions/SubmissionsTable/SubmissionsEntry.tsx - Added new Table component. Updated text and button formatting.

* /src/pages/Submissions/SubmissionsTable/SubmissionsList.tsx - Added new Table component. Updated text and button formatting.

* /src/layout/Header.tsx - Removed the Assignments tab to add the Submissions tab under Manage.

== Pull Request ==

You can find the changes made in this project through [https://github.com/expertiza/reimplementation-front-end/pull/93 this pull request].

== Conclusion ==
The enhancements implemented in this project have greatly improved the UI consistency, usability, and maintainability of the Expertiza platform. By reworking outdated components and aligning them with modern design guidelines, we ensured a cleaner, more user-friendly experience across different user roles.
The following pull requests were central to our reimplementation work:
* https://github.com/expertiza/reimplementation-front-end/pull/70
* https://github.com/expertiza/reimplementation-front-end/pull/72
* https://github.com/expertiza/reimplementation-front-end/pull/57
These PRs focused on restructuring table components, refining modal behavior, updating icons, enhancing accessibility, and ensuring overall alignment with the Expertiza design system. We successfully completed all assigned features and UI refinements while strictly adhering to the Expertiza design guidlines provided. This included updates to typography, spacing, component styling, and standardized interactions across the application.

== Future Scope ==
* Enhancing TA UX: Improve user experience with editing and managing TAs.

* Backend Implementation/Integration of Submissions and Submissions History: Currently, the Submissions page uses mock data, as the backend is currently not developed.

* Implementation of Deleting TAs: While out of the scope of this project, the past project did not implement the deletion of TAs, so that feature is currently not available.

* More Robust Logging: With more standardized logging, the debugging process could be streamlined, as useful information can be shown in the console.

== Relevant Links ==
* https://github.com/expertiza/reimplementation-front-end/pull/70
* https://github.com/expertiza/reimplementation-front-end/pull/72
* https://github.com/expertiza/reimplementation-front-end/pull/57
* https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2461._UI_and_Backend_for_Courses
* https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2488_Reimplementation_of_Add_TA_to_course
* https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2467._UI_for_View_Submissions

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Team Members ==
* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2

2025-04-23T00:16:44Z

Skalyan3: /* Design Principles */

== Introduction ==
Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review. This project provides the tools necessary for an instructor to manage courses and assignments, for which students can be assigned to teams and submit assignments. After submission, peer assessment allows for students to give feedback to each other, facilitating critical thinking and learning. Both the frontend and backend of Expertiza are currently going through reimplementations. In particular, the frontend is being developed in Typescript.

== Problem Statement ==
Expertiza is an open-source project, so many developers contribute to the project, and often with differing design choices. This UI project aims to provide more consistency between different pages and tools. In particular, the focus is on the Submissions and Courses pages, and subsequent pages/modals. The changes should reduce visual clutter and provide consistency between UI, making the interface much easier to use.

== Functional Requirements ==

==== Overall Requirements ====

====== Merging Past Pull Requests ======
The UI changes that were changed in this project are done on top of three pull requests of the frontend reimplementation project, and thus, the tasks of this project were separated in accordance to these pull requests. These pull requests were [https://github.com/expertiza/reimplementation-front-end/pull/70 UI for Courses], [https://github.com/expertiza/reimplementation-front-end/pull/72 Reimplement add TA], and [https://github.com/expertiza/reimplementation-front-end/pull/57 UI for View Submissions].

====== UI Design Guidelines ======
This project follows design guidelines shown in this document. All tables need to use the prebuilt Table component. This Table component uses a Pagination component, which allows users to select different pages of a table. However, this Pagination component should only be visible if there are more than one page. Another important guideline is the text formatting. Headings should follow camel case capitalization, while other text should capitalize only the first letter of the first word. Most changes done in this project are made to adhere to this guideline. Finally, the icons, buttons, and notifications all needed to follow particular styles provided in the design document.

====== Non-task Specific Requirements ======
There are some requirements that are applied to components used by all three tasks.
* Pagination should only be visible if there is more than one page of entries.
* The Table component needs to include a “disableGlobalFilter” option

==== Task 1 Requirements ====
Task 1 deals with the UI changes needed for UI for Courses. All of these changes are done to the Courses page.
* The page’s header needs to be updated to follow text formatting guidelines.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The date format used for the “Creation date” and “Updated date” should show the user’s local time and should not show seconds and milliseconds.
* The button for creating a course should be red, and contain the text “Create Course”.
* Confirmation buttons should be red.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.
* Note: Manage TAs is part of task 2

==== Task 2 Requirements ====
Task 2 deals with the UI changes needed for Reimplement add TA. All of these changes are done to the Manage TAs modal of the Courses page.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The button for adding a TA should be updated.
* Confirmation buttons should be red.
* Error notification should use the Alert component.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.

==== Task 3 Requirements ====
Task 3 deals with the UI changes needed for UI for View Submissions.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* Text labels should follow non-header capitalization guidelines.
* Submission History should also follow the same guidelines

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one TA entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

== Design Principles ==
 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles (e.g., SRP, DRY) to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Implementation Details ==

==== Task 1 ====

Manage Courses

Original UI

[[File:E2523-task-1-course-before.png|800px]]

Reimplemented UI

[[File:E2523-task-1-courses-after.png|800px]]

No pagination if there is only one page in the reimplemented UI:

[[File:E2523-task-1-courses-after-no-pagination.png|800px]]

Code snippet:

Global filter span in the Table component changed:

[[File: Tablespanchange.png|500px]]

This code snippet was added to allow the global filter to be disabled via a "disableGlobalFilter" option of the Table component.

==== Task 2 ====

Manage TA modal

Original UI

[[File:Manage-ta-before.png|800px]]

Reimplemented UI

[[File:E2523-TAmodal_after.png|800px]]

Add TA modal

Original UI

[[File:E2523-task-2-manage-ta-add-before.png|800px]]

Reimplemented UI

[[File:E2523-Manage-ta-add-after.png|800px]]

Add TA alert

Original UI

[[File:E2523-Old-alert.png|800px]]

Reimplemented UI

[[File:E2523-alert-after.png|800px]]

Code Snippet:

Icon change for adding TA:

[[File:E2523-Code_snippets_for_icons_-a.png|500px]]

This code snippet shows the updated button in the Manage TA modal of the Courses page.

Alert messages change:

[[File:E2523-alerts.png|400px]]

This code snippet shows the new Alert component that is consistent with the design guidelines.

==== Task 3 ====

Submissions Table

Original UI

[[File:E2523-Submission-before.png|800px]]

Reimplemented UI

[[File:Task3subafter.png|800px]]

Submissions History Table

Original UI

[[File:E2523-Submission-history-before.png|800px]]

Reimplemented UI

[[File:Task3subhistafter.png|800px]]

Navbar

Original UI

[[File:E2523-Navbar-before.png|500px]]

Reimplemented UI

[[File:Task3navbarafter.png|200px]]

Code Snippet:

New Table:

[[File:Task3-Code-Table.png|1000px]]

This code snippet shows the options used for the Table component that is in line with the design guidelines. In particular, both the global and column filters are disabled, and the table data uses the correct font size and line height.

New Navbar:

[[File:Codenavbar.png|400px]]

The Submissions page was incorrectly named "Assignment" in the navigation bar, so now it has been moved into the Manage dropdown.

== Demo Video ==
Please find the demo video going over the features at https://youtu.be/hhPBc9CfjSs

== List of Changes ==

==== Non-task Specific ====

* src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
* src/components/Table/Table.tsx - Updated table component to include a "disableGlobalFilter" option

==== Task 1 ====

* src/pages/Courses/Courses.tsx - Updated text, table, and button formatting
* src/pages/Courses/CourseColumns.tsx - Updated text and table formatting
* src/pages/Courses/CourseCopy.tsx - Updated text and button formatting
* src/pages/Courses/CourseDelete.tsx - Updated text and button formatting
* src/pages/Courses/CourseEditor.tsx - Updated text and button formatting

==== Task 2 ====

* /src/pages/TA/TA.tsx - Updated Icon, text and button formatting
* /src/pages/TA/TAColumns.tsx - Updated Icon
* /src/pages/TA/TAEditor.tsx - Updated Icon, button, text and warning message formatting
* /src/pages/TA/TADelete.tsx - Updated button formatting

==== Task 3 ====
* /src/pages/Submissions/SubmissionsView.tsx - Added new Table component. Updated text and button formatting

* /src/pages/Submissions/SubmissionsHistoryView.tsx - Added new Table component. Updated text and button formatting.

* /src/pages/Submissions/SubmissionsTable/SubmissionsEntry.tsx - Added new Table component. Updated text and button formatting.

* /src/pages/Submissions/SubmissionsTable/SubmissionsList.tsx - Added new Table component. Updated text and button formatting.

* /src/layout/Header.tsx - Removed the Assignments tab to add the Submissions tab under Manage.

== Pull Request ==

You can find the changes made in this project through [https://github.com/expertiza/reimplementation-front-end/pull/93 this pull request].

== Conclusion ==
The enhancements implemented in this project have greatly improved the UI consistency, usability, and maintainability of the Expertiza platform. By reworking outdated components and aligning them with modern design guidelines, we ensured a cleaner, more user-friendly experience across different user roles.
The following pull requests were central to our reimplementation work:
* https://github.com/expertiza/reimplementation-front-end/pull/70
* https://github.com/expertiza/reimplementation-front-end/pull/72
* https://github.com/expertiza/reimplementation-front-end/pull/57
These PRs focused on restructuring table components, refining modal behavior, updating icons, enhancing accessibility, and ensuring overall alignment with the Expertiza design system. We successfully completed all assigned features and UI refinements while strictly adhering to the Expertiza design guidlines provided. This included updates to typography, spacing, component styling, and standardized interactions across the application.

== Future Scope ==
* Enhancing TA UX: Improve user experience with editing and managing TAs.

* Backend Implementation/Integration of Submissions and Submissions History: Currently, the Submissions page uses mock data, as the backend is currently not developed.

* Implementation of Deleting TAs: While out of the scope of this project, the past project did not implement the deletion of TAs, so that feature is currently not available.

* More Robust Logging: With more standardized logging, the debugging process could be streamlined, as useful information can be shown in the console.

== Relevant Links ==
* https://github.com/expertiza/reimplementation-front-end/pull/70
* https://github.com/expertiza/reimplementation-front-end/pull/72
* https://github.com/expertiza/reimplementation-front-end/pull/57
* https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2461._UI_and_Backend_for_Courses
* https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2488_Reimplementation_of_Add_TA_to_course
* https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2467._UI_for_View_Submissions

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Team Members ==
* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2

2025-04-23T00:16:07Z

Skalyan3: /* Design Principles */

== Introduction ==
Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review. This project provides the tools necessary for an instructor to manage courses and assignments, for which students can be assigned to teams and submit assignments. After submission, peer assessment allows for students to give feedback to each other, facilitating critical thinking and learning. Both the frontend and backend of Expertiza are currently going through reimplementations. In particular, the frontend is being developed in Typescript.

== Problem Statement ==
Expertiza is an open-source project, so many developers contribute to the project, and often with differing design choices. This UI project aims to provide more consistency between different pages and tools. In particular, the focus is on the Submissions and Courses pages, and subsequent pages/modals. The changes should reduce visual clutter and provide consistency between UI, making the interface much easier to use.

== Functional Requirements ==

==== Overall Requirements ====

====== Merging Past Pull Requests ======
The UI changes that were changed in this project are done on top of three pull requests of the frontend reimplementation project, and thus, the tasks of this project were separated in accordance to these pull requests. These pull requests were [https://github.com/expertiza/reimplementation-front-end/pull/70 UI for Courses], [https://github.com/expertiza/reimplementation-front-end/pull/72 Reimplement add TA], and [https://github.com/expertiza/reimplementation-front-end/pull/57 UI for View Submissions].

====== UI Design Guidelines ======
This project follows design guidelines shown in this document. All tables need to use the prebuilt Table component. This Table component uses a Pagination component, which allows users to select different pages of a table. However, this Pagination component should only be visible if there are more than one page. Another important guideline is the text formatting. Headings should follow camel case capitalization, while other text should capitalize only the first letter of the first word. Most changes done in this project are made to adhere to this guideline. Finally, the icons, buttons, and notifications all needed to follow particular styles provided in the design document.

====== Non-task Specific Requirements ======
There are some requirements that are applied to components used by all three tasks.
* Pagination should only be visible if there is more than one page of entries.
* The Table component needs to include a “disableGlobalFilter” option

==== Task 1 Requirements ====
Task 1 deals with the UI changes needed for UI for Courses. All of these changes are done to the Courses page.
* The page’s header needs to be updated to follow text formatting guidelines.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The date format used for the “Creation date” and “Updated date” should show the user’s local time and should not show seconds and milliseconds.
* The button for creating a course should be red, and contain the text “Create Course”.
* Confirmation buttons should be red.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.
* Note: Manage TAs is part of task 2

==== Task 2 Requirements ====
Task 2 deals with the UI changes needed for Reimplement add TA. All of these changes are done to the Manage TAs modal of the Courses page.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The button for adding a TA should be updated.
* Confirmation buttons should be red.
* Error notification should use the Alert component.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.

==== Task 3 Requirements ====
Task 3 deals with the UI changes needed for UI for View Submissions.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* Text labels should follow non-header capitalization guidelines.
* Submission History should also follow the same guidelines

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one TA entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

== Design Principles ==
 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

 Role-Based CRUD Operations: Implement precise role-based access control, allowing Admins and Instructors full CRUD permissions on assignment participants.

 Modular and Scalable Architecture: Structure the backend with modular components and adhere to design principles (e.g., SRP, DRY) to make the system maintainable and scalable, allowing for future extensions with minimal code duplication and impact on existing functionality.

== Implementation Details ==

==== Task 1 ====

Manage Courses

Original UI

[[File:E2523-task-1-course-before.png|800px]]

Reimplemented UI

[[File:E2523-task-1-courses-after.png|800px]]

No pagination if there is only one page in the reimplemented UI:

[[File:E2523-task-1-courses-after-no-pagination.png|800px]]

Code snippet:

Global filter span in the Table component changed:

[[File: Tablespanchange.png|500px]]

This code snippet was added to allow the global filter to be disabled via a "disableGlobalFilter" option of the Table component.

==== Task 2 ====

Manage TA modal

Original UI

[[File:Manage-ta-before.png|800px]]

Reimplemented UI

[[File:E2523-TAmodal_after.png|800px]]

Add TA modal

Original UI

[[File:E2523-task-2-manage-ta-add-before.png|800px]]

Reimplemented UI

[[File:E2523-Manage-ta-add-after.png|800px]]

Add TA alert

Original UI

[[File:E2523-Old-alert.png|800px]]

Reimplemented UI

[[File:E2523-alert-after.png|800px]]

Code Snippet:

Icon change for adding TA:

[[File:E2523-Code_snippets_for_icons_-a.png|500px]]

This code snippet shows the updated button in the Manage TA modal of the Courses page.

Alert messages change:

[[File:E2523-alerts.png|400px]]

This code snippet shows the new Alert component that is consistent with the design guidelines.

==== Task 3 ====

Submissions Table

Original UI

[[File:E2523-Submission-before.png|800px]]

Reimplemented UI

[[File:Task3subafter.png|800px]]

Submissions History Table

Original UI

[[File:E2523-Submission-history-before.png|800px]]

Reimplemented UI

[[File:Task3subhistafter.png|800px]]

Navbar

Original UI

[[File:E2523-Navbar-before.png|500px]]

Reimplemented UI

[[File:Task3navbarafter.png|200px]]

Code Snippet:

New Table:

[[File:Task3-Code-Table.png|1000px]]

This code snippet shows the options used for the Table component that is in line with the design guidelines. In particular, both the global and column filters are disabled, and the table data uses the correct font size and line height.

New Navbar:

[[File:Codenavbar.png|400px]]

The Submissions page was incorrectly named "Assignment" in the navigation bar, so now it has been moved into the Manage dropdown.

== Demo Video ==
Please find the demo video going over the features at https://youtu.be/hhPBc9CfjSs

== List of Changes ==

==== Non-task Specific ====

* src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
* src/components/Table/Table.tsx - Updated table component to include a "disableGlobalFilter" option

==== Task 1 ====

* src/pages/Courses/Courses.tsx - Updated text, table, and button formatting
* src/pages/Courses/CourseColumns.tsx - Updated text and table formatting
* src/pages/Courses/CourseCopy.tsx - Updated text and button formatting
* src/pages/Courses/CourseDelete.tsx - Updated text and button formatting
* src/pages/Courses/CourseEditor.tsx - Updated text and button formatting

==== Task 2 ====

* /src/pages/TA/TA.tsx - Updated Icon, text and button formatting
* /src/pages/TA/TAColumns.tsx - Updated Icon
* /src/pages/TA/TAEditor.tsx - Updated Icon, button, text and warning message formatting
* /src/pages/TA/TADelete.tsx - Updated button formatting

==== Task 3 ====
* /src/pages/Submissions/SubmissionsView.tsx - Added new Table component. Updated text and button formatting

* /src/pages/Submissions/SubmissionsHistoryView.tsx - Added new Table component. Updated text and button formatting.

* /src/pages/Submissions/SubmissionsTable/SubmissionsEntry.tsx - Added new Table component. Updated text and button formatting.

* /src/pages/Submissions/SubmissionsTable/SubmissionsList.tsx - Added new Table component. Updated text and button formatting.

* /src/layout/Header.tsx - Removed the Assignments tab to add the Submissions tab under Manage.

== Pull Request ==

You can find the changes made in this project through [https://github.com/expertiza/reimplementation-front-end/pull/93 this pull request].

== Conclusion ==
The enhancements implemented in this project have greatly improved the UI consistency, usability, and maintainability of the Expertiza platform. By reworking outdated components and aligning them with modern design guidelines, we ensured a cleaner, more user-friendly experience across different user roles.
The following pull requests were central to our reimplementation work:
* https://github.com/expertiza/reimplementation-front-end/pull/70
* https://github.com/expertiza/reimplementation-front-end/pull/72
* https://github.com/expertiza/reimplementation-front-end/pull/57
These PRs focused on restructuring table components, refining modal behavior, updating icons, enhancing accessibility, and ensuring overall alignment with the Expertiza design system. We successfully completed all assigned features and UI refinements while strictly adhering to the Expertiza design guidlines provided. This included updates to typography, spacing, component styling, and standardized interactions across the application.

== Future Scope ==
* Enhancing TA UX: Improve user experience with editing and managing TAs.

* Backend Implementation/Integration of Submissions and Submissions History: Currently, the Submissions page uses mock data, as the backend is currently not developed.

* Implementation of Deleting TAs: While out of the scope of this project, the past project did not implement the deletion of TAs, so that feature is currently not available.

* More Robust Logging: With more standardized logging, the debugging process could be streamlined, as useful information can be shown in the console.

== Relevant Links ==
* https://github.com/expertiza/reimplementation-front-end/pull/70
* https://github.com/expertiza/reimplementation-front-end/pull/72
* https://github.com/expertiza/reimplementation-front-end/pull/57
* https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2461._UI_and_Backend_for_Courses
* https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2488_Reimplementation_of_Add_TA_to_course
* https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2467._UI_for_View_Submissions

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Team Members ==
* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T00:12:43Z

Skalyan3: /* Conclusion */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

Must add relevant for Backend here

== Design principles ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

Must add relevant for Backend here

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-23T00:01:52Z

Skalyan3:

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

Must add relevant for Backend here

== Design principles ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

Must add relevant for Backend here

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-22T23:20:49Z

Skalyan3: /* Relevant Links */

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-22T22:51:36Z

Skalyan3: /* Implemented Changes */

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-22T22:47:34Z

Skalyan3: /* Implemented Changes */

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-22T22:45:33Z

Skalyan3: /* Implemented Changes */

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-22T22:45:05Z

Skalyan3:

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-22T22:42:05Z

Skalyan3:

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-22T22:36:20Z

Skalyan3: /* Relevant Links */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

Must add relevant for Backend here

== Design principles ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

Must add relevant for Backend here

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

Update the URLs of the API calls to properly integrate with the backend. There also needs to be logic to handle getting participants by user or by assignment.

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Implemented changes ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

=== Add/Edit/Remove Participants ===

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]



== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-22T22:28:44Z

Skalyan3: /* Update Frontend UI */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

Must add relevant for Backend here

== Design principles ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

Must add relevant for Backend here

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

Update the URLs of the API calls to properly integrate with the backend. There also needs to be logic to handle getting participants by user or by assignment.

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Implemented changes ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

=== Add/Edit/Remove Participants ===

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]



== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-22T22:27:49Z

Skalyan3: /* Update Frontend UI */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

Must add relevant for Backend here

== Design principles ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

Must add relevant for Backend here

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

Update the URLs of the API calls to properly integrate with the backend. There also needs to be logic to handle getting participants by user or by assignment.

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |900px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |900px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |900px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |900px|]]

==== Implemented changes ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |900px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |900px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |900px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |900px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

=== Add/Edit/Remove Participants ===

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]



== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-22T22:19:25Z

Skalyan3: /* Conclusion */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

Must add relevant for Backend here

== Design principles ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

Must add relevant for Backend here

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

Update the URLs of the API calls to properly integrate with the backend. There also needs to be logic to handle getting participants by user or by assignment.

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |900px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |900px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |900px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Implemented changes ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[File:Spring 2025 - E2540 After-participant-list.png |900px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document.

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

This code was added to update the "Add user" button to red.

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Save changes" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

This code was added to update the "Save changes" button to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the screenshot below, the improper text and button formatting was changed according to the design guidelines, and the "Confirm" button was changed to red. The redundancy with the Cancel and X (close) buttons was also removed.

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

=== Add/Edit/Remove Participants ===

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]



== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-22T18:33:00Z

Skalyan3:

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

Must add relevant for Backend here

== Design principles ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

Must add relevant for Backend here

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

Update the URLs of the API calls to properly integrate with the backend. There also needs to be logic to handle getting participants by user or by assignment.

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |900px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |900px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |900px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[ |900px|]]

==== Implemented changes ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting are to be changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[ |900px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the below screenshot button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to normal case

[[ |900px|]]

Code snippets

This code was added to update the "Add user" button to red

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the below screenshot, the is improper text and button formatting is changed according to the design guidelines, the "Save changes" button is changed to red. The redundancy with the Cancel and X (close) buttons is also removed

[ |900px|]]

Code snippets

This code was added to update the "Save changes" button to red, the cancel button is removed to eliminate redundancy

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the below screenshot, the is improper text and button formatting is changed according to the design guidelines, the "Confirm" button is changed to red. The redundancy with the Cancel and X (close) buttons is also removed

[[ |900px|]]

Code snippets

This code was added to update the "Confirm" to red, the cancel button is removed to eliminate redundancy

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants
* Ensure role-based access to participants
* Ensure participants are properly updated/created with proper permissions

==== UI Tests ====

* Ensure the proper icon is used for editing a participant
* Ensure the proper icon is used for deleting a participant
* Ensure the table text format has the correct font size and line height
* Ensure the table has proper pagination

== Future Scope ==

== Demo Video ==

Please find the demo video going over the features at []

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

=== Add/Edit/Remove Participants ===

== Conclusion ==



== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]



== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

2025-04-22T18:31:04Z

Skalyan3: /* Technologies */

== Introduction ==

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives.
The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

=== Project Goals ===
There are 2 main goals for this project -

* Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
* Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

== Sequence Diagram ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

*The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

*The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

== Functional Requirements ==

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

Must add relevant for Backend here

== Design principles ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

Must add relevant for Backend here

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== Implemented Changes ==

=== Manage Participant Frontend Integration ===

==== Problem ====

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

[[File:E2540-before-ParticipantCode.png | 500px]]

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

==== Solution ====

Update the URLs of the API calls to properly integrate with the backend. There also needs to be logic to handle getting participants by user or by assignment.

=== Update Frontend UI ===

==== Problem ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

[[File:Spring 2025 - E2540_Participants_list_page.png |900px|]]

* Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

[[File:Spring 2025 - E2540 - Add_participants.png |900px|]]

* Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[File:Spring 2025 - E2540 -Edit_partcipants.png |900px|]]

* Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[ |900px|]]

==== Implemented changes ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting are to be changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[ |900px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

This code was added to update the table according to the design document

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the below screenshot button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to normal case

[[ |900px|]]

Code snippets

This code was added to update the "Add user" button to red

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

As seen in the below screenshot, the is improper text and button formatting is changed according to the design guidelines, the "Save changes" button is changed to red. The redundancy with the Cancel and X (close) buttons is also removed

[ |900px|]]

Code snippets

This code was added to update the "Save changes" button to red, the cancel button is removed to eliminate redundancy

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

As seen in the below screenshot, the is improper text and button formatting is changed according to the design guidelines, the "Confirm" button is changed to red. The redundancy with the Cancel and X (close) buttons is also removed

[[ |900px|]]

Code snippets

This code was added to update the "Confirm" to red, the cancel button is removed to eliminate redundancy

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== Add/Edit/Remove Participants ===

==== Problem ====

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

==== Solution ====

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

== Testing ==

=== Manual Tests ===

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

==== Frontend/Backend Integration Tests ====

* Ensure the table shows participants
* Ensure role-based access to participants
* Ensure participants are properly updated/created with proper permissions

==== UI Tests ====

* Ensure the proper icon is used for editing a participant
* Ensure the proper icon is used for deleting a participant
* Ensure the table text format has the correct font size and line height
* Ensure the table has proper pagination

== Future Scope ==

== Demo Video ==

Please find the demo video going over the features at []

== Pull Requests ==

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

== List of changes ==

=== Manage Participant Frontend Integration ===

=== Update Frontend UI ===

*src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
*/src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

=== Add/Edit/Remove Participants ===

== Conclusion ==



== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]



== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==

* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>