Merge pull request #14240 from transcom/b-21230-resolve-canvas-depend…

…ency-v2-main

B 21230 resolve canvas dependency v2 main

.circleci/config.yml

@@ -226,8 +226,6 @@ executors:
     # maybe don't need xlarge, but getting many timeouts with large
     # ahobson - 2023-02-07
     resource_class: xlarge
-    # use ~/project as that already exists in cimg/node and is owned
-    # by circleci
     working_directory: ~/project
     docker:
       - image: *playwright
@@ -805,6 +803,27 @@ commands:
       - restore_cache:
           keys:
             - v4-cache-yarn-v4-{{ checksum "yarn.lock" }}
+      - run:
+          # Needed for PDF e2e
+          name: Verify react-file-viewer client dependency exists
+          command: |
+            if [ ! -d "/home/circleci/project/public/static/react-file-viewer" ]; then
+              echo "Error: /home/circleci/project/public/static/react-file-viewer not found, the server will not be able to serve frontend dependencies"
+              exit 1
+            fi
+      - run:
+          # Needed for PDF e2e
+          name: Verify react-file-viewer pdfjs chunk exists
+          command: |
+            ls -l /home/circleci/project/public/static/react-file-viewer
+            if [ ! -f "/home/circleci/project/public/static/react-file-viewer/pdfjs-dist-webpack.chunk.js" ]; then
+              echo "Error: /home/circleci/project/public/static/react-file-viewer/pdfjs-dist-webpack.chunk.js not found, the server will not be able to serve frontend dependencies"
+              exit 1
+            fi
+      - run:
+          name: Verify small.pdf is in workspace
+          command: |
+            ls -l ./pkg/testdatagen/testdata/bandwidth_test_docs/
       - run:
           name: setup hosts
           command: |
@@ -827,6 +846,7 @@ commands:
             export LOGIN_GOV_SECRET_KEY=$(echo $E2E_LOGIN_GOV_SECRET_KEY | base64 --decode)
             export HERE_MAPS_APP_ID=$E2E_HERE_MAPS_APP_ID
             export HERE_MAPS_APP_CODE=$E2E_HERE_MAPS_APP_CODE
+            export LOCAL_STORAGE_WEB_ROOT=storage
             # pull in review app settings here so we don't have to
             # reproduce them
             sed 's,^,export ,' config/env/review.app.env > server_env
@@ -886,6 +906,7 @@ commands:
 
             make db_dev_create
             bin/milmove migrate
+
             # playwright tests DO NOT NEED SEED DATA
             bin/milmove serve 2>&1 | fmt
       - run:
@@ -1180,6 +1201,20 @@ jobs:
       - save_cache_for_go
       - announce_failure
 
+  # Prep the public folder for frontend dependency serving
+  # This is needed for things like pdfjs-dist
+  prep_server_hosted_client_deps:
+    executor: mymove_compiler
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run: scripts/fetch-react-file-viewer-from-yarn
+      - persist_to_workspace:
+          root: ~/transcom/mymove
+          paths:
+            - public
+
   # `pre_deps_yarn` is used to cache yarn sources
   pre_deps_yarn:
     executor: mymove_compiler
@@ -1192,6 +1227,9 @@ jobs:
           name: Install Frozen YARN dependencies
           command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
       - run: scripts/check-generated-code yarn.lock
+      - run:
+          name: Rebuild dependencies without binaries
+          command: ./scripts/rebuild-dependencies-without-binaries
       # `v4-cache-yarn-v4-{{ checksum "yarn.lock" }}` is used to cache yarn sources
       - save_cache:
           key: v4-cache-yarn-v4-{{ checksum "yarn.lock" }}
@@ -1302,6 +1340,9 @@ jobs:
       - run:
           name: Install Frozen YARN dependencies
           command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+      - run:
+          name: Rebuild dependencies without binaries
+          command: ./scripts/rebuild-dependencies-without-binaries
       # this is so we can avoid go mod downloading and resulting in an error on a false positive
       - run: scripts/pre-commit-go-mod || exit 0
       - run:
@@ -1588,6 +1629,9 @@ jobs:
       - run:
           name: Install Frozen YARN dependencies
           command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+      - run:
