[Design Review] Upload (#430)

closes #480 closes #473 closes #456 closes #467 closes #478 ## Note - `yarn install` to pull in the DSR changes to the pagination component - Screenshots show a checkmark instead of an exclamation mark during errors/warnings. This is changed ## Changes - enhancement(Upload): Updated content to match the excel and figma - feat(Upload): initial load (get submission latest) 4xx/5xx's redirect to the 500 page - style(Upload Alerts - Links): underlined - style(Upload): Updated based on #430 (comment) - ~~enhancement(download report): removed caching headers -- using `submissionId` so the browser caching is fine~~ ## Extra note - The two scenarios not added to this design review: - VALIDATION_EXPIRED (Needs a big file to test the two minute limit) - If initial GET LATEST SUBMISSION fails, redirect to 500 page - The button changes are not in yet ## Screenshots ### Introduction <img width="701" alt="Screenshot 2024-05-10 at 3 01 16 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/39025e25-2fb6-4aa5-aa16-0c3da7f646e1"> ### Never uploaded before <img width="633" alt="Screenshot 2024-05-10 at 1 17 22 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/52c71238-00e1-4a88-b854-15ed7ea28e53"> ### Pass [pass_123456789TESTBANK456_small.csv](https://github.com/cfpb/sbl-frontend/files/15223922/pass_123456789TESTBANK456_small.csv) <img width="626" alt="Screenshot 2024-05-10 at 2 32 07 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/373155fe-b8b1-4766-bc6f-ac3a1379fcdd"> ### Warnings [logic-warnings_small.csv](https://github.com/cfpb/sbl-frontend/files/15223933/logic-warnings_small.csv) <img width="630" alt="Screenshot 2024-05-10 at 2 32 53 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/3acbc079-50ab-4856-a73a-f40df4f1fa06"> ### Errors [logic-errors_small.csv](https://github.com/cfpb/sbl-frontend/files/15223957/logic-errors_small.csv) <img width="632" alt="Screenshot 2024-05-10 at 2 33 27 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/47c753b9-5dd2-4e43-a087-e9894531cb10"> ### SUBMISSION_ACCEPTED - no warnings [pass_123456789TESTBANK456_small.csv](https://github.com/cfpb/sbl-frontend/files/15223922/pass_123456789TESTBANK456_small.csv) <img width="707" alt="Screenshot 2024-05-10 at 2 58 09 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/546e84d2-d032-4d8e-9fa4-07cfd6d92ba7"> ### SUBMISSION_ACCEPTED - warnings [logic-warnings_small.csv](https://github.com/cfpb/sbl-frontend/files/15280368/logic-warnings_small.csv) <img width="709" alt="Screenshot 2024-05-10 at 2 59 00 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/0fda78b1-e369-4490-91ea-dc8918ed0ce6"> ### File size upload limit (Can use 2MB test limit -- normally 2GB) [logic-errors_medium.csv (2MB)](https://github.com/cfpb/sbl-frontend/files/15223975/logic-errors_medium.csv) <img width="591" alt="Screenshot 2024-05-10 at 2 53 15 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/3010abe5-d187-406b-95da-652b1b185db4"> ### Incorrect file type (renamed to `.csv) -- General Catch-All Validation Error [alf-picture copy.csv](https://github.com/cfpb/sbl-frontend/files/15224012/alf-picture.copy.csv) <img width="530" alt="Screenshot 2024-05-10 at 2 54 56 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/511a1259-66b1-422f-9135-8d7e09e4fa71"> ### Incorrect file type (example `.png`) [alf-picture](https://github.com/cfpb/sbl-frontend/assets/13324863/16440bf1-6358-49d4-8034-9e66cd53596a) <img width="706" alt="Screenshot 2024-05-10 at 2 59 40 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/13010ffb-f800-41d0-ab3f-52f45c4e0624"> ### Submission Malformed [format-error__missing-more-columns.csv](https://github.com/cfpb/sbl-frontend/files/15267001/format-error__missing-more-columns.csv) <img width="706" alt="Screenshot 2024-05-10 at 3 00 07 PM" src="https://github.com/cfpb/sbl-frontend/assets/13324863/d31dc7fc-578a-4cfd-b5b8-b78c59a31243"> --------- Co-authored-by: Meis <meissadia@gmail.com>
cfpb · May 15, 2024 · e723fc0 · e723fc0
1 parent f625f5b
commit e723fc0
Show file tree

Hide file tree

Showing 12 changed files with 257 additions and 130 deletions.
diff --git a/src/api/requests/fetchFilingSubmissionLatest.ts b/src/api/requests/fetchFilingSubmissionLatest.ts
@@ -70,24 +70,28 @@ async function retryRequestWithDelay(
   // eslint-disable-next-line no-param-reassign
   axiosInstance.defaults.retryCount += One;
 
-  // TODO: Remove console.logs once retry adjustments have been fully accepted
-  console.log(
-    'Validation STILL in-progress - Long Polling - RETRYING',
-    response,
-  );
+  if (import.meta.env.DEV) {
+    // eslint-disable-next-line no-console
+    console.log(
+      'Validation STILL in-progress - Long Polling - RETRYING',
+      response,
+    );
 
-  console.log(
-    'retry delay time:',
-    // getRetryDelay(axiosInstance.defaults.retryCount),
-  );
+    // eslint-disable-next-line no-console
+    console.log(
+      'retry delay time:',
+      getRetryDelay(axiosInstance.defaults.retryCount),
+    );
+  }
 
   return new Promise(resolve => {
-    setTimeout(
-      () => resolve(axiosInstance(response.config)),
-      // getRetryDelay(axiosInstance.defaults.retryCount),
-      // NOTE: Set to one second for AWS load testing
-      STANDARD_TIMEOUT,
-    );
+    // NOTE: Set to one second for AWS load testing, will revert before mvp
+    // https://github.com/cfpb/sbl-frontend/issues/497
+    // setTimeout(
+    //   () => resolve(axiosInstance(response.config)),
+    //   getRetryDelay(axiosInstance.defaults.retryCount),
+    // );
+    setTimeout(() => resolve(axiosInstance(response.config)), STANDARD_TIMEOUT);
   });
 }
 

diff --git a/src/components/AlertApiUnavailable.tsx b/src/components/AlertApiUnavailable.tsx
@@ -1,5 +1,6 @@
 import { Link } from 'components/Link';
-import { Alert } from 'design-system-react';
+import { Alert, Paragraph } from 'design-system-react';
+import type { ComponentProps } from 'react';
 import { sblHelpMail } from 'utils/common';
 
 interface AlertApiUnavailableProperties {
@@ -14,18 +15,20 @@ export function AlertApiUnavailable({
   message,
   href = sblHelpMail,
   ...others
-}: AlertApiUnavailableProperties & Partial<typeof Alert>): JSX.Element {
+}: AlertApiUnavailableProperties & ComponentProps<typeof Alert>): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
       message={message}
       status='error'
       {...others}
     >
-      There was a connection issue or our service may be temporarily
-      unavailable. Make sure your computer is connected to the internet, and try
-      again. If this issue persists,{' '}
-      <Link href={href}>contact our support staff</Link>.
+      <Paragraph>
+        There was a connection issue or our service may be temporarily
+        unavailable. Make sure your computer is connected to the internet, and
+        try again. If this issue persists,{' '}
+        <Link href={href}>contact our support staff</Link>.
+      </Paragraph>
     </Alert>
   );
 }

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -6,7 +6,7 @@ type ButtonProperties = ComponentProps<typeof ButtonDSR>;
 /* Handles new secondary styling */
 
 const newSecondaryStyle =
