CSC/ECE 517 Spring 2025 E2523. Enhancing UI Consistency in Expertiza 2

README.md

@@ -6,6 +6,9 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
+### `npm install`
+Installs the dependencies required 
+
 ### `npm start`
 
 Runs the app in the development mode.\

package.json

@@ -20,8 +20,7 @@
     "axios": "^1.4.0",
     "bootstrap": "^5.3.3",
     "chart.js": "^4.1.1",
-    "recharts": "^2.0.0",
-    "formik": "^2.2.9",
+    "formik": "^2.4.6",
     "jquery": "^3.7.1",
     "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
@@ -34,6 +33,8 @@
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.11.1",
     "react-scripts": "^5.0.1",
+    "react-select": "^5.8.3",
+    "recharts": "^2.0.0",
     "redux-persist": "^6.0.0",
     "sass": "^1.62.1",
     "save": "^2.9.0",

src/App.tsx

@@ -1,45 +1,46 @@
-import React from "react";
+import RootLayout from "layout/Root";
+import { loadAssignment } from "pages/Assignments/AssignmentUtil";
+import AssignReviewer from "pages/Assignments/AssignReviewer";
+import CreateTeams from "pages/Assignments/CreateTeams";
+import ViewDelayedJobs from "pages/Assignments/ViewDelayedJobs";
+import ViewReports from "pages/Assignments/ViewReports";
+import ViewScores from "pages/Assignments/ViewScores";
+import Courses from "pages/Courses/Course";
+import CourseEditor from "pages/Courses/CourseEditor";
+import { loadCourseInstructorDataAndInstitutions } from "pages/Courses/CourseUtil";
+import Questionnaire from "pages/EditQuestionnaire/Questionnaire";
+import Home from "pages/Home";
+import Participants from "pages/Participants/Participant";
+import ParticipantEditor from "pages/Participants/ParticipantEditor";
+import { loadParticipantDataRolesAndInstitutions } from "pages/Participants/participantUtil";
+import EditProfile from "pages/Profile/Edit";
+import Reviews from "pages/Reviews/reviews";
+import SubmissionsView from "pages/Submissions/SubmissionsView";
+import SubmissionView from "pages/Submissions/SubmissionView";
+import SubmissionHistoryView from "./pages/Submissions/SubmissionHistoryView";
+import TA from "pages/TA/TA";
+import TAEditor from "pages/TA/TAEditor";
+import { loadTAs } from "pages/TA/TAUtil";
 import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom";
 import AdministratorLayout from "./layout/Administrator";
 import ManageUserTypes, { loader as loadUsers } from "./pages/Administrator/ManageUserTypes";
+import Assignment from "./pages/Assignments/Assignment";
+import AssignmentEditor from "./pages/Assignments/AssignmentEditor";
 import Login from "./pages/Authentication/Login";
 import Logout from "./pages/Authentication/Logout";
+import Email_the_author from "./pages/Email_the_author/email_the_author";
 import InstitutionEditor, { loadInstitution } from "./pages/Institutions/InstitutionEditor";
 import Institutions, { loadInstitutions } from "./pages/Institutions/Institutions";
 import RoleEditor, { loadAvailableRole } from "./pages/Roles/RoleEditor";
 import Roles, { loadRoles } from "./pages/Roles/Roles";
-import Assignment from "./pages/Assignments/Assignment";
-import AssignmentEditor from "./pages/Assignments/AssignmentEditor";
-import { loadAssignment } from "pages/Assignments/AssignmentUtil";
-import ErrorPage from "./router/ErrorPage";
-import ProtectedRoute from "./router/ProtectedRoute";
-import { ROLE } from "./utils/interfaces";
-import NotFound from "./router/NotFound";
-import Participants from "pages/Participants/Participant";
-import ParticipantEditor from "pages/Participants/ParticipantEditor";
-import { loadParticipantDataRolesAndInstitutions } from "pages/Participants/participantUtil";
-import RootLayout from "layout/Root";
-import UserEditor from "./pages/Users/UserEditor";
 import Users from "./pages/Users/User";