+          name: Rebuild dependencies without binaries
+          command: ./scripts/rebuild-dependencies-without-binaries
       - run:
           name: client test coverage
           command: JEST_JUNIT_OUTPUT_DIR=jest-junit-reports make client_test_coverage
@@ -1738,6 +1782,8 @@ jobs:
             # save scripts for deploy
             - scripts
             - swagger
+            # Client dependency for PDF enabling
+            - public/static/react-file-viewer
             - pkg/testdatagen/testdata
       - announce_failure
 
@@ -1765,7 +1811,9 @@ jobs:
       - run:
           name: Install Frozen YARN dependencies
           command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
-
+      - run:
+          name: Rebuild dependencies without binaries
+          command: ./scripts/rebuild-dependencies-without-binaries
       # babel and terser both have a cache
       #
       # see https://webpack.js.org/loaders/babel-loader/ and look for
@@ -1923,6 +1971,9 @@ jobs:
       - run:
           name: Install Frozen YARN dependencies
           command: yarn install --frozen-lockfile
+      - run:
+          name: Rebuild dependencies without binaries
+          command: ./scripts/rebuild-dependencies-without-binaries
       - restore_cache:
           keys:
             - v1-node-modules-cache
@@ -2280,6 +2331,8 @@ workflows:
 
       - pre_deps_golang
 
+      - prep_server_hosted_client_deps
+
       - pre_deps_yarn
 
       - base_noop
@@ -2356,6 +2409,7 @@ workflows:
       - integration_tests_devseed:
           requires:
             - pre_deps_golang
+            - prep_server_hosted_client_deps
           # See comments at the top of this file for configuring/using
           # this branch config
           filters:
@@ -2434,6 +2488,7 @@ workflows:
           requires:
             - anti_virus
             - pre_deps_golang
+            - prep_server_hosted_client_deps
 
       - build_app:
           requires:

