MCR-4590: cms and state sees approval banner (#2948)

* Add new banner component

* Order reviewStatusActions by latest first.

* Add approval test mock

* Show approval banner

* Tests for approval function, approval banner, and refactor iterable tests.

* Add another timeout for vitest to look for loading state

* Add optional note to approval banner.

services/app-api/src/postgres/contractAndRates/prismaSubmittedContractHelpers.ts

@@ -55,6 +55,9 @@ const includeContractWithoutDraftRates = {
         include: {
             updatedBy: true,
         },
+        orderBy: {
+            updatedAt: 'desc',
+        },
     },
 } satisfies Prisma.ContractTableInclude
 

services/app-web/src/components/Banner/SubmissionApprovedBanner/SubmissionApprovedBanner.tsx

@@ -0,0 +1,52 @@
+import { Alert } from '@trussworks/react-uswds'
+import React from 'react'
+import styles from '../Banner.module.scss'
+import { getUpdatedByDisplayName } from '../../../gqlHelpers'
+import { formatBannerDate } from '../../../common-code/dateHelpers'
+import { UpdatedBy } from '../../../gen/gqlClient'
+import { ExpandableText } from '../../ExpandableText'
+
+export type ApprovalProps = {
+    updatedBy: UpdatedBy
+    updatedAt: Date
+    note?: string
+}
+
+export const SubmissionApprovedBanner = ({
+    className,
+    updatedAt,
+    updatedBy,
+    note,
+}: ApprovalProps & React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <Alert
+            role="alert"
+            type="success"
+            heading="Status updated"
+            headingLevel="h4"
+            validation={true}
+            data-testid="submissionApprovedBanner"
+            className={className}
+        >
+            <div className={styles.bannerBodyText}>
+                <p className="usa-alert__text">
+                    <b>Status:&nbsp;</b> Approved
+                </p>
+                <p className="usa-alert__text">
+                    <b>Updated by:&nbsp;</b>
+                    {getUpdatedByDisplayName(updatedBy)}
+                </p>
+                <p className="usa-alert__text">
+                    <b>Updated on:&nbsp;</b>
+                    {formatBannerDate(updatedAt)}
+                </p>
+                {note && (
+                    <ExpandableText>
+                        <b>Optional note:&nbsp;</b>
+                        {note}
+                    </ExpandableText>
+                )}
+            </div>
+        </Alert>
+    )
+}

services/app-web/src/components/Banner/index.ts

@@ -6,3 +6,4 @@ export { QuestionResponseSubmitBanner } from './QuestionResponseSubmitBanner'
 export { UserAccountWarningBanner } from './UserAccountWarningBanner/UserAccountWarningBanner'
 export { DocumentWarningBanner } from './DocumentWarningBanner/DocumentWarningBanner'
 export { RateWithdrawnBanner } from './RateWithdrawnBanner/RateWithdrawnBanner'
+export { SubmissionApprovedBanner } from './SubmissionApprovedBanner/SubmissionApprovedBanner'

services/app-web/src/components/FileUpload/FileUpload.test.tsx

@@ -31,10 +31,14 @@ describe('FileUpload component', () => {
                 50
             ), // timeout to give vitest time to look for loading text
         scanFile: async (_key: string) => {
-            await fakeRequest<S3FileData>(true, {
-                key: 'testtest',
-                s3URL: 's3://bucketname/key/fakeS3url',
-            })
+            await fakeRequest<S3FileData>(
+                true,
+                {
+                    key: 'testtest',
+                    s3URL: 's3://bucketname/key/fakeS3url',
+                },
+                50
+            ) // timeout to give vitest time to look for loading state
             return
         },
         onFileItemsUpdate: () => {