issue-1118 Enhance SelectQuestionExercise to support question labels on edit

Author: morozov-av

bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/components/CreateExercise/components/SelectQuestionExercise/SelectQuestionExercise.tsx

@@ -1,4 +1,4 @@
-import { FC, useMemo, useRef } from "react";
+import { FC, useMemo } from "react";
 
 import { CreateExerciseFormType } from "@/types/exercises";
 import { QuestionWithLabel } from "@/types/exercises";
@@ -35,6 +35,7 @@ const getDefaultFormData = (): Partial<CreateExerciseFormType> => ({
   htmlsrc: "",
   question_type: "selectquestion",
   questionList: [],
+  questionLabels: {},
   abExperimentName: "",
   toggleOptions: [],
   dataLimitBasecourse: false
@@ -52,13 +53,12 @@ export const SelectQuestionExercise: FC<ExerciseComponentProps> = ({
   onFormReset,
   isEdit = false
 }) => {
-  const questionLabelsRef = useRef<Map<string, string>>(new Map());
-
   const generatePreviewWithLabels = (data: Partial<CreateExerciseFormType>): string => {
     const stringList = data.questionList || [];
+    const labels = data.questionLabels || {};
     const questionListWithLabels = stringList.map((questionId) => ({
       questionId,
-      label: questionLabelsRef.current.get(questionId)
+      label: labels[questionId]
     }));
 
     return generateSelectQuestionPreview({
@@ -116,24 +116,26 @@ export const SelectQuestionExercise: FC<ExerciseComponentProps> = ({
 
   const safeQuestionList = useMemo(() => {
     const stringList = formData.questionList || [];
+    const labels = formData.questionLabels || {};
 
     return stringList.map((questionId) => ({
       questionId,
-      label: questionLabelsRef.current.get(questionId)
+      label: labels[questionId]
     }));
-  }, [formData.questionList]);
+  }, [formData.questionList, formData.questionLabels]);
 
   const handleQuestionListChange = (questionList: QuestionWithLabel[]) => {
-    questionLabelsRef.current.clear();
+    const labelsRecord: Record<string, string> = {};
     questionList.forEach((q) => {
       if (q.label) {
-        questionLabelsRef.current.set(q.questionId, q.label);
+        labelsRecord[q.questionId] = q.label;
       }
     });
 
     const stringList = convertToStringArray(questionList);
 
     updateFormData("questionList", stringList);
+    updateFormData("questionLabels", labelsRecord);
   };
 
   const handleABExperimentChange = (experimentName: string) => {

bases/rsptx/assignment_server_api/assignment_builder/src/types/exercises.ts

@@ -97,6 +97,7 @@ export type QuestionJSON = Partial<{
   scale_max: number;
   forceCheckboxes: boolean;
   questionList: string[];
+  questionLabels: Record<string, string>;
   abExperimentName: string;
   toggleOptions: string[];
   dataLimitBasecourse: boolean;

bases/rsptx/assignment_server_api/assignment_builder/src/utils/questionJson.ts

@@ -54,6 +54,7 @@ export const buildQuestionJson = (data: CreateExerciseFormType) => {
     }),
     ...(data.question_type === "selectquestion" && {
       questionList: data.questionList,
+      questionLabels: data.questionLabels,
       abExperimentName: data.abExperimentName,
       toggleOptions: data.toggleOptions,
       dataLimitBasecourse: data.dataLimitBasecourse
@@ -117,6 +118,7 @@ export const mergeQuestionJsonWithDefaults = (
     parsonspersonalize:
       questionJson?.parsonspersonalize ??
       (defaultQuestionJson.parsonspersonalize as "" | "solution-level" | "block-and-solution"),
-    parsonsexample: questionJson?.parsonsexample ?? defaultQuestionJson.parsonsexample
+    parsonsexample: questionJson?.parsonsexample ?? defaultQuestionJson.parsonsexample,
+    questionLabels: questionJson?.questionLabels ?? {}
   };
 };