Added issues popup

frontend/package.json

@@ -15,6 +15,7 @@
     "html-react-parser": "^1.2.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-modal": "^3.14.3",
     "react-scripts": "4.0.3",
     "react-tsparticles": "^1.28.0",
     "react-webworker": "^2.1.0",

frontend/src/components/TableRow.js

@@ -1,6 +1,10 @@
+/* eslint-disable react/button-has-type */
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable no-return-assign */
 /* eslint-disable no-unused-vars */
 import parse from 'html-react-parser';
 import { useState, useEffect } from 'react';
+import Modal from 'react-modal';
 import {
   checkNavigatorProperties,
   checkWebWorker,
@@ -9,9 +13,35 @@ import {
 import { ReactComponent as XCircle } from '../images/xCircle.svg';
 import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
 
+const customStyles = {
+  content: {
+    top: '50%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    transform: 'translate(-50%, -50%)',
+  },
+};
+
+Modal.setAppElement('#root');
+
 const TableRow = ({ item }) => {
   const [workerData, setWorkerData] = useState('');
   const [issues, setIssues] = useState(false);
+  const [modalIsOpen, setIsOpen] = useState(false);
+
+  function openModal() {
+    if (issues) setIsOpen(true);
+  }
+
+  function afterOpenModal() {
+    // references are now sync'd and can be accessed.
+  }
+
+  function closeModal() {
+    setIsOpen(false);
+  }
 
   useEffect(() => {
     if (item.issues.filter(Boolean).length !== 0) {
@@ -27,27 +57,40 @@ const TableRow = ({ item }) => {
   }, [workerData]);
 
   return (
-    <tr className={issues ? 'issue' : ''}>
+    <>
-      <td>{item.key}</td>
+      <tr className={issues ? 'issue' : ''} onClick={openModal}>
-      <td>{item.value}</td>
+        <td>{item.key}</td>
-      <td>
+        <td>{item.value}</td>
-        {issues ? (
+        <td>
-          <XCircle className="circleButton" />
+          {issues ? (
-        ) : (
+            <>
-          // <>
+              <XCircle className="circleButton" />
-          //   {item.issues.map((ele, index) => (
+            </>
-          //     <div className="newline" key={index}>
+          ) : (
-          //       {ele}
+            <CheckCircle className="circleButton" />
-          //     </div>
+          )}
-          //   ))}
+        </td>
-          //   <div className="newline">
+      </tr>
-          //     {workerData && <>{`Did not match web worker (${workerData})`}</>}
+      <Modal
-          //   </div>
+        isOpen={modalIsOpen}
-          // </>
+        onAfterOpen={afterOpenModal}
-          <CheckCircle className="circleButton" />
+        onRequestClose={closeModal}
-        )}
+        style={customStyles}
-      </td>
+        contentLabel="Example Modal"
-    </tr>
+      >
+        <button onClick={closeModal}>close</button>
+        <>
+          {item.issues.map((ele, index) => (
+            <div className="newline" key={index}>
+              {ele}
+            </div>
+          ))}
+          <div className="newline">
+            {workerData && <>{`Did not match web worker (${workerData})`}</>}
+          </div>
+        </>
+      </Modal>
+    </>
   );
 };
 

frontend/src/styles/App.css

@@ -148,7 +148,7 @@ td {
   padding: 12px;
 }
 
-td:first-letter {
+td:nth-child(2):first-letter {
   text-transform: uppercase;
 }
 

frontend/yarn.lock

@@ -4714,6 +4714,11 @@ execa@^4.0.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz"
@@ -7006,7 +7011,7 @@ loglevel@^1.6.8:
   resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9049,6 +9054,21 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-lifecycles-compat@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-modal@^3.14.3:
+  version "3.14.3"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.14.3.tgz#7eb7c5ec85523e5843e2d4737cc17fc3f6aeb1c0"
+  integrity sha512-+C2KODVKyu20zHXPJxfOOcf571L1u/EpFlH+oS/3YDn8rgVE51QZuxuuIwabJ8ZFnOEHaD+r6XNjqwtxZnXO0g==
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.0"
+    warning "^4.0.3"
+
 react-property@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/react-property/-/react-property-1.0.1.tgz#4ae4211557d0a0ae050a71aa8ad288c074bea4e6"
@@ -11015,6 +11035,13 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"