Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-23T21:49:52Z

Msguron: /* Design Principles */

==Introduction==

This project will improve the UI functionality to assign reviewers to assignments. This interface needs to be streamlined and only expose a few key fields, while allowing for the simple assignment and deletion of reviewers from projects. This project will focus on implementing this solution within the front end reimplementation environment using Typescript and React.

==Specific Objectives==

* Create a 3 column layout with "Assignment", "Contributor", and "Reviewers" columns
* Add action buttons to add reviewers to an assignment, delete outstanding reviewers
* Add buttons to unsubmit or delete each review in the review column
* Allow for the addition of reviewers by their username

==Proposed Changes==

====Affected Repositories====
* The group will be modifying and updating the expertiza/reimplementation-frontend repository for the front end project
* Changes will be made with React and Typescript

===Create a 3 column layout with "Assignment", "Contributor", and "Reviewers" columns===

====Problem====
In Expertiza, managing reviewer assignments is currently fragmented across different interfaces. The existing “Add Reviewer” UI (as shown in the screenshot) allows an instructor to assign a reviewer by entering a user login manually. While this supports basic functionality, it lacks a unified view and efficient controls for large-scale assignment management.

[[File:ThreeColumnPage.png|center|border|600px|]]
Specifically, the problems include:
<li>Lack of Visibility: There is no consolidated interface showing topics, contributors, and reviewers in one place.</li>
<li>Manual Input Only: Adding reviewers requires entering login IDs, which is error-prone and not scalable.</li>
<li>Limited Reviewer Controls: There are no built-in options to delete, unsubmit, or manage existing reviews in context.</li>
<li>Unclear Status: Review status (e.g., submitted, not submitted) is not easily visible or actionable from the main UI.</li>
Without a structured layout, instructors cannot efficiently organize or control the review process, especially in larger courses or group projects.

====Solution====
We propose the implementation of a 3-column table layout that clearly organizes the review mapping with integrated reviewer management controls. This layout improves visibility, reduces friction in reviewer assignment, and offers direct interaction with review statuses.
<li>Topic Selected: Displays the assigned topic or project name.</li>
<li>Contributor: Shows team name or student name.</li>
<li>Reviewed By:
Lists assigned reviewers with visual status indicators (🟢 Submitted / 🔴 Not Submitted).
'''Includes action buttons:'''
<li>Add Reviewer: Opens an input field/modal to add a new reviewer.</li>
<li>Delete Reviewer: Removes a reviewer if the review has not been submitted.</li>
<li>Unsubmit: Allows instructors to revert a submitted review for edits or reassignment.</li>

===Add action buttons to add reviewers to an assignment, delete outstanding reviewers===

====Problem====
There needs to be a reviewer management system in the form of action buttons. The two possible options include adding a reviewer to the selected topic, and deleting any outstanding reviewers from the topic that have already been assigned. Without this functionality, the users would not be able to manually add or remove reviewers from a particular topic when necessary.

[[File:ReviewerUI.png|center|border|800px|View of where the action buttons for reviewer management would be]]

====Solution====

The solution will focus on reimplementing the UI so that it is compatible with both the front end and back end implementations and is therefore two-pronged. One one hand, the front end/UI needs to be re-implemented, while the backend also needs to be reimplemented for API calls while maintaining the same functionality. The primary design goal will be to maintain a RESTful API structure to ensure the frontend-backend integration is seamless.

The <code>participant.rb</code> file holds the backend code, while the file that stores the UI layout from the above screenshot is a page called <code>reviews_summary</code> .

=====participant.rb=====

This solution will need to access multiple participants to render a view for a given topic. Key information like participant name and username will be needed. The key changes to make this file API compatible while maintaining the desired functionality includes
* Use ActiveModel::Serializers to handle JSON Responses from the front end.
* Ensure the Model Supports CRUD Operations via a RESTful API.
** This means the model will need to be correctly connected to a controller that follows RESTful conventions (index, show, create, update, destroy) and returns JSON responses.
* Handle Validations and Errors Gracefully
** Ensure that the model returns structured error responses and generates HTTP response codes that can be used to create efficient and thorough test cases.

===== Reviews_Summary =====

This page will need to render the 3 column layout for displaying topics, reviewers, and reviews. It needs to support the desired interactivity to delete and unsubmit reviews, render topics, and show information about the assignment.

===Add buttons to unsubmit or delete each review in the review column===

==== Problem ====
Instructors need to be able to unsubmit or delete reviews that were submitted in error or were otherwise deficient. Managing this on a per-assignment basis is helpful given the usual linear flow of assignment, submission, and review.

[[File:ReviewerUnsubmit.png|center|border|600px|View of where the buttons for review unsubmit and delete should be]]

==== Solution ====

The button should not require supplemental interaction from the user, and should indicate the resulting status of the assignment and reviews once pressed. We may initially need to stub the relevant backend <code>responses_controller.rb</code> API endpoints to destroy or unsubmit a review for testing. This functionality can be included with the <code>reviews_summary</code> page mentioned previously

===Allow for the addition of reviewers by their username===

==== Problem ====

Instructors and TAs would like to manually assign reviewers to assignments, and would like to do this in a streamlined fashion. There needs to be functionality to add a user by entering their username, immediately associating them as a reviewer with that assignment.

[[File:Screenshot 2025-04-03 171612.png|center|border|600px|View of page for assigning a reviewer to an assignment]]

==== Solution ====

Create a separate page linked from the main 3 column interface, there should be a page that supports the input of a username and then assigns that user to the review. The backend API may need to be stubbed at this point to sufficiently test this page, as the full functionality for assigning reviewers is not present in the reimplementation project. This page will need to be included in a separate <code>Add_Reviewer</code> page. Additionally, this page will need to interact with the <code>response.rb</code> model to create a new review and notify the user that they have been added as a reviewer.

===== response.rb & responses_controller.rb =====
The page will need to interact with the RESTful API endpoints for Response to create a new response and assign it to a given reviewer. Logic may need to be added or stubbed to enable this functionality within the current reimplementation environment.

===== Add_Reviewer =====

This page will need to render a page with a text box to input the username of the desired reviewer. The user should then be able to assign that reviewer and formally create the desired instance of the response model once they click 'Add Reviewer'. Appropriate validations should be supported to only assign a user that already exists. Additionally, the user should be able to go back to the 3 column view previously discussed once they have completed adding a reviewer.

==Design Principles==

'''1.Single Responsibility Principle (SRP):''' Each part of the Assign Reviewer UI is built with a focused and singular responsibility.
*The '''AssignReviewer''' component manages the structure and overall orchestration, such as loading the assignment and table data.
*The '''Table''' component (imported from components/Table) is solely responsible for rendering the table layout.
*Each row and action (like "Add Reviewer," "Unsubmit," or "Delete") encapsulates only the event logic relevant to that action, ensuring clarity and ease of debugging.
By following SRP, each unit of the UI remains small, understandable, and independently testable.

'''2.Open/Closed Principle (OCP):''' The design is flexible — the code is open for extension but closed for direct modification.
*New features like adding an "Edit Reviewer" button or showing reviewer comments could be easily added by extending the current components without changing their internals.
'''3.DRY Principle (Don't Repeat Yourself):''' Repetitive patterns are avoided through reuse.
*Instead of duplicating HTML or event logic for every button, a single method handles Add, Unsubmit, and Delete actions dynamically.
*The table renders contributors, reviewers, and buttons all based on mapped data arrays, meaning no hardcoded repetition of layout or logic, This keeps the codebase much cleaner and reduces bugs caused by duplicated updates.
'''4.Separation of Concerns (SoC):'''Responsibilities are divided cleanly across concerns.
*Data is managed by useState and useLoaderData, ensuring UI components remain mostly focused on display.
*Business logic for review management (adding, deleting, unsubmitting) is neatly encapsulated inside helper functions (addReviewer, deleteReviewer, unsubmitReviewer).
*Presentation is handled by the Table component and Bootstrap styling separately.
This separation ensures that the project is scalable, easy to extend, and easier to maintain.

'''5.Accessibility and Responsiveness:''' Accessibility and usability were considered during UI design.
*Buttons use semantic Button components from react-bootstrap
*Links for actions like "Delete Outstanding Reviews" are written to behave like real links with proper accessible styling (keyboard accessible).
*The table is responsive to window sizes due to Bootstrap grid and utility classes.
'''6.Consistency and Scalability:'''The code consistently uses modular imports, camelCase naming, and @tanstack/react-table for predictable table behavior.
*Table components follow the same column structure.
*Button designs for Add, Delete, and Unsubmit maintain consistent styling and behavior.
*Any additional reviewer management features (bulk delete, assignment reassignment, etc.) can be scaled easily because the current foundation is clean and extensible.

==User Story==
As an instructor, I want to view a list of contributors along with the reviewers assigned to them, so that I can effectively manage the reviewer assignments. I also want the ability to unsubmit a reviewer, removing their responsibility for a specific review, and to delete a reviewer entirely from the review process if necessary. As a contributor, I want to view the status of my assignment and see who has been assigned to review it.
''''Use Case Diagram''''
The central user interacts with several use cases, represented by blue ovals surrounding the user. These use cases include:

