TECH-1028: Fix compliance form 3rd step fulfillemnt error

frontend/components/form/IRSForm.tsx

@@ -1,6 +1,9 @@
 import { RefObject, useEffect, useState } from 'react';
 import classNames from 'classnames';
-import { ComplianceRequirementsType } from '../../service/types';
+import {
+  ComplianceRequirementsType,
+  RequirementsType,
+} from '../../service/types';
 import useTranslations from '../../hooks/useTranslation';
 import { IRSCFormRef } from '../shared/combined/SelectBBs';
 import InterfaceCompliance from './InterfaceCompliance';
@@ -33,9 +36,12 @@ const IRSForm = ({
   >();
 
   const { format } = useTranslations();
-
   useEffect(() => {
-    if (!allData?.length && updatedInterfaceData && updatedInterfaceData.length > 0) {
+    if (
+      !allData?.length &&
+      updatedInterfaceData &&
+      updatedInterfaceData.length > 0
+    ) {
       const updatedData = updatedInterfaceData.map((data) => {
         return {
           ...data,
@@ -47,7 +53,11 @@ const IRSForm = ({
       return;
     }
 
-    if (!allData?.length && updatedRequirementSpecData && updatedRequirementSpecData.length > 0) {
+    if (
+      !allData?.length &&
+      updatedRequirementSpecData &&
+      updatedRequirementSpecData.length > 0
+    ) {
       setAllData(updatedRequirementSpecData);
 
       return;
@@ -116,58 +126,53 @@ const IRSForm = ({
   }, [allData]);
 
   const isValidArray = (data: ComplianceRequirementsType[]): boolean => {
-    return data.every((item) => {
-      if (item.requirements) {
-        // Check crossCutting and functional arrays
-        const isCrossCuttingValid = item?.requirements.crossCutting.every(
-          (crossCuttingItem) => {
-            if (crossCuttingItem.status === 0) {
-              return crossCuttingItem.fulfillment !== -1;
+    const validateResultArray = data.map((item) => {
+      let isCrossCuttingValid;
+      let isFunctionalValid;
+      let isInterfaceValid;
+
+      const validateData = (data: RequirementsType[]): boolean => {
+        if (data) {
+          return data.every((item) => {
+            if (item.status === 0) {
+              return item.fulfillment !== -1 && item.fulfillment !== null;
             } else {
               return true;
             }
-          }
-        );
+          });
+        } else {
+          return true;
+        }
+      };
 
-        const isFunctionalValid = item?.requirements.functional.every(
-          (functionalItem) => {
-            if (functionalItem.status === 0) {
-              return functionalItem.fulfillment !== -1;
-            } else {
-              return true;
-            }
-          }
-        );
+      if (
+        item.requirements &&
+        item.requirements.crossCutting &&
+        item.interfaceCompliance
+      ) {
+        isCrossCuttingValid = validateData(item.requirements.crossCutting);
+        isFunctionalValid = validateData(item.requirements.functional);
 
-        // Check interfaceCompliance.requirements array
-        let isInterfaceValid;
-        if (item.interfaceCompliance && item.interfaceCompliance.requirements) {
+        if (
+          item.interfaceCompliance.requirements &&
+          item.interfaceCompliance.requirements.length
+        ) {
           isInterfaceValid =
-            item.interfaceCompliance.requirements.length === 0 ||
-            item.interfaceCompliance.requirements.every((interfaceItem) => {
-              if (interfaceItem.status === 0) {
-                return (
-                  interfaceItem.fulfillment !== -1 &&
-                  item.interfaceCompliance.testHarnessResult !== undefined &&
-                  item.interfaceCompliance.testHarnessResult !== ''
-                );
-              } else {
-                return true;
-              }
-            });
+            validateData(item.interfaceCompliance.requirements) &&
+            item.interfaceCompliance.testHarnessResult !== undefined &&
+            item.interfaceCompliance.testHarnessResult !== '';
         } else {
-          return true;
+          isInterfaceValid = true;
         }
-
-        return isCrossCuttingValid && isFunctionalValid && isInterfaceValid;
-      } else {
-        return true;
       }
+
+      return isCrossCuttingValid && isFunctionalValid && isInterfaceValid;
     });
+
+    return validateResultArray.every((item) => item);
   };
 
   useEffect(() => {
-    console.log('allData', allData);
     if (allData) {
       onEdited(!isValidArray(allData));
     }

frontend/components/shared/combined/SelectBBs.tsx

@@ -41,14 +41,9 @@ const SelectBBs = ({
   const [isTableValid, setIsTableValid] = useState(true);
   const [isTestHarnessInputValid, setIsTestHarnessInputValid] =
     useState<boolean>(true);
-  const [savedInLocalStorage, setSavedInLocalStorage] = useState<
-    ComplianceRequirementsType[] | null
-  >(
-    JSON.parse(
-      localStorage.getItem(INTERFACE_COMPLIANCE_STORAGE_NAME as string) ||
-        'null'
-    )
-  );
+  const [updatedAllItems, setUpdatedAllItems] =
+    useState<ComplianceRequirementsType[]>();
+
   const router = useRouter();
   const { format } = useTranslations();
 
@@ -59,7 +54,7 @@ const SelectBBs = ({
 
   useEffect(() => {
     handleAlreadySavedData();
-  }, [draftData, savedInLocalStorage, interfaceRequirementsData, readOnlyData]);
+  }, [draftData, interfaceRequirementsData, readOnlyData]);
 
   useEffect(() => {
     handleSetOptions();
@@ -78,6 +73,7 @@ const SelectBBs = ({
         );
       }
 
+      setUpdatedAllItems(updatedSelectedItemsData);
       setUpdatedBBs(updatedSelectedItemsData);
     }
   }, [updatedData, readOnlyView, selectedItems]);
@@ -89,6 +85,10 @@ const SelectBBs = ({
   }, [options]);
 
   const handleAlreadySavedData = () => {
+    const savedInLocalStorage: ComplianceRequirementsType[] | null = JSON.parse(
+      localStorage.getItem(INTERFACE_COMPLIANCE_STORAGE_NAME as string) ||
+        'null'
+    );
     if (savedInLocalStorage?.length && !readOnlyView) {
       const BBWithAddedInterface = savedInLocalStorage.map((itemBB) => {
         if (itemBB.requirements.interface.length) {
@@ -307,13 +307,15 @@ const SelectBBs = ({
 
   const isFulfillmentValid = (data: ComplianceRequirementsType[]) => {
     const isTableValid = data.every((dataItem) =>
-      dataItem.requirements.interface.every(
-        (item) =>
-          item.fulfillment !== undefined ||
-          item.fulfillment !== null ||
-          item.fulfillment !== -1
-      )
+      dataItem.requirements.interface.every((item) => {
+        if (item.status === 0) {
+          return item.fulfillment !== null && item.fulfillment !== -1;
+        }
+
+        return true;
+      })
     );
+
     const isTestHarnessInputValid = data.every(
       (dataItem) =>
         dataItem.interfaceCompliance &&
@@ -333,13 +335,15 @@ const SelectBBs = ({
     IRSCFormRef,
     () => ({
       validate: () => {
-        const isValid = isFulfillmentValid(selectedItems);
+        const isValid = isFulfillmentValid(
+          updatedAllItems as ComplianceRequirementsType[]
+        );
         setIsTableValid(isValid);
 
         return isValid;
       },
     }),
-    [selectedItems]
+    [updatedAllItems]
   );
 
   const displayPills = selectedItems.map((item) => {

frontend/components/table/IRSC/IRSCCrossCuttingTable.tsx

@@ -219,36 +219,93 @@ const IRSCCrossCuttingTableType = ({
           })}
         </thead>
         <tbody {...getTableBodyProps()}>
-          <tr>
-            <td className="irsc-table-header-required" colSpan={3}>
-              {format('form.required_label')}
-            </td>
-          </tr>
+          {rows.some((item) => item.original.status === 0) && (
+            <tr>
+              <td className="irsc-table-header-required" colSpan={3}>
+                {format('form.required_label')}
+              </td>
+            </tr>
+          )}
           {rows.map((row: any, indexKey: number) => {
             prepareRow(row);
-
-            return (
-              <tr
-                {...row.getRowProps()}
-                key={`row-${indexKey}`}
-                className={`irsc-table-rows ${
-                  !isTableValid &&
-                  (row.values.fulfillment === undefined ||
-                    row.values.fulfillment === null ||
-                    row.values.fulfillment === -1)
-                    ? 'irsc-invalid-row'
-                    : ''
-                }`}
-              >
-                {row.cells.map((cell: any, indexKey: number) => {
-                  return (
-                    <td {...cell.getCellProps()} key={`cell-td-${indexKey}`}>
-                      {cell.render('Cell')}
-                    </td>
-                  );
-                })}
-              </tr>
-            );
+            if (row.original.status === 0) {
+              return (
+                <tr
+                  {...row.getRowProps()}
+                  key={`row-${indexKey}`}
+                  className={`irsc-table-rows ${
+                    !isTableValid &&
+                    (row.values.fulfillment === undefined ||
+                      row.values.fulfillment === null ||
+                      row.values.fulfillment === -1)
+                      ? 'irsc-invalid-row'
+                      : ''
+                  }`}
+                >
+                  {row.cells.map((cell: any, indexKey: number) => {
+                    return (
+                      <td {...cell.getCellProps()} key={`cell-td-${indexKey}`}>
+                        {cell.render('Cell')}
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            }
+          })}
+          {rows.some((item) => item.original.status === 1) && (
+            <tr>
+              <td className="irsc-table-header-required" colSpan={3}>
+                {format('table.recommended_not_required.label')}
+              </td>
+            </tr>
+          )}
+          {rows.map((row: any, indexKey: number) => {
+            prepareRow(row);
+            if (row.original.status === 1) {
+              return (
+                <tr
+                  {...row.getRowProps()}
+                  key={`row-${indexKey}`}
+                  className="irsc-table-rows"
+                >
+                  {row.cells.map((cell: any, indexKey: number) => {
+                    return (
+                      <td {...cell.getCellProps()} key={`cell-td-${indexKey}`}>
+                        {cell.render('Cell')}
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            }
+          })}
+          {rows.some((item) => item.original.status === 2) && (
+            <tr>
+              <td className="irsc-table-header-required" colSpan={3}>
+                {format('table.optional_not_required.label')}
+              </td>
+            </tr>
+          )}
+          {rows.map((row: any, indexKey: number) => {
+            prepareRow(row);
+            if (row.original.status === 2) {
+              return (
+                <tr
+                  {...row.getRowProps()}
+                  key={`row-${indexKey}`}
+                  className="irsc-table-rows"
+                >
+                  {row.cells.map((cell: any, indexKey: number) => {
+                    return (
+                      <td {...cell.getCellProps()} key={`cell-td-${indexKey}`}>
+                        {cell.render('Cell')}
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            }
           })}
         </tbody>
       </table>

frontend/components/table/IRSC/IRSCFunctionalTable.tsx

@@ -280,7 +280,6 @@ const IRSCFunctionalTable = ({
               );
             }
           })}
-          {}
           {rows.some((item) => item.original.status === 2) && (
             <tr>
               <td className="irsc-table-header-required" colSpan={3}>