Merge pull request #1375 from isaacphysics/improvement/autofill-assignment-due

Improvement/autofill assignment due

Author: barna-isaac

config/jest/jest.config.common.js

@@ -4,6 +4,7 @@ module.exports = {
         "!src/**/*.d.ts"
     ],
     "resolver": "jest-pnp-resolver",
+    globalSetup: "<rootDir>/src/test/globalSetup.ts",
     setupFiles: [
         "<rootDir>/config/jest/jest.polyfills.js"
     ],

src/app/components/elements/inputs/DateInput.tsx

@@ -260,6 +260,6 @@ export const DateInput = (props: DateInputProps) => {
             </div>
             {(props.noClear === undefined || !props.noClear) && <Button close {...controlPropsWithValidationStripped} className="mx-1" aria-label={`Clear date${props.labelSuffix ? props.labelSuffix : ""}`} onClick={clear} />}
         </InputGroup>
-        <Input innerRef={hiddenRef} type="hidden" name={props.name} value={calculateHiddenValue()} {...controlProps} />
+        <Input data-testid='date-input' innerRef={hiddenRef} type="hidden" name={props.name} value={calculateHiddenValue()} {...controlProps} />
     </React.Fragment>;
 };

src/app/components/pages/AssignmentSchedule.tsx

@@ -53,7 +53,8 @@ import {
     TAG_LEVEL,
     tags,
     TODAY,
-    useDeviceSize
+    useDeviceSize,
+    UTC_MIDNIGHT_IN_SIX_DAYS
 } from "../../services";
 import {
     AppGroup,
@@ -415,7 +416,7 @@ const AssignmentModal = ({user, showSetAssignmentUI, toggleSetAssignmentUI, assi
             // Create from scratch
             setSelectedGameboard(undefined);
             setScheduledStartDate(undefined);
-            setDueDate(undefined);
+            setDueDate(UTC_MIDNIGHT_IN_SIX_DAYS);
             setAssignmentNotes(undefined);
         }
     }, [assignmentToCopy]);