-  'cursor-pointer border-[1px] border-solid border-pacific bg-white text-pacific hover:border-[#0050B4] hover:bg-white hover:text-[#0050B4] focus:bg-transparent disabled:cursor-not-allowed disabled:border-none';
+  'cursor-pointer border-[1px] border-solid border-pacific bg-white text-pacific hover:border-[#0050B4] hover:bg-white hover:text-[#0050B4] focus:bg-white disabled:cursor-not-allowed disabled:border-none';
 
 export function Button({
   children,

diff --git a/src/pages/Filing/FilingApp/FileDetailsValidation.tsx b/src/pages/Filing/FilingApp/FileDetailsValidation.tsx
@@ -6,27 +6,32 @@ import { fileSubmissionValidationStatus } from './FileSubmission.data';
 interface FileDetailsProperties {
   dataGetSubmissionLatest: SubmissionResponse | undefined;
   errorGetSubmissionLatest: unknown;
+  hasWarnings: boolean;
 }
 
 function FileDetailsValidation({
   dataGetSubmissionLatest,
   errorGetSubmissionLatest,
+  hasWarnings,
 }: FileDetailsProperties): JSX.Element | null {
   // Should only show once an validation has completed
   if (
-    !dataGetSubmissionLatest?.filename &&
-    !dataGetSubmissionLatest?.submission_time
+    errorGetSubmissionLatest ||
+    (!dataGetSubmissionLatest?.filename &&
+      !dataGetSubmissionLatest?.submission_time)
   )
     return null;
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const validationStatusMessage: string = errorGetSubmissionLatest
-    ? fileSubmissionValidationStatus[FileSubmissionState.VALIDATION_ERROR]
-    : // @ts-expect-error key in
-      dataGetSubmissionLatest.state in fileSubmissionValidationStatus
-      ? // @ts-expect-error use key
-        fileSubmissionValidationStatus[dataGetSubmissionLatest.state]
-      : '';
+  const validationStatusMessage: string =
+    hasWarnings &&
+    dataGetSubmissionLatest.state === FileSubmissionState.SUBMISSION_ACCEPTED
+      ? 'Your file contains no errors and warnings have been verified'
+      : // @ts-expect-error key in
+        dataGetSubmissionLatest.state in fileSubmissionValidationStatus
+        ? // @ts-expect-error use key
+          fileSubmissionValidationStatus[dataGetSubmissionLatest.state]
+        : '';
 
   return (
     <div id='file-details-validation'>

diff --git a/src/pages/Filing/FilingApp/FileSubmission.data.tsx b/src/pages/Filing/FilingApp/FileSubmission.data.tsx
@@ -1,14 +1,18 @@
 import AlertApiUnavailable from 'components/AlertApiUnavailable';
 import { Link } from 'components/Link';
-import { Alert } from 'design-system-react';
+import { Alert, Paragraph } from 'design-system-react';
 import { FileSubmissionState } from 'types/filingTypes';
 import { fileFormatLink, sblHelpMail } from 'utils/common';
 
+const uploadErrorSubheading = 'There was a problem uploading your file';
+const validationErrorSubheading =
+  'There was a problem performing validation checks on your file';
+
 function SuccessAlert(): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-      message='File successfully uploaded and validation check completed'
+      message='Your file was successfully uploaded and validation checks were performed'
       status='success'
     />
   );
@@ -18,26 +22,49 @@ export function ValidationInitialFetchFailAlert(): JSX.Element {
   return <AlertApiUnavailable message='The filing service is unavailable' />;
 }
 
-function ValidationErrorGeneralAlert(): JSX.Element {
+export function UploadErrorGeneralAlert(): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-      message='There was a problem validating your file'
+      message={uploadErrorSubheading}
       status='error'
-    />
+    >
+      <Paragraph>
+        An unknown error occurred during file upload. If this issue persists,{' '}
+        <Link href={sblHelpMail}>email our support staff</Link>.
+      </Paragraph>
+    </Alert>
+  );
+}
+
+export function ValidationErrorGeneralAlert(): JSX.Element {
+  return (
+    <Alert
+      className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
+      message={validationErrorSubheading}
+      status='error'
+    >
+      <Paragraph>
+        An unknown error occurred while performing validation checks on your
+        file. If this issue persists,{' '}
+        <Link href={sblHelpMail}>email our support staff</Link>.
+      </Paragraph>
+    </Alert>
   );
 }
 
 function ValidationErrorTimeoutAlert(): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-      message='There was a problem validating your file'
+      message={validationErrorSubheading}
       status='error'
     >
-      Our system was not able to process your file within the allotted
-      timeframe. Try re-uploading the file. If this issue persists,{' '}
-      <Link href={sblHelpMail}>email our support staff</Link>.{' '}
+      <Paragraph>
+        Our system was not able to process your file within the allotted
+        timeframe. Try re-uploading the file. If this issue persists,{' '}
+        <Link href={sblHelpMail}>email our support staff</Link>.
+      </Paragraph>
     </Alert>
   );
 }
