Merge branch 'release-0.2.43'

.gitignore

@@ -239,9 +239,23 @@ node_modules
 # production
 /build
 
-# End of project-specific exclusions
+# End of node exclusions
+# Start of project-specific exclusions
+
+.env
+# Just in case developer forgets "." at start of .env file name
+env  
+# Just in case developer forgets to rename file to .env
+dotenv 
+
+# React .env SHOULD be in repo - it has no secrets, and is 
+# required for GitHub action to build react app.
+!/client/.env
+
 .eslintcache
 
+# End of project-specific exclusions
+
 # Yarn lockfile
 yarn.lock
 

Dockerfile

@@ -24,7 +24,7 @@ COPY ./server/app ./app
 COPY ./server/middleware ./middleware
 COPY ./server/server.js ./
 
-EXPOSE 500
+EXPOSE 5001
 ENTRYPOINT ["/usr/local/bin/node", "./server.js"]
 
 

client/.env

@@ -0,0 +1,2 @@
+# Use to simulate different environments (DEV, UAT, PROD)
+REACT_APP_ENV=DEV

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tdm-calculator-client",
-  "version": "0.2.42",
+  "version": "0.2.43",
   "private": true,
   "proxy": "http://localhost:5001",
   "scripts": {

client/src/App.js

@@ -154,8 +154,11 @@ const App = ({
                       <Roles />
                     </ProtectedRoute>
 
-                    <Route path="/faqs">
-                      <FaqView />
+                    <Route path="/faqs/:showChecklist?">
+                      <FaqView
+                        toggleChecklistModal={toggleChecklistModal}
+                        checklistModalOpen={checklistModalOpen}
+                      />
                     </Route>
 
                     <Route path="/publiccomment">

client/src/AppInsights.js

@@ -2,12 +2,23 @@
 import { ApplicationInsights } from "@microsoft/applicationinsights-web";
 import { ReactPlugin } from "@microsoft/applicationinsights-react-js";
 import { createBrowserHistory } from "history";
+import { Environment } from "./helpers/Environment";
 
 const browserHistory = createBrowserHistory({ basename: "" });
 const reactPlugin = new ReactPlugin();
+// The ApplicationInsights Connection String for PROD is not set up yet. Need to replace the PROD version below, once
+// the production Application Insights service is set up for production.
+const connectionString =
+  Environment === "DEV"
+    ? "InstrumentationKey=b04010da-8444-48d2-a8e1-fcc931a8330d;IngestionEndpoint=https://westus-0.in.applicationinsights.azure.com/;LiveEndpoint=https://westus.livediagnostics.monitor.azure.com/"
+    : Environment === "UAT"
+    ? "InstrumentationKey=eb334367-bbba-457f-b034-cf19b47da638;IngestionEndpoint=https://westus2-1.in.applicationinsights.azure.com/;LiveEndpoint=https://westus2.livediagnostics.monitor.azure.com/"
+    : "InstrumentationKey=eb334367-bbba-457f-b034-cf19b47da638;IngestionEndpoint=https://westus2-1.in.applicationinsights.azure.com/;LiveEndpoint=https://westus2.livediagnostics.monitor.azure.com/";
+
 const appInsights = new ApplicationInsights({
   config: {
-    instrumentationKey: "b04010da-8444-48d2-a8e1-fcc931a8330d",
+    connectionString: connectionString,
+    // instrumentationKey: "b04010da-8444-48d2-a8e1-fcc931a8330d",
     //instrumentationKey: "4965664a-5e02-4704-98a4-7c08c5d238ac",
     extensions: [reactPlugin],
     extensionConfig: {

client/src/components/About.js

@@ -81,6 +81,18 @@ const About = () => {
         <h3>Additional Resources</h3>
 
         <ul>
+          <li className={classes.linklist}>
+            <a
+              href="https://planning.lacity.org/odocument/c3c9b320-4431-49ff-99d2-15b479c06074/Revised_DRAFT_TDMProgramGuidelines_June2022.pdf/#page=48"
+              target="external"
+            >
+              Glossary
+              <FontAwesomeIcon
+                icon={faExternalLinkAlt}
+                className={classes.externalLinkIcon}
+              />
+            </a>
+          </li>
           <li className={classes.linklist}>
             <a
               href="https://planning.lacity.org/plans-policies/initiatives-policies/mobility"

client/src/components/Checklist/ChecklistModal.css

@@ -0,0 +1,5 @@
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+  transform: translate(48%, 48%) scale(0.1, 0) skew(35deg, 35deg);
+  transition: all 1500ms ease-out;
+}

client/src/components/Faq/ExpandButtons.jsx

@@ -0,0 +1,86 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { createUseStyles } from "react-jss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleUp } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
+
+const useStyles = createUseStyles({
+  expandCollapseFlexContainer: {
+    gridColumn: "h-end",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    margin: "20px 0px"
+  },
+  faqExpandIcons: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  expandAllButton: {
+    backgroundColor: "transparent",
+    border: "0",
+    cursor: "pointer",
+    textDecoration: "underline"
+  },
+  collapseAllButton: {
+    marginRight: "1em",
+    backgroundColor: "transparent",
+    border: "0",
+    cursor: "pointer",
+    textDecoration: "underline"
+  },
+  faqCarotIcon: {
+    fontSize: "14px",
+    margin: "-2px"
+  },
+  expandCollapseAll: {
+    display: "flex",
+    margin: "5px"
+  }
+});
+
+const ExpandButtons = props => {
+  const classes = useStyles();
+  const { expandAll, collapseAll } = props;
+
+  return (
+    <div className={classes.expandCollapseFlexContainer}>
+      <div className={classes.expandCollapseAll}>
+        <div className={classes.faqExpandIcons}>
+          <FontAwesomeIcon icon={faAngleUp} className={classes.faqCarotIcon} />
+          <FontAwesomeIcon
+            icon={faAngleDown}
+            className={classes.faqCarotIcon}
+          />
+        </div>
+        <button
+          className={classes.expandAllButton}
+          // data-testid="resetProject"
+          onClick={expandAll}
+        >
+          Expand All
+        </button>
+      </div>
+      <div className={classes.expandCollapseAll}>
+        <div className={classes.faqExpandIcons}>
+          <FontAwesomeIcon
+            icon={faAngleDown}
+            className={classes.faqCarotIcon}
+          />
+          <FontAwesomeIcon icon={faAngleUp} className={classes.faqCarotIcon} />
+        </div>
+        <button className={classes.collapseAllButton} onClick={collapseAll}>
+          Collapse All
+        </button>
+      </div>
+    </div>
+  );
+};
+
+ExpandButtons.propTypes = {
+  expandAll: PropTypes.func.isRequired,
+  collapseAll: PropTypes.func.isRequired
+};
+
+export default ExpandButtons;

client/src/components/Faq/Faq.js

@@ -1,11 +1,52 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
+import { createUseStyles } from "react-jss";
 import * as faqService from "../../services/faq.service";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faMinus } from "@fortawesome/free-solid-svg-icons";
 
 // want to make this component re-useable, so will check if admin
 // if admin, add/update/delete buttons show up
 // if not, only question and answer show up
-const Faq = ({ faq, admin }) => {
+
+const useStyles = createUseStyles({
+  collapseFlexContainer: {
+    gridColumn: "h-end",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingRight: "40px",
+    height: "45px"
+  },
+  expandFlexContainer: {
+    gridColumn: "h-end",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingLeft: "10px",
+    paddingRight: "40px",
+    marginTop: "20px",
+    height: "45px",
+    border: "2px solid #a6c439"
+  },
+  faqPlusMinusIcons: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  faqExpandIcon: {
+    display: "flex",
+    alignItems: "center",
+    fontSize: "25px"
+  }
+});
+
+const Faq = props => {
+  const { faq, admin, expandFaq, collapseFaq } = props;
+  const classes = useStyles();
   const [updateFaq, setUpdateFaq] = useState(faq);
   const [toggleUpdate, setToggleUpdate] = useState(false);
 
@@ -29,15 +70,25 @@ const Faq = ({ faq, admin }) => {
   };
 
   const onDelete = () => {
-    faqService.del(faq.faqId).catch(error => {
+    faqService.del(faq.id).catch(error => {
       console.error(JSON.stringify(error, null, 2));
     });
   };
 
+  const handleExpandFaq = () => {
+    // setExpanded(true);
+    expandFaq(faq);
+  };
+
+  const handleCollapseFaq = () => {
+    // setExpanded(false);
+    collapseFaq(faq);
+  };
+
   return (
-    <li>
+    <div>
       {admin ? (
-        <div>
+        <div classes={classes.faqContent}>
           {toggleUpdate ? (
             <div>
               <input
@@ -61,8 +112,12 @@ const Faq = ({ faq, admin }) => {
             </div>
           ) : (
             <div>
-              <p>{updateFaq.question}</p>
-              <p>{updateFaq.answer}</p>
+              <div
+                dangerouslySetInnerHTML={{ __html: `${updateFaq.question}` }}
+              ></div>
+              <div
+                dangerouslySetInnerHTML={{ __html: `${updateFaq.answer}` }}
+              ></div>
               <div>
                 <button onClick={onToggle}>Update</button>
                 <button onClick={onDelete}>Delete</button>
@@ -72,20 +127,56 @@ const Faq = ({ faq, admin }) => {
         </div>
       ) : (
         <div>
-          <p>{faq.question}</p>
-          <p>{faq.answer}</p>
+          <div
+            className={
+              faq.expand
+                ? classes.expandFlexContainer
+                : classes.collapseFlexContainer
+            }
+          >
+            <h3
+              style={{ fontWeight: "bold" }}
+              dangerouslySetInnerHTML={{ __html: `${updateFaq.question}` }}
+            ></h3>
+            <div className={classes.faqExpandIcon}>
+              {faq.expand ? (
+                <FontAwesomeIcon
+                  style={{ cursor: "pointer" }}
+                  icon={faMinus}
+                  onClick={() => handleCollapseFaq(faq)}
+                />
+              ) : (
+                <FontAwesomeIcon
+                  style={{ cursor: "pointer" }}
+                  icon={faPlus}
+                  onClick={() => handleExpandFaq(faq)}
+                />
+              )}
+            </div>
+          </div>
+          {faq.expand ? (
+            <p
+              style={{ marginTop: "1em", fontWeight: "bold" }}
+              dangerouslySetInnerHTML={{ __html: `${updateFaq.answer}` }}
+            ></p>
+          ) : (
+            ""
+          )}
         </div>
       )}
-    </li>
+    </div>
   );
 };
 Faq.propTypes = {
   faq: PropTypes.shape({
-    faqId: PropTypes.number.isRequired,
+    id: PropTypes.number.isRequired,
     question: PropTypes.string.isRequired,
-    answer: PropTypes.string.isRequired
+    answer: PropTypes.string.isRequired,
+    expand: PropTypes.bool.isRequired
   }),
-  admin: PropTypes.bool.isRequired
+  admin: PropTypes.bool.isRequired,
+  expandFaq: PropTypes.func.isRequired,
+  collapseFaq: PropTypes.func.isRequired
 };
 
 export default Faq;