@@ -432,8 +433,8 @@ const AssignmentModal = ({user, showSetAssignmentUI, toggleSetAssignmentUI, assi
         })).then((result) => {
             if (assignGameboard.fulfilled.match(result)) {
                 setSelectedGroups([]);
-                setDueDate(undefined);
                 setScheduledStartDate(undefined);
+                setDueDate(UTC_MIDNIGHT_IN_SIX_DAYS);
                 setAssignmentNotes('');
             }
             // Fails silently if assignGameboard throws an error - we let it handle opening toasts for errors
@@ -506,11 +507,9 @@ const AssignmentModal = ({user, showSetAssignmentUI, toggleSetAssignmentUI, assi
             <DateInput value={dueDate} placeholder="Select your due date..." yearRange={yearRange}
                 onChange={(e: ChangeEvent<HTMLInputElement>) => setDueDate(e.target.valueAsDate as Date)}
             />
+            {!dueDate && <small className={"pt-2 text-danger"}>Since January 2025, due dates are required for assignments.</small>}
             {dueDateInvalid && <small className={"pt-2 text-danger"}>Due date must be on or after start date.</small>}
         </Label>
-        <Alert color={siteSpecific("warning", "info")} className="py-1">
-            Since January 2025, due dates are required for assignments.
-        </Alert>
         {isStaff(user) && <Label className="w-100 pb-2">Notes (optional):
             <Input type="textarea"
                 spellCheck={true}

src/app/components/pages/SetAssignments.tsx

@@ -58,7 +58,8 @@ import {
     siteSpecific,
     useDeviceSize,
     useGameboards,
-    TODAY
+    TODAY,
+    UTC_MIDNIGHT_IN_SIX_DAYS
 } from "../../services";
 import {IsaacSpinner, Loading} from "../handlers/IsaacSpinner";
 import {GameboardDTO, RegisteredUserDTO, UserGroupDTO} from "../../../IsaacApiTypes";
@@ -74,9 +75,10 @@ interface AssignGroupProps {
     groups: UserGroupDTO[];
     board: GameboardDTO | undefined;
 }
+
 const AssignGroup = ({groups, board}: AssignGroupProps) => {
     const [selectedGroups, setSelectedGroups] = useState<Item<number>[]>([]);
-    const [dueDate, setDueDate] = useState<Date>();
+    const [dueDate, setDueDate] = useState<Date | undefined>(UTC_MIDNIGHT_IN_SIX_DAYS);
     const [scheduledStartDate, setScheduledStartDate] = useState<Date>();
     const [assignmentNotes, setAssignmentNotes] = useState<string>();
     const user = useAppSelector(selectors.user.loggedInOrNull);
@@ -88,7 +90,7 @@ const AssignGroup = ({groups, board}: AssignGroupProps) => {
         dispatch(assignGameboard({boardId: board?.id as string, groups: selectedGroups, dueDate, scheduledStartDate, notes: assignmentNotes, userId: user?.id})).then(success => {
             if (success) {
                 setSelectedGroups([]);
-                setDueDate(undefined);
+                setDueDate(UTC_MIDNIGHT_IN_SIX_DAYS);
                 setScheduledStartDate(undefined);
                 setAssignmentNotes('');
             }
@@ -111,7 +113,7 @@ const AssignGroup = ({groups, board}: AssignGroupProps) => {
     }
 
     return <Container className="py-2">
-        <Label className="w-100 pb-2">Group(s):
+        <Label data-testid="modal-groups-selector" className="w-100 pb-2">Group(s):
             <StyledSelect inputId="groups-to-assign" isMulti isClearable placeholder="None"
                 value={selectedGroups}
                 closeMenuOnSelect={false}
@@ -127,12 +129,9 @@ const AssignGroup = ({groups, board}: AssignGroupProps) => {
         <Label className="w-100 pb-2">Due date reminder
             <DateInput value={dueDate} placeholder="Select your due date..." yearRange={yearRange}
                 onChange={(e: ChangeEvent<HTMLInputElement>) => setDueDate(e.target.valueAsDate as Date)} /> {/* DANGER here with force-casting Date|null to Date */}
+            {!dueDate && <small className={"pt-2 text-danger"}>Since {siteSpecific("Jan", "January")} 2025, due dates are required for assignments.</small>}
             {dueDateInvalid && <small className={"pt-2 text-danger"}>Due date must be on or after start date and in the future.</small>}
-            {dueDateInvalid && startDateInvalid && <br/>}
         </Label>
-        <Alert color={siteSpecific("warning", "info")} className="py-1 px-2">
-            Since {siteSpecific("Jan", "January")} 2025, due dates are required for assignments.
-        </Alert>
         {isEventLeaderOrStaff(user) && <Label className="w-100 pb-2">Notes (optional):
             <Input type="textarea"
                 spellCheck={true}
@@ -180,10 +179,8 @@ const SetAssignmentsModal = (props: SetAssignmentsModalProps) => {
         }
     }
 
-    const description = siteSpecific(
-        "Manage assignment of groups to the selected gameboard",
-        "Select a group to which to assign the quiz"
-    );
+    const description = "Scheduled assignments appear to students on the morning of the day chosen, otherwise assignments appear immediately. " +
+        "Assignments are due by the end of the day indicated.";
 
     return <Modal isOpen={isOpen} data-testid={"set-assignment-modal"} toggle={toggle}>
         <ModalHeader data-testid={"modal-header"} role={"heading"} className={"text-break d-flex justify-content-between"} close={
@@ -212,7 +209,7 @@ const SetAssignmentsModal = (props: SetAssignmentsModalProps) => {
             <div className="py-2">
                 <Label>Pending {siteSpecific("assignments", "quiz assignments")}: <span className="icon-help mx-1" id={`pending-assignments-help-${board?.id}`}/></Label>
                 <UncontrolledTooltip placement="left" autohide={false} target={`pending-assignments-help-${board?.id}`}>
-                    {siteSpecific("Assignments", "Quizzes")} that are scheduled to begin at a future date. Once the start date passes, students
+                    These {siteSpecific("assignments", "quizzes")} are scheduled to begin at a future date. On the morning of the scheduled date, students
                     will be able to see the {siteSpecific("assignment", "quiz")}, and will receive a notification email.
                 </UncontrolledTooltip>
                 {scheduledAssignees.length > 0

src/app/services/dates.ts

@@ -5,8 +5,24 @@ export const nthHourOf = (n: number, d: Date | number) => {
 };
 
 export const TODAY = () => {
-    return nthHourOf(0, new Date());
+    return nthHourOf(0, new Date(Date.now()));
+};
+
+export const UTC_MIDNIGHT_IN_SIX_DAYS = () => {
+    return addDays(6, nthUtcHourOf(0, new Date(Date.now())));
 };
 
 export const MONTH_NAMES = [ "January", "February", "March", "April", "May", "June",
     "July", "August", "September", "October", "November", "December" ];
+
+export const nthUtcHourOf = (n: number, d: Date | number) => {
+    const newDate = new Date(d.valueOf());
+    newDate.setUTCHours(n, 0, 0, 0);
+    return newDate;
+};
+
+const addDays = (days: number, date: Date, ) => {
+    const newDate = new Date(date.valueOf());
+    newDate.setDate(date.getDate() + days);
+    return newDate;
+};

src/mocks/handlers.ts

@@ -255,3 +255,9 @@ export const buildFunctionHandler = <T extends string, V extends JsonBodyType>(p
         return HttpResponse.json(fn(params), { status: 200, });
     });
 };
+export const buildPostHandler = <T, V extends JsonBodyType>(path: string, fn: (p: T) => V) => {
+    return http.post(API_PATH + path, async ({ request }) => {
+        const body = await request.json() as T;
+        return HttpResponse.json(fn(body), { status: 200, });
+    });
+};

src/test/environment.test.ts

@@ -0,0 +1,5 @@
+describe('Testing environment', () => {
+    it('is set to the Europe/London timezone', () => {
+        expect(new Date("2025-04-01").getTimezoneOffset()).toEqual(-60);
+    });
+});

src/test/globalSetup.ts

@@ -0,0 +1,3 @@
+module.exports = () => {
+    process.env.TZ = 'Europe/London';
+};