@@ -46,12 +73,14 @@ export function UploadMaxSizeAlert(): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-      message='There was a problem uploading your file'
+      message={uploadErrorSubheading}
       status='error'
     >
-      The file you tried to upload exceeds the file size requirement or contains
-      no data. Check your file and try again. If this issue persists,{' '}
-      <Link href={sblHelpMail}>email our support staff</Link>.
+      <Paragraph>
+        The file you tried to upload exceeds the file size requirement or
+        contains no data. Check your file and try again. If this issue persists,{' '}
+        <Link href={sblHelpMail}>email our support staff</Link>.
+      </Paragraph>
     </Alert>
   );
 }
@@ -60,12 +89,14 @@ export function IncorrectFileTypeAlert(): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-      message='There was a problem uploading your file'
+      message={uploadErrorSubheading}
       status='error'
     >
-      The file you uploaded is an unsupported media type. Check your file and
-      try again. If this issue persists,{' '}
-      <Link href={sblHelpMail}>email our support staff</Link>.
+      <Paragraph>
+        The file you uploaded is an unsupported media type. Check your file and
+        try again. If this issue persists,{' '}
+        <Link href={sblHelpMail}>email our support staff</Link>.
+      </Paragraph>
     </Alert>
   );
 }
@@ -80,23 +111,27 @@ export const fileSubmissionStateAlert: Record<
   JSX.Element
 > = {
   [FileSubmissionState.VALIDATION_SUCCESSFUL]: <SuccessAlert />,
+  [FileSubmissionState.SUBMISSION_ACCEPTED]: <SuccessAlert />,
   [FileSubmissionState.VALIDATION_WITH_WARNINGS]: <SuccessAlert />,
   [FileSubmissionState.VALIDATION_WITH_ERRORS]: <SuccessAlert />,
   [FileSubmissionState.UPLOAD_FAILED]: (
-    <AlertApiUnavailable message='There was a problem uploading your file' />
+    <AlertApiUnavailable message={uploadErrorSubheading} />
   ),
   [FileSubmissionState.VALIDATION_ERROR]: <ValidationErrorGeneralAlert />,
   [FileSubmissionState.VALIDATION_EXPIRED]: <ValidationErrorTimeoutAlert />,
   [FileSubmissionState.SUBMISSION_UPLOAD_MALFORMED]: (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-      message='There was a problem validating your file'
+      message={validationErrorSubheading}
       status='error'
     >
-      There may be an issue with the formatting of your file. Make sure your
-      file meets the <Link href={fileFormatLink}>requirements</Link> detailed in
-      section 2.2 of the Filing instructions guide and try again. If this issue
-      persists, <Link href={sblHelpMail}>email our support staff</Link>.
+      <Paragraph>
+        There may be an issue with the formatting of your file. Make sure your
+        file meets the requirements detailed in the filing instructions guide (
+        <Link href={fileFormatLink}>section 2.2, &quot;File format&quot;</Link>)
+        and try again. If this issue persists,{' '}
+        <Link href={sblHelpMail}>email our support staff</Link>.
+      </Paragraph>
     </Alert>
   ),
 };
