Added tooltip UX to School variables(abbrev, desc, regex)

frontend/src/App.js

@@ -16,6 +16,7 @@ import SchoolIndexPage from "main/pages/SchoolIndexPage";
 import CoursesCreatePage from "main/pages/CoursesCreatePage";
 import CourseIndexPage from "main/pages/CourseIndexPage";
 
+
 import { hasRole, useCurrentUser } from "main/utils/currentUser";
 import NotFoundPage from "main/pages/NotFoundPage";
 

frontend/src/fixtures/schoolsFixtures.js

@@ -3,30 +3,26 @@ const schoolsFixtures = {
         "abbrev": "ucsb",
         "name": "UC Santa Barbara",
         "termRegex": "[WSMF]\\d\\d",
-        "termDescription": "Enter quarter, e.g. F23, W24, S24, M24",
-        "termError": "Quarter must be entered in the correct format"
+        "termDescription": "Enter quarter, e.g. F23, W24, S24, M24"
     },
     threeSchools: [
         { 
             "abbrev": "ucsb",
             "name": "UC Santa Barbara",
             "termRegex": "[WSMF]\\d\\d",
-            "termDescription": "Enter quarter, e.g. F23, W24, S24, M24",
-            "termError": "Quarter must be entered in the correct format"
+            "termDescription": "Enter quarter, e.g. F23, W24, S24, M24"
         },
         {
             "abbrev": "umn",
             "name": "University of Minnesota",
             "termRegex": "[WSMF]\\d\\d",
-            "termDescription": "Enter quarter, e.g. F23, W24, S24, M24",
-            "termError": "Quarter must be entered in the correct format"
+            "termDescription": "Enter quarter, e.g. F23, W24, S24, M24"
         },
         {
             "abbrev": "ucsd",
             "name": "UC San Diego",
             "termRegex": "[WSMF]\\d\\d",
-            "termDescription": "Enter quarter, e.g. F23, W24, S24, M24",
-            "termError": "Quarter must be entered in the correct format"
+            "termDescription": "Enter quarter, e.g. F23, W24, S24, M24"
         }
     ]
 };

frontend/src/main/components/Courses/CoursesTable.js

