[PRMT-67] Implement custom pdfjs viewer for toolbar modification

.gitignore

@@ -106,4 +106,4 @@ lambdas/tests/unit/helpers/data/pdf/tmp
 
 tests/bulk-upload/output/**
 tests/bulk-upload/test_patients_data/**
-tests/bulk-upload/scripts/scenario_report.txt
+tests/bulk-upload/scripts/scenario_report.txt

Makefile

@@ -123,6 +123,12 @@ install:
 clean-install:
 	npm --prefix ./app ci --legacy-peer-deps
 
+install-pdfjs:
+	mkdir -p ./app/public/pdfjs
+	wget https://github.com/mozilla/pdf.js/releases/download/v4.10.38/pdfjs-4.10.38-dist.zip -O ./app/public/pdfjs/pdfjs.zip
+	unzip -o -d ./app/public/pdfjs ./app/public/pdfjs/pdfjs.zip
+	rm ./app/public/pdfjs/pdfjs.zip
+
 start:
 	npm --prefix ./app start
 

app/.gitignore

@@ -5,6 +5,9 @@
 /.pnp
 .pnp.js
 
+# ignore setup_pdf.js temp files
+/public/pdfjs
+
 # testing
 /coverage
 /cypress/results

app/Dockerfile

@@ -1,12 +1,17 @@
 # Build the App
 FROM node:18-alpine as builder
+RUN apk add unzip wget
 WORKDIR /app
 
 COPY package.json ./
 COPY package-lock.json ./
 COPY ./ ./
 
 RUN npm install --legacy-peer-deps
+RUN mkdir -p ./public/pdfjs
+RUN wget https://github.com/mozilla/pdf.js/releases/download/v4.10.38/pdfjs-4.10.38-dist.zip -O ./public/pdfjs/pdfjs.zip
+RUN unzip -o -d ./public/pdfjs ./public/pdfjs/pdfjs.zip
+RUN rm ./public/pdfjs/pdfjs.zip
 RUN npm run build
 
 # Host the App

app/README.md

@@ -34,6 +34,12 @@ To run the UI, the team has created a Makefile in the route directory, on your f
 make install
 ```
 
+After modules have installed you need to install pdfjs with the following command
+
+```bash
+make install-pdfjs
+```
+
 Once the packages have been installed, you can then run the app through the following command
 
 ```bash

app/cypress.config.ts

@@ -21,6 +21,7 @@ export default defineConfig({
         AWS_SECRET_ACCESS_KEY: process.env.AWS_SECRET_ACCESS_KEY,
         AWS_REGION: process.env.AWS_REGION ?? 'eu-west-2',
         AWS_SESSION_TOKEN: process.env.AWS_SESSION_TOKEN,
+        ELECTRON_ENABLE_LOGGING: 1,
     },
     component: {
         devServer: {
@@ -41,4 +42,5 @@ export default defineConfig({
         runMode: 5,
         openMode: 0,
     },
+    chromeWebSecurity: false,
 });

app/cypress/e2e/0-ndr-core-tests/gp_user_workflows/download_lloyd_george_workflow.cy.js

@@ -153,7 +153,7 @@ describe('GP Workflow: View Lloyd George record', () => {
                 cy.wait('@stitchJobCompleted', { timeout: 20000 });
                 cy.title().should('eq', lloydGeorgeRecordPageTitle);
 
-                cy.getByTestId('download-all-files-link').should('exist');
+                cy.getByTestId('download-all-files-link', { timeout: 20000 }).should('exist');
                 cy.getByTestId('download-all-files-link').click();
 
                 // Select documents page

app/cypress/fixtures/requests/GET_LloydGeorgeStitch.json

@@ -1,7 +1,7 @@
 {
     "jobStatus": "Completed",
-    "numberOfFiles": 12,
+    "numberOfFiles": 1,
     "lastUpdated": "2023-10-09T15:41:38.319508Z",
-    "presignedUrl": "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
+    "presignedUrl": "http://localhost:3000/dev/testFile.pdf",
     "totalFileSizeInBytes": 514495
 }

app/docker/nginx.conf

@@ -2,23 +2,42 @@ events {
     worker_connections  4096;  ## Default: 1024
 }
 http {
-    server_tokens off; # hides server version within headers
+
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    types {
+        application/javascript mjs;
+    }
+    server_tokens off;
     server {
+
+    root   /usr/share/nginx/html;
+
     listen       $CONTAINER_PORT;
     add_header Cache-Control "no-store, no-cache" always;
+
+    add_header Cache-Control "no-store" always;
     add_header Pragma "no-cache" always;
     add_header Strict-Transport-Security "max-age=63072000" always;
-    add_header Content-Security-Policy "frame-ancestors 'none'; img-src 'self'; script-src 'self'; style-src 'self'; object-src 'self' https://$CLOUDFRONT_DOMAIN_NAME;" always;
+    add_header Content-Security-Policy "frame-ancestors 'self'; img-src 'self' blob:; script-src 'self'; style-src 'self' 'unsafe-inline'; object-src 'self' https://$CLOUDFRONT_DOMAIN_NAME;" always;
     add_header Referrer-Policy "no-referrer" always;
-    add_header Permissions-Policy "Permissions-Policy: accelerometer=(self), ambient-light-sensor=(self), autoplay=(self), battery=(self), camera=(self), cross-origin-isolated=(self), display-capture=(self), document-domain=(self), encrypted-media=(self), execution-while-not-rendered=(self), execution-while-out-of-viewport=(self), fullscreen=(self), geolocation=(self), gyroscope=(self), keyboard-map=(self), magnetometer=(self), microphone=(self), midi=(self), navigation-override=(self), payment=(self), picture-in-picture=(self), publickey-credentials-get=(self), screen-wake-lock=(self), sync-xhr=(self), usb=(self), web-share=(self), xr-spatial-tracking=(self), clipboard-read=(self), clipboard-write=(self), gamepad=(self), speaker-selection=(self), conversion-measurement=(self), focus-without-user-activation=(self), hid=(self), idle-detection=(self), interest-cohort=(self), serial=(self), sync-script=(self), trust-token-redemption=(self), unload=(self), window-placement=(self), vertical-scroll=(self)" always;
+    add_header Permissions-Policy "accelerometer=(self), autoplay=(self), camera=(self), cross-origin-isolated=(self), display-capture=(self), encrypted-media=(self), fullscreen=(self), geolocation=(self), gyroscope=(self), keyboard-map=(self), magnetometer=(self), microphone=(self), midi=(self), payment=(self), picture-in-picture=(self), publickey-credentials-get=(self), screen-wake-lock=(self), sync-xhr=(self), usb=(self), xr-spatial-tracking=(self), clipboard-read=(self), clipboard-write=(self), gamepad=(self), hid=(self), idle-detection=(self), interest-cohort=(self), serial=(self), unload=(self) " always;
     add_header X-Content-Type-Options "nosniff" always;
     add_header X-Frame-Options "DENY" always;
     add_header X-Permitted-Cross-Domain-Policies "none" always;
+
         location / {
-            root   /usr/share/nginx/html;
             index  index.html index.htm;
-            include /etc/nginx/mime.types;
             try_files $uri $uri/ /index.html$is_args$args;
         }
+
+	    location /pdfjs/ {
+            add_header Content-Security-Policy "default-src 'none'; frame-ancestors 'self'; img-src 'self' blob: data:; script-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self' blob: https:;" always;
+            add_header Permissions-Policy "fullscreen=()" always;
+            add_header X-Frame-Options "SAMEORIGIN" always;
+            try_files $uri $uri/ /index.html$is_args$args;
+	    }
+
     }
 }

app/package.json

@@ -40,6 +40,7 @@
         "moment": "^2.30.1",
         "nhsuk-frontend": "^9.3.0",
         "nhsuk-react-components": "^5.0.0",
+        "pdfjs-viewer-element": "^2.7.0",
         "pdfobject": "^2.2.12",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

app/public/pdf-viewer.css

@@ -0,0 +1,127 @@
+#downloadButton,
+#viewFindButton,
+#viewOutline,
+#viewThumbnail,
+#viewAttachments,
+#viewLayers,
+#editorHighlight,
+#editorFreeText,
+#editorInk,
+#editorStamp,
+#secondaryOpenFile,
+#scrollPage,
+#secondaryDownload,
+#presentationMode,
+#viewBookmark,
+#viewBookmarkSeparator,
+#scrollHorizontal,
+#spreadModeButtons,
+#cursorToolButtons,
+#scrollModeButtons,
+#documentProperties {
+    display: none;
+    visibility: hidden;
+}
+
+.horizontalToolbarSeparator {
+    display: none;
+}
+
+#secondaryToolbarToggleButton {
+    display: none;
+}
+
+#secondaryToolbar {
+    width: unset;
+    height: 100%;
+    padding-block: 0;
+    inset-inline-end: unset;
+    position: relative;
+    border-radius: unset;
+    box-shadow: unset;
+    border: unset;
+    background-color: unset;
+    inset-block-start: unset;
+}
+#secondaryToolbar::before {
+    display: none;
+}
+#secondaryToolbar.hidden {
+    display: block !important;
+}
+
+#secondaryToolbarButtonContainer {
+    flex-direction: row !important;
+    height: 100%;
+    overflow-y: none;
+}
+
+.toolbarButton {
+    flex-shrink: 1;
+}
+.toolbarButton.labeled {
+    padding: 0 12px !important;
+    min-height: var(--menu-item-height-override);
+}
+.toolbarButton.labeled > span {
+    display: none;
+}
+
+.toolbarButton:is([disabled="disabled"], [disabled]) {
+    display: none;
+}
+
+#mainContainer {
+    max-width: calc(100% - 1px);
+}
+
+:root {
+    --toolbar-height: 64px;
+}
+
+#toolbarContainer #toolbarViewer {
+    height: 50%;
+}
+
+#toolbarViewerLeft > .toolbarButtonWithContainer {
+    position: absolute;
+    top: calc(var(--toolbar-height) / 2);
+    border-top: 1px solid var(--separator-color);
+    width: 100%;
+    height: 50%;
+}
+
+#findbar {
+    height: calc(var(--toolbar-height) / 2);
+    position: relative;
+    inset-inline-start: unset;
+    border-radius: unset;
+    box-shadow: unset;
+    border: unset;
+    background-color: unset;
+    inset-block-start: unset;
+}
+#findbar::before {
+    display: none;
+}
+#findbar::after {
+    display: none;
+}
+#findbar.hidden {
+    display: inline-flex !important;
+    height: unset;
+    min-height: unset;
+}
+#findbar > * {
+    height: calc(var(--toolbar-height) / 2);
+}
+:is(#findbar #findInputContainer) #findInput {
+    padding-bottom: 3px;
+}
+
+#findbarOptionsOneContainer > .toggleButton.toolbarLabel:last-child {
+    display: none;
+}
+#findbarOptionsTwoContainer {
+    display: none;
+}