Merge branch 'master' of github.com:isaacphysics/isaac-react-app into gh-actions-docker-build

Author: mwtrew

src/app/components/navigation/IsaacApp.tsx

@@ -187,7 +187,7 @@ export const IsaacApp = () => {
                         <TrackedRoute exact path="/progress" ifUser={isLoggedIn} component={MyProgress} />
                         <TrackedRoute exact path="/progress/:userIdOfInterest" ifUser={isLoggedIn} component={MyProgress} />
                         <TrackedRoute exact path={PATHS.MY_GAMEBOARDS} ifUser={isLoggedIn} component={MyGameboards} />
-                        <TrackedRoute exact path={PATHS.GAMEBOARD_FILTER} ifUser={isNotPartiallyLoggedIn} component={GameboardFilter} />
+                        <TrackedRoute exact path={PATHS.GAMEBOARD_FILTER} ifUser={isLoggedIn} component={GameboardFilter} />
                         <TrackedRoute exact path={PATHS.QUESTION_FINDER} component={QuestionFinder} />
 
                         {/* Teacher pages */}

src/app/components/pages/AssignmentSchedule.tsx

@@ -342,11 +342,11 @@ const DateAssignmentList = ({date, assignments}: {date: number; assignments: Val
 };
 
 const monthHexagon = calculateHexagonProportions(12, 1);
-const shouldOpenMonth = (month: number) => {
-    return (new Date()).getMonth() === month;
+const shouldOpenMonth = (year: number, month: number) => {
+    return (new Date()).getMonth() === month && (new Date()).getFullYear() === year;
 };
-const MonthAssignmentList = ({month, datesAndAssignments}: {month: number, datesAndAssignments: [number, ValidAssignmentWithListingDate[]][]}) => {
-    const [open, setOpen] = useState<boolean>(shouldOpenMonth(month));
+const MonthAssignmentList = ({year, month, datesAndAssignments}: {year: number, month: number, datesAndAssignments: [number, ValidAssignmentWithListingDate[]][]}) => {
+    const [open, setOpen] = useState<boolean>(shouldOpenMonth(year, month));
     const assignmentCount = useMemo(() => datesAndAssignments.reduce((n, [_, as]) => n + as.length, 0), [datesAndAssignments]);
     const {collapsed, setCollapsed, viewBy} = useContext(AssignmentScheduleContext);
     useEffect(() => {
@@ -715,7 +715,7 @@ export const AssignmentSchedule = ({user}: {user: RegisteredUserDTO}) => {
                                             <h3 className="mb-n3">{`${y}`}</h3>
                                             <hr className="ms-4"/>
                                         </div>
-                                        {ms.map(([m, ds]) => <MonthAssignmentList key={m} month={m} datesAndAssignments={ds}/>)}
+                                        {ms.map(([m, ds]) => <MonthAssignmentList key={m} year={y} month={m} datesAndAssignments={ds}/>)}
                                     </Fragment>
                                 )}
                                 <div className={classNames("bg-timeline", {"fade-in": !notAllPastAssignmentsAreListed})}/>

src/app/components/pages/Gameboard.tsx

@@ -31,23 +31,12 @@ import {
     useUserViewingContext
 } from "../../services";
 import {Redirect} from "react-router";
-import queryString from "query-string";
 import {StageAndDifficultySummaryIcons} from "../elements/StageAndDifficultySummaryIcons";
 import {Markup} from "../elements/markup";
 import classNames from "classnames";
 import {skipToken} from "@reduxjs/toolkit/query";
 import {ShowLoadingQuery} from "../handlers/ShowLoadingQuery";
 
-function extractFilterQueryString(gameboard: GameboardDTO): string {
-    const csvQuery: {[key: string]: string} = {};
-    if (gameboard.gameFilter) {
-        Object.entries(gameboard.gameFilter).forEach(([key, values]) => {
-            csvQuery[key] = values.join(",");
-        });
-    }
-    return queryString.stringify(csvQuery, {encode: false});
-}
-
 const GameboardItemComponent = ({gameboard, question}: {gameboard: GameboardDTO, question: GameboardItem}) => {
     let itemClasses = classNames("content-summary-link text-info bg-white", {"p-3": isPhy, "p-0": isAda});
     const itemSubject = tags.getSpecifiedTag(TAG_LEVEL.subject, question.tags as TAG_ID[]);
@@ -109,7 +98,7 @@ const GameboardItemComponent = ({gameboard, question}: {gameboard: GameboardDTO,
                     </div>}
                 </div>
                 {question.audience && <StageAndDifficultySummaryIcons stack={isAda && below['sm'](deviceSize)} audienceViews={
-                    isPhy && !isTutorOrAbove(currentUser) && uniqueStage ? [uniqueStage] : questionViewingContexts                 
+                    isPhy && !isTutorOrAbove(currentUser) && uniqueStage ? [uniqueStage] : questionViewingContexts
                 } />}
             </div>
             {isAda && <div className={"list-caret vertical-center"}><img src={"/assets/common/icons/chevron_right.svg"} alt={"Go to question"}/></div>}
@@ -159,14 +148,6 @@ export const Gameboard = withRouter(({ location }) => {
     const { data: gameboard } = gameboardQuery;
     const user = useAppSelector(selectors.user.orNull);
 
-    // Show filter
-    const {filter} = queryString.parse(location.search);
-    let showFilter = false;
-    if (filter) {
-        const filterValue = filter instanceof Array ? filter[0] : filter;
-        showFilter = isDefined(filterValue) && filterValue.toLowerCase() === "true";
-    }
-
     // Only log a gameboard view when we have a gameboard loaded:
     useEffect(() => {
         if (isDefined(gameboard) && isFound(gameboard)) {
@@ -180,25 +161,17 @@ export const Gameboard = withRouter(({ location }) => {
             <small>
                 {`We're sorry, we were not able to find a ${siteSpecific("gameboard", "quiz")} with the id `}<code>{gameboardId}</code>{"."}
             </small>
-            {isPhy && <div className="mt-4 text-center">
-                <Button tag={Link} to={PATHS.GAMEBOARD_FILTER} color="primary" outline className="btn-lg">
-                    Generate a new gameboard
-                </Button>
-            </div>}
         </h3>
     </Container>;
 
     return !gameboardId
-        ? <Redirect to={PATHS.GAMEBOARD_FILTER} />
+        ? <Redirect to={PATHS.QUESTION_FINDER} />
         : <Container className="mb-5">
             <ShowLoadingQuery
                 query={gameboardQuery}
                 defaultErrorTitle={`Error fetching ${siteSpecific("gameboard", "quiz")} with id: ${gameboardId}`}
                 ifNotFound={notFoundComponent}
                 thenRender={(gameboard) => {
-                    if (showFilter) {
-                        return <Redirect to={`${PATHS.GAMEBOARD_FILTER}?${extractFilterQueryString(gameboard)}#${gameboardId}`} />;
-                    }
                     return <>
                         <TitleAndBreadcrumb currentPageTitle={gameboard && gameboard.title || `Filter Generated ${siteSpecific("Gameboard", "Quiz")}`}/>
                         <GameboardViewer gameboard={gameboard} className="mt-4 mt-lg-5" />

src/app/components/pages/MyGameboards.tsx

@@ -185,9 +185,6 @@ export const MyGameboards = () => {
         {boards && boards.totalResults == 0 ?
             <>
                 <h3 className="text-center mt-4">You have no {siteSpecific("gameboards", "quizzes")} to view.</h3>
-                {isPhy && <div className="text-center mt-3 mb-5">
-                    <Button color="secondary" tag={Link} to={PATHS.GAMEBOARD_FILTER}>Create a gameboard</Button>
-                </div>}
             </>
             :
             <>

src/mocks/data.ts

@@ -4444,6 +4444,57 @@ export const mockQuestionFinderResults = {
     "totalResults": 5
 };
 
+export const mockConceptPage =
+    {
+        "type": "isaacConceptPage",
+        "encoding": "markdown",
+        "title": "Mock concept page",
+        "children": [
+            {
+                "type": "content",
+                "encoding": "markdown",
+                "value": "This is some text on a concept page."
+            },
+            {
+                "type": "content",
+                "layout": "accordion",
+                "children": [
+                    {
+                        "type": "content",
+                        "children": [
+                            {
+                                "type": "content",
+                                "value": "This is some text within an accordion on a concept page.",
+                                "encoding": "markdown"
+                            }
+                        ],
+                        "level": "2",
+                        "title": "Accordion",
+                        "id": "_mock_accordion_",
+                        "audience": [
+                            {
+                                "stage": [
+                                    "a_level"
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ],
+        "id": "_mock_concept_page_",
+        "summary": "A mock concept page",
+        "tags": [
+            "physics",
+            "thermal"
+        ],
+        "published": false,
+        "relatedContent": [
+            "cc_ideal_gas"
+        ],
+        "subtitle": "Mock concept page"
+    };
+
 export const mockSetAssignments = [
     {
         id: 37,

src/mocks/handlers.ts

@@ -13,7 +13,8 @@ import {
     mockUserAuthSettings,
     mockUserPreferences,
     mockRegressionTestQuestions,
-    mockQuestionFinderResults
+    mockQuestionFinderResults,
+    mockConceptPage
 } from "./data";
 import {API_PATH} from "../app/services";
 import {produce} from "immer";
@@ -160,6 +161,11 @@ export const handlers = [
             status: 200,
         });
     }),
+    http.get(API_PATH + "/pages/concepts/_mock_concept_page_", () => {
+        return HttpResponse.json(mockConceptPage, {
+            status: 200,
+        });
+    }),
     http.get(API_PATH + "/pages/:pageId", ({params}) => {
         const {pageId} = params;
 

src/test/pages/Concept.cy.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Concept } from "../../app/components/pages/Concept";
+
+it('Concept pages should have no visual regressions', () => {
+
+    // @ts-ignore
+    cy.mountWithStoreAndRouter(<Concept conceptIdOverride="_mock_concept_page_"/>, ["/concepts/_mock_concept_page_"]);
+
+    cy.get('[data-testid="loading"]').should('not.exist');
+
+    // open accordion
+    cy.get('.accordion-header > button:not(.active)').scrollIntoView();
+    cy.get('.accordion-header > button:not(.active)').click();
+
+    cy.scrollTo('top');
+
+    cy.matchImage();
+});