8821: refactor file selection components

[paulo-filho-ctr]

Summary

• FileInput.tsx - Decoupled file input component that accepts onFileChange and onError callbacks
• ScanBatchFileInput.tsx - Cerebral wrapper for scan batch previewer upload mode
• Extracted components from ScanBatchPreviewer: ScanPreviewSection, ScanModeRadios, ScanPdfPreview, ScanBatchesTable, ScanDocumentTabs, ScannerAreaHeader, ScanUploadMode
• StateDrivenFileInput.tsx - Now uses FileInput internally, acts as Cerebral wrapper
• ScanBatchPreviewer.tsx - Extracted render functions into separate components, added scanOnly prop and petition-specific PDF removal logic

[Copilot]

Pull request overview

Refactors the scan/upload file selection flow by extracting ScanBatchPreviewer UI sections into dedicated components, introducing a reusable FileInput, and adding new validation plumbing and end-to-end coverage around scanning/uploading behavior (including Petition QC).

Changes:

• Extracts ScanBatchPreviewer UI into smaller components (header, mode radios, PDF preview, scan preview, batches table, document tabs, upload mode wrapper).
• Introduces a decoupled FileInput component and updates StateDrivenFileInput (and scan-batch upload) to use it.
• Adds a validateFileSequence/actions + unit tests, plus new Cypress coverage for file upload and scan batch previewer flows.

Reviewed changes

Copilot reviewed 34 out of 34 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
web-client/src/views/StartCaseInternal/StartCaseInternal.tsx	Removes noValidate from a non-form container.
web-client/src/views/ScanBatchPreviewer/ScannerAreaHeader.tsx	New extracted header component for scanner area.
web-client/src/views/ScanBatchPreviewer/ScanUploadMode.tsx	New extracted upload-mode radio (with scanOnly gating).
web-client/src/views/ScanBatchPreviewer/ScanPreviewSection.tsx	New extracted scan image preview + paging + “Create PDF” control.
web-client/src/views/ScanBatchPreviewer/ScanPdfPreview.tsx	New extracted PDF preview + remove/replace modal wiring.
web-client/src/views/ScanBatchPreviewer/ScanModeRadios.tsx	New extracted scan/upload mode selector + “Start Scan” button.
web-client/src/views/ScanBatchPreviewer/ScanDocumentTabs.tsx	New extracted tabs component for selecting document context.
web-client/src/views/ScanBatchPreviewer/ScanBatchesTable.tsx	New extracted scanned-batches table component.
web-client/src/views/ScanBatchPreviewer/ScanBatchModals.tsx	Refactors rescan/delete modals to derive batch index from state + null-guards.
web-client/src/views/ScanBatchPreviewer/ScanBatchFileInput.tsx	New Cerebral wrapper around FileInput for scan-batch upload mode.
web-client/src/views/ScanBatchPreviewer.tsx	Refactors ScanBatchPreviewer to use extracted components and simplifies render logic.
web-client/src/views/PreviewControls.tsx	Exports PreviewControlsProps and refactors connect deps typing.
web-client/src/views/PetitionQcScanBatchPreviewer.tsx	Updates petition QC previewer to reuse extracted scan/upload components and new gating logic.
web-client/src/views/PetitionQc/PetitionQcDocumentPreview.tsx	Adds guard for missing selected document and passes scanOnly prop.
web-client/src/views/PetitionQc/PetitionQc.tsx	Adds data-testid to Petition QC page heading.
web-client/src/views/FileDocument/StateDrivenFileInput.tsx	Converts to use new FileInput internally and makes validation sequence optional.
web-client/src/views/FileDocument/FileInput.tsx	Adds new reusable FileInput with internal validation + optional external-validation mode.
web-client/src/views/ConfirmReplacePetitionModal.tsx	Refactors to typed deps using cerebralProps and exports connected component.
web-client/src/views/ConfirmDeletePdfModal.tsx	Adds configurable cancelLabel with a default.
web-client/src/ustc-ui/Tabs/Tabs.tsx	Extends Tab to accept data-testid and forwards it to the rendered <button>.
web-client/src/presenter/sequences/validateFileSequence.ts	New sequence to validate a file and open error modal on invalid.
web-client/src/presenter/sequences/validateFileSequence.test.ts	Unit tests for new validate-file sequence behavior.
web-client/src/presenter/presenter.ts	Registers validateFileSequence in presenter sequences.
web-client/src/presenter/computeds/scanBatchPreviewerHelper.ts	Adds pdfPreviewUrl to helper output.
web-client/src/presenter/computeds/petitionQcHelper.ts	Adds selectedTabHasAttachment (and related mapping logic).
web-client/src/presenter/computeds/petitionQcHelper.test.ts	Adds extensive tests for selectedTabHasAttachment.
web-client/src/presenter/actions/validateFileAction.ts	New action that wraps validateFile and routes valid/invalid paths.
web-client/src/presenter/actions/validateFileAction.test.ts	Unit tests for validateFileAction.
web-client/src/presenter/actions/getDocumentSelectedForPreviewAction.ts	Adds lookup by docketEntryId for documentSelectedForPreview.
web-client/src/presenter/actions/fileUploadErrorAction.ts	New action to prepare file-upload error modal props (incl. troubleshooting link).
cypress/local-only/tests/integration/scanBatchPreviewer/scan-batch-previewer.cy.ts	Adds scan-batch previewer Cypress coverage for mode toggling + upload + error modal.
cypress/local-only/tests/integration/petitionQc/petition-qc-scan-batch-previewer.cy.ts	Adds Petition QC scan-batch previewer Cypress coverage.
cypress/local-only/tests/integration/fileUpload/state-driven-file-input.cy.ts	Adds Cypress coverage ensuring StateDrivenFileInput flows through new FileInput.
cypress/local-only/tests/integration/fileUpload/file-input.cy.ts	Adds Cypress coverage for FileInput validation scenarios and change behavior.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[jdr81394]

New elements should be using tailwind

[paulo-filho-ctr]

Agree, using tailwind now.

[jdr81394]

I see here that you've created new components and opted to use the .scss files. I see why because you're trying to mimic the old stylings to keep everything uniform. I'm wondering now if this kind of situation where youre trying to mimic a complex styling for a table should be exempt from that..

[paulo-filho-ctr]

The reason I'm reluctant with this change is that I can test the change before sending out to test. The scan mode, is an interface that only Microsoft devices physically inside the Court has access.

[paulo-filho-ctr]

Hey, I implemented the changes in the scanner sections, Tenille tested and so far looks great! Thank you for the heads up on that one.