Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

File Error Handling #32

Merged
merged 10 commits into from
Nov 30, 2023
Merged

File Error Handling #32

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0b458b7
Error handling for type and size
nickbristow Nov 28, 2023
4a942af
add test
nickbristow Nov 28, 2023
9c42f2c
use zip
nickbristow Nov 28, 2023
d0a23ca
Added .zip file restriction test
KennethSkylight Nov 28, 2023
eb94db6
removing border
KennethSkylight Nov 28, 2023
4f6d1d7
formatting
KennethSkylight Nov 28, 2023
a672fe5
Adding comment
KennethSkylight Nov 28, 2023
78aa093
fixing the padding
KennethSkylight Nov 29, 2023
f9f76ec
fixing spacing
KennethSkylight Nov 30, 2023
517ae11
fixing the padding
KennethSkylight Nov 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions front-end/app/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,12 @@
}
}

// removing the border on the left
.usa-form-group--error {
border-left-style: none !important;
padding-left: 0rem !important;
}


.footer-primary {
div{
Expand Down
220 changes: 123 additions & 97 deletions front-end/app/upload_file/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,120 +1,146 @@
'use client'
import { FileInput, FormGroup, Button } from '@trussworks/react-uswds'
import { FileInput, FormGroup, Button, ErrorMessage } from '@trussworks/react-uswds'
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import LinkAccordion from '@/components/LinkAccordion/LinkAccordion';
import {formatData, ProgressData, createWebSocket, stepHtml, alertHtml} from './utils'
import { formatData, ProgressData, createWebSocket, stepHtml, alertHtml } from './utils'
import { useData } from '@/utils/DataContext';

export default function UploadFile() {
const { setData } = useData();
const router = useRouter();
const url = process.env.NEXT_PUBLIC_PROCESS_URL
const [progress, setProgress] = useState<ProgressData | null>(null); // State for progress
const [socket, setSocket] = useState<WebSocket | null>(null);
const [file, setFile] = useState<File | null>(null);
const { setData } = useData();
const router = useRouter();
const url = process.env.NEXT_PUBLIC_PROCESS_URL
const [progress, setProgress] = useState<ProgressData | null>(null); // State for progress
const [socket, setSocket] = useState<WebSocket | null>(null);
const [file, setFile] = useState<File | null>(null);
const [fileError, setFileError] = useState<string | null>(null);

const handleSubmit = () => {
// Send form data to the server via a WebSocket
if(!file || !socket){
return 'false';
const fileErrors = {
size: "We can only accept .zip files smaller than 1GB",
type: "We can only accept .zip files"
}
const formData = new FormData();
formData.append("file", file);
socket.send(file)
};
const addFile = (event: React.ChangeEvent<HTMLInputElement>) => {
const selectedFile = event.target.files?.item(0);
if(selectedFile){
setFile(selectedFile);
}
};
const fileSizeLimit = 1000000000; // 1 GB

useEffect(() => {
const ws = createWebSocket(url);
ws.onmessage = (event) => {
let data = formatData(event.data)
if(data.complete && data["processed_values"]){
setData(data)
} else {
setProgress(formatData(event.data));
}
const handleSubmit = () => {
// Send form data to the server via a WebSocket
if (!file || !socket) {
return 'false';
}
const formData = new FormData();
formData.append("file", file);
socket.send(file)
};

ws.onclose = (event) => {
// Handle WebSocket closed
const addFile = (event: React.ChangeEvent<HTMLInputElement>) => {
const selectedFile = event.target.files?.item(0);
if (selectedFile?.size && selectedFile.size > fileSizeLimit) {
setFileError(fileErrors.size)
}
else if (!selectedFile?.name.toLowerCase().endsWith('.zip')) {
setFileError(fileErrors.type)
}
else if (selectedFile) {
setFileError(null);
setFile(selectedFile);
}
};

setSocket(ws);
useEffect(() => {
const ws = createWebSocket(url);
ws.onmessage = (event) => {
let data = formatData(event.data)
if (data.complete && data["processed_values"]) {
setData(data)
} else {
setProgress(formatData(event.data));
}
};

return () => {
ws.close(); // Close the WebSocket when the component unmounts
};
}, []);
ws.onclose = (event) => {
// Handle WebSocket closed
};

setSocket(ws);


return () => {
ws.close(); // Close the WebSocket when the component unmounts
};
}, []);

const progressHtml = () =>{
if(!progress || !file){
return (<></>)
const progressComponent = () => {
if (!progress || !file) {
return (<></>)
}
return (
<div className="display-flex flex-justify-center margin-top-5">
<div className="max-611">
<h1 className='font-sans-xl text-bold margin-top'>Processing your eCR</h1>
<p className="font-sans-lg text-light">
View the progress of your eCR through our pipeline
</p>
{alertHtml(progress, file)}
<div
className="usa-step-indicator usa-step-indicator--counters margin-top-4"
aria-label="progress"
>
<ol className="usa-step-indicator__segments">
{stepHtml(progress)}
</ol>
</div>
<div className='margin-top-5'>
<button type="button" className="usa-button--outline usa-button" onClick={() => location.reload()}>Cancel</button>
<button
type="button"
className="usa-button"
onClick={() => router.push('/export')}
disabled={progress.complete ? false : true}
>
Continue
</button>
</div>
</div>
</div>
)
}
return (
<div className="display-flex flex-justify-center margin-top-5">
<div className="max-611">
<h1 className='font-sans-xl text-bold margin-top'>Processing your eCR</h1>
<p className="font-sans-lg text-light">
View the progress of your eCR through our pipeline
</p>
{alertHtml(progress, file)}
<div
className="usa-step-indicator usa-step-indicator--counters margin-top-4"
aria-label="progress"
>
<ol className="usa-step-indicator__segments">
{stepHtml(progress)}
</ol>
</div>
<div className='margin-top-5'>
<button type="button" className="usa-button--outline usa-button" onClick={()=>location.reload()}>Cancel</button>
<button
type="button"
className="usa-button"
onClick={()=>router.push('/export')}
disabled={progress.complete ? false : true}
>
Continue
</button>
</div>
</div>
</div>
)
}
if(progress){
return progressHtml()
if (progress) {
return progressComponent()
} else {
return (
<div className="display-flex flex-justify-center margin-top-5">
<div className="max-611">
<h1 className='font-sans-xl text-bold margin-top'>Upload your eCR</h1>
<p className="font-sans-lg text-light">Select an eCR .zip file to process</p>
<div className="usa-alert usa-alert--info usa-alert--no-icon maxw-tablet">
<div className="usa-alert__body padding-0">
<p className="usa-alert__text font-sans-xs text-bold">
This tool is only for test data. Please do not upload patient data to this site.
</p>
return (
<div className="display-flex flex-justify-center margin-top-5">
<div className="max-611">
<h1 className='font-sans-xl text-bold margin-top'>Upload your eCR</h1>
<p className="font-sans-lg text-light">Select an eCR .zip file to process</p>
<div className="usa-alert usa-alert--info usa-alert--no-icon maxw-tablet">
<div className="usa-alert__body padding-0">
<p className="usa-alert__text font-sans-xs text-bold">
This tool is only for test data. Please do not upload patient data to this site.
</p>
</div>
</div>
<FormGroup error={fileError ? true : false}>
{fileError &&
<ErrorMessage id="file-input-error-alert">
{fileError}
</ErrorMessage>
}

<FileInput id="file-input-single"
name="file-input-single" onChange={addFile}
/>

<div className="margin-top-205">
<LinkAccordion></LinkAccordion>
</div>
<Button
className="margin-top-3"
disabled={!file || fileError !== null}
type="button"
onClick={handleSubmit}
>
Continue
</Button>
</FormGroup>
</div>
<FormGroup>
<FileInput id="file-input-single"
name="file-input-single" onChange={addFile}
/>
<div className="margin-top-205">
<LinkAccordion></LinkAccordion>
</div>
<Button className="margin-top-3" disabled={!file} type="button" onClick={handleSubmit}>Continue</Button>
</FormGroup>
</div>
</div>
)
)
}
}
83 changes: 77 additions & 6 deletions front-end/tests/upload.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import { MockWebSocket } from "./mockWebSocket";
import { act } from "react-dom/test-utils";

let wsInstance = new MockWebSocket('ws://example.com');
jest.mock("../app/upload_file/utils",()=>({
...(jest.requireActual('../app/upload_file/utils')),
createWebSocket: jest.fn(()=> {
jest.mock("../app/upload_file/utils", () => ({
...(jest.requireActual('../app/upload_file/utils')),
createWebSocket: jest.fn(() => {
return wsInstance
})
}));
Expand Down Expand Up @@ -57,7 +57,7 @@ describe('UploadFile Component', () => {
json: () => Promise.resolve({ success: true }),
})
);


const sendSpy = jest.spyOn(wsInstance, 'send');

Expand All @@ -69,8 +69,8 @@ describe('UploadFile Component', () => {
)
);
const fileInput = queryByTestId('file-input-input')
const file = new File(['{"test": "content"}'], 'test.json', { type: 'text/json' });
const fileList = createFileList([file]);
const file = new File(['{"test": "content"}'], 'test.zip', { type: 'text/json' });
const fileList = createFileList([file]);

await act(async () => {
fireEvent.change(fileInput, {
Expand All @@ -92,4 +92,75 @@ describe('UploadFile Component', () => {
global.fetch.mockRestore();
sendSpy.mockRestore();
});

it('should reject files that are too big', async () => {
// Create a function to mimic a FileList object
global.fetch = jest.fn(() =>
Promise.resolve({
json: () => Promise.resolve({ success: true }),
})
);


const sendSpy = jest.spyOn(wsInstance, 'send');

const { getByText, queryByTestId } = await act(async () => render
(
<DataProvider>
<UploadFile />
</DataProvider>
)
);
const fileInput = queryByTestId('file-input-input')
const file = new File(['{"test": "content"}'], 'test.zip', { type: 'text/json' });
Object.defineProperty(file, 'size', { value: 1000000000 + 1 })
const fileList = createFileList([file]);

await act(async () => {
fireEvent.change(fileInput, {
target: { files: fileList },
});
});

expect(screen.getByText('We can only accept .zip files smaller than 1GB')).toBeInTheDocument();

// Reset fetch mock
global.fetch.mockRestore();
sendSpy.mockRestore();
});

it('should reject files that are not .zip', async () => {
// Create a function to mimic a FileList object
global.fetch = jest.fn(() =>
Promise.resolve({
json: () => Promise.resolve({ success: true }),
})
);


const sendSpy = jest.spyOn(wsInstance, 'send');

const { getByText, queryByTestId } = await act(async () => render
(
<DataProvider>
<UploadFile />
</DataProvider>
)
);
const fileInput = queryByTestId('file-input-input')
const file = new File(['{"test": "content"}'], 'test.json', { type: 'text/json' });
const fileList = createFileList([file]);

await act(async () => {
fireEvent.change(fileInput, {
target: { files: fileList },
});
});

expect(screen.getByText('We can only accept .zip files')).toBeInTheDocument();

// Reset fetch mock
global.fetch.mockRestore();
sendSpy.mockRestore();
});
});
Loading