B 21230 resolve canvas dependency int

.eslintignore

@@ -1,3 +1,4 @@
 # Negative filter for storybook config folder as dot folders are ignored by eslint by default
 # See https://github.com/eslint/eslint/issues/8429#issuecomment-355967308
 !/.storybook
+public/static/react-file-viewer/*

.gitignore

@@ -55,6 +55,7 @@ schema.sql
 
 *.stamp
 
+public/static/react-file-viewer/*
 public/swagger-ui/*
 !public/swagger-ui/api.html
 !public/swagger-ui/internal.html

.prettierignore

@@ -1,2 +1,3 @@
 public/swagger-ui/*
 !public/swagger-ui/index.html
+public/static/react-file-viewer/*

Dockerfile.reviewapp

@@ -99,6 +99,7 @@ COPY public /build/public
 COPY src /build/src
 RUN set -x \
   && ./scripts/copy-swagger-ui \
+  && ./scripts/copy-react-file-viewer \
   && yarn build
 
 #########

Makefile

@@ -164,6 +164,7 @@ client_deps: .check_hosts.stamp .client_deps.stamp ## Install client dependencie
 .client_deps.stamp: yarn.lock .check_node_version.stamp
 	yarn install
 	scripts/copy-swagger-ui
+	scripts/copy-react-file-viewer
 	touch .client_deps.stamp
 
 .client_build.stamp: .client_deps.stamp $(shell find src -type f)

config-overrides.js

@@ -15,6 +15,8 @@ module.exports = {
     config.resolve.fallback = {
       // This is the Node polyfill for process/browser
       http: require.resolve('stream-http'),
+      https: false,
+      fs: false,
     };
     config.plugins.push(
       new webpack.ProvidePlugin({

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.5",
+    "@transcom/react-file-viewer": "git+https://github.com/transcom/react-file-viewer.git#b-21230-resolve-dependencies",
     "@trussworks/react-uswds": "3.2.0",
     "axe-playwright": "^1.2.3",
     "bytes": "^3.1.2",
@@ -152,6 +152,7 @@
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "canvas": "^2.11.2",
     "danger": "^11.3.1",
     "danger-plugin-jira-issue": "^1.4.1",
     "enzyme": "^3.11.0",

playwright/tests/office/servicescounseling/servicesCounselingFlows.spec.js

@@ -428,8 +428,6 @@ test.describe('Services counselor user', () => {
     await page.getByRole('button', { name: 'Confirm' }).click();
     await scPage.waitForPage.moveDetails();
 
-    await expect(page.getByText('PACKET READY FOR DOWNLOAD')).toBeVisible();
-
     // Navigate to the "View documents" page
     await expect(page.getByRole('button', { name: /View documents/i })).toBeVisible();
     await page.getByRole('button', { name: 'View documents' }).click();

scripts/README.md

@@ -141,6 +141,7 @@ This subset of development scripts is used primarily for building the app.
 | Script Name       | Description                                                       |
 | ----------------- | ----------------------------------------------------------------- |
 | `copy-swagger-ui` | Copies the assets (other than xxx.html) into the public directory |
+| `copy-react-file-viewer` | Copies react-file-viewer assets into the public directory to support dynamic importing of the pdfjs-dist library |
 | `gen-server`      | generate swagger code from yaml files                             |
 | `openapi`         | invokes the openapi redoc swagger tool                            |
 

scripts/copy-react-file-viewer

@@ -0,0 +1,7 @@
+#! /usr/bin/env bash
+
+# Copies the react file viewer webpack chunks to a public static directory to enable serving
+# Without this, the client will attempt to HTTP GET the chunk file, but if it cannot be found (Because it isn't served)
+# it will default to MilMove's index.html
+# This doesn't serve it, but it enables the backend to serve the static chunk fle
+cp node_modules/@transcom/react-file-viewer/dist/{*.js,*.png} public/static/react-file-viewer

src/.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  ignorePatterns: ['public/static/react-file-viewer/*'],
   rules: {
     // okay to disable because the threat actor (web application user) already controls the execution environment (web browser)
     'security/detect-object-injection': 'off',

src/components/DocumentViewer/Content/Content.jsx

@@ -42,7 +42,7 @@ const DocViewerContent = ({
               <FontAwesomeIcon icon="search-plus" title="Zoom in" aria-label="Zoom in" />
               Zoom in
             </Button>
-            {['jpg', 'jpeg', 'gif', 'png'].includes(fileType) && (
+            {['jpg', 'jpeg', 'gif', 'png', 'pdf'].includes(fileType) && (
               <>
                 <Button type="button" unstyled onClick={handleRotateLeft}>
                   <FontAwesomeIcon icon="rotate-left" title="Rotate left" aria-label="Rotate left" />