fix: Report item answers not rendering in activity level feedback rep…

…ort [PT-188671164]

The report item answers iframe was not loaded when the user navigated directly to the activity level feedback panel.  This caused the "Show Student Answers" dropdown to show a blank answer for any questions that had report items.

With this change all questions in the feedback panel that have report items pre-load all their report item iframes as hidden iframes before any of the student feedback rows are shown.  In addition a loading indicator was added while the report item answer is being loaded so that the answer does not look blank while the answer is loading.

js/components/portal-dashboard/feedback/activity-level-feedback-student-rows.tsx

@@ -11,6 +11,7 @@ import { TrackEventFunction } from "../../../actions";
 import { Rubric } from "./rubric-utils";
 import { ScoringSettings, hasFeedbackGivenScoreType } from "../../../util/scoring";
 import { ShowStudentAnswers } from "./show-student-answers";
+import ReportItemIframe from "../report-item-iframe";
 
 import css from "../../../../css/portal-dashboard/feedback/feedback-rows.less";
 
@@ -41,6 +42,17 @@ export const ActivityLevelFeedbackStudentRows: React.FC<IProps> = (props) => {
       const feedback = feedbacks.find((f) => f.get("platformStudentId") === student.get("id"));
       return feedback;
     });
+
+  // pre-load all the report item iframes as a hidden iframe so the ShowStudentAnswers component
+  // has access to the report item answers when it is toggled open
+  const reportItemIframes: JSX.Element[] = (activity.get("questions") || []).reduce((acc: JSX.Element[], question: Map<any, any>) => {
+    const hasReportItemUrl = !!question?.get("reportItemUrl");
+    if (hasReportItemUrl) {
+      acc.push(<ReportItemIframe key={question.get("id")} question={question} view={"hidden"} />);
+    }
+    return acc;
+  }, []);
+
   const feedbackRows = displayedFeedbacks.map((feedbackData: Map<any, any>) => {
     const student = feedbackData.get("student");
     const studentId = student.get("id");
@@ -126,6 +138,7 @@ export const ActivityLevelFeedbackStudentRows: React.FC<IProps> = (props) => {
 
   return (
     <div className={css.feedbackRows}>
+      {reportItemIframes}
       {feedbackRows}
     </div>
   );

js/components/report/iframe-answer.tsx

@@ -28,13 +28,15 @@ interface IProps {
 
 interface IState {
   iframeVisible: boolean;
+  loadingReportItemAnswer: boolean;
 }
 
 export class IframeAnswer extends PureComponent<IProps, IState> {
   constructor(props: IProps) {
     super(props);
     this.state = {
-      iframeVisible: false
+      iframeVisible: false,
+      loadingReportItemAnswer: !!props.question?.get("reportItemUrl"),
     };
     this.toggleIframe = this.toggleIframe.bind(this);
     this.renderLink = this.renderLink.bind(this);
@@ -179,13 +181,17 @@ export class IframeAnswer extends PureComponent<IProps, IState> {
         : !alwaysOpen && this.renderLink(); /* This assumes only scaffolded, fill in the blank, and open response questions have answerTexts */
     }
 
+    // show a loading indicator while the report item answer is loading (otherwise the answer looks blank)
+    const showLoading = this.state.loadingReportItemAnswer && !reportItemAnswer;
+
     return (
       <div className={`iframe-answer ${responsive ? "responsive" : ""} ${questionType === "iframe_interactive" ? "scaled" : ""}`} data-cy="iframe-answer">
         {maybeAnswerTextOrLinks && (
           <div className={`iframe-answer-header ${responsive ? "responsive" : ""}`}>
             {maybeAnswerTextOrLinks}
           </div>
         )}
+        {showLoading && "Loading..."}
         {reportItemAnswerItems.map((item, index) => (
           <IframeAnswerReportItem
             key={index}