Create Direct Test By Criteria B1 Tab functionality: Site 3912 (#105)

* Changes from SITE-3986 * Update B1Tab.tsx * Create SMTPTestCases.tsx * Remove duplicate files * Add env variables and move API calls to ServerActions * Improve environment variable name * Remove env variables * Add Loading Button, Remove Default Profile Values
onc-healthit · Jul 31, 2024 · 1b4bb61 · 1b4bb61
1 parent fa602aa
commit 1b4bb61
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 8 deletions.
diff --git a/src/components/direct/hisp/TestCard.tsx b/src/components/direct/hisp/TestCard.tsx
@@ -6,6 +6,7 @@ import DocumentSelector from './DocumentSelector'
 import { handleAPICall } from '../test-by-criteria/ServerActions'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import CancelIcon from '@mui/icons-material/Cancel'
+import LoadingButton from '../shared/LoadingButton'
 
 import {
   Box,
@@ -97,6 +98,8 @@ const TestCard = ({
   const [criteriaMet, setCriteriaMet] = useState<string>('')
   const [testRequestResponses, setTestRequestResponses] = useState<string>('')
   const [showLogs, setShowLogs] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [isFinished, setIsFinished] = useState(false)
 
   const handleDocumentConfirm = (selectedData: SelectedDocument) => {
     console.log('Confirmed Document', selectedData)
@@ -132,6 +135,9 @@ const TestCard = ({
       alert('This test requires a CCDA document to be selected. Please select a document before running the test.')
     } else {
       try {
+        setIsLoading(true)
+        setIsFinished(false)
+        setCriteriaMet('')
         const response = await handleAPICall({
           testCaseNumber: test.id,
           sutSmtpAddress: hostname,
@@ -151,12 +157,18 @@ const TestCard = ({
           year: '2021',
           hostingcase: 'YES',
         })
+        setIsFinished(true)
         setCriteriaMet(response.criteriaMet)
         setTestRequestResponses(JSON.stringify(response.testRequestResponses, null, 2))
         console.log('Criteria met: ', response.criteriaMet)
         console.log('Test Request Responses:', response.testRequestResponses)
       } catch (error) {
         console.error('Failed to run test:', error)
+      } finally {
+        setIsLoading(false)
+        setTimeout(() => {
+          setIsFinished(false)
+        }, 100)
       }
     }
   }
@@ -325,9 +337,15 @@ const TestCard = ({
               )}
             <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}>
               {renderCriteriaMetIcon()}
-              <Button variant="contained" color="primary" onClick={handleRunTest}>
+              <LoadingButton
+                loading={isLoading}
+                done={isFinished}
+                onClick={handleRunTest}
+                variant="contained"
+                color="primary"
+              >
                 RUN
-              </Button>
+              </LoadingButton>
               <Button variant="contained" onClick={handleToggleDetail}>
                 MORE INFO
               </Button>

diff --git a/src/components/direct/hisp/XDRTestCard.tsx b/src/components/direct/hisp/XDRTestCard.tsx
@@ -7,6 +7,7 @@ import DynamicTable from './DynamicTable'
 import { handleAPICall } from '../test-by-criteria/ServerActions'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import CancelIcon from '@mui/icons-material/Cancel'
+import LoadingButton from '../shared/LoadingButton'
 
 export type TestCaseFields = {
   name?: string
@@ -141,6 +142,8 @@ const TestCard = ({
   const [testRequestResponses, setTestRequestResponses] = useState<string>('')
   const [showLogs, setShowLogs] = useState(false)
   const [fieldValues, setFieldValues] = useState<{ [key: string]: string }>({})
+  const [isLoading, setIsLoading] = useState(false)
+  const [isFinished, setIsFinished] = useState(false)
 
   const [documentDetails] = useState<{
     directory: string
@@ -175,6 +178,9 @@ const TestCard = ({
       const targetEndpointTLS = fieldValues['targetEndpointTLS'] || ''
       const outgoing_from = fieldValues['outgoing_from'] || ''
       try {
+        setIsLoading(true)
+        setIsFinished(false)
+        setCriteriaMet('')
         const response = await handleAPICall({
           testCaseNumber: test.id,
           sutSmtpAddress: hostname,
@@ -200,12 +206,18 @@ const TestCard = ({
           targetEndpointTLS,
           outgoing_from,
         })
+        setIsFinished(true)
         setCriteriaMet(response.criteriaMet)
         setTestRequestResponses(JSON.stringify(response.testRequestResponses, null, 2))
         console.log('Criteria met: ', response.criteriaMet)
         console.log('Test Request Responses:', response.testRequestResponses)
       } catch (error) {
         console.error('Failed to run test:', error)
+      } finally {
+        setIsLoading(false)
+        setTimeout(() => {
+          setIsFinished(false)
+        }, 100)
       }
     }
   }
@@ -372,9 +384,15 @@ const TestCard = ({
 
               <Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', gap: 1, pl: 2 }}>
                 {renderCriteriaMetIcon()}
-                <Button variant="contained" color="primary" onClick={handleRunTest}>
+                <LoadingButton
+                  loading={isLoading}
+                  done={isFinished}
+                  onClick={handleRunTest}
+                  variant="contained"
+                  color="primary"
+                >
                   RUN
-                </Button>
+                </LoadingButton>
                 <Button variant="contained" onClick={handleToggleDetail}>
                   MORE INFO
                 </Button>

diff --git a/src/components/direct/shared/LoadingButton.tsx b/src/components/direct/shared/LoadingButton.tsx
@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react'
+import { Button, CircularProgress } from '@mui/material'
+import CheckIcon from '@mui/icons-material/Check'
+import { ButtonProps } from '@mui/material/Button'
+
+interface LoadingButtonProps extends ButtonProps {
+  loading: boolean
+  done: boolean
+  children: ReactNode
+}
+
+const LoadingButton: React.FC<LoadingButtonProps> = ({ loading, done, children, ...props }) => {
+  return (
+    <Button {...props} disabled={loading || done}>
+      {done ? <CheckIcon /> : loading ? <CircularProgress size={24} /> : children}
+    </Button>
+  )
+}
+
+export default LoadingButton
diff --git a/src/components/direct/shared/Profile.tsx b/src/components/direct/shared/Profile.tsx
@@ -48,7 +48,7 @@ const Profile: React.FC<ProfileProps> = ({
             id="outlined-vendor-hostname"
             label="Vendor Hostname/IP"
             helperText="helper text"
-            defaultValue="test"
+            defaultValue=""
             required
             onChange={(e) => setHostname(e.target.value)}
           />
@@ -57,7 +57,7 @@ const Profile: React.FC<ProfileProps> = ({
             id="vendor-email"
             label="Vendor Direct Email Address"
             helperText="helper text"
-            defaultValue="test"
+            defaultValue=""
             required
             onChange={(e) => setEmail(e.target.value)}
           />
@@ -68,7 +68,7 @@ const Profile: React.FC<ProfileProps> = ({
             id="vendor-username"
             label="Vendor Username"
             helperText="helper text"
-            defaultValue="test"
+            defaultValue=""
             required
             onChange={(e) => setUsername(e.target.value)}
           />
@@ -77,7 +77,7 @@ const Profile: React.FC<ProfileProps> = ({
             id="vendor-password"
             label="Vendor Password"
             helperText="helper text"
-            defaultValue="test"
+            defaultValue=""
             required
             onChange={(e) => setPassword(e.target.value)}
           />