diff --git a/package.json b/package.json index b4c0f5b14f2..54d501cfe4b 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "@opentelemetry/core": "^1.15.1", "@tanstack/react-query": "^4.29.12", "@tanstack/react-query-devtools": "^5.17.12", - "@transcom/react-file-viewer": "git+https://github.com/transcom/react-file-viewer#v1.2.4", + "@transcom/react-file-viewer": "git+https://github.com/transcom/react-file-viewer#v1.2.5", "@trussworks/react-uswds": "3.2.0", "axe-playwright": "^1.2.3", "bytes": "^3.1.2", diff --git a/src/components/DocumentViewer/Content/Content.jsx b/src/components/DocumentViewer/Content/Content.jsx index 77f1b39c77d..79ce99d7a52 100644 --- a/src/components/DocumentViewer/Content/Content.jsx +++ b/src/components/DocumentViewer/Content/Content.jsx @@ -13,12 +13,21 @@ import { ReactComponent as ArrowLeft } from 'shared/icon/arrow-left.svg'; import { ReactComponent as ArrowRight } from 'shared/icon/arrow-right.svg'; */ -const DocViewerContent = ({ fileType, filePath, saveRotation, setRotationValue, rotationValue, disableSaveButton }) => ( +const DocViewerContent = ({ + fileType, + filePath, + saveRotation, + setRotationValue, + rotationValue, + disableSaveButton, + onError, +}) => (
{ const [selectedFileIndex, selectFile] = useState(0); const [disableSaveButton, setDisableSaveButton] = useState(false); const [menuIsOpen, setMenuOpen] = useState(false); + const [showContentError, setShowContentError] = useState(false); const sortedFiles = files.sort((a, b) => moment(b.createdAt) - moment(a.createdAt)); const selectedFile = sortedFiles[parseInt(selectedFileIndex, 10)]; @@ -73,6 +73,7 @@ const DocumentViewer = ({ files, allowDownload, paymentRequestId }) => { }, [files.length]); useEffect(() => { + setShowContentError(false); setRotationValue(selectedFile?.rotation || 0); }, [selectedFile]); @@ -108,6 +109,11 @@ const DocumentViewer = ({ files, allowDownload, paymentRequestId }) => { const selectedFileDate = formatDate(moment(selectedFile?.createdAt), 'DD MMM YYYY'); + const onContentError = (errorObject) => { + setShowContentError(true); + milmoveLogger.error(errorObject); + }; + const saveRotation = () => { if (fileType.current !== 'pdf' && mountedRef.current === true) { const uploadBody = { @@ -150,6 +156,9 @@ const DocumentViewer = ({ files, allowDownload, paymentRequestId }) => { )} {paymentRequestId !== undefined ? paymentPacketDownload : null}
+ {showContentError && ( +
If your document does not display, please refresh your browser.
+ )} { disableSaveButton={disableSaveButton} setRotationValue={setRotationValue} saveRotation={saveRotation} + onError={onContentError} /> {menuIsOpen &&
} ({ ...jest.requireActual('services/ghcApi'), bulkDownloadPaymentRequest: jest.fn(), @@ -59,39 +69,45 @@ jest.mock('services/ghcApi', () => ({ jest.mock('./Content/Content', () => ({ __esModule: true, - default: ({ id, filename, contentType, url, createdAt, rotation }) => ( -
-
- {filename} Uploaded on {createdAt} -
-
id: {id || 'undefined'}
-
fileName: {filename || 'undefined'}
-
contentType: {contentType || 'undefined'}
-
url: {url || 'undefined'}
-
createdAt: {createdAt || 'undefined'}
-
rotation: {rotation || 'undefined'}
-
-
    - {mockFiles.map((file) => ( -
  • - {file.filename} - Added on {file.createdAt} -
    • - ))} -
-
-
- + default: ({ id, filename, contentType, url, createdAt, rotation, filePath, onError }) => { + if (filePath === '404') { + onError('content error happening'); + return
nothing to see here
; + } + return ( +
+
+ {filename} Uploaded on {createdAt} +
+
id: {id || 'undefined'}
+
fileName: {filename || 'undefined'}
+
contentType: {contentType || 'undefined'}
+
url: {url || 'undefined'}
+
createdAt: {createdAt || 'undefined'}
+
rotation: {rotation || 'undefined'}
+
+
    + {mockFiles.map((file) => ( +
  • + {file.filename} - Added on {file.createdAt} +
    • + ))} +
+
+
+ +
-
- ), + ); + }, })); describe('DocumentViewer component', () => { @@ -180,6 +196,46 @@ describe('DocumentViewer component', () => { expect(screen.getByText('id: undefined')).toBeInTheDocument(); }); + describe('regarding content errors', () => { + const errorMessageText = 'If your document does not display, please refresh your browser.'; + const downloadLinkText = 'Download file'; + it('no error message normally', async () => { + render( + + + , + ); + expect(screen.queryByText(errorMessageText)).toBeNull(); + }); + + it('download link normally', async () => { + render( + + + , + ); + expect(screen.getByText(downloadLinkText)).toBeVisible(); + }); + + it('show message on content error', async () => { + render( + + + , + ); + expect(screen.getByText(errorMessageText)).toBeVisible(); + }); + + it('download link on content error', async () => { + render( + + + , + ); + expect(screen.getByText(downloadLinkText)).toBeVisible(); + }); + }); + describe('when clicking download Download All Files button', () => { it('downloads a bulk packet', async () => { const mockResponse = { diff --git a/yarn.lock b/yarn.lock index 4d2683f08bd..b3e5f4a5ce7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4583,9 +4583,9 @@ resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf" integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A== -"@transcom/react-file-viewer@git+https://github.com/transcom/react-file-viewer#v1.2.4": - version "1.2.4" - resolved "git+https://github.com/transcom/react-file-viewer#d4396dc8bf0acdd646e93ea82d23acf3bc0d5b0f" +"@transcom/react-file-viewer@git+https://github.com/transcom/react-file-viewer#v1.2.5": + version "1.2.5" + resolved "git+https://github.com/transcom/react-file-viewer#4d9924ae58a6acdfcfb353235e034ff98fde5458" dependencies: pdfjs-dist "1.8.357" prop-types "^15.5.10"