diff --git a/frontend/src/assets/icons.tsx b/frontend/src/assets/icons.tsx index 0197d1f3e..ba2cbabad 100644 --- a/frontend/src/assets/icons.tsx +++ b/frontend/src/assets/icons.tsx @@ -425,8 +425,8 @@ export const SaveOutlineIcon = (): React.ReactElement => ( ); -export const EyeOutlineIcon = (): React.ReactElement => ( - +export const EyeOutlineIcon = (props: IconProps): React.ReactElement => ( + { validateForm(); disableEditorPrompt(history.push)( - Routes.ASSESSMENT_PREVIEW_PAGE({ + Routes.ADMIN_ASSESSMENT_PREVIEW_PAGE({ assessmentId, }), ); diff --git a/frontend/src/components/admin/assessment-status/EditStatusButtons/PreviewButton.tsx b/frontend/src/components/admin/assessment-status/EditStatusButtons/PreviewButton.tsx index 4e07bc683..b458b77a4 100644 --- a/frontend/src/components/admin/assessment-status/EditStatusButtons/PreviewButton.tsx +++ b/frontend/src/components/admin/assessment-status/EditStatusButtons/PreviewButton.tsx @@ -28,7 +28,7 @@ const PreviewButton = ({ onClick={async () => { if (data) { history.push({ - pathname: Routes.ASSESSMENT_PREVIEW_PAGE({ assessmentId }), + pathname: Routes.ADMIN_ASSESSMENT_PREVIEW_PAGE({ assessmentId }), state: data.test, }); } else { diff --git a/frontend/src/components/pages/admin/AdminRouting.tsx b/frontend/src/components/pages/admin/AdminRouting.tsx index eccf87479..78594bf99 100644 --- a/frontend/src/components/pages/admin/AdminRouting.tsx +++ b/frontend/src/components/pages/admin/AdminRouting.tsx @@ -7,10 +7,10 @@ import type Page from "../../../types/PageTypes"; import PrivateRoute from "../../auth/PrivateRoute"; import RedirectTo from "../../auth/RedirectTo"; import Navbar from "../../common/navigation/Navbar"; +import AssessmentPreviewPage from "../common/AssessmentPreviewPage"; import NotFound from "../NotFound"; import AssessmentEditorPage from "./AssessmentEditorPage"; -import AssessmentPreviewPage from "./AssessmentPreviewPage"; import DisplayAssessmentsPage from "./DisplayAssessmentsPage"; import UsersPage from "./UsersPage"; @@ -36,7 +36,7 @@ const AdminRouting = (): React.ReactElement => { /> { + + + + + + + + + + + + + + + - - - - - - - - - - - - - - ); }; diff --git a/frontend/src/components/teacher/session-creation/AssessmentsTable.tsx b/frontend/src/components/teacher/session-creation/AssessmentsTable.tsx index efa11a7f4..5ddafc6bb 100644 --- a/frontend/src/components/teacher/session-creation/AssessmentsTable.tsx +++ b/frontend/src/components/teacher/session-creation/AssessmentsTable.tsx @@ -1,9 +1,17 @@ import React from "react"; +import { useHistory } from "react-router-dom"; +import { useLazyQuery } from "@apollo/client"; import { Radio, RadioGroup, Text } from "@chakra-ui/react"; +import { GET_TEST } from "../../../APIClients/queries/TestQueries"; +import type { TestResponse } from "../../../APIClients/types/TestClientTypes"; import type { Grade } from "../../../APIClients/types/UserClientTypes"; +import { EyeOutlineIcon } from "../../../assets/icons"; +import * as Routes from "../../../constants/Routes"; import type { UseCase } from "../../../types/AssessmentTypes"; import { removeUnderscore, titleCase } from "../../../utils/GeneralUtils"; +import ActionButton from "../../common/form/ActionButton"; +import useToast from "../../common/info/useToast"; import type { TableRow } from "../../common/table/Table"; import { Table } from "../../common/table/Table"; @@ -31,6 +39,33 @@ const AssessmentsTable = ({ setTestName, isDisabled = false, }: AssessmentsTableProps): React.ReactElement => { + const history = useHistory(); + const { showToast } = useToast(); + + const [previewAssessmentQuery] = useLazyQuery<{ + test: TestResponse; + }>(GET_TEST); + + const previewAssessment = async (assessmentId: string) => { + const { data } = await previewAssessmentQuery({ + variables: { id: assessmentId }, + }); + if (data) { + history.push({ + pathname: Routes.TEACHER_ASSESSMENT_PREVIEW_PAGE({ + assessmentId, + }), + state: data.test, + }); + } else { + showToast({ + message: + "This assessment cannot be previewed at this time. Please try again.", + status: "error", + }); + } + }; + const headers = ["", "Name", "Grade", "Type", "Country", "Region"]; const rows: TableRow[] = assessments.map((assessment, i) => ({ id: assessment.id, @@ -49,6 +84,15 @@ const AssessmentsTable = ({ assessment.curriculumCountry, assessment.curriculumRegion, ], + menu: ( + } + onClick={() => previewAssessment(assessment.id)} + showDefaultToasts={false} + size="sm" + /> + ), onClick: () => { setTestId(assessment.id); if (setTestName) { diff --git a/frontend/src/components/teacher/view-sessions/TestSessionListItemPopover.tsx b/frontend/src/components/teacher/view-sessions/TestSessionListItemPopover.tsx index 7d1c03393..fb9d81645 100644 --- a/frontend/src/components/teacher/view-sessions/TestSessionListItemPopover.tsx +++ b/frontend/src/components/teacher/view-sessions/TestSessionListItemPopover.tsx @@ -1,14 +1,17 @@ import React, { type ReactElement } from "react"; import { useHistory } from "react-router-dom"; -import { useMutation } from "@apollo/client"; +import { useLazyQuery, useMutation } from "@apollo/client"; import { Divider, useDisclosure, VStack } from "@chakra-ui/react"; import { DELETE_TEST_SESSION } from "../../../APIClients/mutations/TestSessionMutations"; +import { GET_TEST } from "../../../APIClients/queries/TestQueries"; import { GET_TEST_SESSIONS_BY_TEACHER_ID } from "../../../APIClients/queries/TestSessionQueries"; +import type { TestResponse } from "../../../APIClients/types/TestClientTypes"; import * as Routes from "../../../constants/Routes"; import { TestSessionStatus } from "../../../types/TestSessionTypes"; import { getQueryName } from "../../../utils/GeneralUtils"; import DeleteAssessmentModal from "../../admin/assessment-status/EditStatusModals/DeleteAssessmentModal"; +import useToast from "../../common/info/useToast"; import Popover from "../../common/popover/Popover"; import PopoverButton from "../../common/popover/PopoverButton"; @@ -26,8 +29,8 @@ const TestSessionListItemPopover = ({ onOpen: openDeleteModal, onClose: onDeleteModalClose, } = useDisclosure(); - const history = useHistory(); + const { showToast } = useToast(); const [deleteTestSession] = useMutation(DELETE_TEST_SESSION, { variables: { id: session.testSessionId }, @@ -38,12 +41,40 @@ const TestSessionListItemPopover = ({ history.push(Routes.DISTRIBUTE_ASSESSMENT_PAGE, session); }; + const [previewTest] = useLazyQuery<{ + test: TestResponse; + }>(GET_TEST); + + const onPreviewTest = async () => { + const { data } = await previewTest({ + variables: { id: session.testId }, + }); + if (data) { + history.push({ + pathname: Routes.TEACHER_ASSESSMENT_PREVIEW_PAGE({ + assessmentId: session.testId, + }), + state: data.test, + }); + } else { + showToast({ + message: + "This assessment cannot be previewed at this time. Please try again.", + status: "error", + }); + } + }; + return ( } spacing={0}> {session.status !== TestSessionStatus.PAST && ( - + <> + + + + )} `/teacher/classrooms/${classroomId}/students`; +export const TEACHER_ASSESSMENT_PREVIEW_PAGE = ({ + assessmentId, +}: { + assessmentId?: string; +}) => "/teacher/assessment-preview/" + assessmentId; // Private Student Routes export const STUDENT_LANDING_PAGE = "/student";