+import UserEditor from "./pages/Users/UserEditor";
 import { loadUserDataRolesAndInstitutions } from "./pages/Users/userUtil";
-import Home from "pages/Home";
-import Questionnaire from "pages/EditQuestionnaire/Questionnaire";
-import Courses from "pages/Courses/Course";
-import CourseEditor from "pages/Courses/CourseEditor";
-import { loadCourseInstructorDataAndInstitutions } from "pages/Courses/CourseUtil";
-import TA from "pages/TA/TA";
-import TAEditor from "pages/TA/TAEditor";
-import { loadTAs } from "pages/TA/TAUtil";
 import ReviewTable from "./pages/ViewTeamGrades/ReviewTable";
-import EditProfile from "pages/Profile/Edit";
-import Reviews from "pages/Reviews/reviews";
-import Email_the_author from "./pages/Email_the_author/email_the_author";
-import CreateTeams from "pages/Assignments/CreateTeams";
-import AssignReviewer from "pages/Assignments/AssignReviewer";
-import ViewSubmissions from "pages/Assignments/ViewSubmissions";
-import ViewScores from "pages/Assignments/ViewScores";
-import ViewReports from "pages/Assignments/ViewReports";
-import ViewDelayedJobs from "pages/Assignments/ViewDelayedJobs";
+import ErrorPage from "./router/ErrorPage";
+import NotFound from "./router/NotFound";
+import ProtectedRoute from "./router/ProtectedRoute";
+import { ROLE } from "./utils/interfaces";
 function App() {
   const router = createBrowserRouter([
     {
@@ -72,9 +73,13 @@ function App() {
         },
         {
           path: "assignments/edit/:id/viewsubmissions",
-          element: <ViewSubmissions />,
+          element: <SubmissionView />,
           loader: loadAssignment,
         },
+		{
+		  path: "submissions/history/:submissionId",
+		  element: <ProtectedRoute element={<SubmissionHistoryView />} leastPrivilegeRole={ROLE.TA} />,
+		},
         {
           path: "assignments/edit/:id/viewscores",
           element: <ViewScores />,
@@ -122,6 +127,10 @@ function App() {
             },
           ],
         },
+        {
+          path: "student_tasks",
+          element: <ProtectedRoute element={<SubmissionsView />} leastPrivilegeRole={ROLE.TA} />,
+        },
         {
           path: "student_tasks/participants",
           element: <Participants type="student_tasks" id={1} />,

src/components/ColumnButton.test.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ColumnButton from "./ColumnButton";
+
+// Mock React-Bootstrap components
+jest.mock("react-bootstrap", () => ({
+  Button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
+  Tooltip: ({ id, children }: any) => <div id={id}>{children}</div>,
+  OverlayTrigger: ({ children, overlay }: any) => (
+    <div>
+      {overlay}
+      {children}
+    </div>
+  ),
+}));
+
+describe("ColumnButton", () => {
+  const mockOnClick = jest.fn();
+
+  const baseProps = {
+    id: "test-button",
+    label: "Test Button",
+    tooltip: "This is a test tooltip",
+    variant: "primary",
+    size: "sm" as const,
+    className: "custom-class",
+    onClick: mockOnClick,
+    icon: <span data-testid="icon">Icon</span>,
+  };
+
+  test("should call onClick when the button is clicked", async () => {
+    render(<ColumnButton {...baseProps} tooltip={undefined} />);
+    const button = screen.getByRole("button", { name: "Test Button" });
+
+    userEvent.click(button);
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+
+  test("should render a tooltip when tooltip is provided", () => {
+    render(<ColumnButton {...baseProps} />);
+    const tooltip = screen.getByText("This is a test tooltip");
+
+    // Vanilla assertion to check if tooltip is rendered
+    expect(tooltip).not.toBeNull();
+    const button = screen.getByRole("button", { name: "Test Button" });
+    expect(button).not.toBeNull(); // Ensure the button is still present
+  });
+
+  test("should not render a tooltip when tooltip is not provided", () => {
+    render(<ColumnButton {...baseProps} tooltip={undefined} />);
+    const tooltip = screen.queryByText("This is a test tooltip");
+
+    // Vanilla assertion to check if tooltip is not rendered
+    expect(tooltip).toBeNull();
+  });
+});

src/components/ColumnButton.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
+
+/**
+ * @author Rutvik Kulkarni on Nov, 2024
+ */
+
+interface ColumnButtonProps {
+    id: string;
+    label?: string;
+    tooltip?: string;
+    variant: string;
+    size?: "sm" | "lg"; // Matches React-Bootstrap Button prop
+    className?: string;
+    onClick: () => void;
+    icon: React.ReactNode;
+  }
+
+  const ColumnButton: React.FC<ColumnButtonProps> = (props) => {
+    const {
+      id,
+      label,
+      tooltip,
+      variant,
+      size,
+      className,
+      onClick,
+      icon,
+    } = props;
+
+    const displayButton = (
+      <Button
+        variant={variant}
+        size={size}
+        className={className}
+        onClick={onClick}
+        aria-label={label}
+      >
+        {icon}
+      </Button>
+    );
+
+    if (tooltip) {
+      return (
+        <OverlayTrigger
+          placement="top"
+          overlay={<Tooltip id={`${id}-tooltip`}>{tooltip}</Tooltip>}
+        >
+          {displayButton}
+        </OverlayTrigger>
+      );
+    }
+
+    return displayButton;
+  };
+
+  export default ColumnButton;

src/components/Form/FormSelect.tsx

@@ -8,7 +8,7 @@ import { IFormikFieldProps, IFormPropsWithOption } from "./interfaces";
  * @author Ankur Mundra on May, 2023
  */
 
-const FormSelect: React.FC<IFormPropsWithOption> = (props) => {
+const FormSelect: React.FC<IFormPropsWithOption & { onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void }> = (props) => {
   const {
     as,
     md,
@@ -21,6 +21,7 @@ const FormSelect: React.FC<IFormPropsWithOption> = (props) => {
     tooltipPlacement,
     disabled,
     inputGroupPrepend,
+    onChange, // Add onChange to props to detect chnage in selected institutions.
   } = props;
 
   const displayLabel = tooltip ? (
@@ -48,6 +49,12 @@ const FormSelect: React.FC<IFormPropsWithOption> = (props) => {
                 disabled={disabled}
                 isInvalid={isInvalid}
                 feedback={form.errors[field.name]}
+                onChange={(event) => {
+                  field.onChange(event); // Call Formik's onChange
+                  if (onChange) {
+                    onChange(event); // Call the passed onChange if provided
+                  }
+                }}
               >
                 {options.map((option) => {
                   return (

src/components/Form/interfaces.ts

@@ -25,6 +25,7 @@ export interface IFormOption {
 
 export interface IFormPropsWithOption extends IFormProps {
   options: IFormOption[];
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
 }
 
 export interface IFormikFieldProps {

src/components/Table/GlobalFilter.tsx

@@ -8,14 +8,23 @@ import DebouncedInput from "./DebouncedInput";
 interface FilterProps {
   filterValue: string | number;
   setFilterValue: (value: string | number) => void;
+  isDisabled?: boolean; // New optional prop to disable the filter
 }
 
-const GlobalFilter: React.FC<FilterProps> = ({ filterValue, setFilterValue }) => {
+const GlobalFilter: React.FC<FilterProps> = ({
+  filterValue,
+  setFilterValue,
+  isDisabled = true, // Default to true for disabling
+}) => {
   const searchHandler = useCallback(
     (value: string | number) => setFilterValue(value),
     [setFilterValue]
   );
 
+  if (isDisabled) {
+    return null; // Render nothing when disabled
+  }
+
   return (
     <DebouncedInput
       onChange={searchHandler}