🐛 Async default values loading for assessment wizard

client/src/app/pages/assessment/assessment-page.tsx

@@ -13,8 +13,6 @@ import BanIcon from "@patternfly/react-icons/dist/esm/icons/ban-icon";
 import { AssessmentRoute } from "@app/Paths";
 import { getAxiosErrorMessage } from "@app/utils/utils";
 import { SimpleEmptyState } from "@app/components/SimpleEmptyState";
-import { ConditionalRender } from "@app/components/ConditionalRender";
-import { AppPlaceholder } from "@app/components/AppPlaceholder";
 import { useFetchAssessmentById } from "@app/queries/assessments";
 import { AssessmentPageHeader } from "./components/assessment-page-header";
 import { AssessmentWizard } from "./components/assessment-wizard/assessment-wizard";
@@ -63,9 +61,11 @@ const AssessmentPage: React.FC = () => {
             }
           />
         )}
-        <ConditionalRender when={isFetching} then={<AppPlaceholder />}>
-          <AssessmentWizard assessment={assessment} isOpen />
-        </ConditionalRender>
+        <AssessmentWizard
+          assessment={assessment}
+          isOpen
+          isLoadingAssessment={isFetching}
+        />
       </PageSection>
     </>
   );

client/src/app/pages/assessment/components/assessment-wizard/assessment-wizard.tsx

@@ -62,11 +62,13 @@ export interface AssessmentWizardValues {
 export interface AssessmentWizardProps {
   assessment?: Assessment;
   isOpen: boolean;
+  isLoadingAssessment: boolean;
 }
 
 export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
   assessment,
   isOpen,
+  isLoadingAssessment,
 }) => {
   const isArchetype = useIsArchetype();
   const queryClient = useQueryClient();
@@ -129,30 +131,32 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
         });
     }
     return questions;
-  }, [assessment]);
+  }, [assessment, isLoadingAssessment]);
 
   const validationSchema = yup.object().shape({
     stakeholders: yup.array().of(yup.string()),
     stakeholderGroups: yup.array().of(yup.string()),
   });
 
   const methods = useForm<AssessmentWizardValues>({
-    defaultValues: useMemo(() => {
-      return {
-        stakeholders:
-          assessment?.stakeholders?.map((sh) => sh.name).sort() ?? [],
-        stakeholderGroups:
-          assessment?.stakeholderGroups?.map((sg) => sg.name).sort() ?? [],
-        // comments: initialComments,
-        questions: initialQuestions,
-        [SAVE_ACTION_KEY]: SAVE_ACTION_VALUE.SAVE_AS_DRAFT,
-      };
-    }, [assessment]),
     resolver: yupResolver(validationSchema),
     mode: "all",
   });
   const values = methods.getValues();
 
+  useEffect(() => {
+    methods.reset({
+      stakeholders: assessment?.stakeholders?.map((sh) => sh.name).sort() ?? [],
+      stakeholderGroups:
+        assessment?.stakeholderGroups?.map((sg) => sg.name).sort() ?? [],
+      questions: initialQuestions,
+      [SAVE_ACTION_KEY]: SAVE_ACTION_VALUE.SAVE_AS_DRAFT,
+    });
+    return () => {
+      methods.reset();
+    };
+  }, [assessment]);
+
   const errors = methods.formState.errors;
   const isValid = methods.formState.isValid;
   const isSubmitting = methods.formState.isSubmitting;

client/src/app/pages/assessment/components/questionnaire-form/multi-input-selection/multi-input-selection.tsx

@@ -30,7 +30,7 @@ export const MultiInputSelection: React.FC<MultiInputSelectionProps> = ({
   return (
     <Stack>
       {sortedOptions.map((option, i) => {
-        const answerUniqueId = `${questionFieldName}-${option.text}-${i}}`;
+        const answerUniqueId = `${questionFieldName}-${option.text}-${i}`;
         return (
           <StackItem key={answerUniqueId} className="pf-v5-u-pb-xs">
             <HookFormPFGroupController
@@ -42,7 +42,7 @@ export const MultiInputSelection: React.FC<MultiInputSelectionProps> = ({
                   id={answerUniqueId}
                   name={questionFieldName}
                   isChecked={value === option.text}
-                  onChange={(checked, e) => {
+                  onChange={() => {
                     onChange(option.text);
                   }}
                   aria-label={option.text}

client/src/app/pages/assessment/components/questionnaire-form/questionnaire-form.tsx

@@ -12,7 +12,7 @@ import {
 import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon";
 import { MultiInputSelection } from "./multi-input-selection";
 import { Question, QuestionHeader, QuestionBody } from "./question";
-import { getCommentFieldName, getQuestionFieldName } from "../../form-utils";
+import { getCommentFieldName } from "../../form-utils";
 import { HookFormPFTextInput } from "@app/components/HookFormPFFields";
 import { useFormContext } from "react-hook-form";
 import { Section } from "@app/api/models";
@@ -26,7 +26,7 @@ export const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({
   section,
 }) => {
   const { t } = useTranslation();
-  const { control, getValues } = useFormContext<AssessmentWizardValues>();
+  const { control } = useFormContext<AssessmentWizardValues>();
 
   // Force the wizard parent to reset the scroll
   useEffect(() => {
@@ -53,10 +53,10 @@ export const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({
           <Text component="h1">{section.name}</Text>
         </TextContent>
       </StackItem>
-      {sortedQuestions.map((question) => {
+      {sortedQuestions.map((question, i) => {
         const questionUniqueKey = `${section.name}-${
           question.order || "no-order"
-        }-${question.text || "no-text"}`;
+        }-${question.text || "no-text"}-${i}`;
         return (
           <StackItem key={questionUniqueKey}>
             <Question cy-data="question">
@@ -79,7 +79,7 @@ export const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({
               </QuestionHeader>
               <QuestionBody>
                 <MultiInputSelection
-                  key={getQuestionFieldName(question, true)}
+                  key={questionUniqueKey}
                   question={question}
                 />
               </QuestionBody>

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-Question 321");
+    expect(fieldName).toBe("questions.question-1-Question_321");
   });
 
   it("getQuestionFieldName: singleName", () => {
     const fieldName = getQuestionFieldName(question, false);
-    expect(fieldName).toBe("question-1-Question 321");
+    expect(fieldName).toBe("question-1-Question_321");
   });
 });

client/src/app/pages/assessment/form-utils.ts

@@ -13,8 +13,13 @@ export const getCommentFieldName = (section: Section, fullName: boolean) => {
   const fieldName = `category-${section.name}`;
   return fullName ? `${COMMENTS_KEY}.${fieldName}` : fieldName;
 };
+export const sanitizeKey = (text: string) => {
+  return text.replace(/[^a-zA-Z0-9-_:.]/g, "_");
+};
 
 export const getQuestionFieldName = (question: Question, fullName: boolean) => {
   const fieldName = `question-${question.order}-${question.text}`;
-  return fullName ? `${QUESTIONS_KEY}.${fieldName}` : fieldName;
+  return fullName
+    ? `${QUESTIONS_KEY}.${sanitizeKey(fieldName)}`
+    : sanitizeKey(fieldName);
 };