[Design Review] [Resolve Errors] [Review Warnings] (#477)

closes #485 
closes #488 
closes #481 
closes #482 

## Note
- `yarn install` to get the DSR updates

## Changes
- chore(filingTypes): added `total_count` to a filing type
- fix(record_no): In the Error/Warnings tables, incremented the row
number by one
- style(pagination/tables): extra unused rows are now white
- style(Resolve Errors/Warnings): underlined error links
- content(Resolve Errors): Content updated to match the figma
- content(Review Warnings): Content updated to match the figma
- deps(DSR): Updated DSR's pagination component - button content should
be centered

## Todo
- tables - `word break` and handling large character sets
- filing nav buttons - refactor @meissadia 
- `react-hook-form` error handling the verify warnings section
@meissadia

src/index.css

@@ -51,4 +51,13 @@ td:last-child{
 
 /* td {
   word-break: break-all;
-} */
+} */
+
+/* Gets rids of the every other Table Row being a different color */
+
+/* TODO: Put this fix in the DSR */
+
+/* https://github.com/cfpb/design-system-react/issues/345 */
+td {
+  background-color: white !important;
+}

src/pages/Filing/FilingApp/FieldEntry.tsx

@@ -55,7 +55,7 @@ function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
       ],
       [],
     );
-    return [object.record_no, object.uid, ...fieldValues];
+    return [object.record_no + One, object.uid, ...fieldValues];
   });
 
   const totalItems = rows.length;
@@ -94,7 +94,12 @@ function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
     <div className='mb-[2.8125rem]'>
       <div className='validation-info-section mb-[1.875rem] max-w-[41.875rem]'>
         <Link target='_blank' href={validationLink}>
-          <Heading type='3'>{validationId}</Heading>
+          <Heading
+            className='inline-block border-x-0 border-b-[1px] border-t-0 border-dotted hover:border-solid focus:border-solid focus:outline-dotted focus:outline-1'
+            type='3'
+          >
+            {validationId}
+          </Heading>
         </Link>
         <Heading type='4'>{validationName}</Heading>
         <Markdown>{validationDescription}</Markdown>