@@ -37,6 +37,7 @@ import React from "react";
          {
              Header: 'id',
              accessor: 'id',
+             Cell: ({ value }) => <a data-testid={`linkToCoursesPage-${value}`} href={`/courses/${value}`}>{value}</a>,
          },
          {
              Header: 'Name',

frontend/src/main/components/School/SchoolForm.js

@@ -1,4 +1,4 @@
-import { Button, Form, Row, Col } from 'react-bootstrap';
+import { Button, Form, Row, Col, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
 
@@ -26,13 +26,19 @@ function SchoolForm({ initialContents, submitAction, buttonLabel = "Create" }) {
                 <Col>
                     <Form.Group className="mb-3" >
                         <Form.Label htmlFor="abbrev">Abbreviation</Form.Label>
+                        <OverlayTrigger
+                            placement="top"
+                            overlay={<Tooltip>Please enter an abbreviation for school name in lowercase. EX: UCSB</Tooltip>}
+                            delay='5'
+                        >
                         <Form.Control
                             data-testid="SchoolForm-abbrev"
                             id="abbrev"
                             type="text"
                             isInvalid={Boolean(errors.abbrev)}
                             {...register("abbrev", { required: true, pattern: abbrev_regex })}
                         />
+                        </OverlayTrigger>
                         <Form.Control.Feedback type="invalid">
                             {errors.abbrev?.type === 'required' && 'Abbreviation is required. '}
                             {errors.abbrev?.type === 'pattern' && 'Abbreviation must be lowercase letters (_ and . allowed), e.g. ucsb'}
@@ -57,13 +63,19 @@ function SchoolForm({ initialContents, submitAction, buttonLabel = "Create" }) {
                 <Col>
                     <Form.Group className="mb-3" >
                         <Form.Label htmlFor="termRegex">Term Regex</Form.Label>
+                         <OverlayTrigger
+                            placement="top"
+                            overlay={<Tooltip>Please enter a regular expression for the format of terms (semesters or quarters) at the school. EX: [WSMF]\d\d for UCSB</Tooltip>}
+                            delay='5'
+                        >
                         <Form.Control
                             data-testid="SchoolForm-termRegex"
                             id="termRegex"
                             type="text"
                             isInvalid={Boolean(errors.termRegex)}
                             {...register("termRegex", { required: true })}
                         />
+                        </OverlayTrigger> 
                         <Form.Control.Feedback type="invalid">
                             {errors.termRegex && 'Term Regex is required. '}
                         </Form.Control.Feedback>
@@ -75,38 +87,26 @@ function SchoolForm({ initialContents, submitAction, buttonLabel = "Create" }) {
                 <Col>
                     <Form.Group className="mb-3" >
                         <Form.Label htmlFor="termDescription">Term Description</Form.Label>
+                        <OverlayTrigger
+                            placement="top"
+                            overlay={<Tooltip>Please enter a term description. EX: Quarter, Semester or Session</Tooltip>}
+                            delay='5'
+                        >
                         <Form.Control
                             data-testid="SchoolForm-termDescription"
                             id="termDescription"
                             type="text"
                             isInvalid={Boolean(errors.termDescription)}
                             {...register("termDescription", { required: true})}
                         />
+                        </OverlayTrigger>
                         <Form.Control.Feedback type="invalid">
                             {errors.termDescription && 'Term Description is required.'}
                         </Form.Control.Feedback>
                     </Form.Group>
                 </Col>
             </Row>
 
-            <Row>
-                <Col>
-                    <Form.Group className="mb-3" >
-                        <Form.Label htmlFor="termError">Term Error</Form.Label>
-                        <Form.Control
-                            data-testid="SchoolForm-termError"
-                            id="termError"
-                            type="text"
-                            isInvalid={Boolean(errors.termError)}
-                            {...register("termError", { required: true})}
-                        />
-                        <Form.Control.Feedback type="invalid">
-                            {errors.termError && 'Term Error is required.'}
-                        </Form.Control.Feedback>
-                    </Form.Group>
-                </Col>
-            </Row>
-
             <Row>
                 <Col>
                     <Button

frontend/src/main/components/School/SchoolTable.js

@@ -45,10 +45,6 @@ import React from "react";
              Header: 'TermDescription',
              accessor: 'termDescription',
          },
-         {
-             Header: 'TermError',
-             accessor: 'termError',
-         },
      ];
 
      if (hasRole(currentUser, "ROLE_ADMIN")) {

frontend/src/main/pages/CoursesShowPage.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { useParams } from "react-router-dom";
+import { useBackend } from 'main/utils/useBackend';
+import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
+import CoursesTable from 'main/components/Courses/CoursesTable';
+import { useCurrentUser} from 'main/utils/currentUser';
+
+export default function CourseShowPage() {
+
+  let { id } = useParams();
+  const { data: currentUser } = useCurrentUser();
+
+  const { data: courses, error: _error, status: _status } =
+    useBackend(
+      // Stryker disable next-line all : don't test internal caching of React Query
+      [`/api/courses?id=${id}`],
+      // Stryker disable next-line all : GET is the default
+      { method: "GET", url: "/api/courses/get", params: { id }},
+      // Stryker disable next-line all : GET is the default
+      []
+    );
+
+
+    return (
+      <BasicLayout>
+        <div className="pt-2">
+          <h1>Course {id} Info</h1>
+          <CoursesTable courses={[courses]} currentUser={currentUser} />
+        </div>
+      </BasicLayout>
+    )
+}

frontend/src/stories/pages/CourseShowPage.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { apiCurrentUserFixtures } from "fixtures/currentUserFixtures";
+import { systemInfoFixtures } from "fixtures/systemInfoFixtures";
+import { coursesFixtures } from "fixtures/coursesFixtures";
+import { rest } from "msw";
+
+import CoursesShowPage from "main/pages/CoursesShowPage";
+
+export default {
+    title: 'pages/CourseShowPage',
+    component: CoursesShowPage
+};
+
+const Template = () => <CoursesShowPage storybook={true}/>;
+
+export const Default = Template.bind({});
+Default.parameters = {
+    msw: [
+        rest.get('/api/currentUser', (_req, res, ctx) => {
+            return res( ctx.json(apiCurrentUserFixtures.adminUser));
+        }),
+        rest.get('/api/systemInfo', (_req, res, ctx) => {
+            return res(ctx.json(systemInfoFixtures.showingNeither));
+        }),
+        rest.get('/api/courses/get', (_req, res, ctx) => {
+            return res(ctx.json(coursesFixtures.oneCourse));
+        }),
+    ],
+}

frontend/src/tests/components/Courses/CoursesTable.test.js

@@ -294,4 +294,22 @@ describe("UserTable tests", () => {
     expect(totalCoursesElement).toBeInTheDocument();
   });
 
+  test("ID is a hyperlink", async () => {  
+
+    const currentUser = currentUserFixtures.adminUser;
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>
+            <CoursesTable courses={coursesFixtures.threeCourses} currentUser={currentUser} />
+        </MemoryRouter>
+      </QueryClientProvider>
+
+    );
+
+    const idLink = screen.getByTestId(`linkToCoursesPage-1`);
+    expect(idLink).toBeInTheDocument();
+    expect(idLink.getAttribute('href')).toBe('/courses/1');
+  });
+
 });

frontend/src/tests/components/School/SchoolForm.test.js

@@ -31,6 +31,9 @@ describe("SchoolForm tests", () => {
         await screen.findByTestId(/SchoolForm-abbrev/);
         expect(screen.getByText(/Abbreviation/)).toBeInTheDocument();
         expect(screen.getByTestId(/SchoolForm-abbrev/)).toHaveValue("ucsb");
+        expect(screen.getByTestId(/SchoolForm-name/)).toHaveValue("UC Santa Barbara");
+        expect(screen.getByTestId(/SchoolForm-termRegex/)).toHaveValue("[WSMF]\\d\\d");
+        expect(screen.getByTestId(/SchoolForm-termDescription/)).toHaveValue("Enter quarter, e.g. F23, W24, S24, M24");
     });
 
     test("Correct Error messsages on bad input", async () => {
@@ -64,7 +67,6 @@ describe("SchoolForm tests", () => {
         expect(screen.getByText(/Name is required./)).toBeInTheDocument();
         expect(screen.getByText(/Term Regex is required./)).toBeInTheDocument();
         expect(screen.getByText(/Term Description is required./)).toBeInTheDocument();
-        expect(screen.getByText(/Term Error is required./)).toBeInTheDocument();
     });
 
     test("No Error messsages on good input", async () => {
@@ -80,14 +82,12 @@ describe("SchoolForm tests", () => {
         const nameField = screen.getByTestId("SchoolForm-name");
         const termRegexField = screen.getByTestId("SchoolForm-termRegex");
         const termDescriptionField = screen.getByTestId("SchoolForm-termDescription");
-        const termErrorField = screen.getByTestId("SchoolForm-termError");
         const submitButton = screen.getByTestId("SchoolForm-submit");
 
         fireEvent.change(abbrevField, { target: { value: 'ucsb' } });
         fireEvent.change(nameField, { target: { value: 'UC Santa Barbara' } });
         fireEvent.change(termRegexField, { target: { value: '[WSMF]\\d\\d' } });
         fireEvent.change(termDescriptionField, { target: { value: 'Enter quarter, e.g. F23, W24, S24, M24' } });
-        fireEvent.change(termErrorField, { target: { value: 'Quarter must be entered in the correct format' } });
         fireEvent.click(submitButton);
 
         await screen.findByTestId(/SchoolForm-abbrev/);
@@ -96,7 +96,6 @@ describe("SchoolForm tests", () => {
         expect(screen.queryByText(/Name is required./)).not.toBeInTheDocument();
         expect(screen.queryByText(/Term Regex is required./)).not.toBeInTheDocument();
         expect(screen.queryByText(/Term Description is required./)).not.toBeInTheDocument();
-        expect(screen.queryByText(/Term Error is required./)).not.toBeInTheDocument();
     });
 
     test("that navigate(-1) is called when Cancel is clicked", async () => {

frontend/src/tests/components/School/SchoolTable.test.js

@@ -29,8 +29,8 @@ describe("UserTable tests", () => {
 
     );
 
-    const expectedHeaders = ["Abbrev", "Name", "TermRegex", "TermDescription", "TermError"];
-    const expectedFields = ["abbrev", "name", "termRegex", "termDescription", "termError"];
+    const expectedHeaders = ["Abbrev", "Name", "TermRegex", "TermDescription"];
+    const expectedFields = ["abbrev", "name", "termRegex", "termDescription"];
     const testId = "SchoolTable";
 
     expectedHeaders.forEach((headerText) => {
@@ -60,8 +60,8 @@ describe("UserTable tests", () => {
     // arrange
     const currentUser = currentUserFixtures.adminUser;
 
-    const expectedHeaders = ["Abbrev", "Name", "TermRegex", "TermDescription", "TermError"];
-    const expectedFields = ["abbrev", "name", "termRegex", "termDescription", "termError"];
+    const expectedHeaders = ["Abbrev", "Name", "TermRegex", "TermDescription"];
+    const expectedFields = ["abbrev", "name", "termRegex", "termDescription"];
     const testId = "SchoolTable";
 
     // act
@@ -99,8 +99,8 @@ describe("UserTable tests", () => {
 
     );
 
-    const expectedHeaders = ["Abbrev", "Name", "TermRegex", "TermDescription", "TermError"];
-    const expectedFields = ["abbrev", "name", "termRegex", "termDescription", "termError"];
+    const expectedHeaders = ["Abbrev", "Name", "TermRegex", "TermDescription"];
+    const expectedFields = ["abbrev", "name", "termRegex", "termDescription"];
     const testId = "SchoolTable";
 
     expectedHeaders.forEach((headerText) => {