[MI-3317]: Added validations to forms and enhancements

webapp/src/containers/components/modals/actionModal.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
@@ -16,11 +16,11 @@ type Props = {
     configIndex: number;
 }
 
-function ActionModal({visible, setVisible, config, configIndex}: Props) {
+const ActionModal = ({visible, setVisible, config, configIndex}: Props) => {
     const actionsLength = config[configIndex]?.actions?.length ?? 0;
     const attachmentMessageLength = config[configIndex]?.attachmentMessage?.length ?? 0;
 
-    const [show, setShow] = useState(visible);
+    const [show, setShow] = useState(false);
 
     useEffect(() => {
         setVisible(visible);
@@ -31,7 +31,8 @@ function ActionModal({visible, setVisible, config, configIndex}: Props) {
     };
     return (
         <Modal
-            show={visible}
+            className='actionModal'
+            show={show}
             onHide={handleClose}
         >
             <Modal.Header closeButton={false}>
@@ -64,7 +65,7 @@ function ActionModal({visible, setVisible, config, configIndex}: Props) {
                             </Form>
                             <Table
                                 striped={true}
-                                className='listTable'
+                                className='list-table'
                             >
                                 <thead>
                                     <tr>
@@ -94,7 +95,7 @@ function ActionModal({visible, setVisible, config, configIndex}: Props) {
                         </div>
                     ) : (<p>{'No Action configured'}</p>)
                     }
-                </>) : (<p>{'No Attachment message or Action configured'}</p>)}
+                </>) : (<p>{'No Attachment message or action configured'}</p>)}
             </Modal.Body>
 
             <Modal.Footer>
@@ -105,6 +106,6 @@ function ActionModal({visible, setVisible, config, configIndex}: Props) {
             </Modal.Footer>
         </Modal>
     );
-}
+};
 
 export default ActionModal;