Design Review - Errors & Warnings - Part 2

src/components/FormButtonGroup.tsx

@@ -1,16 +1,20 @@
 import type { ReactNode } from 'react';
 
-interface Properties {
+interface FormButtonGroupProperties {
   children: ReactNode;
   isFilingStep?: boolean;
 }
 
-function FormButtonGroup({ isFilingStep, children }: Properties): JSX.Element {
+function FormButtonGroup({
+  className,
+  isFilingStep,
+  children,
+}: FormButtonGroupProperties & JSX.IntrinsicElements['div']): JSX.Element {
   return (
     <div
       className={`mt-[1.875rem] flex ${
         isFilingStep ? 'gap-[1.125rem]' : 'gap-[0.625rem]'
-      }`}
+      } ${className}`}
     >
       {children}
     </div>

src/pages/Filing/FilingApp/FieldEntry.tsx

@@ -26,9 +26,17 @@ const wordBreakTestRows = [
 
 interface FieldEntryProperties {
   fieldObject: Detail;
+  showTableBorders?: boolean;
 }
 
-function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
+function FieldEntry({
+  fieldObject,
+  showTableBorders,
+}: FieldEntryProperties): JSX.Element {
+  // TODO: selectively enable borders based on if the table is overflowing
+  // Issue: https://github.com/cfpb/sbl-frontend/issues/547
+  // const [multiTableReference, isMultiTableOverflowing] = useIsOverflowing();
+
   const validationId = fieldObject.validation.id;
   const validationLink = fieldObject.validation.fig_link;
   const validationName = fieldObject.validation.name;
@@ -59,7 +67,11 @@ function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
       ],
       [],
     );
-    return [object.record_no + One, object.uid, ...fieldValues];
+    return [
+      (object.record_no + One).toLocaleString(),
+      object.uid,
+      ...fieldValues,
+    ];
   });
 
   const totalItems = rows.length;
@@ -74,9 +86,7 @@ function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
   const itemsToShow = rows.slice(startIndex, endIndex);
   const previousItemsToShow = rows
     .slice(startIndex - ITEMS_PER_PAGE, startIndex - itemsToShow.length)
-    .map(array =>
-      array.map(charNumber => (typeof charNumber === 'number' ? 0 : '')),
-    );
+    .map(array => array.map((charNumber, index) => (index === 0 ? index : '')));
   const isHiddenTableAdded =
     showPagination && ITEMS_PER_PAGE > itemsToShow.length;
 
@@ -110,17 +120,20 @@ function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
       </div>
       <div className='mb-[0.9375rem]'>
         <Table
-          className='w-full max-w-full table-auto'
+          className={`w-full max-w-full table-auto ${
+            showTableBorders ? '' : '!border-0'
+          }`}
           columns={columns}
           // @ts-expect-error TypeScript error needs to be resolved within DSR
           // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
           rows={itemsToShow}
           isScrollableHorizontal
+          // ref={multiTableReference}
         />
         {/* NOTE: Table used to create space */}
         {isHiddenTableAdded ? (
           <Table
-            className='w-full max-w-full table-auto border-separate !border-t-0 outline-none [&>tbody>tr:not(:last-child)]:border-b-transparent [&_thead]:hidden [&_tr]:invisible'
+            className='w-full max-w-full table-auto !border-t-0 outline-none [&>tbody>tr:not(:last-child)]:border-b-transparent [&_thead]:hidden [&_tr]:invisible'
             aria-hidden='true'
             columns={columns}
             // @ts-expect-error TypeScript error needs to be resolved within DSR
@@ -142,4 +155,8 @@ function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
   );
 }
 
+FieldEntry.defaultProps = {
+  showTableBorders: false,
+};
+
 export default FieldEntry;

src/pages/Filing/FilingApp/FieldSummary.tsx

@@ -9,6 +9,7 @@ interface FieldProperties {
   bottomMargin?: boolean;
   children: ReactNode;
   id: string;
+  showTableBorders?: boolean;
 }
 
 function FieldSummary({
@@ -17,19 +18,31 @@ function FieldSummary({
   bottomMargin,
   children,
   id,
-}: FieldProperties): JSX.Element {
+  className = '',
+  showTableBorders,
+}: FieldProperties & JSX.IntrinsicElements['div']): JSX.Element {
   return (
-    <div id={id} className={bottomMargin ? 'mb-[3.75rem]' : ''}>
-      <SectionIntro heading={heading}>{children}</SectionIntro>
+    <div
+      id={id}
+      className={`${bottomMargin ? 'mb-[3.75rem]' : ''} ${className}`}
+    >
+      <SectionIntro className='mb-[2.8125rem]' heading={heading}>
+        {children}
+      </SectionIntro>
       {fieldArray.map(fieldObject => (
-        <FieldEntry key={fieldObject.validation.id} fieldObject={fieldObject} />
+        <FieldEntry
+          key={fieldObject.validation.id}
+          fieldObject={fieldObject}
+          showTableBorders={showTableBorders}
+        />
       ))}
     </div>
   );
 }
 
 FieldSummary.defaultProps = {
   bottomMargin: false,
+  showTableBorders: false,
 };
 
 export default FieldSummary;

src/pages/Filing/FilingApp/FileSubmission.tsx

@@ -230,7 +230,7 @@ export function FileSubmission(): JSX.Element {
   const onPreviousClick = (): void => navigate(`/filing`);
 
   return (
-    <div id='file-submission' className='min-h-[80vh]'>
+    <div id='file-submission'>
       <FilingSteps />
       <FormWrapper>
         <FormHeaderWrapper>
@@ -532,7 +532,7 @@ export function FileSubmission(): JSX.Element {
                 ) : null}
               </FieldGroup>
             </FormMain>
-            <FormButtonGroup>
+            <FormButtonGroup isFilingStep>
               <FilingNavButtons
                 classNameButtonContainer='u-mb0'
                 onNextClick={onNextClick}

src/pages/Filing/FilingApp/FilingErrors/FilingErrors.helpers.ts

@@ -82,3 +82,15 @@ export const getErrorsWarningsSummary = (
     logicWarningsMulti,
   };
 };
+
+export const getRecordsAffected = (
+  validationDetails: Detail[],
+): Set<number> => {
+  const setRecords = new Set<number>();
+  for (const detail of validationDetails) {
+    for (const record of detail.records) {
+      setRecords.add(record.record_no);
+    }
+  }
+  return setRecords;
+};

src/pages/Filing/FilingApp/FilingErrors/FilingErrorsAlerts.tsx

@@ -6,7 +6,7 @@ import { dataValidationLink } from 'utils/common';
 function SuccessAlert({ isStep2 }: { isStep2: boolean }): JSX.Element {
   return (
     <Alert
-      className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
+      className='mb-[1.875rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
       message={`Your register contains no ${
         isStep2 ? 'logic' : 'syntax'
       } errors`}
@@ -43,7 +43,7 @@ function LogicErrorsAlert(): JSX.Element {
       status='error'
     >
       <Paragraph>
-        There may be missing data, incorrect data, or conflicting information in
+        There is missing data, incorrect data, or conflicting information in
         your file. Make sure your register meets the requirements detailed in
         the filing instructions guide (
         <Link target='_blank' href={dataValidationLink}>

src/pages/Filing/FilingApp/FilingErrors/index.tsx

@@ -3,14 +3,12 @@ import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
 import { LoadingContent } from 'components/Loading';
-import {
-  Alert,
-  AlertFieldLevel,
-  Paragraph,
-  TextIntroduction,
-} from 'design-system-react';
+import { Paragraph, TextIntroduction } from 'design-system-react';
 import FieldSummary from 'pages/Filing/FilingApp/FieldSummary';
-import { getErrorsWarningsSummary } from 'pages/Filing/FilingApp/FilingErrors/FilingErrors.helpers';
+import {
+  getErrorsWarningsSummary,
+  getRecordsAffected,
+} from 'pages/Filing/FilingApp/FilingErrors/FilingErrors.helpers';
 import FilingErrorsAlerts from 'pages/Filing/FilingApp/FilingErrors/FilingErrorsAlerts';
 import { FilingSteps } from 'pages/Filing/FilingApp/FilingSteps';
 import InstitutionHeading from 'pages/Filing/FilingApp/InstitutionHeading';
@@ -19,7 +17,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import useGetSubmissionLatest from 'utils/useGetSubmissionLatest';
 import useInstitutionDetails from 'utils/useInstitutionDetails';
 import FilingFieldLinks from '../FilingFieldLinks';
-import FilingNavButtons from '../FilingNavButtons';
+import { FilingNavButtons } from '../FilingNavButtons';
 import { InstitutionFetchFailAlert } from '../FilingWarnings/FilingWarningsAlerts';
 
 function FilingErrors(): JSX.Element {
@@ -64,6 +62,13 @@ function FilingErrors(): JSX.Element {
     ? logicErrorsSingle
     : syntaxErrorsSingle;
 
+  // Count rows with errors per type (not total errors)
+  const singleFieldRowErrorsCount = getRecordsAffected(
+    singleFieldErrorsUsed,
+  ).size;
+  const multiFieldRowErrorsCount = getRecordsAffected(logicErrorsMulti).size;
+  const registerLevelRowErrorsCount = getRecordsAffected(registerErrors).size;
+
   if (isFetchingGetSubmissionLatest || isLoadingInstitution)
     return <LoadingContent />;
 
@@ -84,7 +89,7 @@ function FilingErrors(): JSX.Element {
   };
 
   return (
-    <div id='resolve-errors' className='min-h-[80vh]'>
+    <div id='resolve-errors'>
       <FilingSteps />
       <FormWrapper>
         <FormHeaderWrapper>
@@ -102,8 +107,8 @@ function FilingErrors(): JSX.Element {
               isStep2 ? (
                 <>
                   Your register successfully passed syntax checks. If
-                  applicable, review and correct errors related to inconsistent
-                  or inaccurate values in your register. Your register must pass
+                  applicable, review and correct errors in your register related
+                  to inconsistent or inaccurate values. Your register must pass
                   these logic checks to continue to the next step.
                 </>
               ) : (
@@ -161,9 +166,9 @@ function FilingErrors(): JSX.Element {
             {errorState ? (
               <FieldSummary
                 id='single-field-errors'
-                heading={`Single-field errors found: ${singleFieldErrorsUsed.length}`}
+                heading={`Single-field errors: ${singleFieldRowErrorsCount.toLocaleString()} found`}
                 fieldArray={singleFieldErrorsUsed}
-                bottomMargin={!!isStep2}
+                bottomMargin={Boolean(isStep2)}
               >
                 Each single-field validation pertains to only one specific field
                 in each record. These validations check that the data held in an
@@ -175,8 +180,9 @@ function FilingErrors(): JSX.Element {
                 {/* MULTI-FIELD ERRORS */}
                 <FieldSummary
                   id='multi-field-errors'
-                  heading={`Multi-field errors found: ${logicErrorsMulti.length}`}
+                  heading={`Multi-field errors: ${multiFieldRowErrorsCount.toLocaleString()} found`}
                   fieldArray={logicErrorsMulti}
+                  showTableBorders
                   bottomMargin
                 >
                   Multi-field validations check that the values of certain
@@ -186,7 +192,7 @@ function FilingErrors(): JSX.Element {
                 {/* REGISTER-LEVEL ERRORS */}
                 <FieldSummary
                   id='register-level-errors'
-                  heading={`Register-level errors found: ${registerErrors.length}`}
+                  heading={`Register-level errors: ${registerLevelRowErrorsCount.toLocaleString()} found`}
                   fieldArray={registerErrors}
                 >
                   This validation checks that the register does not contain
@@ -215,23 +221,6 @@ function FilingErrors(): JSX.Element {
             ) : null}
           </>
         )}
-        {errorState ? (
-          <>
-            <AlertFieldLevel
-              message={`You must resolve ${
-                isStep2 ? 'logic errors' : 'syntax errors'
-              } to continue with the filing process`}
-              status='error'
-            />
-            <Alert
-              className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-              message={`You must resolve ${
-                isStep2 ? 'logic errors' : 'syntax errors'
-              } to continue with the filing process`}
-              status='error'
-            />
-          </>
-        ) : null}
       </FormWrapper>
     </div>
   );

src/pages/Filing/FilingApp/FilingWarnings/FilingWarningsAlerts.tsx

@@ -4,7 +4,7 @@ import { Alert, Paragraph } from 'design-system-react';
 import { ValidationInitialFetchFailAlert } from 'pages/Filing/FilingApp/FileSubmission.data';
 import { dataValidationLink } from 'utils/common';
 
-function SuccessWarningsAlert(): JSX.Element {
+function SuccessVerifiedWarningsAlert(): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
@@ -14,6 +14,16 @@ function SuccessWarningsAlert(): JSX.Element {
   );
 }
 
+function SuccessWarningsAlert(): JSX.Element {
+  return (
+    <Alert
+      className='mb-[1.875rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
+      message='Your register contains no warnings'
+      status='success'
+    />
+  );
+}
+
 function WarningsAlert(): JSX.Element {
   return (
     <Alert
@@ -51,16 +61,22 @@ export function InstitutionFetchFailAlert({
 interface FilingWarningsAlertsProperties {
   hasWarnings: boolean;
   hasSubmissionError: unknown;
+  hasSubmissionAccepted: boolean;
 }
 
 function FilingWarningsAlerts({
   hasWarnings,
   hasSubmissionError,
+  hasSubmissionAccepted,
 }: FilingWarningsAlertsProperties): JSX.Element {
   return hasSubmissionError ? (
     <ValidationInitialFetchFailAlert />
   ) : hasWarnings ? (
-    <WarningsAlert />
+    hasSubmissionAccepted ? (
+      <SuccessVerifiedWarningsAlert />
+    ) : (
+      <WarningsAlert />
+    )
   ) : (
     <SuccessWarningsAlert />
   );