@@ -111,13 +116,9 @@ function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
         {/* NOTE: Table used to create space */}
         {isHiddenTableAdded ? (
           <Table
-            className='invisible w-full max-w-full table-auto [&_thead]:hidden'
+            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'
             aria-hidden='true'
-            columns={[
-              'Row',
-              'Unique identifier (uid)',
-              ...additionalColumnHeaders,
-            ]}
+            columns={columns}
             // @ts-expect-error TypeScript error needs to be resolved within DSR
             rows={previousItemsToShow}
             isScrollableHorizontal

src/pages/Filing/FilingApp/FileSubmission.tsx

@@ -11,7 +11,7 @@ import InlineStatus from 'components/InlineStatus';
 import Input from 'components/Input';
 import { Link } from 'components/Link';
 import SectionIntro from 'components/SectionIntro';
-import { Heading, TextIntroduction } from 'design-system-react';
+import { Heading, Paragraph, TextIntroduction } from 'design-system-react';
 import type { ChangeEvent } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
@@ -192,15 +192,15 @@ export function FileSubmission(): JSX.Element {
             heading='Upload file'
             subheading={`Our system performs error and warning validation checks on your data to ensure that data entries are correct and ready to submit. Each record must pass all error validations to continue with the filing process. Warning validations must be verified for accuracy. `}
             description={
-              <>
+              <Paragraph>
                 Your file must be submitted in a comma-separated values (CSV)
                 file format and must not exceed 2GB in size. For detailed filing
                 specifications reference the{' '}
                 <Link href={filingInstructionsPage}>
                   Filing instructions guide for small business lending data
                 </Link>
                 .
-              </>
+              </Paragraph>
             }
           />
         </FormHeaderWrapper>

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

@@ -1,7 +1,7 @@
 import { Link } from 'components/Link';
-import { Alert } from 'design-system-react';
+import { Alert, Paragraph } from 'design-system-react';
 import { ValidationInitialFetchFailAlert } from 'pages/Filing/FilingApp/FileSubmission.data';
-import { dataValidationLink, sblHelpMail } from 'utils/common';
+import { dataValidationLink } from 'utils/common';
 
 function SuccessAlert({ isStep2 }: { isStep2: boolean }): JSX.Element {
   return (
@@ -15,24 +15,42 @@ function SuccessAlert({ isStep2 }: { isStep2: boolean }): JSX.Element {
   );
 }
 
-function ErrorsAlert(): JSX.Element {
+function SyntaxErrorsAlert(): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-      message='Errors were found in your register'
+      message='Your register contains syntax errors'
       status='error'
     >
-      There may be an issue with the data type or format of one or more values
-      in your file. Make sure your register meets the requirements detailed in
-      the filing instructions guide (
-      <Link target='_blank' href={dataValidationLink}>
-        section 4, &quot;Data validation&quot;
-      </Link>
-      ) and try again. If this issue persists,{' '}
-      <Link target='_blank' href={sblHelpMail}>
-        email our support staff
-      </Link>
-      .
+      <Paragraph>
+        There may be an issue with the data type or format of one or more values
+        in your file. Make sure your register meets the requirements detailed in
+        the filing instructions guide (
+        <Link target='_blank' href={dataValidationLink}>
+          section 4, &quot;Data validation&quot;
+        </Link>
+        ), make the corrections, and upload a new file.
+      </Paragraph>
+    </Alert>
+  );
+}
+
+function LogicErrorsAlert(): JSX.Element {
+  return (
+    <Alert
+      className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
+      message='Your register contains logic errors'
+      status='error'
+    >
+      <Paragraph>
+        There may be 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}>
+          section 4, &quot;Data validation&quot;
+        </Link>
+        ), make the corrections, and upload a new file.
+      </Paragraph>
     </Alert>
   );
 }
@@ -50,8 +68,10 @@ function FilingErrorsAlerts({
 }: FilingErrorsAlertsProperties): JSX.Element {
   return errorGetSubmissionLatest ? (
     <ValidationInitialFetchFailAlert />
-  ) : errorState ? (
-    <ErrorsAlert />
+  ) : errorState && isStep2 ? (
+    <LogicErrorsAlert />
+  ) : errorState && !isStep2 ? (
+    <SyntaxErrorsAlert />
   ) : (
     <SuccessAlert isStep2={isStep2} />
   );

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

@@ -3,7 +3,12 @@ import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
 import { LoadingContent } from 'components/Loading';
-import { TextIntroduction } from 'design-system-react';
+import {
+  Alert,
+  AlertFieldLevel,
+  Paragraph,
+  TextIntroduction,
+} from 'design-system-react';
 import FieldSummary from 'pages/Filing/FilingApp/FieldSummary';
 import { getErrorsWarningsSummary } from 'pages/Filing/FilingApp/FilingErrors/FilingErrors.helpers';
 import FilingErrorsAlerts from 'pages/Filing/FilingApp/FilingErrors/FilingErrorsAlerts';
@@ -106,29 +111,41 @@ function FilingErrors(): JSX.Element {
             subheading={
               isStep2 ? (
                 <>
-                  Next, our system checks your register to confirm that there
-                  are no inconsistencies or mistakes in how the information is
-                  organized or represented. Your register must pass these logic
-                  checks to continue to the next step.
+                  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
+                  these logic checks to continue to the next step.
                 </>
               ) : (
                 <>
-                  First, our system checks that each value in your register
-                  meets data type and format requirements. We are unable to
-                  accurately detect consequent errors or warnings until each
-                  record in your register passes these syntax checks.
+                  Your register was successfully uploaded and validation checks
+                  were performed. If applicable, review and correct errors
+                  related to data type and format. We are unable to detect
+                  errors or warnings related to logic until your register passes
+                  these syntax checks.
                 </>
               )
             }
             description={
               <>
-                If applicable, review the tables below or download the
-                validation report to identify the specific issues that caused
-                the validation to fail. Once you’ve identified the underlying
-                problems, make the corrections to your register, and upload a
-                new file.
-                {!errorGetSubmissionLatest &&
-                actualDataGetSubmissionLatest?.id ? (
+                {isStep2 ? (
+                  <Paragraph>
+                    If logic errors were found, review the tables below or
+                    download the validation report to identify the specific
+                    issues that caused the validations to fail. Once you’ve
+                    identified the underlying problems, make the corrections to
+                    your register, and upload a new file.
+                  </Paragraph>
+                ) : (
+                  <Paragraph>
+                    If syntax errors were found, review the tables below or
+                    download the validation report to identify the specific
+                    issues that caused the validations to fail. Once you’ve
+                    identified the underlying problems, make the corrections to
+                    your register, and upload a new file.
+                  </Paragraph>
+                )}
+                {errorState && actualDataGetSubmissionLatest?.id ? (
                   <FilingFieldLinks
                     id='resolve-errors-listlinks'
                     lei={lei}
@@ -158,9 +175,9 @@ function FilingErrors(): JSX.Element {
                 fieldArray={singleFieldErrorsUsed}
                 bottomMargin={!!isStep2}
               >
-                Each single-field error pertains to only one specific field in
-                each record. These error validations check that the data held in
-                an individual field match the values that are expected.
+                Each single-field validation pertains to only one specific field
+                in each record. These validations check that the data held in an
+                individual field match the values that are expected.
               </FieldSummary>
             ) : null}
             {isStep2 && errorState ? (
@@ -172,7 +189,7 @@ function FilingErrors(): JSX.Element {
                   fieldArray={logicErrorsMulti}
                   bottomMargin
                 >
-                  Multi-field error validations check that the values of certain
+                  Multi-field validations check that the values of certain
                   fields make sense in combination with other values in the same
                   record.
                 </FieldSummary>
@@ -223,6 +240,23 @@ 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/FilingFieldLinks.tsx

@@ -26,11 +26,9 @@ function FilingFieldLinks({
   };
   return (
     <div id={id} className={`mt-[1.875rem] ${className}`} {...others}>
-      <List isLinks>
+      <List className='flex items-center gap-[0.9375rem]' isLinks>
         <Button
-          asLink
-          className='m-list_link mb-2'
-          label='Download validation report'
+          label='Download report'
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClick={onHandleDownloadClick}
         />

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

@@ -1,6 +1,6 @@
 import AlertApiUnavailable from 'components/AlertApiUnavailable';
 import { Link } from 'components/Link';
-import { Alert } from 'design-system-react';
+import { Alert, Paragraph } from 'design-system-react';
 import { ValidationInitialFetchFailAlert } from 'pages/Filing/FilingApp/FileSubmission.data';
 import { dataValidationLink } from 'utils/common';
 
@@ -21,13 +21,15 @@ function WarningsAlert(): JSX.Element {
       message='Warnings were found in your register'
       status='warning'
     >
-      There were unexpected values in your file that may require action. Review
-      these warnings and make sure your register meets the requirements detailed
-      in the filing instructions guide (
-      <Link target='_blank' href={dataValidationLink}>
-        section 4, &quot;Data validation&quot;
-      </Link>
-      ). If necessary, make the corrections and re-upload your file.
+      <Paragraph>
+        Unexpected values were found in your register that may require action.
+        Make sure your register meets the requirements detailed in the filing
+        instructions guide (
+        <Link target='_blank' href={dataValidationLink}>
+          section 4, &quot;Data validation&quot;
+        </Link>
+        ). If necessary, make the corrections, and upload a new file.
+      </Paragraph>
     </Alert>
   );
 }