Zeke download csv and print pdf (#1508)

* v0.1 for download csv on the projects page

* 1420 + 1393 - download projects as CSV and PDF
* add ProjectTableRow component
* dynamically load rules on init
* enable download CSVs on menu with CSVLink
* enable print PDF on menu with PdfPrint
* switch cursor to hand/pointer on menu
* update trash and copy icons to use SVG

* add ProjectRowTable tests for conditional state
* updated svg icons to use title for testing and a11y
* all tests need "await waitFor"

* fixed tests for tdm-engine, NavBar,
and Level0Page.test.jsx

* npm test now passes
* fixed tests for postPublicComment
* skipped tests for PublicComentPage

* cleanup some cruftiness
while debugging ResizeObserver error

client/package.json

@@ -7,7 +7,7 @@
     "precommit": "lint-staged",
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --env=jsdom",
     "test:ci": "react-scripts test --watchAll=false",
     "eject": "react-scripts eject",
     "lint": "eslint -c .eslintrc.json --ignore-path .eslintignore  \"**/*.{js,jsx}\"",
@@ -42,6 +42,7 @@
     "react": "^18.1.0",
     "react-aria-modal": "^5.0.0",
     "react-beautiful-dnd": "^13.1.1",
+    "react-csv": "^2.2.2",
     "react-dom": "^18.1.0",
     "react-gtm-module": "^2.0.11",
     "react-input-mask": "^2.0.4",
@@ -79,5 +80,13 @@
       "lint",
       "test"
     ]
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "axios": "axios/dist/node/axios.cjs"
+    }
+  },
+  "volta": {
+    "node": "18.18.2"
   }
 }

client/src/components/NavBar.test.js

@@ -1,15 +1,14 @@
 import React from "react";
-import { createRoot } from "react-dom/client";
+import { render, screen } from "@testing-library/react";
 import NavBar from "./NavBar";
 import { BrowserRouter as Router } from "react-router-dom";
+import "@testing-library/jest-dom";
 
 it("renders without crashing", () => {
-  const container = document.getElementById("root");
-  const root = createRoot(container);
-  root.render(
+  render(
     <Router>
       <NavBar setNavbarOpen={jest.fn} account={{ email: "some-email" }} />
     </Router>
   );
-  expect(root).toBeDefined();
+  expect(screen.getByText("About")).toBeInTheDocument();
 });

client/src/components/PdfPrint/PdfPrint.js

@@ -291,3 +291,5 @@ PdfPrint.propTypes = {
   loginId: PropTypes.number,
   dateModified: PropTypes.string || null
 };
+
+export default PdfPrint;

client/src/components/ProjectWizard/WizardPages/Level0Page.test.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import Level0Page from "./Level0Page";
 
 describe("Level0Page", () => {

client/src/components/Projects/ProjectContextMenu.js

@@ -1,17 +1,18 @@
 import React from "react";
 import { useState } from "react";
 import PropTypes from "prop-types";
+
+import { createUseStyles } from "react-jss";
 import {
   faPrint,
   faEye,
   faEyeSlash,
   faCamera,
+  faTrash,
+  faClone,
   faFileCsv
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import CopyIcon from "../../images/copy.png";
-import DeleteIcon from "../../images/trash.png";
-import { createUseStyles } from "react-jss";
 
 const useStyles = createUseStyles({
   list: {
@@ -21,20 +22,25 @@ const useStyles = createUseStyles({
     margin: 0,
     padding: 0
   },
-  listItem: { display: "flex", flexDirection: "row", padding: "0.5rem" },
+  listItem: {
+    display: "flex",
+    flexDirection: "row",
+    padding: "0.5rem",
+    cursor: "pointer"
+  },
   listItemIcon: { marginRight: "0.3rem" }
 });
 
 const ProjectContextMenu = ({
   project,
   handleCopyModalOpen,
   handleDeleteModalOpen,
-  handleDownloadCSV
+  handleDownloadCsv,
+  handlePrintPdf
 }) => {
   const [projectVisibility, SetProjectVisibility] = useState(
     project.dateHidden
   );
-
   const toggleProjectVisibility = () => {
     SetProjectVisibility(!projectVisibility);
   };
@@ -54,7 +60,7 @@ const ProjectContextMenu = ({
         </li>
       )}
 
-      <li className={classes.listItem}>
+      <li onClick={() => handlePrintPdf(project)} className={classes.listItem}>
         <FontAwesomeIcon
           icon={faPrint}
           className={classes.listItemIcon}
@@ -63,7 +69,7 @@ const ProjectContextMenu = ({
         Print
       </li>
       <li
-        onClick={() => handleDownloadCSV(project)}
+        onClick={() => handleDownloadCsv(project)}
         className={classes.listItem}
       >
         <FontAwesomeIcon
@@ -77,10 +83,10 @@ const ProjectContextMenu = ({
         onClick={() => handleCopyModalOpen(project)}
         className={classes.listItem}
       >
-        <img
-          src={CopyIcon}
-          alt={`Duplicate Project #${project.id} Icon`}
+        <FontAwesomeIcon
+          icon={faClone}
           className={classes.listItemIcon}
+          alt={`Duplicate Project #${project.id} Icon`}
         />
         Duplicate
       </li>
@@ -115,19 +121,19 @@ const ProjectContextMenu = ({
       >
         {project.dateTrashed ? (
           <>
-            <img
-              src={DeleteIcon}
-              alt={`Remove Project #${project.id} from Trash Icon`}
+            <FontAwesomeIcon
+              icon={faTrash}
               className={classes.listItemIcon}
+              alt={`Remove Project #${project.id} from Trash Icon`}
             />
             Remove from Trash
           </>
         ) : (
           <>
-            <img
-              src={DeleteIcon}
-              alt={`Move  Project #${project.id} to Trash Icon`}
+            <FontAwesomeIcon
+              icon={faTrash}
               className={classes.listItemIcon}
+              alt={`Move  Project #${project.id} to Trash Icon`}
             />
             Move to Trash
           </>
@@ -141,7 +147,8 @@ ProjectContextMenu.propTypes = {
   project: PropTypes.object,
   handleCopyModalOpen: PropTypes.func,
   handleDeleteModalOpen: PropTypes.func,
-  handleDownloadCSV: PropTypes.func
+  handleDownloadCsv: PropTypes.func,
+  handlePrintPdf: PropTypes.func
 };
 
 export default ProjectContextMenu;