.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/*

.github/workflows/happo-tests-main.yml

@@ -20,6 +20,13 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 
+      # Rebuild the "canvas" dependency, when you yarn install canvas it doesn't come with a prebuilt binary
+      # this means we gotta build the binary itself before we yarn install.
+      # Expect this to be a required step until they release https://github.com/Automattic/node-canvas/releases/tag/v3.0.0-rc2
+      - name: Rebuild dependencies without binaries
+        run: |
+          ./scripts/rebuild-dependencies-without-binaries
+
       - name: Start Happo run
         run: yarn happo-ci-github-actions
         env:

.github/workflows/happo-tests.yml

@@ -40,6 +40,13 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 
+      # Rebuild the "canvas" dependency, when you yarn install canvas it doesn't come with a prebuilt binary
+      # this means we gotta build the binary itself before we yarn install.
+      # Expect this to be a required step until they release https://github.com/Automattic/node-canvas/releases/tag/v3.0.0-rc2
+      - name: Rebuild dependencies without binaries
+        run: |
+          ./scripts/rebuild-dependencies-without-binaries
+
       - name: Start Happo run
         run: yarn happo-ci-github-actions
         env:

.gitignore

@@ -55,6 +55,8 @@ schema.sql
 
 *.stamp
 
+public/static/react-file-viewer/*
+!public/static/react-file-viewer/.gitkeep
 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/*

Brewfile.local

@@ -12,6 +12,13 @@ brew 'pre-commit'
 brew 'shellcheck'
 brew 'watchman'
 brew 'yarn'
+brew 'pkg-config'
+brew 'cairo'
+brew 'pango'
+brew 'libpng'
+brew 'jpeg'
+brew 'giflib'
+brew 'librsvg'
 
 cask 'aws-vault'
 cask 'opensc'

Dockerfile

@@ -20,6 +20,7 @@ COPY config/tls/dod-sw-ca-75.pem /config/tls/dod-sw-ca-75.pem
 
 COPY swagger/* /swagger/
 COPY build /build
+COPY public/static/react-file-viewer /public/static/react-file-viewer
 
 ENTRYPOINT ["/bin/milmove"]
 

Dockerfile.dp3

@@ -20,6 +20,7 @@ COPY config/tls/api.exp.dp3.us.crt /config/tls/api.exp.dp3.us.crt
 
 COPY swagger/* /swagger/
 COPY build /build
+COPY public/static/react-file-viewer /public/static/react-file-viewer
 
 ENTRYPOINT ["/bin/milmove"]
 

Dockerfile.e2e

@@ -21,6 +21,7 @@ COPY config /config
 COPY swagger /swagger
 COPY pkg/testdatagen/testdata /pkg/testdatagen/testdata
 COPY scripts /scripts
+COPY public/static/react-file-viewer /public/static/react-file-viewer
 
 # Install tools needed in container
 # hadolint ignore=DL3018

Dockerfile.local

@@ -35,6 +35,7 @@ COPY config/tls/devlocal-ca.pem /config/tls/devlocal-ca.pem
 
 COPY swagger/* /swagger/
 COPY build /build
+COPY public/static/react-file-viewer /public/static/react-file-viewer
 
 ENTRYPOINT ["/bin/milmove"]
 

Dockerfile.reviewapp

@@ -33,6 +33,7 @@ ARG GIT_COMMIT
 COPY cmd /build/cmd
 COPY swagger /build/swagger
 COPY pkg /build/pkg
+COPY public/static/react-file-viewer /public/static/react-file-viewer
 
 # fake src dir to silence make
 RUN mkdir /build/src
@@ -99,6 +100,7 @@ COPY public /build/public
 COPY src /build/src
 RUN set -x \
   && ./scripts/copy-swagger-ui \
+  && ./scripts/copy-react-file-viewer \
   && yarn build
 
 #########

Makefile

@@ -159,11 +159,16 @@ check_app: ## Make sure you're running the correct APP
 client_deps_update: .check_node_version.stamp ## Update client dependencies
 	yarn upgrade
 
+.PHONY: server_hosted_client_deps
+server_hosted_client_deps: scripts/fetch-react-file-viewer-from-yarn ## Serve static dependencies for client. This can be used by devs, but is pretty much exclusively used by CI/CD for compiler reasons
+
 .PHONY: client_deps
 client_deps: .check_hosts.stamp .client_deps.stamp ## Install client dependencies
 .client_deps.stamp: yarn.lock .check_node_version.stamp
 	yarn install
 	scripts/copy-swagger-ui
+	scripts/copy-react-file-viewer
+	scripts/rebuild-dependencies-without-binaries
 	touch .client_deps.stamp
 
 .client_build.stamp: .client_deps.stamp $(shell find src -type f)
@@ -411,6 +416,9 @@ build_tools: bin/gin \
 	bin/simulate-process-tpps \
 	bin/tls-checker ## Build all tools
 
+.PHONY: prep_webpack_chunks
+prep_webpack_chunks: scripts/copy-react-file-viewer
+
 .PHONY: build
 build: server_build build_tools client_build ## Build the server, tools, and client
 

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({

config/env/review.app.env

@@ -14,7 +14,7 @@ EIA_KEY=db2522a43820268a41a802a16ae9fd26
 ENVIRONMENT=review
 AWS_CF_DOMAIN=assets.devlocal.move.mil
 IWS_RBS_ENABLED=1
-LOCAL_STORAGE_ROOT=/tmp
+LOCAL_STORAGE_ROOT=tmp
 LOCAL_STORAGE_WEB_ROOT=storage
 LOGIN_GOV_CALLBACK_PORT=443
 MUTUAL_TLS_ENABLED=0

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "canvas": "^2.11.2",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
@@ -10,7 +11,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#v1.4.1",
     "@trussworks/react-uswds": "3.2.0",
     "axe-playwright": "^1.2.3",
     "bytes": "^3.1.2",

pkg/handlers/routing/routing_init.go

@@ -222,6 +222,11 @@ func mountHealthRoute(appCtx appcontext.AppContext, redisPool *redis.Pool,
 }
 
 func mountLocalStorageRoute(appCtx appcontext.AppContext, routingConfig *Config, site chi.Router) {
+	appCtx.Logger().Info("Mounting local storage route",
+		zap.String("LocalStorageRoot", routingConfig.LocalStorageRoot),
+		zap.String("LocalStorageWebRoot", routingConfig.LocalStorageWebRoot),
+	)
+
 	if routingConfig.LocalStorageRoot != "" && routingConfig.LocalStorageWebRoot != "" {
 		localStorageHandlerFunc := storage.NewFilesystemHandler(
 			routingConfig.FileSystem, routingConfig.LocalStorageRoot)