@@ -105,22 +140,21 @@ export const fileSubmissionValidationStatus: Record<
   Exclude<
     FileSubmissionState,
     | FileSubmissionState.SUBMISSION_STARTED
+    | FileSubmissionState.SUBMISSION_UPLOAD_MALFORMED
     | FileSubmissionState.SUBMISSION_UPLOADED
     | FileSubmissionState.UPLOAD_FAILED
+    | FileSubmissionState.VALIDATION_ERROR
+    | FileSubmissionState.VALIDATION_EXPIRED
     | FileSubmissionState.VALIDATION_IN_PROGRESS
   >,
   string
 > = {
   [FileSubmissionState.VALIDATION_SUCCESSFUL]:
-    'No errors or warnings were found in your file',
+    'The validation checks returned no errors or warnings',
+  [FileSubmissionState.SUBMISSION_ACCEPTED]:
+    'The validation checks returned no errors or warnings',
   [FileSubmissionState.VALIDATION_WITH_WARNINGS]:
-    'Warnings were found in your file',
+    'The validation checks returned warnings',
   [FileSubmissionState.VALIDATION_WITH_ERRORS]:
-    'Errors were found in your file',
-  [FileSubmissionState.SUBMISSION_UPLOAD_MALFORMED]:
-    'There may be an issue with the formatting of your file',
-  [FileSubmissionState.VALIDATION_ERROR]:
-    'There may be an issue with the validation of your file',
-  [FileSubmissionState.VALIDATION_EXPIRED]:
-    'There may be an issue with the validation of your file',
+    'The validation checks returned errors',
 };