Direct transport test tool (#112)

* Add file size limit for drag and drop

* Add file size to CCDA validator

* Change bgcolor in DCDT

* Transport test tool implementation

* Fix package-lock json

package.json

@@ -21,6 +21,7 @@
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.0",
     "@mui/material-nextjs": "^5.15.5",
+    "@mui/x-data-grid": "^7.12.1",
     "axios": "^1.6.8",
     "dompurify": "^3.1.2",
     "lodash": "^4.17.21",

src/components/c-cda/validation/IGValidatorForm.tsx

@@ -36,7 +36,7 @@ export default function IGValidatorForm({ version, formAction }: IGValidatorForm
 
         {/* Upload */}
         <Box sx={{ pt: 3 }}>
-          <DragDropFileUpload maxFiles={1} name="ccdaFile" fileName={getFileName} />
+          <DragDropFileUpload maxFiles={1} name="ccdaFile" fileName={getFileName} allowedSize={1048576} />
         </Box>
 
         {/* Validate */}

src/components/c-cda/validation/ValidatorForm.tsx

@@ -196,7 +196,7 @@ export default function ValidatorForm({
           <Box sx={{ pt: 3 }}>
             <FormControl fullWidth>
               <FormLabel sx={{ pb: 1 }}>Upload your generated C-CDA file and submit for validation</FormLabel>
-              <DragDropFileUpload maxFiles={1} name="ccdaFile" fileName={getFileName} />
+              <DragDropFileUpload maxFiles={1} name="ccdaFile" fileName={getFileName} allowedSize={1048576} />
             </FormControl>
           </Box>
 

src/components/direct/dcdt/HostingResults.tsx

@@ -140,7 +140,7 @@ const Results = ({ response }: ResultsProps) => {
         </Box>
       )}
       {response.status === 'success' && response.items !== undefined && (
-        <Box p={2} bgcolor={palette.secondaryLight} borderRadius={1} border={`1px solid ${palette.secondary}`} mb={2}>
+        <Box p={2} bgcolor={'#E3F2FD64'} borderRadius={1} border={`1px solid #E3F2FD64`} mb={2}>
           {response.items?.map((item, i) => {
             return (
               <Box key={i}>

src/components/direct/dcdt/TestCasePanel.tsx

@@ -123,7 +123,7 @@ const CertificateList = ({ certificateFields }: CertificateListProps) => {
 }
 const TestCasePanel = ({ testCaseFields }: TestCasePanelProps) => {
   return (
-    <Box p={2} bgcolor={palette.secondaryLight} borderRadius={1} border={`1px solid ${palette.secondary}`} mb={2}>
+    <Box p={2} bgcolor={'#E3F2FD64'} borderRadius={1} border={`1px solid #E3F2FD64`} mb={2}>
       <Box sx={twoColumnContainer}>
         <Box display={'flex'} minWidth={'50%'}>
           {_.has(testCaseFields[0], 'Binding_Type') && (

src/components/direct/transport-tool/OwnContentTab.tsx

@@ -1,29 +1,42 @@
 import DragandDropFile from '@/components/shared/DragandDropFile'
-import palette from '@/styles/palette'
-import { Box, TextField, Stack, Typography, Button } from '@mui/material'
+import { Box, TextField, Stack, Typography } from '@mui/material'
+import { handleSendMessageWithAttachmentFile } from './actions'
+import { useState } from 'react'
+import { useFormState } from 'react-dom'
+import OwnContentResults from './ReceiveMessageSITEResults'
 
 const OwnContentTab = () => {
+  const [endpointName, setEndpointName] = useState('')
+  const [data, handleSubmit] = useFormState(handleSendMessageWithAttachmentFile, { response: {} })
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target
+    setEndpointName(value)
+  }
   return (
-    <Box p={2}>
-      <TextField
-        fullWidth
-        id="ownEndpointName"
-        label="Enter Your Endpoint Name"
-        helperText="Recipient Direct email address"
-        sx={{ pb: 4 }}
-      />
-      <Box pb={4}>
-        <Stack direction="row" alignItems="flex-start" gap={1}>
-          <Typography gutterBottom variant="body1">
-            <strong>Select a Local C-CDA File to Send:</strong>
-          </Typography>
-        </Stack>
-        <DragandDropFile />
+    <form action={handleSubmit}>
+      <Box p={2}>
+        <TextField
+          fullWidth
+          id="ownEndpointName"
+          label="Enter Your Endpoint Name"
+          helperText="Recipient Direct email address"
+          sx={{ pb: 4 }}
+          name="toAddress"
+          value={endpointName}
+          onChange={handleChange}
+          type="email"
+        />
+        <Box pb={4}>
+          <Stack direction="row" alignItems="flex-start" gap={1}>
+            <Typography gutterBottom variant="body1">
+              <strong>Select a Local C-CDA File to Send:</strong>
+            </Typography>
+          </Stack>
+          <DragandDropFile maxFiles={1} name="attachment" />
+        </Box>
+        <OwnContentResults response={data?.response} buttonTitle={'SEND MESSAGE'} />
       </Box>
-      <Button variant="contained" sx={{ color: palette.white }} type="submit">
-        SEND MESSAGE
-      </Button>
-    </Box>
+    </form>
   )
 }