👻 Add comments to assessment wizard & review components (#1483)

- Add comments to assessment wizard sections - Allow comments to be viewed in assessment review screen Signed-off-by: ibolton336 <[email protected]> Co-authored-by: Dallas <[email protected]>
konveyor · Oct 19, 2023 · 07a31c0 · 07a31c0
1 parent e910613
commit 07a31c0
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 37 deletions.
diff --git a/client/src/app/api/models.ts b/client/src/app/api/models.ts
@@ -666,6 +666,7 @@ export interface Section {
   name: string;
   questions: Question[];
   order: number;
+  comment?: string;
 }
 
 export interface Question {

diff --git a/client/src/app/components/questionnaire-summary/questionnaire-summary.tsx b/client/src/app/components/questionnaire-summary/questionnaire-summary.tsx
@@ -25,6 +25,7 @@ import QuestionnaireSectionTabTitle from "./components/questionnaire-section-tab
 import { AxiosError } from "axios";
 import { formatPath } from "@app/utils/utils";
 import useIsArchetype from "@app/hooks/useIsArchetype";
+import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 
 export enum SummaryType {
   Assessment = "Assessment",
@@ -215,6 +216,14 @@ const QuestionnaireSummary: React.FC<QuestionnaireSummaryProps> = ({
                           data={summaryData}
                           hideAnswerKey={summaryType === SummaryType.Assessment}
                         />
+                        {section?.comment && (
+                          <TextContent className={spacing.myMd}>
+                            <Text component="h4">Section comments</Text>
+                            <Text key={index} component="p">
+                              {section.comment}
+                            </Text>
+                          </TextContent>
+                        )}
                       </Tab>
                     );
                   }) || []),

diff --git a/client/src/app/pages/assessment/components/assessment-wizard/assessment-wizard.tsx b/client/src/app/pages/assessment/components/assessment-wizard/assessment-wizard.tsx
@@ -26,6 +26,7 @@ import { ConfirmDialog } from "@app/components/ConfirmDialog";
 import {
   COMMENTS_KEY,
   QUESTIONS_KEY,
+  getCommentFieldName,
   getQuestionFieldName,
 } from "../../form-utils";
 import { AxiosError } from "axios";
@@ -108,16 +109,15 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
     (a, b) => a.order - b.order
   );
 
