[VRT] Update baselines for feature/test-pages-overhaul

cypress/support/commands.tsx

@@ -37,6 +37,7 @@
 // }
 
 import {mount, MountOptions} from 'cypress/react';
+import { RegisteredUserDTO } from '../../src/IsaacApiTypes';
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -46,7 +47,7 @@ declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace Cypress {
         interface Chainable {
-            mountWithStoreAndRouter(component: ReactNode, routes: string[], initialRoute?: To, mountOptions?: MountOptions): Chainable<Element>;
+            mountWithStoreAndRouter(component: ReactNode, routes: string[], initialRoute?: To, user?: RegisteredUserDTO, mountOptions?: MountOptions): Chainable<Element>;
 
             openSidebar(): Chainable<JQuery<HTMLElement>>;
             closeSidebar(): Chainable<JQuery<HTMLElement>>;
@@ -60,15 +61,20 @@ import {Provider} from "react-redux";
 import {store} from "../../src/app/state";
 import {createBrowserRouter, createRoutesFromElements, Route, To} from "react-router";
 import { RouterProvider } from 'react-router-dom';
+import { ACTION_TYPE } from '../../src/app/services';
 
-Cypress.Commands.add('mountWithStoreAndRouter', (component, routes, initialRoute=routes?.[0], mountOptions) => {
+Cypress.Commands.add('mountWithStoreAndRouter', (component, routes, initialRoute=routes?.[0], user, mountOptions) => {
     const router = createBrowserRouter(createRoutesFromElements(<>
         {routes?.length
             ? routes.map(route => <Route key={route} element={component} path={route} />)
             : <Route path="*" element={component} />
         }
     </>));
 
+    if (user) {
+        void store.dispatch({type: ACTION_TYPE.CURRENT_USER_RESPONSE_SUCCESS, user});
+    }
+
     void router.navigate(initialRoute || '/');
 
     mount(

src/IsaacAppTypes.tsx

@@ -10,6 +10,7 @@ import {
     Difficulty,
     GameboardDTO,
     GameboardItem,
+    IAssignmentLike,
     ItemDTO,
     QuestionDTO,
     QuestionValidationResponseDTO,
@@ -421,6 +422,13 @@ export interface ValidAssignmentWithListingDate extends AssignmentDTO {
     listingDate: Date;
 }
 
+export interface ValidWorkWithListingDate extends IAssignmentLike {
+    groupId: number;
+    additionalManagerPrivileges: boolean;
+    id: number;
+    listingDate: Date;
+}
+
 export interface AssignmentProgressPageSettings {
     colourBlind: boolean;
     setColourBlind: (colourBlind: boolean) => void;
@@ -486,6 +494,16 @@ export const ExpandableParentContext = React.createContext<boolean>(false);
 export const ConfidenceContext = React.createContext<{recordConfidence: boolean}>({recordConfidence: false});
 export const AssignmentProgressPageSettingsContext = React.createContext<AssignmentProgressPageSettings | undefined>(undefined);
 export const GameboardContext = React.createContext<GameboardDTO | undefined>(undefined);
+
+export const ManageAssignmentsContext = React.createContext<{
+    groupsById: {[id: number]: AppGroup | undefined};
+    workByGroup: {[id: number]: {boards?: IAssignmentLike[], tests?: IAssignmentLike[]} | undefined};
+    groups: AppGroup[];
+    collapsed: boolean;
+    setCollapsed: (b: boolean) => void;
+    viewBy: "startDate" | "dueDate";
+}>({groupsById: {}, workByGroup: {}, groups: [], collapsed: false, setCollapsed: () => {}, viewBy: "startDate"});
+
 export const AssignmentScheduleContext = React.createContext<{
     boardsById: {[id: string]: GameboardDTO | undefined};
     groupsById: {[id: number]: AppGroup | undefined};
@@ -498,6 +516,7 @@ export const AssignmentScheduleContext = React.createContext<{
     setCollapsed: (b: boolean) => void;
     viewBy: "startDate" | "dueDate";
 }>({boardsById: {}, groupsById: {}, groupFilter: {}, boardIdsByGroupId: {}, groups: [], gameboards: [], openAssignmentModal: () => {}, collapsed: false, setCollapsed: () => {}, viewBy: "startDate"});
+
 export const SidebarContext = React.createContext<{sidebarPresent: boolean} | undefined>(undefined);
 export const ContentSidebarContext = React.createContext<{ toggle: () => void; close: () => void; } | undefined>(undefined);
 

src/app/components/elements/Gameboards.tsx

@@ -78,16 +78,18 @@ const CSTable = (props: GameboardsTableProps) => {
         </SortItemHeader>
         {siteSpecific(
             <>
-                <th className="text-center align-middle">Delete</th>
+                <th className="text-center align-middle">
+                    {boardView === BoardViews.card ? "Unsave" : "Manage"}
+                </th>
             </>,
             <>
                 <th>Share</th>
                 <th>
                     {selectedBoards.length
                         ? <Button size={"sm"} color={"link"} onClick={confirmDeleteMultipleBoards}>
-                            Delete ({selectedBoards.length})
+                            Unsave ({selectedBoards.length})
                         </Button>
-                        : "Delete"
+                        : "Unsave"
                     }
                 </th>
             </>
@@ -115,6 +117,7 @@ const CSTable = (props: GameboardsTableProps) => {
                             boardView={boardView}
                             user={user}
                             boards={boards}
+                            displayAssignmentInfo={false}
                         />)
                     }
                 </tbody>
@@ -144,6 +147,7 @@ const Cards = (props: GameboardsCardsProps) => {
                     boardView={boardView}
                     user={user}
                     boards={boards}
+                    displayAssignmentInfo={false}
                 />
             </Col>)}
         </Row>}

src/app/components/elements/ManageAssignedCards.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { Row, Col } from "reactstrap";
+import { AssignmentDTO, QuizAssignmentDTO } from "../../../IsaacApiTypes";
+import { isDefined, isOverdue, useManageQuizAssignments } from "../../services";
+import { useManageAssignment } from "../../services/setAssignment";
+import { GameboardCard, GameboardLinkLocation } from "./cards/GameboardCard";
+import { getFriendlyDaysUntil } from "./DateString";
+import { TestCard } from "./cards/TestCard";
+
+// this is similar to MyAssignmentsContents/AssignmentCard, but:
+// - GameboardCard.usageDisplay is undefined, so no completion / group statistics are shown in the top right.
+// - inside the card's children, does not highlight past deadlines.
+// - GameboardCard.allowManaging is set
+export const ManageAssignmentCard = ({assignment}: {assignment: AssignmentDTO}) => {
+    const assignmentStartDate = assignment.scheduledStartDate ?? assignment.creationDate;
+
+    const { openAssignModal, unassign } = useManageAssignment(assignment);
+
+    return <GameboardCard 
+        className="mt-2"
+        gameboard={assignment.gameboard}
+        linkLocation={GameboardLinkLocation.Title}
+        assignment={assignment}
+        openAssignModal={openAssignModal}
+        usageDisplay={{type: "progressLink", assignment}}
+        unassign={unassign}
+        allowManaging
+    >
+        <Row className="w-100">
+            <Col>
+                {isDefined(assignment.groupName) &&
+                    <p className="mb-0">Set to <strong>{assignment.groupName}</strong></p>
+                }
+                {isDefined(assignmentStartDate) && 
+                    <p className="mb-0" data-testid={"gameboard-assigned"}>
+                        Assigned <strong>{getFriendlyDaysUntil(assignmentStartDate)}</strong>
+                    </p>
+                }
+                {isDefined(assignment.dueDate) && isDefined(assignment.gameboard) && <p className="mb-0">
+                    Due <strong>{getFriendlyDaysUntil(assignment.dueDate)}</strong>
+                    {isOverdue(assignment) && <span className="overdue ms-1">(passed)</span>}
+                </p>}
+            </Col>
+        </Row>
+
+        {assignment.notes && <p className="mb-0"><strong>Notes:</strong> {assignment.notes}</p>}
+    </GameboardCard>;
+};
+
+export const ManageTestCard = ({quizAssignment}: {quizAssignment: QuizAssignmentDTO}) => {
+
+    const { cancel, openExtendDueDateModal, openAssignModal } = useManageQuizAssignments();
+
+    return <TestCard
+        className="mt-2"
+        quizAssignment={quizAssignment}
+        linkLocation={!isOverdue(quizAssignment) ? GameboardLinkLocation.Title : undefined}
+        usageDisplay={{type: "progressLink"}}
+        openAssignModal={() => openAssignModal(quizAssignment)}
+        cancel={() => cancel(quizAssignment)} 
+        extendDueDate={() => openExtendDueDateModal(quizAssignment)}
+        allowManaging
+    >
+        <Row className="w-100">
+            <Col>
+                {/* // TODO groupName is not defined anywhere in the quiz summary – can we add this in the API? */}
+                {/* {isDefined(quizAssignment.quizSummary?.groupName) &&
+                    <p className="mb-0">Set to <strong>{quizAssignment.quizSummary?.groupName}</strong></p>
+                } */}
+                {isDefined(quizAssignment?.scheduledStartDate) || isDefined(quizAssignment?.creationDate) &&
+                    <p className="mb-0" data-testid={"gameboard-assigned"}>
+                        Assigned <strong>{getFriendlyDaysUntil(quizAssignment.scheduledStartDate || quizAssignment.creationDate)}</strong>
+                    </p>
+                }
+                {isDefined(quizAssignment?.dueDate) && <p className="mb-0">
+                    Due <strong>{getFriendlyDaysUntil(quizAssignment.dueDate)}</strong>
+                    {isOverdue(quizAssignment) && <span className="overdue ms-1">(passed)</span>}
+                </p>}
+            </Col>
+        </Row>
+    </TestCard>;
+};

src/app/components/elements/MyAssignmentsContents.tsx

@@ -27,7 +27,7 @@ const CSCircle = ({label, percentage}: {percentage: number | unknown, label: str
 const PhyAssignmentCard = ({assignment}: {assignment: AssignmentDTO}) => {
     const assignmentStartDate = assignment.scheduledStartDate ?? assignment.creationDate;
 
-    return <GameboardCard gameboard={assignment.gameboard} linkLocation={GameboardLinkLocation.Card} assignment={assignment}>
+    return <GameboardCard gameboard={assignment.gameboard} linkLocation={GameboardLinkLocation.Card} assignment={assignment} usageDisplay={{type: "correctness"}}>
         <Row className="w-100">
             <Col xs={12} md={6}>
                 {isDefined(assignmentStartDate) && 

src/app/components/elements/PageMetadata.tsx

@@ -27,6 +27,7 @@ type PageMetadataProps = {
     children?: ReactNode; // any content-type specific metadata that may require information outside of `doc`; e.g. question completion state, event info, etc.
     noTitle?: boolean; // if true, any children (usually text) will be rendered in place of the title, with any action buttons (e.g. share, print, report) rendered to the side
     helpModalId?: string;
+    additionalActionButtons?: ReactNode; // pages can extend the standard action buttons with their own. they will be placed to the left of the main ones.
     pageContainsLLMFreeTextQuestion?: boolean;
 } & (
     {
@@ -45,14 +46,16 @@ interface ActionButtonsProps extends React.HTMLAttributes<HTMLDivElement> {
     isQuestion: boolean;
     helpModalId?: string;
     doc?: SeguePageDTO;
+    additionalActionButtons?: ReactNode;
 }
 
-export const ActionButtons = ({location, isQuestion, helpModalId, doc, ...rest}: ActionButtonsProps) => {
+export const ActionButtons = ({location, isQuestion, helpModalId, doc, additionalActionButtons, ...rest}: ActionButtonsProps) => {
     const deviceSize = useDeviceSize();
 
     const anyActionButtonShown = isPhy && helpModalId || above['sm'](deviceSize) || doc?.id;
 
     return anyActionButtonShown && <div {...rest} className={classNames("d-flex no-print gap-2", rest.className)}>
+        {additionalActionButtons}
         {isPhy && isQuestion && <FeatureFlagWrapper flag={FeatureFlag.ENABLE_SCI_BOOKMARKS}>
             <BookmarkButton doc={doc} />
         </FeatureFlagWrapper>
@@ -110,7 +113,7 @@ const MetadataTitle = ({doc, title, subtitle, badges}: MetadataTitleProps) => {
 };
 
 export const PageMetadata = (props: PageMetadataProps) => {
-    const { doc, title, subtitle, badges, children, noTitle, helpModalId, showSidebarButton, sidebarButtonText, sidebarInTitle } = props;
+    const { doc, title, subtitle, badges, children, noTitle, helpModalId, showSidebarButton, sidebarButtonText, sidebarInTitle, additionalActionButtons } = props;
     const isQuestion = doc?.type === "isaacQuestionPage";
     const isConcept = doc?.type === "isaacConceptPage";
     const location = useLocation();
@@ -121,16 +124,16 @@ export const PageMetadata = (props: PageMetadataProps) => {
         {isPhy && showSidebarButton && sidebarInTitle && below['md'](deviceSize) && <SidebarButton buttonTitle={sidebarButtonText} absolute/>}
         <div className="page-metadata">
             {isPhy && <div className={classNames("title-action-bar", {"d-flex align-items-center": !actionButtonsFloat})}>
-                {actionButtonsFloat && <ActionButtons location={location} isQuestion={isQuestion} helpModalId={helpModalId} doc={doc} className="float-end ms-3 mb-2"/>}
+                {actionButtonsFloat && <ActionButtons location={location} isQuestion={isQuestion} helpModalId={helpModalId} doc={doc} additionalActionButtons={additionalActionButtons} className="float-end ms-3 mb-2"/>}
                 {noTitle ? children : <MetadataTitle doc={doc} title={title} subtitle={subtitle} badges={badges}/>}
-                {!actionButtonsFloat && <ActionButtons location={location} isQuestion={isQuestion} helpModalId={helpModalId} doc={doc} className={classNames("ms-auto", {"mb-auto": !noTitle && badges})}/>}
+                {!actionButtonsFloat && <ActionButtons location={location} isQuestion={isQuestion} helpModalId={helpModalId} doc={doc} additionalActionButtons={additionalActionButtons} className={classNames("ms-auto", {"mb-auto": !noTitle && badges})}/>}
             </div>}
 
             {isAda && <div className={classNames("title-action-bar", {"d-flex align-items-end": !children})}>
-                {children && <ActionButtons location={location} isQuestion={isQuestion} helpModalId={helpModalId} doc={doc} className="float-end ms-3 mb-3"/>}
+                {children && <ActionButtons location={location} isQuestion={isQuestion} helpModalId={helpModalId} doc={doc} additionalActionButtons={additionalActionButtons} className="float-end ms-3 mb-3"/>}
                 <TagStack doc={doc} className={classNames({"mb-3": children, "d-flex align-items-end": !children})}/>
                 {children}
-                {!children && <ActionButtons location={location} isQuestion={isQuestion} helpModalId={helpModalId} doc={doc} className="ms-auto"/>}
+                {!children && <ActionButtons location={location} isQuestion={isQuestion} helpModalId={helpModalId} doc={doc} additionalActionButtons={additionalActionButtons} className="ms-auto"/>}
             </div>}
 
             {isPhy && !noTitle && children}

src/app/components/elements/SaveBoardButton.tsx

@@ -0,0 +1,66 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { IconButton } from "./AffixButton";
+import { GameboardDTO } from "../../../IsaacApiTypes";
+import classNames from "classnames";
+import { ButtonProps } from "reactstrap";
+import { saveGameboard, selectors, unlinkUserFromGameboard, useAppDispatch, useAppSelector } from "../../state";
+import { isLoggedIn, siteSpecific } from "../../services";
+
+interface SaveBoardButtonProps extends ButtonProps {
+    board: GameboardDTO;
+    size?: "sm" | "md"; // "md" default (as used for PageMetadata buttons); "sm" aligns with regular .btn padding
+}
+
+export const SaveBoardButton = (props: SaveBoardButtonProps) => {
+    const { board, size, className, ...rest } = props;
+
+    const dispatch = useAppDispatch();
+    const user = useAppSelector(selectors.user.loggedInOrNull);
+
+    const [justLinked, setJustLinked] = useState(false);
+    const isLinked = useMemo(() => board.savedToCurrentUser || justLinked, [board, justLinked]);
+
+    const linkBoard = useCallback(() => {
+        if (!user || !board) return;
+        setJustLinked(true);
+        void dispatch(saveGameboard({
+            boardId: board.id ?? "",
+            boardTitle: board.title,
+            user,
+        }));
+    }, [user, board, dispatch]);
+
+    const unlinkBoard = useCallback(() => {
+        if (!user || !board) return;
+        const confirmMessage = board.ownerUserId === user.id && !board.tags?.includes("ISAAC_BOARD")
+            ? `Are you sure you want to unsave your board '${board.title}' from your account? You'll only be able to find it again if you've set it as an assignment.`
+            : `Are you sure you want to unsave '${board.title}' from your account?`;
+        if (confirm(confirmMessage)) {
+            setJustLinked(false);
+            void dispatch(unlinkUserFromGameboard({
+                boardId: board.id ?? "", 
+                boardTitle: board.title
+            }));
+        }
+    }, [user, board, dispatch]);
+
+    if (!isLoggedIn(user)) return null; // anon users should not be able to save boards
+
+    return <IconButton
+        icon={{
+            name: classNames("icon-star", siteSpecific("icon-color-black-hoverable", undefined), { "fill": isLinked, "anim-star-select": justLinked }),
+            color: siteSpecific(undefined, props.color === "solid" ? "white" : "primary")
+        }}
+        className={classNames(className, "w-max-content h-max-content action-button", {"icon-button-sm": size === "sm"})}
+        title={isLinked ? "Unsave board" : "Save board"}
+        onClick={(e) => { 
+            e.preventDefault();
+            if (isLinked) {
+                unlinkBoard();
+            } else {
+                linkBoard();
+            }
+        }}
+        {...rest}
+    />;
+};