Update parent form logic for form validation

Signed-off-by: Ian Bolton <ibolton@redhat.com>
konveyor · Mar 27, 2024 · 1047c7f · 1047c7f
1 parent 55ab7b1
commit 1047c7f
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 37 deletions.
diff --git a/...pages/assessment/components/assessment-stakeholders-form/assessment-stakeholders-form.tsx b/...pages/assessment/components/assessment-stakeholders-form/assessment-stakeholders-form.tsx
@@ -38,7 +38,7 @@ export const AssessmentStakeholdersForm: React.FC = () => {
   //   [stakeholderGroups]
   // );
   const stakeholdersAndGroupsItems = useMemo(
-    () => combineAndGroupRefs(stakeholders, stakeholderGroups),
+    () => combineAndGroupStakeholderRefs(stakeholders, stakeholderGroups),
     [stakeholders, stakeholderGroups]
   );
 
@@ -90,7 +90,7 @@ export const AssessmentStakeholdersForm: React.FC = () => {
   );
 };
 
-const combineAndGroupRefs = (
+export const combineAndGroupStakeholderRefs = (
   stakeholderRefs: Ref[],
   stakeholderGroupRefs: Ref[]
 ): GroupedRef[] => {
@@ -103,7 +103,7 @@ const combineAndGroupRefs = (
   return groupedRefs;
 };
 
-const createGroupedRef = (
+export const createGroupedRef = (
   ref: Ref,
   group: "stakeholder" | "stakeholderGroup"
 ): GroupedRef => ({

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
@@ -40,7 +40,10 @@ import { useQueryClient } from "@tanstack/react-query";
 import { formatPath, getAxiosErrorMessage } from "@app/utils/utils";
 import { Paths } from "@app/Paths";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { AssessmentStakeholdersForm } from "../assessment-stakeholders-form/assessment-stakeholders-form";
+import {
+  AssessmentStakeholdersForm,
+  combineAndGroupStakeholderRefs,
+} from "../assessment-stakeholders-form/assessment-stakeholders-form";
 import useIsArchetype from "@app/hooks/useIsArchetype";
 import { WizardStepNavDescription } from "../wizard-step-nav-description";
 import { AppPlaceholder } from "@app/components/AppPlaceholder";
@@ -133,21 +136,27 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
   }, [assessment]);
 
   const validationSchema = yup.object().shape({
-    stakeholders: yup
-      .array()
-      .of(yup.object({ id: yup.number(), name: yup.string() })), // Ref
-
-    stakeholderGroups: yup
-      .array()
-      .of(yup.object({ id: yup.number(), name: yup.string() })), // Ref
+    stakeholdersAndGroupsRefs: yup.array().of(
+      yup.object().shape({
+        id: yup.number().required(),
+        name: yup.string().required(),
+        group: yup
+          .string()
+          .oneOf(["stakeholder", "stakeholderGroup"])
+          .required(),
+      })
+    ),
   });
 
   const methods = useForm<AssessmentWizardValues>({
     resolver: yupResolver(validationSchema),
     mode: "all",
     defaultValues: {
-      stakeholders: assessment?.stakeholders ?? [],
-      stakeholderGroups: assessment?.stakeholderGroups ?? [],
+      // stakeholders: assessment?.stakeholders ?? [],
+      // stakeholderGroups: assessment?.stakeholderGroups ?? [],
+      stakeholdersAndGroupsRefs: assessment
+        ? combineStakeholdersAndGroups(assessment)
+        : [],
 
       [COMMENTS_KEY]: initialComments,
       [QUESTIONS_KEY]: initialQuestions,
@@ -165,9 +174,9 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
   const disableNavigation = !isValid || isSubmitting;
 
   const isFirstStepValid = () => {
-    const numberOfStakeholdlers = values?.stakeholders?.length || 0;
-    const numberOfGroups = values?.stakeholderGroups?.length || 0;
-    return numberOfStakeholdlers + numberOfGroups > 0;
+    const numberOfStakeholdlersAndGroups =
+      values?.stakeholdersAndGroupsRefs?.length || 0;
+    return numberOfStakeholdlersAndGroups > 0;
   };
 
   const isQuestionValid = (question: QuestionWithSectionOrder): boolean => {
@@ -251,20 +260,25 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
       }) || [];
     return sections;
   };
-
-  const stakeholdersToPayload = (
-    stakeholders?: AssessmentWizardValues["stakeholders"]
-  ): Ref[] | undefined =>
-    !stakeholders
-      ? undefined
-      : stakeholders.map(({ id, name }) => ({ id, name })).filter(Boolean);
-
-  const stakeholderGroupsToPayload = (
-    stakeholderGroups?: AssessmentWizardValues["stakeholderGroups"]
-  ): Ref[] | undefined =>
-    !stakeholderGroups
-      ? undefined
-      : stakeholderGroups.map(({ id, name }) => ({ id, name })).filter(Boolean);
+  //Fix
+  // const { stakeholders, stakeholderGroups } = separateStakeholdersAndGroups(
+  //   formValues.stakeholdersAndGroupsRefs
+  // );
+  const mapAndSeparateStakeholdersAndGroups = (
+    combinedRefs: GroupedRef[]
+  ): { stakeholdersPayload: Ref[]; stakeholderGroupsPayload: Ref[] } => {
+    // Filter and map stakeholders
+    const stakeholdersPayload = combinedRefs
+      .filter((ref) => ref.group === "stakeholder")
+      .map(({ id, name }) => ({ id, name }));
+
+    // Filter and map stakeholder groups
+    const stakeholderGroupsPayload = combinedRefs
+      .filter((ref) => ref.group === "stakeholderGroup")
+      .map(({ id, name }) => ({ id, name }));
+
+    return { stakeholdersPayload, stakeholderGroupsPayload };
+  };
 
   const handleSaveAsDraft = async (formValues: AssessmentWizardValues) => {
     try {
@@ -275,13 +289,17 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
       const sections = assessment
         ? buildSectionsFromFormValues(formValues)
         : [];
+      const { stakeholdersPayload, stakeholderGroupsPayload } =
+        mapAndSeparateStakeholdersAndGroups(
+          formValues.stakeholdersAndGroupsRefs
+        );
 
       const assessmentStatus: AssessmentStatus = "started";
       const payload: AssessmentWithSectionOrder = {
         ...assessment,
 
-        stakeholders: stakeholdersToPayload(values.stakeholders),
-        stakeholderGroups: stakeholderGroupsToPayload(values.stakeholderGroups),
+        stakeholders: stakeholdersPayload,
+        stakeholderGroups: stakeholderGroupsPayload,
 
         sections,
         status: assessmentStatus,
@@ -312,11 +330,15 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
         ? buildSectionsFromFormValues(formValues)
         : [];
 
+      const { stakeholdersPayload, stakeholderGroupsPayload } =
+        mapAndSeparateStakeholdersAndGroups(
+          formValues.stakeholdersAndGroupsRefs
+        );
       const payload: AssessmentWithSectionOrder = {
         ...assessment,
 
-        stakeholders: stakeholdersToPayload(values.stakeholders),
-        stakeholderGroups: stakeholderGroupsToPayload(values.stakeholderGroups),
+        stakeholders: stakeholdersPayload,
+        stakeholderGroups: stakeholderGroupsPayload,
 
         sections,
         status: assessmentStatus,
@@ -349,12 +371,16 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
         ? buildSectionsFromFormValues(formValues)
         : [];
 
+      const { stakeholdersPayload, stakeholderGroupsPayload } =
+        mapAndSeparateStakeholdersAndGroups(
+          formValues.stakeholdersAndGroupsRefs
+        );
+
       const payload: AssessmentWithSectionOrder = {
         ...assessment,
 
-        stakeholders: stakeholdersToPayload(values.stakeholders),
-        stakeholderGroups: stakeholderGroupsToPayload(values.stakeholderGroups),
-
+        stakeholders: stakeholdersPayload,
+        stakeholderGroups: stakeholderGroupsPayload,
         sections,
         status: assessmentStatus,
       };
@@ -585,3 +611,12 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
     </>
   );
 };
+
+const combineStakeholdersAndGroups = (
+  assessment: AssessmentWithSectionOrder
+): GroupedRef[] => {
+  const stakeholders = assessment.stakeholders ?? [];
+  const stakeholderGroups = assessment.stakeholderGroups ?? [];
+
+  return combineAndGroupStakeholderRefs(stakeholders, stakeholderGroups);
+};