-  //TODO: Add comments to the sections when/if available from api
-  // const initialComments = useMemo(() => {
-  //   let comments: { [key: string]: string } = {};
-  //   if (assessment) {
-  //     assessment.questionnaire.categories.forEach((category) => {
-  //       comments[getCommentFieldName(category, false)] = category.comment || "";
-  //     });
-  //   }
-  //   return comments;
-  // }, [assessment]);
+  const initialComments = useMemo(() => {
+    const comments: { [key: string]: string } = {};
+    if (assessment) {
+      assessment.sections.forEach((section) => {
+        comments[getCommentFieldName(section, false)] = section.comment || "";
+      });
+    }
+    return comments;
+  }, [assessment]);
 
   const initialQuestions = useMemo(() => {
     const questions: { [key: string]: string | undefined } = {};
@@ -154,6 +154,7 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
       stakeholderGroups:
         assessment?.stakeholderGroups?.map((sg) => sg.name).sort() ?? [],
       questions: initialQuestions,
+      comments: initialComments,
       [SAVE_ACTION_KEY]: SAVE_ACTION_VALUE.SAVE_AS_DRAFT,
     });
     return () => {
@@ -170,7 +171,6 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
   const disableNavigation = !isValid || isSubmitting;
 
   const isFirstStepValid = () => {
-    // TODO: Wire up stakeholder support for assessment when available
     const numberOfStakeholdlers = values?.stakeholders?.length || 0;
     const numberOfGroups = values?.stakeholderGroups?.length || 0;
     return numberOfStakeholdlers + numberOfGroups > 0;
@@ -181,23 +181,11 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
     return !questionErrors[getQuestionFieldName(question, false)];
   };
 
-  //TODO: Add comments to the sections
-  // const isCommentValid = (category: QuestionnaireCategory): boolean => {
-  //   const commentErrors = errors.comments || {};
-  //   return !commentErrors[getCommentFieldName(category, false)];
-  // };
-
   const questionHasValue = (question: Question): boolean => {
     const questionValues = values.questions || {};
     const value = questionValues[getQuestionFieldName(question, false)];
     return value !== null && value !== undefined && value !== "";
   };
-  //TODO: Add comments to the sections
-  // const commentMinLenghtIs1 = (category: QuestionnaireCategory): boolean => {
-  //   const categoryComments = values.comments || {};
-  //   const value = categoryComments[getCommentFieldName(category, false)];
-  //   return value !== null && value !== undefined && value.length > 0;
-  // };
 
   const areAllQuestionsAnswered = (section: Section): boolean => {
     return (
@@ -227,7 +215,6 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
 
   const maxCategoryWithData = [...sortedSections].reverse().find((section) => {
     return section.questions.some((question) => questionHasValue(question));
-    //  ||commentMinLenghtIs1(category)
   });
 
   const onInvalid = (errors: FieldErrors<AssessmentWizardValues>) =>
@@ -241,16 +228,14 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
     }
     const updatedQuestionsData = formValues[QUESTIONS_KEY];
 
-    // Create an array of sections based on the questionsData
     const sections: Section[] =
       assessment?.sections?.map((section) => {
-        //TODO: Add comments to the sections
-        // const commentValues = values["comments"];
-        // const fieldName = getCommentFieldName(category, false);
-        // const commentValue = commentValues[fieldName];
+        const commentValues = values["comments"];
+        const fieldName = getCommentFieldName(section, false);
+        const commentValue = commentValues[fieldName];
         return {
           ...section,
-          // comment: commentValue,
+          comment: commentValue,
           questions: section.questions.map((question) => {
             return {
               ...question,

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
@@ -16,6 +16,7 @@ import { getCommentFieldName } from "../../form-utils";
 import { useFormContext } from "react-hook-form";
 import { Section } from "@app/api/models";
 import { AssessmentWizardValues } from "@app/pages/assessment/components/assessment-wizard/assessment-wizard";
+import { HookFormPFTextInput } from "@app/components/HookFormPFFields";
 
 export interface QuestionnaireFormProps {
   section: Section;
@@ -86,7 +87,7 @@ export const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({
           </StackItem>
         );
       })}
-      {/* <StackItem>
+      <StackItem>
         <Question>
           <QuestionHeader>
             {t("terms.additionalNotesOrComments")}
@@ -103,7 +104,7 @@ export const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({
             ></HookFormPFTextInput>
           </QuestionBody>
         </Question>
-      </StackItem> */}
+      </StackItem>
     </Stack>
   );
 };
diff --git a/...essment/components/wizard-step-nav-description/tests/wizard-step-nav-description.test.tsx b/...essment/components/wizard-step-nav-description/tests/wizard-step-nav-description.test.tsx
@@ -8,6 +8,7 @@ describe("WizardStepNavDescription", () => {
     name: "Section 1",
     order: 1,
     questions: [],
+    comment: "",
   };
 
   it("Renders without crashing", () => {

diff --git a/client/src/app/pages/assessment/form-utils.test.ts b/client/src/app/pages/assessment/form-utils.test.ts
@@ -3,7 +3,7 @@ import { getCommentFieldName, getQuestionFieldName } from "./form-utils";
 
 describe("Application assessment - form utils", () => {
   const section: Section = {
-    name: "category-123",
+    name: "section-123",
     order: 1,
     questions: [],
   };
@@ -16,12 +16,12 @@ describe("Application assessment - form utils", () => {
 
   it("getCommentFieldName: fullName", () => {
     const fieldName = getCommentFieldName(section, true);
-    expect(fieldName).toBe("comments.category-category-123");
+    expect(fieldName).toBe("comments.section-section-123");
   });
 
   it("getCommentFieldName: singleName", () => {
     const fieldName = getCommentFieldName(section, false);
-    expect(fieldName).toBe("category-category-123");
+    expect(fieldName).toBe("section-section-123");
   });
 
   it("getQuestionFieldName: fullName", () => {

diff --git a/client/src/app/pages/assessment/form-utils.ts b/client/src/app/pages/assessment/form-utils.ts
@@ -10,9 +10,13 @@ export enum SAVE_ACTION_VALUE {
   SAVE_AS_DRAFT,
 }
 export const getCommentFieldName = (section: Section, fullName: boolean) => {
-  const fieldName = `category-${section.name}`;
-  return fullName ? `${COMMENTS_KEY}.${fieldName}` : fieldName;
+  const fieldName = `section-${section.name}`;
+  const sanitizedFieldName = sanitizeKey(fieldName);
+  return fullName
+    ? `${COMMENTS_KEY}.${sanitizedFieldName}`
+    : sanitizedFieldName;
 };
+
 export const sanitizeKey = (text: string) => {
   return text.replace(/[^a-zA-Z0-9-_:.]/g, "_");
 };