* '''View Selected Topic:'''Allows the user to view the topic chosen for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:'''Lets the user view the assigned reviewers and their current review status.
* '''Add Reviewers for Each Topic:'''Provides functionality to assign new reviewers to specific topics.
* '''Delete Reviewers for Each Topic:'''Allows the user to remove reviewers assigned to a topic.
* '''Unsubmit Review Status:''' Enables the user to change a reviewer’s status back to "Pending" if needed.
 

[[File:user D11.png|250px|center]]

 

== UI Implementation ==
The upgraded functionality in Expertiza aims to optimize the assignment of reviewers to project submissions by offering a clear, efficient, and intuitive interface. This enhancement assists administrators in overseeing peer reviews more effectively, equipping them with tools to allocate reviewers, monitor their progress, and promote greater transparency throughout the review process.

[[File: Table ASSIGN REVIWER 1111.png |800px|center]]

=== Unsubmit Functionality and Interactive Design===

The interface also provides an option to unsubmit reviews, enhancing flexibility and transparency in the peer-review process. When users move the cursor over the "Unsubmit" link, it changes to green, signaling that it is clickable and interactive.

[[File: Reviewed by11..png |400px|center]]



=== Reviewer Management ===

Admins can monitor review statuses and assign new reviewers through a clear and intuitive interface, enabling efficient management of peer reviews and promoting smooth collaboration.

Administrators can seamlessly assign reviewers to submissions through a clear and intuitive interface:
[[File: Reviewed by222.png |400px|center]]

=== Add Reviewer ===
<li>''''Add Reviewer Button:'''' This functionality simplifies the reviewer assignment process by enabling administrators to enter user information and link them to specific projects or topics.

[[File: add reviewer 22.jpg |500px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
===ReviewerAssignment Interface===
The ReviewerAssignment interface is designed to represent the structure of data related to project review management. It organizes key information for each project topic, including contributors and assigned reviewers.
<li>'''Topic:''' Represents the title or subject of the project under review.</li>
<li>'''Contributors:''' An array of contributor names involved in the project submission.
<li>'''Reviewers:''' An array of reviewer objects, each containing the reviewer’s name and their current review status.

This structured data model enables clear and efficient tracking of contributors and reviewers associated with each topic, supporting seamless management of peer reviews.

[[File: Add Reviewer11.png |500px|center]]

===Core Functions for Reviewer Management===

'''addReviewer Function:'''

'''Purpose:''' Adds a new reviewer to a specific topic within the table’s data structure.

Process:
<li>Iterates through all existing rows to locate the one that matches the provided topic.

<li>If the topic is found and there are fewer than three reviewers already assigned, it appends a new reviewer object.

<li>The newly added reviewer is automatically given a generated name and username, and their review status is set to "Pending".

<li>If the topic does not match or already has three reviewers, the row remains unchanged.
[[File: const addreviewer.png |600px|center]]

'''UnsubmitReviewer Function:'''

'''Purpose:''' Resets the review status of a specific reviewer to "Pending" for a selected topic.

Process:
<li>Iterates through the table rows to find the one matching the given topic.

<li>Within the matching row, identifies the reviewer by their name.

<li>Updates the reviewer’s status to "Pending" while keeping the rest of their information unchanged.

<li> Leaves all other rows and reviewers unaffected.
[[File: const unsubmit reviewer.png |600px|center]]

===Data Structure for Review Management===
Each topic in the system consists of:
<li>Contributor Details: Includes the names and usernames of contributors.
<li> Reviewer Details: Includes the names, usernames, and current review statuses of assigned reviewers.

This structured dataset provides clarity and supports organized tracking and management of the review process.
[[File: Dummy.png |500px|center]]

==Testing==
===Unit Tests===
Unit testing for TS/front end projects is most applicable for logic-heavy components, which in the case of our project includes the button functionality. The following test cases were included:
* Validating that the "Add Reviewer" button adds a new reviewer with a status of "Pending".
* Validating that the "Delete outstanding Reviewers" button removes the reviewer's association from the topic.
*Ensure that all table columns — "Topic Selected," "Contributor," and "Reviewed By" — display accurate and consistent data for each assignment.
*Verify that any modifications to reviewers (adding, deleting, or unassigning) are properly reflected in the user interface.
*Confirm that unsubmitting a review does not remove the reviewer, only changes their status to (Pending).
*Validate that the "Add Reviewer" button is not rendered once the maximum number of reviewers (3) has been reached for a topic.


===AssignReviewer & Edit Reviewer Unit Test===
[[File: Test code11.png|500px|center]]

===Manual Tests===
Preconditions include the following:
* The front end and back end need to be successfully integrated
* The database (db) file needs to be successfully seeded
* Username: admin
* Password: password123

{| class="wikitable"
|+ Test Plan for E2534 UI for Assign Reviewers
! Test ID
! Test Case
! Description
! Precondition
! Expected Results
! Actual Results
|-
| 1
| Sign In and Navigate to Assign Reviewers
| Verify that an admin can sign in and navigate to the Assign Reviewers page.
| The admin is logged in using the credentials: username `admin` and password `password123`.
| The admin should successfully navigate to the Assign Reviewers page at assignments/edit/id.
| Pass
|-
| 2
| Table Styling and Layout
| Verify that the table styling (fonts, spacing, headers) matches design guidelines.
| The latest code is deployed, and the frontend is running.
| The table should match the design guidelines for fonts, spacing, and alignment.
| Pass
|-
| 3
| Column Data Types
| Verify that each column in the table displays the correct data type. For example, the "Topic" column should contain text," while the "Reviewed by" column should contain buttons.
| The table is populated with data.
| Each column should display data of the correct type (e.g., text, numbers, dates).
| Pass
|-
| 4
| Navigate to Assign Reviewer and test responsiveness
| Verify that the table columns adjust to fit the screen on smaller devices.
| The user is on the "Assign Reviewer" page.
| The table columns should resize to fit the screen without horizontal scrolling.
| Pass
|-
| 5
| Test Keyboard Navigation
| Verify that the user can navigate the table using the keyboard.
| The user is on the Assignment Reviewers page.
| The user should be able to navigate through the table using the Tab key.
| Pass
|-
| 6
| Pagination
| Verify that pagination works correctly when the table has more rows than fit on one page.
| The table contains more rows than fit on one page.
| Pagination controls should allow navigation between pages, and the correct rows should be displayed.
| Pass
|-
| 7
| Accessibility
| Verify that the UI meets accessibility standards (e.g., ARIA roles, keyboard navigation).
| The frontend is running.
| The UI should be navigable using a keyboard, and ARIA roles should be properly implemented.
| Pass
|-
| 8
| Add Reviewer Action Button Functionality
| Verify that by clicking "Add Reviewer" under the contributor column that the user is redirected to the "Add Reviewers" page
| User starts on the Assign Reviewers page
| The user should be redirected to an "Add Reviewer" page where they can add a username.
| Pass
|-
| 9
| Delete Reviewer Action Button Functionality
| Clicking the delete reviewer action button should appropriately remove the review
| User starts on the Assign Reviewers page and there is already an existing review that is displayed
| Verify that by clicking "Delete Reviewer" the reviewer no longer displays in the "Reviewed by" column
| Pass
|-
| 10
| Delete Outstanding Reviewer Action Button Functionality
| Clicking the delete outstanding reviewer button should appear when appropriate and function correctly
| User starts on the Assign Reviewers page and there is a reviewer with a pending status
| Verify that the "Delete Outstanding Reviewer" button only appears when there are reviewers in a pending status for a topic, and that when the button is clicked they are removed successfully. The button should also disappear after this action.
| Pass
|-
| 11
| Unsubmit Review Action Button Functionality
| The unsubmit review action button should appear when appropriate and function correctly
| User starts on the Assign Reviewers page and there is a reviewer assigned to a particular topic
| The unsubmit review should display for reviewers in any status, and clicking the button should ensure the review is no longer in a status of "submitted"
| Pass
|-
| 12
| Delete Review Action Button Functionality
| The delete review action button should appear when appropriate and function correctly
| The User starts on the Assign Reviewers page and there is a reviewer present under the "Reviewed by" column for a particular topic
| The delete review button should display for reviewers in any status, and clicking the button should ensure the review is deleted
| Pass
|-
| 13
| Add Reviewer Functionality
| The user is able to successfully add new reviewers
| The user has clicked on the "Add Reviewer" action button and is redirected to the Add Reviewer page
| The user is able to enter the username of a reviewer, submit the review by clicking the "Add Reviewer" button, and is redirected back to the Assign Reviewers page.
| Pass
|-
| 15
| New Reviewer Status
| New Reviewers that are added should have a correct review status displayed
| A new review has been added by first clicking on the "Add Reviewer" action button
| The reviewer's default status should be "pending" until they submit a review successfully
| Pass
|}



===UI Edge Case Testing for Contributor & Reviewer Management ===

{| class="wikitable"
|+ UI Edge Case Testing for Contributor & Reviewer Management
! Feature/Action
! Edge Case
! Expected Behavior
! Test Method
! Result
|-
| View Contributors/Topics
| No contributors exist
| UI shows an empty state message or placeholder
| Manual
| Pass
|-
| View Contributors/Topics
| Contributors exist but no reviewers assigned
| Reviewer section remains empty with a helpful message
| Manual
| Pass
|-
| View Contributors/Topics
| Inconsistent data (e.g., deleted topic)
| UI handles gracefully with fallback or error message
| Manual
| Pass
|-
| Unsubmit Reviewer
| Reviewer hasn't submitted yet
| Action may be disabled or handled gracefully
| Manual
| Pass
|-
| Delete Reviewer
| Reviewer is also assigned elsewhere
| Only delete from selected topic; no unintended data loss
| Integration/Manual
| Pass
|-
| Delete Reviewer
| Reviewer has submitted a review
| Prompt confirmation, possibly restrict deletion
| Manual
| Pass
|-
| Add Reviewer
| Reviewer missing required fields
| Show validation error before submission
| UI/Manual
| Pass
|-
| Add Reviewer
| Topic has max reviewers
| Prevent adding
| UI/Manual
| Pass
|-
| Add Reviewer
| Added Reviewer persists after refreshing Assign Reviewers page
| Maintains status of pending
| Manual/Integration
| Pass
|-
| Contributor View
| Contributor has no reviewer assigned
| Show placeholder
| Manual
| Pass
|-
|}

==Error Handling ==
'''Adding Reviewers Beyond the Limit:'''
*''Test:'' Attempt to add a reviewer when 3 reviewers are already assigned.
''Expected Handling:'' UI should prevent adding a 4th reviewer.

'''Adding Non-Existent Reviewers:'''
*''Test :'' Attempt to add a reviewer whose username or ID does not exist in the system database.
''Expected Handling:'' The system should prevent adding the reviewer.

'''UI Button Misclicks / Double Clicks:'''
*''Test :'' Double-click "Add Reviewer" or "Delete Reviewer" quickly.
''Expected Handling:'' Operations should only process once.

'''Unsubmitting When Reviewer is Already Pending:'''
*''Test :''Try to "Unsubmit" a reviewer who already has a "Pending" status.
''Expected Handling:''Status should remain "Pending."

==Conclusion==
This design document outlines a comprehensive plan for developing an enhanced UI for assigning reviewers in Expertiza. By utilizing React and TypeScript for the frontend, the solution aims to provide a smooth, intuitive experience that enables instructors to manage reviewer assignments efficiently. The adoption of modern technologies ensures high performance, scalability, and maintainable code. Additionally, this approach emphasizes data integrity and security, protecting the accuracy of assignment data while promoting a user-centric, responsive design that enhances usability across a range of devices.

==Future Scope==
This project purposely did not include adding in meta reviewers from the old system in order to focus on core reviewer functionalities. However, in the future, this functionality may be added as needed. This project also did not focus specifically on the backend functionality, so there may be additional testing or implementation needed in order to ensure all API endpoints are tested thoroughly, error handling is successful, etc.

==Relevant Links==
* '''Github Repository:''' https://github.com/delaneydow/reimplementation-front-end
* '''Pull Request:''' https://github.com/expertiza/reimplementation-front-end/pull/95
* '''Youtube Video:''' https://youtu.be/uh5nBpmtzuY

==Team Members==
* Delaney Dow (dmdow@ncsu.edu)
* Manbir Guron (msguron@ncsu.edu)
* Elnaz Ghotbitaheri (eghotbi@ncsu.edu)
* Mentor: Vihar Manojkumar Shah (vshah23@ncsu.edu)

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-23T01:14:57Z

Msguron: /* AssignReviewer Test */

==Introduction==

This project will improve the UI functionality to assign reviewers to assignments. This interface needs to be streamlined and only expose a few key fields, while allowing for the simple assignment and deletion of reviewers from projects. This project will focus on implementing this solution within the front end reimplementation environment using Typescript and React.

==Specific Objectives==

* Create a 3 column layout with "Assignment", "Contributor", and "Reviewers" columns
* Add action buttons to add reviewers to an assignment, delete outstanding reviewers
* Add buttons to unsubmit or delete each review in the review column
* Allow for the addition of reviewers by their username

==Proposed Changes==

====Affected Repositories====
* The group will be modifying and updating the expertiza/reimplementation-frontend repository for the front end project
* Changes will be made with React and Typescript

===Create a 3 column layout with "Assignment", "Contributor", and "Reviewers" columns===

====Problem====
In Expertiza, managing reviewer assignments is currently fragmented across different interfaces. The existing “Add Reviewer” UI (as shown in the screenshot) allows an instructor to assign a reviewer by entering a user login manually. While this supports basic functionality, it lacks a unified view and efficient controls for large-scale assignment management.

[[File:ThreeColumnPage.png|center|border|600px|]]
Specifically, the problems include:
<li>Lack of Visibility: There is no consolidated interface showing topics, contributors, and reviewers in one place.</li>
<li>Manual Input Only: Adding reviewers requires entering login IDs, which is error-prone and not scalable.</li>
<li>Limited Reviewer Controls: There are no built-in options to delete, unsubmit, or manage existing reviews in context.</li>
<li>Unclear Status: Review status (e.g., submitted, not submitted) is not easily visible or actionable from the main UI.</li>
Without a structured layout, instructors cannot efficiently organize or control the review process, especially in larger courses or group projects.

====Solution====
We propose the implementation of a 3-column table layout that clearly organizes the review mapping with integrated reviewer management controls. This layout improves visibility, reduces friction in reviewer assignment, and offers direct interaction with review statuses.
<li>Topic Selected: Displays the assigned topic or project name.</li>
<li>Contributor: Shows team name or student name.</li>
<li>Reviewed By:
Lists assigned reviewers with visual status indicators (🟢 Submitted / 🔴 Not Submitted).
'''Includes action buttons:'''
<li>Add Reviewer: Opens an input field/modal to add a new reviewer.</li>
<li>Delete Reviewer: Removes a reviewer if the review has not been submitted.</li>
<li>Unsubmit: Allows instructors to revert a submitted review for edits or reassignment.</li>

===Add action buttons to add reviewers to an assignment, delete outstanding reviewers===

====Problem====
There needs to be a reviewer management system in the form of action buttons. The two possible options include adding a reviewer to the selected topic, and deleting any outstanding reviewers from the topic that have already been assigned. Without this functionality, the users would not be able to manually add or remove reviewers from a particular topic when necessary.

[[File:ReviewerUI.png|center|border|800px|View of where the action buttons for reviewer management would be]]

====Solution====

The solution will focus on reimplementing the UI so that it is compatible with both the front end and back end implementations and is therefore two-pronged. One one hand, the front end/UI needs to be re-implemented, while the backend also needs to be reimplemented for API calls while maintaining the same functionality. The primary design goal will be to maintain a RESTful API structure to ensure the frontend-backend integration is seamless.

The <code>participant.rb</code> file holds the backend code, while the file that stores the UI layout from the above screenshot is a page called <code>reviews_summary</code> .

=====participant.rb=====

This solution will need to access multiple participants to render a view for a given topic. Key information like participant name and username will be needed. The key changes to make this file API compatible while maintaining the desired functionality includes
* Use ActiveModel::Serializers to handle JSON Responses from the front end.
* Ensure the Model Supports CRUD Operations via a RESTful API.
** This means the model will need to be correctly connected to a controller that follows RESTful conventions (index, show, create, update, destroy) and returns JSON responses.
* Handle Validations and Errors Gracefully
** Ensure that the model returns structured error responses and generates HTTP response codes that can be used to create efficient and thorough test cases.

===== Reviews_Summary =====

This page will need to render the 3 column layout for displaying topics, reviewers, and reviews. It needs to support the desired interactivity to delete and unsubmit reviews, render topics, and show information about the assignment.

===Add buttons to unsubmit or delete each review in the review column===

==== Problem ====
Instructors need to be able to unsubmit or delete reviews that were submitted in error or were otherwise deficient. Managing this on a per-assignment basis is helpful given the usual linear flow of assignment, submission, and review.

[[File:ReviewerUnsubmit.png|center|border|600px|View of where the buttons for review unsubmit and delete should be]]

==== Solution ====

The button should not require supplemental interaction from the user, and should indicate the resulting status of the assignment and reviews once pressed. We may initially need to stub the relevant backend <code>responses_controller.rb</code> API endpoints to destroy or unsubmit a review for testing. This functionality can be included with the <code>reviews_summary</code> page mentioned previously

===Allow for the addition of reviewers by their username===

==== Problem ====

Instructors and TAs would like to manually assign reviewers to assignments, and would like to do this in a streamlined fashion. There needs to be functionality to add a user by entering their username, immediately associating them as a reviewer with that assignment.

[[File:Screenshot 2025-04-03 171612.png|center|border|600px|View of page for assigning a reviewer to an assignment]]

==== Solution ====

Create a separate page linked from the main 3 column interface, there should be a page that supports the input of a username and then assigns that user to the review. The backend API may need to be stubbed at this point to sufficiently test this page, as the full functionality for assigning reviewers is not present in the reimplementation project. This page will need to be included in a separate <code>Add_Reviewer</code> page. Additionally, this page will need to interact with the <code>response.rb</code> model to create a new review and notify the user that they have been added as a reviewer.

===== response.rb & responses_controller.rb =====
The page will need to interact with the RESTful API endpoints for Response to create a new response and assign it to a given reviewer. Logic may need to be added or stubbed to enable this functionality within the current reimplementation environment.

===== Add_Reviewer =====

This page will need to render a page with a text box to input the username of the desired reviewer. The user should then be able to assign that reviewer and formally create the desired instance of the response model once they click 'Add Reviewer'. Appropriate validations should be supported to only assign a user that already exists. Additionally, the user should be able to go back to the 3 column view previously discussed once they have completed adding a reviewer.

==Design Principles==

'''1.Single Responsibility Principle (SRP):''' Each part of the Assign Reviewer UI is built with a focused and singular responsibility.
*The '''AssignReviewer''' component manages the structure and overall orchestration, such as loading the assignment and table data.
*The '''Table''' component (imported from components/Table) is solely responsible for rendering the table layout.
*Each row and action (like "Add Reviewer," "Unsubmit," or "Delete") encapsulates only the event logic relevant to that action, ensuring clarity and ease of debugging.
By following SRP, each unit of the UI remains small, understandable, and independently testable.
'''2.Open/Closed Principle (OCP):''' The design is flexible — the code is open for extension but closed for direct modification.
*New features like adding an "Edit Reviewer" button or showing reviewer comments could be easily added by extending the current components without changing their internals.
'''3.DRY Principle (Don't Repeat Yourself):''' Repetitive patterns are avoided through reuse.
*Instead of duplicating HTML or event logic for every button, a single method handles Add, Unsubmit, and Delete actions dynamically.
*The table renders contributors, reviewers, and buttons all based on mapped data arrays, meaning no hardcoded repetition of layout or logic, This keeps the codebase much cleaner and reduces bugs caused by duplicated updates.
'''4.Separation of Concerns (SoC):'''Responsibilities are divided cleanly across concerns.
*Data is managed by useState and useLoaderData, ensuring UI components remain mostly focused on display.
*Business logic for review management (adding, deleting, unsubmitting) is neatly encapsulated inside helper functions (addReviewer, deleteReviewer, unsubmitReviewer).
*Presentation is handled by the Table component and Bootstrap styling separately.
This separation ensures that the project is scalable, easy to extend, and easier to maintain.
'''5.Accessibility and Responsiveness:''' Accessibility and usability were considered during UI design.
*Buttons use semantic Button components from react-bootstrap
*Links for actions like "Delete Outstanding Reviews" are written to behave like real links with proper accessible styling (keyboard accessible).
*The table is responsive to window sizes due to Bootstrap grid and utility classes.
'''6.Consistency and Scalability:'''The code consistently uses modular imports, camelCase naming, and @tanstack/react-table for predictable table behavior.
*Table components follow the same column structure.
*Button designs for Add, Delete, and Unsubmit maintain consistent styling and behavior.
*Any additional reviewer management features (bulk delete, assignment reassignment, etc.) can be scaled easily because the current foundation is clean and extensible.

==User Story==
As an instructor, I want to view a list of contributors along with the reviewers assigned to them, so that I can effectively manage the reviewer assignments. I also want the ability to unsubmit a reviewer, removing their responsibility for a specific review, and to delete a reviewer entirely from the review process if necessary. As a contributor, I want to view the status of my assignment and see who has been assigned to review it.
''''Use Case Diagram''''
The central user interacts with several use cases, represented by blue ovals surrounding the user. These use cases include:

* '''View Selected Topic:'''Allows the user to view the topic chosen for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:'''Lets the user view the assigned reviewers and their current review status.
* '''Add Reviewers for Each Topic:'''Provides functionality to assign new reviewers to specific topics.
* '''Delete Reviewers for Each Topic:'''Allows the user to remove reviewers assigned to a topic.
* '''Unsubmit Review Status:''' Enables the user to change a reviewer’s status back to "Pending" if needed.
 

[[File:user D11.png|250px|center]]

 

== UI Implementation ==
The upgraded functionality in Expertiza aims to optimize the assignment of reviewers to project submissions by offering a clear, efficient, and intuitive interface. This enhancement assists administrators in overseeing peer reviews more effectively, equipping them with tools to allocate reviewers, monitor their progress, and promote greater transparency throughout the review process.

[[File: Table ASSIGN REVIWER 1111.png |800px|center]]

=== Unsubmit Functionality and Interactive Design===

The interface also provides an option to unsubmit reviews, enhancing flexibility and transparency in the peer-review process. When users move the cursor over the "Unsubmit" link, it changes to green, signaling that it is clickable and interactive.

[[File: Reviewed by11..png |400px|center]]



=== Reviewer Management ===

Admins can monitor review statuses and assign new reviewers through a clear and intuitive interface, enabling efficient management of peer reviews and promoting smooth collaboration.

Administrators can seamlessly assign reviewers to submissions through a clear and intuitive interface:
[[File: Reviewed by222.png |400px|center]]

=== Add Reviewer ===
<li>''''Add Reviewer Button:'''' This functionality simplifies the reviewer assignment process by enabling administrators to enter user information and link them to specific projects or topics.

[[File: add reviewer 22.jpg |500px|center]]

== Code Snippets ==
===Interfaces for Data Representation===
===ReviewerAssignment Interface===
The ReviewerAssignment interface is designed to represent the structure of data related to project review management. It organizes key information for each project topic, including contributors and assigned reviewers.
<li>'''Topic:''' Represents the title or subject of the project under review.</li>
<li>'''Contributors:''' An array of contributor names involved in the project submission.
<li>'''Reviewers:''' An array of reviewer objects, each containing the reviewer’s name and their current review status.

This structured data model enables clear and efficient tracking of contributors and reviewers associated with each topic, supporting seamless management of peer reviews.

[[File: Add Reviewer11.png |500px|center]]

===Core Functions for Reviewer Management===

'''addReviewer Function:'''

'''Purpose:''' Adds a new reviewer to a specific topic within the table’s data structure.

Process:
<li>Iterates through all existing rows to locate the one that matches the provided topic.

<li>If the topic is found and there are fewer than three reviewers already assigned, it appends a new reviewer object.

<li>The newly added reviewer is automatically given a generated name and username, and their review status is set to "Pending".

<li>If the topic does not match or already has three reviewers, the row remains unchanged.
[[File: const addreviewer.png |600px|center]]

'''UnsubmitReviewer Function:'''

'''Purpose:''' Resets the review status of a specific reviewer to "Pending" for a selected topic.

Process:
<li>Iterates through the table rows to find the one matching the given topic.

<li>Within the matching row, identifies the reviewer by their name.

<li>Updates the reviewer’s status to "Pending" while keeping the rest of their information unchanged.

<li> Leaves all other rows and reviewers unaffected.
[[File: const unsubmit reviewer.png |600px|center]]

===Data Structure for Review Management===
Each topic in the system consists of:
<li>Contributor Details: Includes the names and usernames of contributors.
<li> Reviewer Details: Includes the names, usernames, and current review statuses of assigned reviewers.

This structured dataset provides clarity and supports organized tracking and management of the review process.
[[File: Dummy.png |500px|center]]

==Testing==
===Unit Tests===
Unit testing for TS/front end projects is most applicable for logic-heavy components, which in the case of our project includes the button functionality. The following test cases were included:
* Validating that the "Add Reviewer" button adds a new reviewer with a status of "Pending".
* Validating that the "Delete outstanding Reviewers" button removes the reviewer's association from the topic.
*Ensure that all table columns — "Topic Selected," "Contributor," and "Reviewed By" — display accurate and consistent data for each assignment.
*Verify that any modifications to reviewers (adding, deleting, or unassigning) are properly reflected in the user interface.
*Confirm that unsubmitting a review does not remove the reviewer, only changes their status to (Pending).
*Validate that the "Add Reviewer" button is not rendered once the maximum number of reviewers (3) has been reached for a topic.


===AssignReviewer & Edit Reviewer Unit Test===
[[File: Test code11.png|500px|center]]

===Manual Tests===
Preconditions include the following:
* The front end and back end need to be successfully integrated
* The database (db) file needs to be successfully seeded
* Username: admin
* Password: password123

{| class="wikitable"
|+ Test Plan for E2534 UI for Assign Reviewers
! Test ID
! Test Case
! Description
! Precondition
! Expected Results
! Actual Results
|-
| 1
| Sign In and Navigate to Assign Reviewers
| Verify that an admin can sign in and navigate to the Assign Reviewers page.
| The admin is logged in using the credentials: username `admin` and password `password123`.
| The admin should successfully navigate to the Assign Reviewers page at assignments/edit/id.
| Pass
|-
| 2
| Table Styling and Layout
| Verify that the table styling (fonts, spacing, headers) matches design guidelines.
| The latest code is deployed, and the frontend is running.
| The table should match the design guidelines for fonts, spacing, and alignment.
| Pass
|-
| 3
| Column Data Types
| Verify that each column in the table displays the correct data type. For example, the "Topic" column should contain text," while the "Reviewed by" column should contain buttons.
| The table is populated with data.
| Each column should display data of the correct type (e.g., text, numbers, dates).
| Pass
|-
| 4
| Navigate to Assign Reviewer and test responsiveness
| Verify that the table columns adjust to fit the screen on smaller devices.
| The user is on the "Assign Reviewer" page.
| The table columns should resize to fit the screen without horizontal scrolling.
| Pass
|-
| 5
| Test Keyboard Navigation
| Verify that the user can navigate the table using the keyboard.
| The user is on the Assignment Reviewers page.
| The user should be able to navigate through the table using the Tab key.
| Pass
|-
| 6
| Pagination
| Verify that pagination works correctly when the table has more rows than fit on one page.
| The table contains more rows than fit on one page.
| Pagination controls should allow navigation between pages, and the correct rows should be displayed.
| Pass
|-
| 7
| Accessibility
| Verify that the UI meets accessibility standards (e.g., ARIA roles, keyboard navigation).
| The frontend is running.
| The UI should be navigable using a keyboard, and ARIA roles should be properly implemented.
| Pass
|-
| 8
| Add Reviewer Action Button Functionality
| Verify that by clicking "Add Reviewer" under the contributor column that the user is redirected to the "Add Reviewers" page
| User starts on the Assign Reviewers page
| The user should be redirected to an "Add Reviewer" page where they can add a username.
| Pass
|-
| 9
| Delete Reviewer Action Button Functionality
| Clicking the delete reviewer action button should appropriately remove the review
| User starts on the Assign Reviewers page and there is already an existing review that is displayed
| Verify that by clicking "Delete Reviewer" the reviewer no longer displays in the "Reviewed by" column
| Pass
|-
| 10
| Delete Outstanding Reviewer Action Button Functionality
| Clicking the delete outstanding reviewer button should appear when appropriate and function correctly
| User starts on the Assign Reviewers page and there is a reviewer with a pending status
| Verify that the "Delete Outstanding Reviewer" button only appears when there are reviewers in a pending status for a topic, and that when the button is clicked they are removed successfully. The button should also disappear after this action.
| Pass
|-
| 11
| Unsubmit Review Action Button Functionality
| The unsubmit review action button should appear when appropriate and function correctly
| User starts on the Assign Reviewers page and there is a reviewer assigned to a particular topic
| The unsubmit review should display for reviewers in any status, and clicking the button should ensure the review is no longer in a status of "submitted"
| Pass
|-
| 12
| Delete Review Action Button Functionality
| The delete review action button should appear when appropriate and function correctly
| The User starts on the Assign Reviewers page and there is a reviewer present under the "Reviewed by" column for a particular topic
| The delete review button should display for reviewers in any status, and clicking the button should ensure the review is deleted
| Pass
|-
| 13
| Add Reviewer Functionality
| The user is able to successfully add new reviewers
| The user has clicked on the "Add Reviewer" action button and is redirected to the Add Reviewer page
| The user is able to enter the username of a reviewer, submit the review by clicking the "Add Reviewer" button, and is redirected back to the Assign Reviewers page.
| Pass
|-
| 15
| New Reviewer Status
| New Reviewers that are added should have a correct review status displayed
| A new review has been added by first clicking on the "Add Reviewer" action button
| The reviewer's default status should be "pending" until they submit a review successfully
| Pass
|}



===UI Edge Case Testing for Contributor & Reviewer Management ===

{| class="wikitable"
|+ UI Edge Case Testing for Contributor & Reviewer Management
! Feature/Action
! Edge Case
! Expected Behavior
! Test Method
! Result
|-
| View Contributors/Topics
| No contributors exist
| UI shows an empty state message or placeholder
| Manual
| Pass
|-
| View Contributors/Topics
| Contributors exist but no reviewers assigned
| Reviewer section remains empty with a helpful message
| Manual
| Pass
|-
| View Contributors/Topics
| Inconsistent data (e.g., deleted topic)
| UI handles gracefully with fallback or error message
| Manual
| Pass
|-
| View Review Status
| Review status field is missing/corrupted
| Show "Unknown" or fallback label, log issue
| Integration
|
|-
| Unsubmit Reviewer
| Reviewer hasn't submitted yet
| Action may be disabled or handled gracefully
| Manual
| Pass
|-
| Unsubmit Reviewer
| Server fails to update status
| Show error toast and preserve old status
| Integration
|
|-
| Delete Reviewer
| Reviewer is also assigned elsewhere
| Only delete from selected topic; no unintended data loss
| Integration/Manual
| Pass
|-
| Delete Reviewer
| Reviewer has submitted a review
| Prompt confirmation, possibly restrict deletion
| Manual
| Pass
|-
| Delete Reviewer
| Server fails on delete
| Show clear error and maintain reviewer in UI
| Integration
|
|-
| Add Reviewer
| Duplicate reviewer assignment
| Prevent duplicates; show validation warning
| Integration
|
|-
| Add Reviewer
| Reviewer missing required fields
| Show validation error before submission
| UI/Manual
| Pass
|-
| Add Reviewer
| Topic has max reviewers
| Prevent adding
| UI/Manual
| Pass
|-
| Add Reviewer
| Added Reviewer persists after refreshing Assign Reviewers page
| Maintains status of pending
| Manual/Integration
| Pass
|-
| Contributor View
| Contributor has no reviewer assigned
| Show placeholder
| Manual
| Pass
|-
| Contributor View
| Contributor views others’ assignments (unauthorized)
| Restrict access or show permission error
| Integration
|
|-
| Contributor View
| Reviewer status changes during contributor session
| Refresh
| System
|
|-
|}

==Error Handling ==
'''Adding Reviewers Beyond the Limit:'''
*''Test:'' Attempt to add a reviewer when 3 reviewers are already assigned.
''Expected Handling:'' UI should prevent adding a 4th reviewer.

'''Adding Non-Existent Reviewers:'''
*''Test :'' Attempt to add a reviewer whose username or ID does not exist in the system database.
''Expected Handling:'' The system should prevent adding the reviewer.

'''UI Button Misclicks / Double Clicks:'''
*''Test :'' Double-click "Add Reviewer" or "Delete Reviewer" quickly.
''Expected Handling:'' Operations should only process once.

'''Unsubmitting When Reviewer is Already Pending:'''
*''Test :''Try to "Unsubmit" a reviewer who already has a "Pending" status.
''Expected Handling:''Status should remain "Pending."

==Conclusion==
This design document outlines a comprehensive plan for developing an enhanced UI for assigning reviewers in Expertiza. By utilizing React and TypeScript for the frontend, the solution aims to provide a smooth, intuitive experience that enables instructors to manage reviewer assignments efficiently. The adoption of modern technologies ensures high performance, scalability, and maintainable code. Additionally, this approach emphasizes data integrity and security, protecting the accuracy of assignment data while promoting a user-centric, responsive design that enhances usability across a range of devices.

==Future Scope==
This project purposely did not include adding in meta reviewers from the old system in order to focus on core reviewer functionalities. However, in the future, this functionality may be added as needed. This project also did not focus specifically on the backend functionality, so there may be additional testing or implementation needed in order to ensure all API endpoints are tested thoroughly, error handling is successful, etc.

==Relevant Links==
* '''Github Repository:''' https://github.com/delaneydow/reimplementation-front-end
* '''Pull Request:''' https://github.com/expertiza/reimplementation-front-end/pull/95
* '''Youtube Video:''' https://youtu.be/uh5nBpmtzuY

==Team Members==
* Delaney Dow (dmdow@ncsu.edu)
* Manbir Guron (msguron@ncsu.edu)
* Elnaz Ghotbitaheri (eghotbi@ncsu.edu)
* Mentor: Vihar Manojkumar Shah (vshah23@ncsu.edu)

File:Test code11.png

2025-04-23T01:14:38Z

Msguron: Msguron uploaded a new version of File:Test code11.png

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-22T00:27:27Z

Msguron: /* Testing */

==Introduction==

This project will improve the UI functionality to assign reviewers to assignments. This interface needs to be streamlined and only expose a few key fields, while allowing for the simple assignment and deletion of reviewers from projects. This project will focus on implementing this solution within the front end reimplementation environment using Typescript and React.

==Specific Objectives==

* Create a 3 column layout with "Assignment", "Contributor", and "Reviewers" columns
* Add action buttons to add reviewers to an assignment, delete outstanding reviewers
* Add buttons to unsubmit or delete each review in the review column
* Allow for the addition of reviewers by their username

==Proposed Changes==

====Affected Repositories====
* The group will be modifying and updating the expertiza/reimplementation-frontend repository for the front end project
* Changes will be made with React and Typescript

===Create a 3 column layout with "Assignment", "Contributor", and "Reviewers" columns===

====Problem====
In Expertiza, managing reviewer assignments is currently fragmented across different interfaces. The existing “Add Reviewer” UI (as shown in the screenshot) allows an instructor to assign a reviewer by entering a user login manually. While this supports basic functionality, it lacks a unified view and efficient controls for large-scale assignment management.

[[File:ThreeColumnPage.png|center|border|1000px|]]
Specifically, the problems include:
<li>Lack of Visibility: There is no consolidated interface showing topics, contributors, and reviewers in one place.</li>
<li>Manual Input Only: Adding reviewers requires entering login IDs, which is error-prone and not scalable.</li>
<li>Limited Reviewer Controls: There are no built-in options to delete, unsubmit, or manage existing reviews in context.</li>
<li>Unclear Status: Review status (e.g., submitted, not submitted) is not easily visible or actionable from the main UI.</li>
Without a structured layout, instructors cannot efficiently organize or control the review process, especially in larger courses or group projects.

====Solution====
We propose the implementation of a 3-column table layout that clearly organizes the review mapping with integrated reviewer management controls. This layout improves visibility, reduces friction in reviewer assignment, and offers direct interaction with review statuses.
<li>Topic Selected: Displays the assigned topic or project name.</li>
<li>Contributor: Shows team name or student name.</li>
<li>Reviewed By:
Lists assigned reviewers with visual status indicators (🟢 Submitted / 🔴 Not Submitted).
'''Includes action buttons:'''
<li>Add Reviewer: Opens an input field/modal to add a new reviewer.</li>
<li>Delete Reviewer: Removes a reviewer if the review has not been submitted.</li>
<li>Unsubmit: Allows instructors to revert a submitted review for edits or reassignment.</li>

===Add action buttons to add reviewers to an assignment, delete outstanding reviewers===

====Problem====
There needs to be a reviewer management system in the form of action buttons. The two possible options include adding a reviewer to the selected topic, and deleting any outstanding reviewers from the topic that have already been assigned. Without this functionality, the users would not be able to manually add or remove reviewers from a particular topic when necessary.

[[File:ReviewerUI.png|center|border|1000px|View of where the action buttons for reviewer management would be]]

====Solution====

The solution will focus on reimplementing the UI so that it is compatible with both the front end and back end implementations and is therefore two-pronged. One one hand, the front end/UI needs to be re-implemented, while the backend also needs to be reimplemented for API calls while maintaining the same functionality. The primary design goal will be to maintain a RESTful API structure to ensure the frontend-backend integration is seamless.

The <code>participant.rb</code> file holds the backend code, while the file that stores the UI layout from the above screenshot is a page called <code>reviews_summary</code> .

=====participant.rb=====

This solution will need to access multiple participants to render a view for a given topic. Key information like participant name and username will be needed. The key changes to make this file API compatible while maintaining the desired functionality includes
* Use ActiveModel::Serializers to handle JSON Responses from the front end.
* Ensure the Model Supports CRUD Operations via a RESTful API.
** This means the model will need to be correctly connected to a controller that follows RESTful conventions (index, show, create, update, destroy) and returns JSON responses.
* Handle Validations and Errors Gracefully
** Ensure that the model returns structured error responses and generates HTTP response codes that can be used to create efficient and thorough test cases.

===== Reviews_Summary =====

This page will need to render the 3 column layout for displaying topics, reviewers, and reviews. It needs to support the desired interactivity to delete and unsubmit reviews, render topics, and show information about the assignment.

===Add buttons to unsubmit or delete each review in the review column===

==== Problem ====
Instructors need to be able to unsubmit or delete reviews that were submitted in error or were otherwise deficient. Managing this on a per-assignment basis is helpful given the usual linear flow of assignment, submission, and review.

[[File:ReviewerUnsubmit.png|center|border|1000px|View of where the buttons for review unsubmit and delete should be]]

==== Solution ====

The button should not require supplemental interaction from the user, and should indicate the resulting status of the assignment and reviews once pressed. We may initially need to stub the relevant backend <code>responses_controller.rb</code> API endpoints to destroy or unsubmit a review for testing. This functionality can be included with the <code>reviews_summary</code> page mentioned previously

===Allow for the addition of reviewers by their username===

==== Problem ====

Instructors and TAs would like to manually assign reviewers to assignments, and would like to do this in a streamlined fashion. There needs to be functionality to add a user by entering their username, immediately associating them as a reviewer with that assignment.

[[File:Screenshot 2025-04-03 171612.png|center|border|1000px|View of page for assigning a reviewer to an assignment]]

==== Solution ====

Create a separate page linked from the main 3 column interface, there should be a page that supports the input of a username and then assigns that user to the review. The backend API may need to be stubbed at this point to sufficiently test this page, as the full functionality for assigning reviewers is not present in the reimplementation project. This page will need to be included in a separate <code>Add_Reviewer</code> page. Additionally, this page will need to interact with the <code>response.rb</code> model to create a new review and notify the user that they have been added as a reviewer.

===== response.rb & responses_controller.rb =====
The page will need to interact with the RESTful API endpoints for Response to create a new response and assign it to a given reviewer. Logic may need to be added or stubbed to enable this functionality within the current reimplementation environment.

===== Add_Reviewer =====

This page will need to render a page with a text box to input the username of the desired reviewer. The user should then be able to assign that reviewer and formally create the desired instance of the response model once they click 'Add Reviewer'. Appropriate validations should be supported to only assign a user that already exists. Additionally, the user should be able to go back to the 3 column view previously discussed once they have completed adding a reviewer.

==User Story==
As an instructor, I want to view a list of contributors along with the reviewers assigned to them, so that I can effectively manage the reviewer assignments. I also want the ability to unsubmit a reviewer, removing their responsibility for a specific review, and to delete a reviewer entirely from the review process if necessary. As a contributor, I want to view the status of my assignment and see who has been assigned to review it.
''''Use Case Diagram''''
The central user interacts with several use cases, represented by blue ovals surrounding the user. These use cases include:

* '''View Selected Topic:'''Allows the user to view the topic chosen for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:'''Lets the user view the assigned reviewers and their current review status.
* '''Add Reviewers for Each Topic:'''Provides functionality to assign new reviewers to specific topics.
* '''Delete Reviewers for Each Topic:'''Allows the user to remove reviewers assigned to a topic.
* '''Unsubmit Review Status:''' Enables the user to change a reviewer’s status back to "Pending" if needed.
 

[[File:user D11.png|250px|center]]

 

== UI Implementation ==
The upgraded functionality in Expertiza aims to optimize the assignment of reviewers to project submissions by offering a clear, efficient, and intuitive interface. This enhancement assists administrators in overseeing peer reviews more effectively, equipping them with tools to allocate reviewers, monitor their progress, and promote greater transparency throughout the review process.

[[File: Table ASSIGN REVIWER 11.png |1000px|center]]

=== Unsubmit Functionality and Interactive Design===

The interface also provides an option to unsubmit reviews, enhancing flexibility and transparency in the peer-review process. When users move the cursor over the "Unsubmit" link, it changes to green, signaling that it is clickable and interactive.

[[File: Reviewed by..png |400px|center]]


=== Reviewer Management ===

Admins can monitor review statuses and assign new reviewers through a clear and intuitive interface, enabling efficient management of peer reviews and promoting smooth collaboration.

Administrators can seamlessly assign reviewers to submissions through a clear and intuitive interface:
[[File: Reviewed by2.png |400px|center]]

=== Add Reviewer ===
<li>''''Add Reviewer Button:'''' This functionality simplifies the reviewer assignment process by enabling administrators to enter user information and link them to specific projects or topics.



== Code Snippets ==
===Interfaces for Data Representation===
===ReviewerAssignment Interface===
The ReviewerAssignment interface is designed to represent the structure of data related to project review management. It organizes key information for each project topic, including contributors and assigned reviewers.
<li>'''Topic:''' Represents the title or subject of the project under review.</li>
<li>'''Contributors:''' An array of contributor names involved in the project submission.
<li>'''Reviewers:''' An array of reviewer objects, each containing the reviewer’s name and their current review status.

This structured data model enables clear and efficient tracking of contributors and reviewers associated with each topic, supporting seamless management of peer reviews.

[[File: Add Reviewer11.png |500px|center]]

===Core Functions for Reviewer Management===

'''addReviewer Function:'''

'''Purpose:''' Adds a new reviewer to a specific topic within the table’s data structure.

Process:
<li>Iterates through all existing rows to locate the one that matches the provided topic.

<li>If the topic is found and there are fewer than three reviewers already assigned, it appends a new reviewer object.

<li>The newly added reviewer is automatically given a generated name and username, and their review status is set to "Pending".

<li>If the topic does not match or already has three reviewers, the row remains unchanged.
[[File: const addreviewer.png |600px|center]]

'''UnsubmitReviewer Function:'''

'''Purpose:''' Resets the review status of a specific reviewer to "Pending" for a selected topic.

Process:
<li>Iterates through the table rows to find the one matching the given topic.

<li>Within the matching row, identifies the reviewer by their name.

<li>Updates the reviewer’s status to "Pending" while keeping the rest of their information unchanged.

<li> Leaves all other rows and reviewers unaffected.
[[File: const unsubmit reviewer.png |600px|center]]

===Data Structure for Review Management===
Each topic in the system consists of:
<li>Contributor Details: Includes the names and usernames of contributors.
<li> Reviewer Details: Includes the names, usernames, and current review statuses of assigned reviewers.

This structured dataset provides clarity and supports organized tracking and management of the review process.
[[File: Dummy.png |500px|center]]

==Testing==
===Unit Tests===
Unit testing for TS/front end projects is most applicable for logic-heavy components, which in the case of our project includes the button functionality. The following test cases were included:
* Validating that the "Add Reviewer" button places the reviewer in a status of (Pending)
* Validating that the "Delete outstanding Reviewer" button removes the reviewer's association from the topic

===Manual Tests===
Preconditions include the following:
* The front end and back end need to be successfully integrated
* The database (db) file needs to be successfully seeded
* Username: admin
* Password: password123

{| class="wikitable"
|+ Test Plan for E2534 UI for Assign Reviewers
! Test ID
! Test Case
! Description
! Precondition
! Expected Results
! Actual Results
|-
| 1
| Sign In and Navigate to Assign Reviewers
| Verify that an admin can sign in and navigate to the Assign Reviewers page.
| The admin is logged in using the credentials: username `admin` and password `password123`.
| The admin should successfully navigate to the Assign Reviewers page at assignments/edit/id.
| Pass
|-
| 2
| Table Styling and Layout
| Verify that the table styling (fonts, spacing, headers) matches design guidelines.
| The latest code is deployed, and the frontend is running.
| The table should match the design guidelines for fonts, spacing, and alignment.
| Pass
|-
| 3
| Column Data Types
| Verify that each column in the table displays the correct data type. For example, the "Topic" column should contain text," while the "Reviewed by" column should contain buttons.
| The table is populated with data.
| Each column should display data of the correct type (e.g., text, numbers, dates).
| Pass
|-
| 4
| Navigate to Assign Reviewer and test responsiveness
| Verify that the table columns adjust to fit the screen on smaller devices.
| The user is on the "Assign Reviewer" page.
| The table columns should resize to fit the screen without horizontal scrolling.
| TBD
|-
| 5
| Test the Search Bar on the Assignment Reviewers Page
| Verify that the search bar can be shown/hidden and filters or sorts the desired columns in the table.
| The user is on the Assign Reviewers page.
| The search bar should appear when clicked, filter or sort the assignments, and hide when clicked again.
| TBD
|-
| 6
| Test Keyboard Navigation
| Verify that the user can navigate the table using the keyboard.
| The user is on the Assignment Reviewers page.
| The user should be able to navigate through the table using the Tab key.
| TBD
|-
| 7
| Pagination
| Verify that pagination works correctly when the table has more rows than fit on one page.
| The table contains more rows than fit on one page.
| Pagination controls should allow navigation between pages, and the correct rows should be displayed.
| TBD
|-
| 8
| Accessibility
| Verify that the UI meets accessibility standards (e.g., ARIA roles, keyboard navigation).
| The frontend is running.
| The UI should be navigable using a keyboard, and ARIA roles should be properly implemented.
| TBD
|-
| 9
| Add Reviewer Action Button Functionality
| Verify that by clicking "Add Reviewer" under the contributor column that the user is redirected to the "Add Reviewers" page
| User starts on the Assign Reviewers page
| The user should be redirected to an "Add Reviewer" page where they can add a username.
| TBD
|-
| 10
| Delete Reviewer Action Button Functionality
| Clicking the delete reviewer action button should appropriately remove the review
| User starts on the Assign Reviewers page and there is already an existing review that is displayed
| Verify that by clicking "Delete Reviewer" the reviewer no longer displays in the "Reviewed by" column
| TBD
|-
| 11
| Delete Outstanding Reviewer Action Button Functionality
| Clicking the delete outstanding reviewer button should appear when appropriate and function correctly
| User starts on the Assign Reviewers page and there is a reviewer with a pending status
| Verify that the "Delete Outstanding Reviewer" button only appears when there are reviewers in a pending status for a topic, and that when the button is clicked they are removed successfully. The button should also disappear after this action.
| TBD
|-
| 12
| Unsubmit Review Action Button Functionality
| The unsubmit review action button should appear when appropriate and function correctly
| User starts on the Assign Reviewers page and there is a reviewer assigned to a particular topic
| The unsubmit review should display for reviewers in any status, and clicking the button should ensure the review is no longer in a status of "submitted"
| TBD
|-
| 13
| Delete Review Action Button Functionality
| The delete review action button should appear when appropriate and function correctly
| The User starts on the Assign Reviewers page and there is a reviewer present under the "Reviewed by" column for a particular topic
| The delete review button should display for reviewers in any status, and clicking the button should ensure the review is deleted
| TBD
|-
| 14
| Add Reviewer Functionality
| The user is able to successfully add new reviewers
| The user has clicked on the "Add Reviewer" action button and is redirected to the Add Reviewer page
| The user is able to enter the username of a reviewer, submit the review by clicking the "Add Reviewer" button, and is redirected back to the Assign Reviewers page.
| Pass
|-
| 15
| New Reviewer Status
| New Reviewers that are added should have a correct review status displayed
| A new review has been added by first clicking on the "Add Reviewer" action button
| The reviewer's default status should be "pending" until they submit a review successfully
| Pass
|}

==Future Scope==
This project purposely did not include adding in meta reviewers from the old system in order to focus on core reviewer functionalities. However, in the future, this functionality may be added as needed. This project also did not focus specifically on the backend functionality, so there may be additional testing or implementation needed in order to ensure all API endpoints are tested thoroughly, error handling is successful, etc.

==Relevant Links==
* '''Github Repository:''' https://github.com/delaneydow/reimplementation-front-end
* '''Pull Request:''' https://github.com/expertiza/reimplementation-front-end/pull/95
* '''Youtube Video:'''

==Team Members==
* Delaney Dow (dmdow@ncsu.edu)
* Manbir Guron (msguron@ncsu.edu)
* Elnaz Ghotbitaheri (eghotbi@ncsu.edu)
* Mentor: Vihar Manojkumar Shah (vshah23@ncsu.edu)

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-22T00:25:20Z

Msguron: /* Testing */

==Introduction==

This project will improve the UI functionality to assign reviewers to assignments. This interface needs to be streamlined and only expose a few key fields, while allowing for the simple assignment and deletion of reviewers from projects. This project will focus on implementing this solution within the front end reimplementation environment using Typescript and React.

==Specific Objectives==

* Create a 3 column layout with "Assignment", "Contributor", and "Reviewers" columns
* Add action buttons to add reviewers to an assignment, delete outstanding reviewers
* Add buttons to unsubmit or delete each review in the review column
* Allow for the addition of reviewers by their username

==Proposed Changes==

====Affected Repositories====
* The group will be modifying and updating the expertiza/reimplementation-frontend repository for the front end project
* Changes will be made with React and Typescript

===Create a 3 column layout with "Assignment", "Contributor", and "Reviewers" columns===

====Problem====
In Expertiza, managing reviewer assignments is currently fragmented across different interfaces. The existing “Add Reviewer” UI (as shown in the screenshot) allows an instructor to assign a reviewer by entering a user login manually. While this supports basic functionality, it lacks a unified view and efficient controls for large-scale assignment management.

[[File:ThreeColumnPage.png|center|border|1000px|]]
Specifically, the problems include:
<li>Lack of Visibility: There is no consolidated interface showing topics, contributors, and reviewers in one place.</li>
<li>Manual Input Only: Adding reviewers requires entering login IDs, which is error-prone and not scalable.</li>
<li>Limited Reviewer Controls: There are no built-in options to delete, unsubmit, or manage existing reviews in context.</li>
<li>Unclear Status: Review status (e.g., submitted, not submitted) is not easily visible or actionable from the main UI.</li>
Without a structured layout, instructors cannot efficiently organize or control the review process, especially in larger courses or group projects.

====Solution====
We propose the implementation of a 3-column table layout that clearly organizes the review mapping with integrated reviewer management controls. This layout improves visibility, reduces friction in reviewer assignment, and offers direct interaction with review statuses.
<li>Topic Selected: Displays the assigned topic or project name.</li>
<li>Contributor: Shows team name or student name.</li>
<li>Reviewed By:
Lists assigned reviewers with visual status indicators (🟢 Submitted / 🔴 Not Submitted).
'''Includes action buttons:'''
<li>Add Reviewer: Opens an input field/modal to add a new reviewer.</li>
<li>Delete Reviewer: Removes a reviewer if the review has not been submitted.</li>
<li>Unsubmit: Allows instructors to revert a submitted review for edits or reassignment.</li>

===Add action buttons to add reviewers to an assignment, delete outstanding reviewers===

====Problem====
There needs to be a reviewer management system in the form of action buttons. The two possible options include adding a reviewer to the selected topic, and deleting any outstanding reviewers from the topic that have already been assigned. Without this functionality, the users would not be able to manually add or remove reviewers from a particular topic when necessary.

[[File:ReviewerUI.png|center|border|1000px|View of where the action buttons for reviewer management would be]]

====Solution====

The solution will focus on reimplementing the UI so that it is compatible with both the front end and back end implementations and is therefore two-pronged. One one hand, the front end/UI needs to be re-implemented, while the backend also needs to be reimplemented for API calls while maintaining the same functionality. The primary design goal will be to maintain a RESTful API structure to ensure the frontend-backend integration is seamless.

The <code>participant.rb</code> file holds the backend code, while the file that stores the UI layout from the above screenshot is a page called <code>reviews_summary</code> .

=====participant.rb=====

This solution will need to access multiple participants to render a view for a given topic. Key information like participant name and username will be needed. The key changes to make this file API compatible while maintaining the desired functionality includes
* Use ActiveModel::Serializers to handle JSON Responses from the front end.
* Ensure the Model Supports CRUD Operations via a RESTful API.
** This means the model will need to be correctly connected to a controller that follows RESTful conventions (index, show, create, update, destroy) and returns JSON responses.
* Handle Validations and Errors Gracefully
** Ensure that the model returns structured error responses and generates HTTP response codes that can be used to create efficient and thorough test cases.

===== Reviews_Summary =====

This page will need to render the 3 column layout for displaying topics, reviewers, and reviews. It needs to support the desired interactivity to delete and unsubmit reviews, render topics, and show information about the assignment.

===Add buttons to unsubmit or delete each review in the review column===

==== Problem ====
Instructors need to be able to unsubmit or delete reviews that were submitted in error or were otherwise deficient. Managing this on a per-assignment basis is helpful given the usual linear flow of assignment, submission, and review.

[[File:ReviewerUnsubmit.png|center|border|1000px|View of where the buttons for review unsubmit and delete should be]]

==== Solution ====

The button should not require supplemental interaction from the user, and should indicate the resulting status of the assignment and reviews once pressed. We may initially need to stub the relevant backend <code>responses_controller.rb</code> API endpoints to destroy or unsubmit a review for testing. This functionality can be included with the <code>reviews_summary</code> page mentioned previously

===Allow for the addition of reviewers by their username===

==== Problem ====

Instructors and TAs would like to manually assign reviewers to assignments, and would like to do this in a streamlined fashion. There needs to be functionality to add a user by entering their username, immediately associating them as a reviewer with that assignment.

[[File:Screenshot 2025-04-03 171612.png|center|border|1000px|View of page for assigning a reviewer to an assignment]]

==== Solution ====

Create a separate page linked from the main 3 column interface, there should be a page that supports the input of a username and then assigns that user to the review. The backend API may need to be stubbed at this point to sufficiently test this page, as the full functionality for assigning reviewers is not present in the reimplementation project. This page will need to be included in a separate <code>Add_Reviewer</code> page. Additionally, this page will need to interact with the <code>response.rb</code> model to create a new review and notify the user that they have been added as a reviewer.

===== response.rb & responses_controller.rb =====
The page will need to interact with the RESTful API endpoints for Response to create a new response and assign it to a given reviewer. Logic may need to be added or stubbed to enable this functionality within the current reimplementation environment.

===== Add_Reviewer =====

This page will need to render a page with a text box to input the username of the desired reviewer. The user should then be able to assign that reviewer and formally create the desired instance of the response model once they click 'Add Reviewer'. Appropriate validations should be supported to only assign a user that already exists. Additionally, the user should be able to go back to the 3 column view previously discussed once they have completed adding a reviewer.

==User Story==
As an instructor, I want to view a list of contributors along with the reviewers assigned to them, so that I can effectively manage the reviewer assignments. I also want the ability to unsubmit a reviewer, removing their responsibility for a specific review, and to delete a reviewer entirely from the review process if necessary. As a contributor, I want to view the status of my assignment and see who has been assigned to review it.
''''Use Case Diagram''''
The central user interacts with several use cases, represented by blue ovals surrounding the user. These use cases include:

* '''View Selected Topic:'''Allows the user to view the topic chosen for review.
* '''View Contributors:''' Enables the user to see a list of contributors.
* '''View Reviewers and Review Status:'''Lets the user view the assigned reviewers and their current review status.
* '''Add Reviewers for Each Topic:'''Provides functionality to assign new reviewers to specific topics.
* '''Delete Reviewers for Each Topic:'''Allows the user to remove reviewers assigned to a topic.
* '''Unsubmit Review Status:''' Enables the user to change a reviewer’s status back to "Pending" if needed.
 

[[File:user D11.png|250px|center]]

 

== UI Implementation ==
The upgraded functionality in Expertiza aims to optimize the assignment of reviewers to project submissions by offering a clear, efficient, and intuitive interface. This enhancement assists administrators in overseeing peer reviews more effectively, equipping them with tools to allocate reviewers, monitor their progress, and promote greater transparency throughout the review process.

[[File: Table ASSIGN REVIWER 11.png |1000px|center]]

=== Unsubmit Functionality and Interactive Design===

The interface also provides an option to unsubmit reviews, enhancing flexibility and transparency in the peer-review process. When users move the cursor over the "Unsubmit" link, it changes to green, signaling that it is clickable and interactive.

[[File: Reviewed by..png |400px|center]]


=== Reviewer Management ===

Admins can monitor review statuses and assign new reviewers through a clear and intuitive interface, enabling efficient management of peer reviews and promoting smooth collaboration.

Administrators can seamlessly assign reviewers to submissions through a clear and intuitive interface:
[[File: Reviewed by2.png |400px|center]]

=== Add Reviewer ===
<li>''''Add Reviewer Button:'''' This functionality simplifies the reviewer assignment process by enabling administrators to enter user information and link them to specific projects or topics.



== Code Snippets ==
===Interfaces for Data Representation===
===ReviewerAssignment Interface===
The ReviewerAssignment interface is designed to represent the structure of data related to project review management. It organizes key information for each project topic, including contributors and assigned reviewers.
<li>'''Topic:''' Represents the title or subject of the project under review.</li>
<li>'''Contributors:''' An array of contributor names involved in the project submission.
<li>'''Reviewers:''' An array of reviewer objects, each containing the reviewer’s name and their current review status.

This structured data model enables clear and efficient tracking of contributors and reviewers associated with each topic, supporting seamless management of peer reviews.

[[File: Add Reviewer11.png |500px|center]]

===Core Functions for Reviewer Management===

'''addReviewer Function:'''

'''Purpose:''' Adds a new reviewer to a specific topic within the table’s data structure.

Process:
<li>Iterates through all existing rows to locate the one that matches the provided topic.

<li>If the topic is found and there are fewer than three reviewers already assigned, it appends a new reviewer object.

<li>The newly added reviewer is automatically given a generated name and username, and their review status is set to "Pending".

<li>If the topic does not match or already has three reviewers, the row remains unchanged.
[[File: const addreviewer.png |600px|center]]

'''UnsubmitReviewer Function:'''

'''Purpose:''' Resets the review status of a specific reviewer to "Pending" for a selected topic.

Process:
<li>Iterates through the table rows to find the one matching the given topic.

<li>Within the matching row, identifies the reviewer by their name.

<li>Updates the reviewer’s status to "Pending" while keeping the rest of their information unchanged.

<li> Leaves all other rows and reviewers unaffected.
[[File: const unsubmit reviewer.png |600px|center]]

===Data Structure for Review Management===
Each topic in the system consists of:
<li>Contributor Details: Includes the names and usernames of contributors.
<li> Reviewer Details: Includes the names, usernames, and current review statuses of assigned reviewers.

This structured dataset provides clarity and supports organized tracking and management of the review process.
[[File: Dummy.png |500px|center]]

==Testing==
===Unit Tests===
Unit testing for TS/front end projects is most applicable for logic-heavy components, which in the case of our project includes the button functionality. The following test cases were included:
* Validating that the "Add Reviewer" button places the reviewer in a status of (Pending)
* Validating that the "Delete outstanding Reviewer" button removes the reviewer's association from the topic

===Manual Tests===
Preconditions include the following:
* The front end and back end need to be successfully integrated
* The database (db) file needs to be successfully seeded
* Username: admin
* Password: password123

{| class="wikitable"
|+ Test Plan for E2534 UI for Assign Reviewers
! Test ID
! Test Case
! Description
! Precondition
! Expected Results
! Actual Results
|-
| 1
| Sign In and Navigate to Assign Reviewers
| Verify that an admin can sign in and navigate to the Assign Reviewers page.
| The admin is logged in using the credentials: username `admin` and password `password123`.
| The admin should successfully navigate to the Assign Reviewers page at assignments/edit/id.
| Pass
|-
| 2
| Table Styling and Layout
| Verify that the table styling (fonts, spacing, headers) matches design guidelines.
| The latest code is deployed, and the frontend is running.
| The table should match the design guidelines for fonts, spacing, and alignment.
| Pass
|-
| 3
| Column Data Types
| Verify that each column in the table displays the correct data type. For example, the "Topic" column should contain text," while the "Reviewed by" column should contain buttons.
| The table is populated with data.
| Each column should display data of the correct type (e.g., text, numbers, dates).
| Pass
|-
| 4
| Navigate to Assign Reviewer and test responsiveness
| Verify that the table columns adjust to fit the screen on smaller devices.
| The user is on the "Assign Reviewer" page.
| The table columns should resize to fit the screen without horizontal scrolling.
| TBD
|-
| 5
| Test the Search Bar on the Assignment Reviewers Page
| Verify that the search bar can be shown/hidden and filters or sorts the desired columns in the table.
| The user is on the Assign Reviewers page.
| The search bar should appear when clicked, filter or sort the assignments, and hide when clicked again.
| TBD
|-
| 6
| Test Keyboard Navigation
| Verify that the user can navigate the table using the keyboard.
| The user is on the Assignment Reviewers page.
| The user should be able to navigate through the table using the Tab key.
| TBD
|-
| 7
| Pagination
| Verify that pagination works correctly when the table has more rows than fit on one page.
| The table contains more rows than fit on one page.
| Pagination controls should allow navigation between pages, and the correct rows should be displayed.
| TBD
|-
| 8
| Accessibility
| Verify that the UI meets accessibility standards (e.g., ARIA roles, keyboard navigation).
| The frontend is running.
| The UI should be navigable using a keyboard, and ARIA roles should be properly implemented.
| TBD
|-
| 9
| Add Reviewer Action Button Functionality
| Verify that by clicking "Add Reviewer" under the contributor column that the user is redirected to the "Add Reviewers" page
| User starts on the Assign Reviewers page
| The user should be redirected to an "Add Reviewer" page where they can add a username.
| TBD
|-
| 10
| Delete Reviewer Action Button Functionality
| Clicking the delete reviewer action button should appropriately remove the review
| User starts on the Assign Reviewers page and there is already an existing review that is displayed
| Verify that by clicking "Delete Reviewer" the reviewer no longer displays in the "Reviewed by" column
| TBD
|-
| 11
| Delete Outstanding Reviewer Action Button Functionality
| Clicking the delete outstanding reviewer button should appear when appropriate and function correctly
| User starts on the Assign Reviewers page and there is a reviewer with a pending status
| Verify that the "Delete Outstanding Reviewer" button only appears when there are reviewers in a pending status for a topic, and that when the button is clicked they are removed successfully. The button should also disappear after this action.
| TBD
|-
| 12
| Unsubmit Review Action Button Functionality
| The unsubmit review action button should appear when appropriate and function correctly
| User starts on the Assign Reviewers page and there is a reviewer assigned to a particular topic
| The unsubmit review should display for reviewers in any status, and clicking the button should ensure the review is no longer in a status of "submitted"
| TBD
|-
| 13
| Delete Review Action Button Functionality
| The delete review action button should appear when appropriate and function correctly
| The User starts on the Assign Reviewers page and there is a reviewer present under the "Reviewed by" column for a particular topic
| The delete review button should display for reviewers in any status, and clicking the button should ensure the review is deleted
| TBD
|-
| 14
| Add Reviewer Functionality
| The user is able to successfully add new reviewers
| The user has clicked on the "Add Reviewer" action button and is redirected to the Add Reviewer page
| The user is able to enter the username of a reviewer, submit the review by clicking the "Add Reviewer" button, and is redirected back to the Assign Reviewers page.
| TBD
|-
| 15
| New Reviewer Status
| New Reviewers that are added should have a correct review status displayed
| A new review has been added by first clicking on the "Add Reviewer" action button
| The reviewer's default status should be "pending" until they submit a review successfully
| TBD
|}

==Future Scope==
This project purposely did not include adding in meta reviewers from the old system in order to focus on core reviewer functionalities. However, in the future, this functionality may be added as needed. This project also did not focus specifically on the backend functionality, so there may be additional testing or implementation needed in order to ensure all API endpoints are tested thoroughly, error handling is successful, etc.

==Relevant Links==
* '''Github Repository:''' https://github.com/delaneydow/reimplementation-front-end
* '''Pull Request:''' https://github.com/expertiza/reimplementation-front-end/pull/95
* '''Youtube Video:'''

==Team Members==
* Delaney Dow (dmdow@ncsu.edu)
* Manbir Guron (msguron@ncsu.edu)
* Elnaz Ghotbitaheri (eghotbi@ncsu.edu)
* Mentor: Vihar Manojkumar Shah (vshah23@ncsu.edu)

File:Table ASSIGN REVIWER 11.png

2025-04-22T00:22:19Z

Msguron: Msguron uploaded a new version of File:Table ASSIGN REVIWER 11.png

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-04T15:15:13Z

Msguron: /* Introduction */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-04T15:14:43Z

Msguron: /* Introduction */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-04T15:13:06Z

Msguron: /* reviews_summary */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-04T15:12:42Z

Msguron: /* Solution */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-04T15:11:50Z

Msguron: /* Solution */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-04T15:11:35Z

Msguron: /* reviews_summary */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-04T15:11:22Z

Msguron: /* Add action buttons to add reviewers to an assignment, delete outstanding reviewers */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-04T02:38:42Z

Msguron: /* response.rb & responses_controller.rb */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-04T02:10:45Z

Msguron: /* response.rb */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-04T02:09:17Z

Msguron: /* Solution */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-04T02:05:18Z

Msguron: /* _add_reviewer.html.erb */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-04T02:02:23Z

Msguron: /* _add_reviewer.html.erb */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-04T01:59:09Z

Msguron: /* _add_reviewer.html.erb */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-04T01:58:56Z

Msguron: /* reviews_summary.html.erb */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-03T22:01:04Z

Msguron: /* Problem */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-03T22:00:52Z

Msguron: /* Create a 3 column layout with "Assignment", "Contributor", and "Reviewers" columns */

File:ThreeColumnPage.png

2025-04-03T22:00:35Z

Msguron:

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-03T21:59:02Z

Msguron: /* reviews_summary.html.erb */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-03T21:58:24Z

Msguron: /* reviews_summary.html.erb */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-03T21:57:39Z

Msguron: /* participant.rb */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-03T21:56:28Z

Msguron: /* reviews_summary.html.erb */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-03T21:55:42Z

Msguron: /* Solution */

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

2025-04-03T21:40:40Z

Msguron:

CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers

* [[CSC/ECE 517 Spring 2025 - E2503. Refactor the Team hierarchy]]
* [[CSC/ECE 517 Spring 2025 - E2504. Mentor-meeting management]]
* [[CSC/ECE 517 Spring 2025 - E2505. Testing Answer Tagging]]
* [[CSC/ECE 517 Spring 2025 - E2508. Reimplement bidding-algorithm web service]]
* [[CSC/ECE 517 Spring 2025 - E2509. Reimplement feedback_response_map.rb]]
* [[CSC/ECE 517 Spring 2025 - E2519. Implement view for results of bidding]]
* [[CSC/ECE 517 Spring 2025 - E2522. Enhancing UI Consistency in Expertiza 1]]
* [[CSC/ECE 517 Spring 2025 - E2520. Reimplement heatgrid UI for reviews]]
* [[CSC/ECE 517 Spring 2025 - E2517. Reimplement internationalization (frontend + backend)]]
* [[CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2]]
* [[CSC/ECE 517 Spring 2025 - E2515: Reimplement student_teams_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2501: Refactor review_mapping_helper.rb]]
* [[CSC/ECE 517 Spring 2025 - E2502: Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2512. Reimplement responses controller]]
* [[CSC/ECE 517 Spring 2025 - E2510. Reimplement grades_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2507. Reimplement back end for submission records]]
* [[CSC/ECE 517 Spring 2025 - E2514. Reimplement student_quizzes_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2518. Reimplement password resets (frontend + backend)]]
* [[CSC/ECE 517 Spring 2025 - E2516. Reimplement teams_users_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2511. Reimplement participants_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2521. UI for View submissions/assign grades (except heatgrid)]]
* [[CSC/ECE 517 Spring 2025 - E2513. Reimplement sign_up_topic.rb as project_topic.rb]]
* [[CSC/ECE 517 Spring 2025 - E2506. Implement testing for new Bookmarks Controller]]
* [[CSC/ECE 517 Spring 2025 - E2527. Mentor-meeting management: assignments with topics]]
* [[CSC/ECE 517 Spring 2025 - E2532. Reimplement Missing ResponseMap Subclasses]]

== Final Projects ==
* [[CSC/ECE 517 Spring 2025 - E2539 Reimplement Student Task View (Frontend + Backend)]]
* [[CSC/ECE 517 Spring 2025 - E2521 UI for View submissions/assign grades (except heatgrid)]]
* [[CSC/ECE 517 Spring 2025 - E2530 Reimplement Grades Controller (Frontend + Backend)]]
* [[CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza]]
* [[CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers]]

CSC/ECE 517 Spring 2025 - E2534 Reimplement Internationalization

2025-04-03T00:17:49Z

Msguron: Msguron moved page CSC/ECE 517 Spring 2025 - E2534 Reimplement Internationalization to CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers: Misspelled title

#REDIRECT [[CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers]]