fix(graderView-part-3): standardize grader's student view to match actual student experience

ncduy0303 · ncduy0303 · commit bea80f9e8ed8 · 2025-06-27T08:03:03.000-04:00
Ensures that grader's student view accurately reflects what students are seeing at the same time for past attempts view (using the "All Answers" button)

Add display settings props to AnswerDetails component to control visibility of various answer elements like test cases, rubric breakdown, and MCQ/MRQ solutions.
diff --git a/client/app/bundles/course/assessment/pages/AssessmentStatistics/AnswerDisplay/LastAttempt.tsx b/client/app/bundles/course/assessment/pages/AssessmentStatistics/AnswerDisplay/LastAttempt.tsx
@@ -84,6 +84,16 @@ const LastAttemptIndex: FC<Props> = (props) => {
             </Accordion>
             <AnswerDetails
               answer={answer}
+              displaySettings={{
+                showPrivateTestCases: true,
+                showEvaluationTestCases: true,
+                showMcqMrqSolution: true,
+                showRubricBreakdown: true,
+                showPublicTestCasesOutput: true,
+                showPrivateTestCasesOutput: true,
+                showEvaluationTestCasesOutput: true,
+                showStdoutAndStderr: true,
+              }}
               question={answer.question}
               status={HistoryFetchStatus.COMPLETED}
             />
diff --git a/client/app/bundles/course/assessment/submission/components/AllAttempts/AllAttemptsSequenceView.tsx b/client/app/bundles/course/assessment/submission/components/AllAttempts/AllAttemptsSequenceView.tsx
@@ -18,8 +18,11 @@ import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 import { formatLongDateTime } from 'lib/moment';
 
+import { workflowStates } from '../../constants';
 import { historyActions } from '../../reducers/history';
+import { getAssessment } from '../../selectors/assessments';
 import { getSubmissionQuestionHistory } from '../../selectors/history';
+import { getSubmission } from '../../selectors/submissions';
 import translations from '../../translations';
 import AnswerDetails from '../AnswerDetails/AnswerDetails';
 import TextResponseSolutions from '../TextResponseSolutions';
@@ -38,6 +41,10 @@ const AllAttemptsSequenceView: FC<Props> = (props) => {
   const { answerDataById, allAnswers, selectedAnswerIds, question } =
     useAppSelector(getSubmissionQuestionHistory(submissionId, questionId));
 
+  const assessment = useAppSelector(getAssessment);
+  const submission = useAppSelector(getSubmission);
+  const published = submission.workflowState === workflowStates.Published;
+
   useEffect(() => {
     const answerIdsToFetch =
       selectedAnswerIds.filter(
@@ -94,6 +101,23 @@ const AllAttemptsSequenceView: FC<Props> = (props) => {
               <AnswerDetails
                 key={answerId}
                 answer={answerDataById?.[answerId]?.details}
+                displaySettings={{
+                  showEvaluationTestCases:
+                    graderView || (published && assessment.showEvaluation),
+                  showEvaluationTestCasesOutput: graderView,
+                  showMcqMrqSolution:
+                    graderView || (published && assessment.showMcqMrqSolution),
+                  showPrivateTestCases:
+                    graderView || (published && assessment.showPrivate),
+                  showPrivateTestCasesOutput: graderView,
+                  showPublicTestCasesOutput:
+                    graderView || submission.showPublicTestCasesOutput,
+                  showRubricBreakdown:
+                    graderView ||
+                    (published && assessment.showRubricToStudents),
+                  showStdoutAndStderr:
+                    graderView || submission.showStdoutAndStderr,
+                }}
                 question={question!}
                 status={answerDataById?.[answerId]?.status}
               />
diff --git a/client/app/bundles/course/assessment/submission/components/AllAttempts/AllAttemptsTimelineView.tsx b/client/app/bundles/course/assessment/submission/components/AllAttempts/AllAttemptsTimelineView.tsx
@@ -5,23 +5,31 @@ import CustomSlider from 'lib/components/extensions/CustomSlider';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import { formatLongDateTime } from 'lib/moment';
 
+import { workflowStates } from '../../constants';
+import { getAssessment } from '../../selectors/assessments';
 import { getSubmissionQuestionHistory } from '../../selectors/history';
+import { getSubmission } from '../../selectors/submissions';
 import AnswerDetails from '../AnswerDetails/AnswerDetails';
 
 interface Props {
   questionId: number;
   submissionId: number;
+  graderView: boolean;
 }
 
 const AllAttemptsTimelineView: FC<Props> = (props) => {
-  const { submissionId, questionId } = props;
+  const { submissionId, questionId, graderView } = props;
 
   const dispatch = useAppDispatch();
 
   const { answerDataById, allAnswers, question } = useAppSelector(
     getSubmissionQuestionHistory(submissionId, questionId),
   );
 
+  const assessment = useAppSelector(getAssessment);
+  const submission = useAppSelector(getSubmission);
+  const published = submission.workflowState === workflowStates.Published;
+
   // sliderIndex is the uncommited index that is updated on drag
   // displayedIndex is updated on drop or with any non-mouse (keyboard) events
   // we distinguish these because we don't want to query each answer as user drags the slider
@@ -102,6 +110,21 @@ const AllAttemptsTimelineView: FC<Props> = (props) => {
       <div className={sliderIndex === displayedIndex ? '' : 'opacity-60'}>
         <AnswerDetails
           answer={answerDetails}
+          displaySettings={{
+            showEvaluationTestCases:
+              graderView || (published && assessment.showEvaluation),
+            showEvaluationTestCasesOutput: graderView,
+            showMcqMrqSolution:
+              graderView || (published && assessment.showMcqMrqSolution),
+            showPrivateTestCases:
+              graderView || (published && assessment.showPrivate),
+            showPrivateTestCasesOutput: graderView,
+            showPublicTestCasesOutput:
+              graderView || submission.showPublicTestCasesOutput,
+            showRubricBreakdown:
+              graderView || (published && assessment.showRubricToStudents),
+            showStdoutAndStderr: graderView || submission.showStdoutAndStderr,
+          }}
           question={question}
           status={answerStatus}
         />
diff --git a/client/app/bundles/course/assessment/submission/components/AllAttempts/index.tsx b/client/app/bundles/course/assessment/submission/components/AllAttempts/index.tsx
@@ -111,6 +111,7 @@ const AllAttemptsContent: FC<ContentProps> = (props) => {
         )}
         {viewType === 'timeline' && (
           <AllAttemptsTimelineView
+            graderView={graderView}
             questionId={questionId}
             submissionId={submissionId}
           />
diff --git a/client/app/bundles/course/assessment/submission/components/AnswerDetails/AnswerDetails.tsx b/client/app/bundles/course/assessment/submission/components/AnswerDetails/AnswerDetails.tsx
@@ -8,7 +8,7 @@ import { formatLongDateTime } from 'lib/moment';
 import messagesTranslations from 'lib/translations/messages';
 
 import { HistoryFetchStatus } from '../../reducers/history';
-import { AnswerDetailsProps } from '../../types';
+import { AnswerDetailsProps, DisplaySettings } from '../../types';
 
 import FileUploadDetails from './FileUploadDetails';
 import ForumPostResponseDetails from './ForumPostResponseDetails';
@@ -100,19 +100,26 @@ const FetchedAnswerDetails = <T extends keyof typeof QuestionType>(
 
 type AnswerDetailsComponentProps<T extends keyof typeof QuestionType> = {
   status: HistoryFetchStatus;
+  displaySettings: DisplaySettings;
 } & Partial<AnswerDetailsProps<T>>;
 
 const AnswerDetails = <T extends keyof typeof QuestionType>(
   props: AnswerDetailsComponentProps<T>,
 ): JSX.Element => {
-  const { answer, question, status } = props;
+  const { answer, question, status, displaySettings } = props;
 
   const { t } = useTranslation();
 
   const isAnswerRenderable =
     answer && question && status === HistoryFetchStatus.COMPLETED;
   if (isAnswerRenderable) {
-    return <FetchedAnswerDetails answer={answer!} question={question!} />;
+    return (
+      <FetchedAnswerDetails
+        answer={answer!}
+        displaySettings={displaySettings!}
+        question={question!}
+      />
+    );
   }
   if (status === HistoryFetchStatus.ERRORED) {
     return (
diff --git a/client/app/bundles/course/assessment/submission/components/AnswerDetails/MultipleChoiceDetails.tsx b/client/app/bundles/course/assessment/submission/components/AnswerDetails/MultipleChoiceDetails.tsx
@@ -7,7 +7,8 @@ import { AnswerDetailsProps } from '../../types';
 const MultipleChoiceDetails = (
   props: AnswerDetailsProps<QuestionType.MultipleChoice>,
 ): JSX.Element => {
-  const { question, answer } = props;
+  const { question, answer, displaySettings } = props;
+  const { showMcqMrqSolution } = displaySettings;
   return (
     <>
       {question.options.map((option) => (
@@ -25,7 +26,7 @@ const MultipleChoiceDetails = (
               <Typography
                 dangerouslySetInnerHTML={{ __html: option.option.trim() }}
                 style={
-                  option.correct
+                  showMcqMrqSolution && option.correct
                     ? {
                         backgroundColor: green[50],
                         verticalAlign: 'middle',
diff --git a/client/app/bundles/course/assessment/submission/components/AnswerDetails/MultipleResponseDetails.tsx b/client/app/bundles/course/assessment/submission/components/AnswerDetails/MultipleResponseDetails.tsx
@@ -7,7 +7,8 @@ import { AnswerDetailsProps } from '../../types';
 const MultipleResponseDetails = (
   props: AnswerDetailsProps<QuestionType.MultipleResponse>,
 ): JSX.Element => {
-  const { question, answer } = props;
+  const { question, answer, displaySettings } = props;
+  const { showMcqMrqSolution } = displaySettings;
   return (
     <>
       {question.options.map((option) => {
@@ -26,7 +27,7 @@ const MultipleResponseDetails = (
                 <Typography
                   dangerouslySetInnerHTML={{ __html: option.option.trim() }}
                   style={
-                    option.correct
+                    showMcqMrqSolution && option.correct
                       ? {
                           backgroundColor: green[50],
                           verticalAlign: 'middle',
diff --git a/client/app/bundles/course/assessment/submission/components/AnswerDetails/ProgrammingAnswerDetails.tsx b/client/app/bundles/course/assessment/submission/components/AnswerDetails/ProgrammingAnswerDetails.tsx
@@ -6,16 +6,24 @@ import { useAppDispatch } from 'lib/hooks/store';
 
 import { AnswerDetailsProps } from '../../types';
 
-import CodaveriFeedbackStatus from './ProgrammingComponent/CodaveriFeedbackStatus';
 import FileContent from './ProgrammingComponent/FileContent';
 import TestCases from './ProgrammingComponent/TestCases';
 
 const ProgrammingAnswerDetails = (
   props: AnswerDetailsProps<QuestionType.Programming>,
 ): JSX.Element => {
-  const { answer } = props;
+  const { answer, displaySettings } = props;
   const annotations = answer.annotations ?? [];
 
+  const {
+    showPrivateTestCases,
+    showEvaluationTestCases,
+    showPublicTestCasesOutput,
+    showPrivateTestCasesOutput,
+    showEvaluationTestCasesOutput,
+    showStdoutAndStderr,
+  } = displaySettings;
+
   const dispatch = useAppDispatch();
 
   useEffect(() => {
@@ -35,8 +43,18 @@ const ProgrammingAnswerDetails = (
           file={file}
         />
       ))}
-      <TestCases testCase={answer.testCases} />
-      <CodaveriFeedbackStatus status={answer.codaveriFeedback} />
+      <TestCases
+        showEvaluationTestCases={showEvaluationTestCases}
+        showEvaluationTestCasesOutput={showEvaluationTestCasesOutput}
+        showPrivateTestCases={showPrivateTestCases}
+        showPrivateTestCasesOutput={showPrivateTestCasesOutput}
+        showPublicTestCasesOutput={showPublicTestCasesOutput}
+        showStdoutAndStderr={showStdoutAndStderr}
+        testCase={answer.testCases}
+      />
+      {/* might not need this component because unpublished annotations (i.e Codaveri) are not shown in Answer Details */}
+      {/* students can see this status bar in past attempts view, which is not relevant to them */}
+      {/* <CodaveriFeedbackStatus status={answer.codaveriFeedback} /> */}
     </>
   );
 };
diff --git a/client/app/bundles/course/assessment/submission/components/AnswerDetails/ProgrammingComponent/TestCaseRow.tsx b/client/app/bundles/course/assessment/submission/components/AnswerDetails/ProgrammingComponent/TestCaseRow.tsx
@@ -7,6 +7,7 @@ import ExpandableCode from 'lib/components/core/ExpandableCode';
 
 interface Props {
   result: TestCaseResult;
+  showTestCaseOutput: boolean;
 }
 
 const TestCaseClassName = {
@@ -16,7 +17,7 @@ const TestCaseClassName = {
 };
 
 const TestCaseRow: FC<Props> = (props) => {
-  const { result } = props;
+  const { result, showTestCaseOutput } = props;
 
   const nameRegex = /\/?(\w+)$/;
   const idMatch = result.identifier?.match(nameRegex);
@@ -56,9 +57,11 @@ const TestCaseRow: FC<Props> = (props) => {
           <ExpandableCode>{result.expected || ''}</ExpandableCode>
         </TableCell>
 
-        <TableCell className="w-full pt-1">
-          <ExpandableCode>{result.output || ''}</ExpandableCode>
-        </TableCell>
+        {showTestCaseOutput && (
+          <TableCell className="w-full pt-1">
+            <ExpandableCode>{result.output || ''}</ExpandableCode>
+          </TableCell>
+        )}
 
         <TableCell>{testCaseIcon}</TableCell>
       </TableRow>
diff --git a/client/app/bundles/course/assessment/submission/components/AnswerDetails/ProgrammingComponent/TestCases.tsx b/client/app/bundles/course/assessment/submission/components/AnswerDetails/ProgrammingComponent/TestCases.tsx
diff --git a/client/app/bundles/course/assessment/submission/components/AnswerDetails/RubricBasedResponseDetails.tsx b/client/app/bundles/course/assessment/submission/components/AnswerDetails/RubricBasedResponseDetails.tsx
diff --git a/client/app/bundles/course/assessment/submission/types.ts b/client/app/bundles/course/assessment/submission/types.ts
