My Saved Decks

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/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/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}
+    />;
+};

src/app/components/elements/StudentDashboard.tsx

@@ -178,7 +178,7 @@ const MyIsaacPanel = ({assignmentsCount, quizzesCount}: MyIsaacPanelProps) => {
         <h4>More in My Isaac</h4>
         <div className="d-flex flex-column">
             <Link to={PATHS.MY_GAMEBOARDS} className="panel-my-isaac-link">
-                My question decks
+                My saved decks
             </Link>
             <Link to="/assignments" className="panel-my-isaac-link">
                 My assignments