Merge pull request #24 from mhmaidi789/warningModal

Added warning screen when changing tests without saving

Author: JIB3377

src/components/Modals/Modal.jsx

@@ -96,6 +96,52 @@ const Modal = ({
     dispatchToGlobal(setTabIndex(2));
   };
 
+  // Warning that tests will not be saved while transitioning between test types
+  if (title === 'New Test') {
+    return (
+      <ReactModal
+      className={styles.modal}
+      isOpen={isModalOpen}
+      onRequestClose={closeModal}
+      contentLabel="Save?"
+      shouldCloseOnOverlayClick={true}
+      shouldCloseOnEsc={true}
+      ariaHideApp={false}
+      style={{
+        content: {
+          top: '20%',
+          left: isFileDirectoryOpen ? '22%' : '11%',
+        },
+        overlay: {
+          zIndex: 3,
+          left: isFileDirectoryOpen ? '276px' : '46px',
+          minWidth: isFileDirectoryOpen ? '600px' : '600px',
+          width: isFileDirectoryOpen ? 'calc(59.9% - 276px)':'calc(49.9% - 46px)',
+        },
+      }}>
+        <div id={styles.title}>
+          <p>{title}</p>
+        </div>
+
+        <div id={styles.body}>
+          <p id={styles.text}>
+            Do you want to start a new test? All unsaved changes
+            <br/>
+            will be lost.
+          </p>
+          <span id={styles.newTestButtons} style={{justifyContent: 'center', alignItems: 'center'}}>
+            <button id={styles.save} onClick={handleNewTest}>
+              {title}
+            </button>
+            <button id={styles.save} onClick={closeModal}>
+              Cancel
+            </button>
+          </span>
+        </div>
+      </ReactModal>
+      );
+  }
+
   return (
     <ReactModal
       className={styles.modal2}

src/components/TestMenu/AccTestMenu.tsx

@@ -60,7 +60,7 @@ const AccTestMenu = () => {
     <div id='test'>
       <div id={styles.testMenu}>
         <div id={styles.left}>
-          <button id={styles.newTestBtn} autoFocus onClick={openNewTestModal}>New Test +</button>
+          <button id={styles.newTestBtn} autoFocus onClick={openModal}>New Test +</button>
           <button onClick={fileHandle}>Preview</button>
           <button id={styles.example} onClick={openScriptModal} >
             Run Test

src/components/TestMenu/EndpointTestMenu.tsx

@@ -77,7 +77,7 @@ const EndpointTestMenu = () => {
     <div id='test'>
       <div id={styles.testMenu}>
         <div id={styles.left}>
-          <button onClick={openNewTestModal} autoFocus >New Test +</button>
+          <button onClick={openModal} autoFocus >New Test +</button>
           <button id={styles.preview} onClick={fileHandle}>
             Preview
           </button>

src/components/TestMenu/HooksTestMenu.tsx

@@ -67,7 +67,7 @@ const HooksTestMenu = () => {
     <div id='test'>
       <div id={styles.testMenu}>
         <div id={styles.left}>
-          <button type='button' autoFocus onClick={openNewTestModal}>
+          <button type='button' autoFocus onClick={openModal}>
             New Test +
           </button>
           <button id={styles.example} onClick={fileHandle}>

src/components/TestMenu/PuppeteerTestMenu.tsx

@@ -62,7 +62,7 @@ const PuppeteerTestMenu = () => {
     <div id='test'>
       <div id={styles.testMenu}>
         <div id={styles.left}>
-          <button type='button' autoFocus data-testid='puppeteerNewTestButton' onClick={openNewTestModal}>
+          <button type='button' autoFocus data-testid='puppeteerNewTestButton' onClick={openModal}>
             New Test +
           </button>
           <button onClick={fileHandle}>Preview</button>

src/components/TestMenu/ReactTestMenu.jsx

@@ -58,7 +58,7 @@ const ReactTestMenu = () => {
     <div id='test'>
       <div id={styles.testMenu}>
         <div id={styles.left}>
-          <button onClick={openNewTestModal} autoFocus >New Test +</button>
+          <button onClick={openModal} autoFocus >New Test +</button>
           <button onClick={fileHandle}>Preview</button>
           <button id={styles.example} onClick={openScriptModal}>
             Run Test

src/components/TestMenu/ReduxTestMenu.tsx

@@ -75,7 +75,7 @@ const ReduxTestMenu = () => {
     <div id='test'>
       <div id={styles.testMenu}>
         <div id={styles.left}>
-          <button onClick={openNewTestModal} autoFocus >New Test +</button>
+          <button onClick={openModal} autoFocus >New Test +</button>
           <button id={styles.preview} onClick={fileHandle}>
             Preview
           </button>