Merge branch 'master' into accessLens

Author: Dieu Huynh

src/components/EditorView/EditorView.jsx

@@ -21,11 +21,14 @@ const Editor = () => {
     colorDecorators: true,
     wrappingIndent: 'indent',
     automaticLayout: true,
+    codeLens: true,
+    // Added specific fontfamily and fontsize to address Windows curson misalignment issue
+    fontFamily: 'courier new',
+    fontSize: 12,
   };
 
   const editorDidMount = () => {
     editor.setTheme('light-dark');
-    // editor.focus();
   };
 
   const updatafile = (newValue, e) => {

src/components/Modals/ExportFileModal.module.scss

@@ -242,13 +242,12 @@ pre {
   flex: 1;
   flex-direction: column;
   padding: 12px 15px;
-  margin-top: -4px;
+  // margin-top: -4px;
   margin-bottom: 8px;
   overflow: auto;
-  // width: 97.5%;
   font-size: 85%;
   line-height: 1.45;
   background-color: #0a1f40;
   color: white;
-  // border-radius: 6px;
+
 }

src/components/Modals/Modal.jsx

@@ -142,15 +142,15 @@ const Modal = ({
     );
   }
 
-
+// EndPointGuide component definition, conditionally rendered
   const EndPointGuide = () => {
     // endpoint guide only exists when user is in endpoint testing
     if (script.endPointGuide) {
       const array = [];
       for (let step in script.endPointGuide) {
         array.push(<div id={styles.endPointGuide}>{script.endPointGuide[step]}{'\n'}</div>)
-      }
-      // return accordion element 
+      };
+      // return accordion element
       return (
         <Accordion hidden={false}>
           <AccordionSummary
@@ -167,11 +167,52 @@ const Modal = ({
         </Accordion>
       );
     }
-
     // return anything to not render accordion
-    return true;
+    return null;
   };
 
+  // ReactDependencies component definition, conditionally rendered
+  const ReactDependencies = () => {
+    if (title === 'hooks' || title === 'react') {
+      return (
+        <Accordion hidden={false}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+          id={styles.accordionSummary}
+        >
+          3. Important React Babel Configuration
+      </AccordionSummary>
+        <AccordionDetails id={styles.configGuide}>
+         <div id={styles.accordionDiv}>
+           <div> Ensure that your project contains the following file: </div>
+            <pre>
+              <div className="code-wrapper">
+                <code>
+                  babel.config.js
+                </code>
+              </div>
+            </pre>
+         </div>
+          <div>
+            and includes the following code:
+            <br />
+          </div>
+          <pre>
+            <div className="code-wrapper">
+              <code>
+               {`module.exports = {presets: ['@babel/preset-env', '@babel/preset-react']}`}
+              </code>
+            </div>
+          </pre>
+        </AccordionDetails>
+      </Accordion>
+      )
+    }
+    return null;
+  }
+
   return (
     <ReactModal
       className={styles.modal2}
@@ -274,6 +315,8 @@ const Modal = ({
                   </div>
                 </AccordionDetails>
               </Accordion>
+              {/* Create config file only if title is react or hook */}
+              <ReactDependencies />
             </div>
           </AccordionDetails>
         </Accordion>