feat: preview assessment from assessments page

frontend/src/components/admin/assessment-creation/AssessmentEditorHeader.tsx

@@ -76,7 +76,7 @@ const AssessmentEditorHeader = ({
   const onPreview = () => {
     validateForm();
     disableEditorPrompt(history.push)(
-      Routes.ASSESSMENT_EDITOR_PREVIEW_PAGE({
+      Routes.ASSESSMENT_PREVIEW_PAGE({
         assessmentId,
       }),
     );

frontend/src/components/admin/assessment-status/EditStatusButtons/PreviewButton.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import { useQuery } from "@apollo/client";
+
+import { GET_TEST } from "../../../../APIClients/queries/TestQueries";
+import type { TestResponse } from "../../../../APIClients/types/TestClientTypes";
+import * as Routes from "../../../../constants/Routes";
+import useToast from "../../../common/info/useToast";
+import PopoverButton from "../../../common/popover/PopoverButton";
+
+interface PreviewButtonProps {
+  assessmentId: string;
+}
+
+const PreviewButton = ({
+  assessmentId,
+}: PreviewButtonProps): React.ReactElement => {
+  const history = useHistory();
+  const { data } = useQuery<{ test: TestResponse }>(GET_TEST, {
+    fetchPolicy: "cache-and-network",
+    variables: { id: assessmentId },
+  });
+  const { showToast } = useToast();
+
+  return (
+    <PopoverButton
+      name="Preview"
+      onClick={() => {
+        if (data) {
+          history.push({
+            pathname: Routes.ASSESSMENT_PREVIEW_PAGE({ assessmentId }),
+            state: data.test,
+          });
+        } else {
+          showToast({
+            message:
+              "This assessment cannot be previewed at this time. Please try again.",
+            status: "error",
+          });
+        }
+      }}
+    />
+  );
+};
+
+export default PreviewButton;

frontend/src/components/admin/assessment-status/EditStatusPopover.tsx

@@ -8,6 +8,7 @@ import ArchiveButton from "./EditStatusButtons/ArchiveButton";
 import DeleteButton from "./EditStatusButtons/DeleteButton";
 import DuplicateButton from "./EditStatusButtons/DuplicateButton";
 import EditButton from "./EditStatusButtons/EditButton";
+import PreviewButton from "./EditStatusButtons/PreviewButton";
 import PublishButton from "./EditStatusButtons/PublishButton";
 import UnarchiveButton from "./EditStatusButtons/UnarchiveButton";
 
@@ -38,6 +39,7 @@ const EditStatusPopover = ({
           <DuplicateButton assessmentId={assessmentId} />
         </>
       )}
+      <PreviewButton assessmentId={assessmentId} />
       <DeleteButton assessmentId={assessmentId} />
     </VStack>
   </Popover>

frontend/src/components/pages/admin/AdminRouting.tsx

@@ -10,6 +10,7 @@ import Navbar from "../../common/navigation/Navbar";
 import NotFound from "../NotFound";
 
 import AssessmentEditorPage from "./AssessmentEditorPage";
+import AssessmentPreviewPage from "./AssessmentPreviewPage";
 import DisplayAssessmentsPage from "./DisplayAssessmentsPage";
 import UsersPage from "./UsersPage";
 
@@ -33,6 +34,13 @@ const AdminRouting = (): React.ReactElement => {
         path={Routes.ASSESSMENT_EDITOR_BASE({ assessmentId: ":assessmentId" })}
         roles={["Admin"]}
       />
+      <PrivateRoute
+        component={AssessmentPreviewPage}
+        path={Routes.ASSESSMENT_PREVIEW_PAGE({
+          assessmentId: ":assessmentId",
+        })}
+        roles={["Admin"]}
+      />
       <Route path="*">
         <VStack align="left" flex="1" height="100vh">
           <Navbar pages={pages} />

frontend/src/components/pages/admin/AssessmentEditorPage/AssessmentEditor.tsx

@@ -25,7 +25,6 @@ import type { Question } from "../../../../types/QuestionTypes";
 import { FormValidationError } from "../../../../utils/GeneralUtils";
 import { formatQuestionsRequest } from "../../../../utils/QuestionUtils";
 import AssessmentEditorHeader from "../../../admin/assessment-creation/AssessmentEditorHeader";
-import AssessmentPreview from "../../../admin/assessment-creation/AssessmentPreview";
 import AssessmentQuestions from "../../../admin/assessment-creation/AssessmentQuestions";
 import BasicInformation from "../../../admin/assessment-creation/BasicInformation";
 import QuestionEditor from "../../../admin/question-creation/QuestionEditor";
@@ -272,22 +271,6 @@ const AssessmentEditor = ({ state }: AssessmentEditorProps): ReactElement => {
                   </VStack>
                 </VStack>
               </Route>
-              <Route
-                path={Routes.ASSESSMENT_EDITOR_PREVIEW_PAGE({
-                  assessmentId: state?.id && ":assessmentId",
-                })}
-              >
-                <AssessmentPreview
-                  goBack={() =>
-                    disableEditorPrompt(history.push)(
-                      Routes.ASSESSMENT_EDITOR_PAGE({
-                        assessmentId: state?.id,
-                      }),
-                    )
-                  }
-                  questions={questions}
-                />
-              </Route>
               <Route component={NotFound} exact path="*" />
             </Switch>
           </FormProvider>

frontend/src/components/pages/admin/AssessmentPreviewPage.tsx

@@ -0,0 +1,71 @@
+import React, { useMemo } from "react";
+import { useLocation, useParams } from "react-router-dom";
+import { useHistory } from "react-router-dom";
+import { useQuery } from "@apollo/client";
+import { Box, Button } from "@chakra-ui/react";
+
+import { GET_TEST } from "../../../APIClients/queries/TestQueries";
+import type { TestResponse } from "../../../APIClients/types/TestClientTypes";
+import { ArrowBackOutlineIcon } from "../../../assets/icons";
+import { formatQuestionsResponse } from "../../../utils/QuestionUtils";
+import usePageTitle from "../../auth/usePageTitle";
+import QueryStateHandler from "../../common/QueryStateHandler";
+import AssessmentExperience from "../../student/AssessmentExperience";
+
+const AssessmentPreviewPage = () => {
+  const history = useHistory();
+
+  // Data could come from the previous page.
+  const { state: locationState } = useLocation<TestResponse | undefined>();
+
+  // If data is not available from the previous page, then we have to fetch it.
+  const { assessmentId } = useParams<{ assessmentId?: string }>();
+  const {
+    data: testData,
+    loading,
+    error,
+  } = useQuery<{
+    test: TestResponse;
+  }>(GET_TEST, {
+    variables: { id: assessmentId },
+    skip: !!locationState || !assessmentId,
+  });
+
+  const test = locationState || testData?.test;
+  const state = useMemo(
+    () =>
+      test && {
+        ...test,
+        questions: formatQuestionsResponse(test.questions),
+      },
+    [test],
+  );
+
+  const assessmentName = state?.name;
+  usePageTitle(`Previewing "${assessmentName || "assesssment"}`);
+
+  const closeAssessmentPreviewButton = (
+    <Button
+      leftIcon={<ArrowBackOutlineIcon />}
+      onClick={() => history.goBack()}
+      variant="tertiary"
+    >
+      Back
+    </Button>
+  );
+
+  return (
+    <Box mx={4}>
+      <QueryStateHandler error={error} loading={loading}>
+        <AssessmentExperience
+          headerButton={closeAssessmentPreviewButton}
+          isPreviewMode
+          questions={state?.questions || []}
+          title="Preview Assessment"
+        />
+      </QueryStateHandler>
+    </Box>
+  );
+};
+
+export default AssessmentPreviewPage;

frontend/src/constants/Routes.ts

@@ -21,11 +21,6 @@ export const ASSESSMENT_EDITOR_PAGE = ({
 }: {
   assessmentId?: string;
 }) => ASSESSMENT_EDITOR_BASE({ assessmentId }) + (assessmentId ? "/edit" : "");
-export const ASSESSMENT_EDITOR_PREVIEW_PAGE = ({
-  assessmentId,
-}: {
-  assessmentId?: string;
-}) => ASSESSMENT_EDITOR_BASE({ assessmentId }) + "/preview";
 export const ASSESSMENT_EDITOR_QUESTION_EDITOR_BASE = ({
   assessmentId,
   questionIndex,
@@ -55,6 +50,12 @@ export const ASSESSMENT_EDITOR_QUESTION_PREVIEW_PAGE = ({
   ASSESSMENT_EDITOR_QUESTION_EDITOR_BASE({ assessmentId, questionIndex }) +
   "/preview";
 
+export const ASSESSMENT_PREVIEW_PAGE = ({
+  assessmentId,
+}: {
+  assessmentId?: string;
+}) => "/admin/assessment/" + assessmentId + "/preview";
+
 // Private Teacher Routes
 export const TEACHER_LANDING_PAGE = "/teacher";
 export const TEACHER_DASHBOARD_PAGE = "/teacher/dashboard";