🐛 Add unique keys for answers and questions

Signed-off-by: ibolton336 <[email protected]>
konveyor · Oct 4, 2023 · e455e34 · e455e34
1 parent 5c99540
commit e455e34
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 76 deletions.
diff --git a/.../assessment/components/questionnaire-form/multi-input-selection/multi-input-selection.tsx b/.../assessment/components/questionnaire-form/multi-input-selection/multi-input-selection.tsx
@@ -29,50 +29,53 @@ export const MultiInputSelection: React.FC<MultiInputSelectionProps> = ({
   const { t } = useTranslation();
   return (
     <Stack>
-      {sortedOptions.map((option, i) => (
-        <StackItem key={`${questionFieldName}-${i}`} className="pf-v5-u-pb-xs">
-          <HookFormPFGroupController
-            control={control}
-            name={questionFieldName as `questions.${string}`}
-            fieldId={`${questionFieldName}-${i}`}
-            renderInput={({ field: { value, onChange } }) => (
-              <Radio
-                id={`${questionFieldName}-${option.order}`}
-                name={questionFieldName}
-                isChecked={value === option.text}
-                onChange={(checked, e) => {
-                  onChange(option.text);
-                }}
-                aria-label={option.text}
-                label={
-                  <>
-                    {option.autoAnswered && option.autoAnswerFor?.length ? (
-                      <Tooltip
-                        content={t(
-                          isArchetype
-                            ? "message.selectedBecauseArchetypeTags"
-                            : "message.selectedBecauseAppOrArchetypeTags",
-                          {
-                            tags: option.autoAnswerFor
-                              .map((t) => `"${t.tag}"`)
-                              .join(", "),
-                          }
-                        )}
-                      >
-                        <Icon status="info">
-                          <InfoCircleIcon />
-                        </Icon>
-                      </Tooltip>
-                    ) : null}{" "}
-                    {option.text}
-                  </>
-                }
-                value={option.text}
-              />
-            )}
-          />
-        </StackItem>
-      ))}
+      {sortedOptions.map((option, i) => {
+        const answerUniqueId = `${questionFieldName}-${option.text}-${i}}`;
+        return (
+          <StackItem key={answerUniqueId} className="pf-v5-u-pb-xs">
+            <HookFormPFGroupController
+              control={control}
+              name={questionFieldName as `questions.${string}`}
+              fieldId={answerUniqueId}
+              renderInput={({ field: { value, onChange } }) => (
+                <Radio
+                  id={answerUniqueId}
+                  name={questionFieldName}
+                  isChecked={value === option.text}
+                  onChange={(checked, e) => {
+                    onChange(option.text);
+                  }}
+                  aria-label={option.text}
+                  label={
+                    <>
+                      {option.autoAnswered && option.autoAnswerFor?.length ? (
+                        <Tooltip
+                          content={t(
+                            isArchetype
+                              ? "message.selectedBecauseArchetypeTags"
+                              : "message.selectedBecauseAppOrArchetypeTags",
+                            {
+                              tags: option.autoAnswerFor
+                                .map((t) => `"${t.tag}"`)
+                                .join(", "),
+                            }
+                          )}
+                        >
+                          <Icon status="info">
+                            <InfoCircleIcon />
+                          </Icon>
+                        </Tooltip>
+                      ) : null}{" "}
+                      {option.text}
+                    </>
+                  }
+                  value={option.text}
+                />
+              )}
+            />
+          </StackItem>
+        );
+      })}
     </Stack>
   );
 };
diff --git a/client/src/app/pages/assessment/components/questionnaire-form/questionnaire-form.tsx b/client/src/app/pages/assessment/components/questionnaire-form/questionnaire-form.tsx
@@ -53,35 +53,40 @@ export const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({
           <Text component="h1">{section.name}</Text>
         </TextContent>
       </StackItem>
-      {sortedQuestions.map((question) => (
-        <StackItem key={question.order}>
-          <Question cy-data="question">
-            <QuestionHeader>
-              <Split hasGutter>
-                <SplitItem>{question.text}</SplitItem>
-                <SplitItem>
-                  <Popover bodyContent={<div>{question.explanation}</div>}>
-                    <button
-                      type="button"
-                      aria-label="More info"
-                      onClick={(e) => e.preventDefault()}
-                      className="pf-v5-c-form__group-label-help"
-                    >
-                      <HelpIcon />
-                    </button>
-                  </Popover>
-                </SplitItem>
-              </Split>
-            </QuestionHeader>
-            <QuestionBody>
-              <MultiInputSelection
-                key={getQuestionFieldName(question, true)}
-                question={question}
-              />
-            </QuestionBody>
-          </Question>
-        </StackItem>
-      ))}
+      {sortedQuestions.map((question) => {
+        const questionUniqueKey = `${section.name}-${
+          question.order || "no-order"
+        }-${question.text || "no-text"}`;
+        return (
+          <StackItem key={questionUniqueKey}>
+            <Question cy-data="question">
+              <QuestionHeader>
+                <Split hasGutter>
+                  <SplitItem>{question.text}</SplitItem>
+                  <SplitItem>
+                    <Popover bodyContent={<div>{question.explanation}</div>}>
+                      <button
+                        type="button"
+                        aria-label="More info"
+                        onClick={(e) => e.preventDefault()}
+                        className="pf-v5-c-form__group-label-help"
+                      >
+                        <HelpIcon />
+                      </button>
+                    </Popover>
+                  </SplitItem>
+                </Split>
+              </QuestionHeader>
+              <QuestionBody>
+                <MultiInputSelection
+                  key={getQuestionFieldName(question, true)}
+                  question={question}
+                />
+              </QuestionBody>
+            </Question>
+          </StackItem>
+        );
+      })}
       <StackItem>
         <Question>
           <QuestionHeader>

diff --git a/client/src/app/pages/assessment/form-utils.test.ts b/client/src/app/pages/assessment/form-utils.test.ts
@@ -26,11 +26,11 @@ describe("Application assessment - form utils", () => {
 
   it("getQuestionFieldName: fullName", () => {
     const fieldName = getQuestionFieldName(question, true);
-    expect(fieldName).toBe("questions.question-1");
+    expect(fieldName).toBe("questions.question-1-Question 321");
   });
 
   it("getQuestionFieldName: singleName", () => {
     const fieldName = getQuestionFieldName(question, false);
-    expect(fieldName).toBe("question-1");
+    expect(fieldName).toBe("question-1-Question 321");
   });
 });
diff --git a/client/src/app/pages/assessment/form-utils.ts b/client/src/app/pages/assessment/form-utils.ts
@@ -15,6 +15,6 @@ export const getCommentFieldName = (section: Section, fullName: boolean) => {
 };
 
 export const getQuestionFieldName = (question: Question, fullName: boolean) => {
-  const fieldName = `question-${question.order}`;
+  const fieldName = `question-${question.order}-${question.text}`;
   return fullName ? `${QUESTIONS_KEY}.${fieldName}` : fieldName;
 };