Student selection limit message (#415)

* Change the error message for student selection more than 4

* extract the styling class

* Add error tooltip for member selection same as others

* Add svg for warning icon and replace all its instances

* Fix styling for member selection error tooltip

* Add a timeline to display the member selection error tooltip

* Add test for checking the member selection error

Author: madhurabhujbal

public/assets/warning_icon.svg

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Form, Row, Col, Container, FormGroup, Label, Input, Alert } from "reactstrap";
+import { Form, Row, Col, Container, FormGroup, Label, Input } from "reactstrap";
 import { isaacApi, useAppSelector } from "../../../../state";
 import { selectors } from "../../../../state/selectors";
 import { SchoolInput } from "../../../elements/inputs/SchoolInput";
@@ -71,17 +71,17 @@ export const CompetitionEntryForm = ({ handleTermsClick }: CompetitionEntryFormP
     const selectedValues = selectedOptions ? selectedOptions.map((option: any) => option.value) : [];
 
     if (selectedValues.length > 4) {
-      setMemberSelectionError("You can only select up to 4 students");
-
-      setTimeout(() => {
-        setMemberSelectionError("");
-      }, 3000);
+      setMemberSelectionError("Limit of 4 students reached. To select a new student, remove one first.");
 
       return;
     }
 
     setMemberSelectionError("");
     setSelectedMembers(selectedValues);
+
+    setTimeout(() => {
+      setMemberSelectionError("");
+    }, 10000);
   };
 
   const isSchoolValid = isSchoolValidForCompetition();
@@ -205,7 +205,7 @@ export const CompetitionEntryForm = ({ handleTermsClick }: CompetitionEntryFormP
                       <div className="entry-form-validation-tooltip">
                         <div className="tooltip-content">
                           <div className="tooltip-arrow"></div>
-                          <div className="tooltip-icon">!</div>
+                          <img src="/assets/warning_icon.svg" alt="invalid school error" />
                           <div className="tooltip-text">
                             Please <a href="/account">update</a> your account details to specify your school or college.
                             Only teachers and students from state-funded schools in England are eligible to participate.
@@ -300,7 +300,7 @@ export const CompetitionEntryForm = ({ handleTermsClick }: CompetitionEntryFormP
                   <div className="entry-form-validation-tooltip">
                     <div className="tooltip-content">
                       <div className="tooltip-arrow"></div>
-                      <div className="tooltip-icon">!</div>
+                      <img src="/assets/warning_icon.svg" alt="no groups found error" />
                       <div className="tooltip-text" style={{ color: "#000" }}>
                         You have not created any groups. Please{" "}
                         <a href="/groups" style={{ color: "#1D70B8", textDecoration: "underline" }}>
@@ -328,9 +328,17 @@ export const CompetitionEntryForm = ({ handleTermsClick }: CompetitionEntryFormP
                       message="Choose 1-4 students from the selected group who worked on the submitted project."
                     />
                     {memberSelectionError && (
-                      <Alert color="danger" className="mb-2" style={{ zIndex: 9999, position: "relative" }}>
-                        {memberSelectionError}
-                      </Alert>
+                      <div
+                        className="entry-form-validation-tooltip entry-form-validation-tooltip-centered mt-2"
+                        style={{ alignItems: "center" }}
+                      >
+                        <div className="tooltip-content">
+                          <img src="/assets/warning_icon.svg" alt="member selection error" />
+                          <div className="tooltip-text" style={{ color: "#000" }}>
+                            Limit of 4 students reached. To select a new student, remove one first.
+                          </div>
+                        </div>
+                      </div>
                     )}
                   </Label>
                   <Select
@@ -389,7 +397,7 @@ export const CompetitionEntryForm = ({ handleTermsClick }: CompetitionEntryFormP
                     <div className="entry-form-validation-tooltip" style={{ marginTop: "12px" }}>
                       <div className="tooltip-content">
                         <div className="tooltip-arrow"></div>
-                        <div className="tooltip-icon">!</div>
+                        <img src="/assets/warning_icon.svg" alt="no members found error" />
                         <div className="tooltip-text" style={{ color: "#000" }}>
                           No students found in the selected group. To add students go to the{" "}
                           <a href="/groups" style={{ color: "#1D70B8", textDecoration: "underline" }}>

src/app/components/pages/IsaacCompetition/EntryForm/CompetitionEntryForm.tsx

@@ -231,6 +231,7 @@ describe("CompetitionEntryForm", () => {
     });
 
     it("should show member selection error when more than 4 students selected", async () => {
+      const user = userEvent.setup();
       const groupsWithManyMembers = [
         {
           id: 1,
@@ -244,9 +245,53 @@ describe("CompetitionEntryForm", () => {
           ],
         },
       ];
-      setupTest(undefined, groupsWithManyMembers);
+      setupTest({ schoolId: 123 }, groupsWithManyMembers);
+
+      // Select the group first
+      const groupSelect = screen.getByText("Choose from the groups you've created or create one first");
+      await user.click(groupSelect);
+
+      // Wait for the dropdown option to appear (use findByText instead of getByText)
+      const largeGroupOption = await screen.findByText("Large Group");
+      await user.click(largeGroupOption);
+
+      // Wait for the member select to be available
+      await waitFor(() => {
+        expect(screen.getByText("Choose students from your selected group")).toBeInTheDocument();
+      });
+
+      // Find the select input using its inputId
+      const getSelectInput = () => document.querySelector("#group-members-select") as HTMLElement;
 
-      expect(true).toBe(true);
+      // Select first 4 students (should work fine)
+      await user.click(getSelectInput());
+      const student1Option = await screen.findByText("Student 1");
+      await user.click(student1Option);
+
+      await user.click(getSelectInput());
+      const student2Option = await screen.findByText("Student 2");
+      await user.click(student2Option);
+
+      await user.click(getSelectInput());
+      const student3Option = await screen.findByText("Student 3");
+      await user.click(student3Option);
+
+      await user.click(getSelectInput());
+      const student4Option = await screen.findByText("Student 4");
+      await user.click(student4Option);
+
+      expect(screen.queryByText(/Limit of 4 students reached/)).not.toBeInTheDocument();
+
+      await user.click(getSelectInput());
+      const student5Option = await screen.findByText("Student 5");
+      await user.click(student5Option);
+
+      await waitFor(() => {
+        const errorTooltip = screen.getByText(
+          /Limit of 4 students reached. To select a new student, remove one first./,
+        );
+        expect(errorTooltip).toBeInTheDocument();
+      });
     });
   });
 

src/app/components/pages/IsaacCompetition/Tests/CompetitionEntryForm.test.tsx

@@ -244,6 +244,10 @@
       align-items: flex-start;
       gap: 8px;
     }
+
+    &-centered .tooltip-content {
+      align-items: center;
+    }
 
     .tooltip-arrow {
       position: absolute;
@@ -268,23 +272,9 @@
       }
     }
 
-    .tooltip-icon {
-      flex-shrink: 0;
-      width: 16px;
-      height: 16px;
-      background-color: #ff6b35;
-      color: white;
-      border-radius: 2px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      font-weight: bold;
-      margin-top: 1px;
-    }
-    
     .tooltip-text {
       flex: 1;
+      font-family: "roboto", Roboto, sans-serif;
       color: #dc3545;
       font-size: 14px;
       line-height: 1.4;