Feat/coord interface/integration

.github/workflows/cypress.yml

@@ -90,6 +90,10 @@ jobs:
       - name: Install npm dependencies
         run: |
           npm ci
+      - name: Install Firefox
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y firefox
       - name: Run Cypress
         uses: cypress-io/github-action@v6
         with:
@@ -108,5 +112,5 @@ jobs:
           # pass GitHub token to allow accurately detecting a build vs a re-run build
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           # better cypress run titles
-          COMMIT_INFO_MESSAGE: ${{github.event.pull_request.title}}
-          COMMIT_INFO_SHA: ${{github.event.pull_request.head.sha}}
+          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
+          COMMIT_INFO_SHA: ${{ github.event.pull_request.head.sha }}

csm_web/frontend/src/components/App.tsx

@@ -9,6 +9,7 @@ import { emptyRoles, Roles } from "../utils/user";
 import CourseMenu from "./CourseMenu";
 import Home from "./Home";
 import Policies from "./Policies";
+import CoordTable from "./coord_interface/CoordTable";
 import { DataExport } from "./data_export/DataExport";
 import { EnrollmentMatcher } from "./enrollment_automation/EnrollmentMatcher";
 import { Resources } from "./resource_aggregation/Resources";
@@ -38,6 +39,8 @@ const App = () => {
           <Route index element={<Home />} />
           <Route path="sections/:id/*" element={<Section />} />
           <Route path="courses/*" element={<CourseMenu />} />
+          <Route path="coord/:id/students" element={<CoordTable />} />
+          <Route path="coord/:id/mentors" element={<CoordTable />} />
           <Route path="resources/*" element={<Resources />} />
           <Route path="matcher/*" element={<EnrollmentMatcher />} />
           <Route path="policies/*" element={<Policies />} />

csm_web/frontend/src/components/Home.tsx

@@ -131,9 +131,11 @@ const CourseCard = ({ profiles }: CourseCardProps): React.ReactElement => {
 
   if (role === Role.COORDINATOR) {
     return (
-      <Link to={`/courses/${courseId}`} className="course-card-link">
-        <Card />
-      </Link>
+      <>
+        <Link to={`/courses/${courseId}`} className="course-card-link">
+          <Card />
+        </Link>
+      </>
     );
   }
 

csm_web/frontend/src/components/SearchBar.tsx

@@ -12,7 +12,7 @@ export const SearchBar = ({ className, refObject, onChange }: SearchBarProps) =>
   return (
     <div className={`search-bar ${className ?? ""}`}>
       <SearchIcon className="search-icon" />
-      <input className="search-input" type="text" ref={refObject} onChange={onChange} />
+      <input placeholder="Search..." className="search-input" type="text" ref={refObject} onChange={onChange} />
     </div>
   );
 };

csm_web/frontend/src/components/coord_interface/ActionButton.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+interface ActionButtonProps {
+  copyEmail: () => void;
+  reset: () => void;
+}
+
+export default function ActionButton({ copyEmail, reset }: ActionButtonProps) {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const isStudents = pathname.includes("students");
+  function changeURL() {
+    const newPath = isStudents ? pathname.replace("students", "mentors") : pathname.replace("mentors", "students");
+    reset();
+    navigate(newPath);
+  }
+  return (
+    <div className="actionButtons">
+      <button onClick={copyEmail}>
+        <div id="default-copy">Copy Selected Emails</div>
+        <div id="success-copy" className="hidden">
+          <div className="checkmark"></div>
+
+          <div>Copied!</div>
+        </div>
+      </button>
+      {isStudents ? (
+        <button onClick={changeURL}>
+          <div>See Mentors</div>
+        </button>
+      ) : (
+        <button onClick={changeURL}>
+          <div>Students</div>
+        </button>
+      )}
+    </div>
+  );
+}

csm_web/frontend/src/components/coord_interface/CheckBox.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import styles from "../../css/coord_interface.scss";
+
+interface CheckBoxProps {
+  id: string;
+  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+}
+
+export function CheckBox({ id, onClick: onClick }: CheckBoxProps) {
+  return (
+    <td className={styles}>
+      <div className="checkbox-wrapper">
+        <input className="inp-cbx" id={id + "check"} type="checkbox" onClick={onClick} />
+        <label className="cbx" htmlFor={id + "check"}>
+          <span>
+            <svg width="12px" height="10px">
+              <use xlinkHref="#check"></use>
+            </svg>
+          </span>
+        </label>
+        <svg className="inline-svg">
+          <symbol id="check" viewBox="0 0 12 10">
+            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
+          </symbol>
+        </svg>
+      </div>
+    </td>
+  );
+}