feat: initial implementation

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

@@ -2,18 +2,20 @@ import type { ReactNode } from "react";
 import React, { useEffect } from "react";
 import { Button } from "@chakra-ui/react";
 
-import { EditOutlineIcon } from "../../../assets/icons";
+import { ArrowBackOutlineIcon } from "../../../assets/icons";
 import type { Question } from "../../../types/QuestionTypes";
 import AssessmentExperience from "../../student/AssessmentExperience";
 
 type AssessmentPreviewProps = {
   questions: Question[];
   goBack: () => void;
+  backButtonText: string;
 };
 
 const AssessmentPreview = ({
   questions,
   goBack,
+  backButtonText,
 }: AssessmentPreviewProps): ReactNode => {
   useEffect(() => {
     if (!questions.length) {
@@ -26,8 +28,12 @@ const AssessmentPreview = ({
   }
 
   const closeAssessmentPreviewButton = (
-    <Button leftIcon={<EditOutlineIcon />} onClick={goBack} variant="tertiary">
-      Back to Editing
+    <Button
+      leftIcon={<ArrowBackOutlineIcon />}
+      onClick={goBack}
+      variant="tertiary"
+    >
+      {backButtonText}
     </Button>
   );
 

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={async () => {
+        if (data) {
+          history.push({
+            pathname: Routes.ASESESSMENT_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.ASESESSMENT_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

@@ -278,6 +278,7 @@ const AssessmentEditor = ({ state }: AssessmentEditorProps): ReactElement => {
                 })}
               >
                 <AssessmentPreview
+                  backButtonText="Back to Editing"
                   goBack={() =>
                     disableEditorPrompt(history.push)(
                       Routes.ASSESSMENT_EDITOR_PAGE({

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

@@ -0,0 +1,56 @@
+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 } from "@chakra-ui/react";
+
+import { GET_TEST } from "../../../APIClients/queries/TestQueries";
+import type { TestResponse } from "../../../APIClients/types/TestClientTypes";
+import { ASSESSMENTS_PAGE } from "../../../constants/Routes";
+import { formatQuestionsResponse } from "../../../utils/QuestionUtils";
+import AssessmentPreview from "../../admin/assessment-creation/AssessmentPreview";
+import QueryStateHandler from "../../common/QueryStateHandler";
+
+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],
+  );
+
+  return (
+    <Box mx={4}>
+      <QueryStateHandler error={error} loading={loading}>
+        <AssessmentPreview
+          backButtonText="Return to Assessments"
+          goBack={() => history.push(ASSESSMENTS_PAGE)}
+          questions={state?.questions || []}
+        />
+      </QueryStateHandler>
+    </Box>
+  );
+};
+
+export default AssessmentPreviewPage;

frontend/src/constants/Routes.ts

@@ -55,6 +55,12 @@ export const ASSESSMENT_EDITOR_QUESTION_PREVIEW_PAGE = ({
   ASSESSMENT_EDITOR_QUESTION_EDITOR_BASE({ assessmentId, questionIndex }) +
   "/preview";
 
+export const ASESESSMENT_PREVIEW_PAGE = ({
+  assessmentId,
+}: {
+  assessmentId: string;
+}) => "/admin/assessment/" + assessmentId;
+
 // Private Teacher Routes
 export const TEACHER_LANDING_PAGE = "/teacher";
 export const TEACHER_DASHBOARD_PAGE = "/teacher/dashboard";