Merge branch 'release-0.2.52'

client/package.json

@@ -54,6 +54,7 @@
     "react-router-dom": "^6.18.0",
     "react-select": "^5.2.2",
     "react-string-replace": "^1.1.0",
+    "react-tiny-popover": "^8.1.2",
     "react-to-print": "^2.14.12",
     "react-tooltip": "^5.22.0",
     "reactjs-popup": "^2.0.6",

client/src/App.js

@@ -33,6 +33,7 @@ import FaqView from "./components/Faq/FaqView";
 import ResetPassword from "./components/Authorization/ResetPassword";
 import ForgotPassword from "./components/Authorization/ForgotPassword";
 import Feedback from "./components/Feedback/FeedbackPage";
+import SubmitSnapshotPage from "./components/SubmitSnapshot/SubmitSnapshotPage";
 import ErrorPage from "./components/ErrorPage";
 import Offline from "./components/Offline";
 import Logout from "./components/Authorization/Logout";
@@ -144,6 +145,14 @@ const App = () => {
             path="/feedback"
             element={<Feedback contentContainerRef={contentContainerRef} />}
           />
+          <Route
+            path="/submit"
+            element={
+              <RequireAuth>
+                <SubmitSnapshotPage contentContainerRef={contentContainerRef} />
+              </RequireAuth>
+            }
+          />
           <Route path="*" element={<ErrorPage />} />
         </Route>
       </Route>

client/src/components/Admin/RuleViewContainer.jsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import RuleView from "./RuleView";
+import UniversalSelect from "../UI/UniversalSelect";
+import { createUseStyles } from "react-jss";
+
+const useStyles = createUseStyles({
+  select: {
+    width: "275px"
+  }
+});
+
+const RuleViewContainer = props => {
+  const { rules } = props;
+  const [ruleId, setRuleId] = useState(rules[0].id);
+  const rule = rules.filter(rule => rule.id === ruleId)[0];
+  const classes = useStyles();
+
+  const handleSetRule = e => {
+    const ruleId = Number(e.target.value);
+    setRuleId(ruleId);
+  };
+
+  return (
+    <React.Fragment>
+      <UniversalSelect
+        className={classes.select}
+        options={rules.map(rule => ({
+          value: rule.id.toString(),
+          label: rule.code
+        }))}
+        value={ruleId}
+        onChange={handleSetRule}
+        name={"Rule"}
+      />
+
+      <RuleView rule={rule} rules={rules} setRuleId={setRuleId} />
+    </React.Fragment>
+  );
+};
+RuleViewContainer.propTypes = {
+  rules: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number,
+      // filter: PropTypes.string.isRequired,
+      // length: PropTypes.number.isRequired,
+      code: PropTypes.string.isRequired
+    })
+  )
+};
+
+export default RuleViewContainer;

client/src/components/Authorization/Login.js → client/src/components/Authorization/Login.jsx

@@ -181,7 +181,7 @@ const Login = () => {
                   >
                     <Button
                       color="colorDefault"
-                      variant="text"
+                      variant="outlined"
                       onClick={() => {
                         navigate("/calculation/1/0");
                       }}

client/src/components/Authorization/UpdateAccount.js → client/src/components/Authorization/UpdateAccount.jsx

@@ -24,8 +24,8 @@ const UpdateAccount = props => {
   const classes = useStyles();
   const params = useParams();
   const initialValues = {
-    firstName: account.firstName || "",
-    lastName: account.lastName || "",
+    firstName: account?.firstName || "",
+    lastName: account?.lastName || "",
     email: params.email || ""
   };
 

client/src/components/Button/Button.js → client/src/components/Button/Button.jsx

@@ -21,6 +21,9 @@ const useStyles = createUseStyles(theme => ({
     backgroundColor: ({ color }) => theme[color],
     borderColor: "rgba(0, 0, 0, .05)", //lightest grey
     boxShadow: "rgba(0, 46, 109, 0.3) 1px 2px 3px",
+    "&[disabled]:hover": {
+      boxShadow: "rgba(0, 46, 109, 0.3) 1px 2px 3px"
+    },
     "&:hover": {
       boxShadow: "rgba(0, 46, 109, 0.6) 2px 4px 6px" // Heavier box shadow on hover
     }

client/src/components/Button/EditToggleButton.js → client/src/components/Button/EditToggleButton.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Button from "../Button/Button";
+import Button from "./Button";
 import { MdEdit } from "react-icons/md";
 
 const EditToggleButton = ({ id, onClick, editMode }) => {

client/src/components/Button/SaveButton.js → client/src/components/Button/SaveButton.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Button from "../Button/Button";
+import Button from "./Button";
 
 const SaveButton = ({ id, onClick, isDisabled, isDisplayed, color }) => {
   return (

client/src/components/Button/SubmitButton.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Button from "./Button";
+
+const SubmitButton = ({ id, onClick, isDisabled, isDisplayed, color }) => {
+  return (
+    <>
+      <Button
+        type="input"
+        color={color}
+        onClick={onClick}
+        id={id}
+        data-testid={id}
+        disabled={isDisabled}
+        isDisplayed={isDisplayed}
+      >
+        SUBMIT
+      </Button>
+    </>
+  );
+};
+
+SubmitButton.propTypes = {
+  children: PropTypes.object,
+  onClick: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  color: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isDisplayed: PropTypes.bool.isRequired
+};
+
+export default SubmitButton;

client/src/components/Checklist/ChecklistModal.js → client/src/components/Checklist/ChecklistModal.jsx

@@ -3,7 +3,7 @@ import { createUseStyles } from "react-jss";
 import Modal from "react-modal";
 import PropTypes from "prop-types";
 import ChecklistContent from "./ChecklistContent";
-import { FaX } from "react-icons/fa6";
+import { MdClose } from "react-icons/md";
 
 import "./ChecklistModal.css";
 
@@ -68,8 +68,7 @@ const ChecklistModal = ({ checklistModalOpen, toggleChecklistModal }) => {
       className={classes.modal}
     >
       <span className={classes.close} onClick={toggleChecklistModal}>
-        {/* <FontAwesomeIcon icon={faX} /> */}
-        <FaX />
+        <MdClose />
       </span>
       <ChecklistContent />
     </Modal>

client/src/components/Faq/Answer.jsx

@@ -3,6 +3,7 @@ import Quill from "../UI/Quill";
 import { createUseStyles } from "react-jss";
 import PropTypes from "prop-types";
 import { Interweave } from "interweave";
+import { MdLaunch } from "react-icons/md";
 
 const useStyles = createUseStyles(theme => ({
   answerContainer: {
@@ -22,6 +23,11 @@ const useStyles = createUseStyles(theme => ({
     "&:hover": {
       textDecoration: admin => admin && "underline"
     }
+  },
+  externalLinkIcon: {
+    fontSize: "14px",
+    padding: " 0 0.4em",
+    color: "#00F"
   }
 }));
 
@@ -78,7 +84,7 @@ export const Answer = ({
           style={{ display: "flex" }}
         >
           <div className={classes.answerText}>
-            <Interweave content={answer} />
+            <Interweave transform={TransformExternalLink} content={answer} />
           </div>
         </div>
       )}
@@ -94,3 +100,17 @@ Answer.propTypes = {
   setIsEditAnswer: PropTypes.func,
   onSetFaq: PropTypes.func
 };
+
+function TransformExternalLink(node, children) {
+  const classes = useStyles();
+  if (node.tagName == "A" && !node.getAttribute("href").startsWith("/")) {
+    return (
+      <span>
+        <a href={node.getAttribute("href")} target="external">
+          {children}
+          <MdLaunch className={classes.externalLinkIcon} />
+        </a>
+      </span>
+    );
+  }
+}

client/src/components/Faq/DeleteFaqModal.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import ModalDialog from "../UI/AriaModal/ModalDialog";
 import Button from "../Button/Button";
-import WarningIcon from "../../images/warning-icon.png";
+import { MdWarning } from "react-icons/md";
 import { createUseStyles } from "react-jss";
 import { MdDelete } from "react-icons/md";
 
@@ -39,11 +39,11 @@ const DeleteFaqModal = ({ isModalOpen, closeModal, handleDelete, isFaq }) => {
         {` Delete ${type}`}
       </div>
       <div className={classes.modalSubHeader}>
-        <img src={WarningIcon} className={classes.warningIcon} alt="Warning" />
+        <MdWarning className={classes.warningIcon} alt="Warning" />
         {`Are you sure you want to permanently delete the ${type}?`}
       </div>
       <div className={classes.buttonFlexBox}>
-        <Button onClick={closeModal} variant="text" id="cancelButton">
+        <Button onClick={closeModal} variant="outlined" id="cancelButton">
           Cancel
         </Button>
         <Button onClick={handleDelete} variant="contained" color={"colorError"}>

client/src/components/Faq/ExpandButtons.jsx

@@ -1,34 +1,35 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { createUseStyles } from "react-jss";
-import { MdExpandLess, MdExpandMore } from "react-icons/md";
+import { MdUnfoldLess, MdUnfoldMore } from "react-icons/md";
 
 const useStyles = createUseStyles({
   expandCollapseFlexContainer: {
-    gridColumn: "h-end",
     display: "flex",
     flexDirection: "row",
+    alignItems: "center",
     justifyContent: "flex-end",
-    margin: "20px 0px"
+    margin: "10px 0px"
   },
   faqExpandIcons: {
     display: "flex",
     flexDirection: "column"
   },
   faqCarotIcon: {
-    fontSize: "large",
-    margin: "-2px"
+    fontSize: "large"
   },
   expandCollapseAll: {
-    display: "flex",
-    margin: "5px"
+    display: "flex"
   },
   toggleButton: {
-    marginRight: "1em",
+    marginRight: "0",
+    marginTop: "4px",
+    marginBottom: "4px",
     backgroundColor: "transparent",
     border: "0",
     cursor: "pointer",
-    textDecoration: "underline"
+    textDecoration: "underline",
+    display: "flex"
   }
 });
 
@@ -38,21 +39,21 @@ const ExpandButtons = ({ toggleExpandCollapse }) => {
   return (
     <div className={classes.expandCollapseFlexContainer}>
       <div className={classes.expandCollapseAll}>
-        <div className={classes.faqExpandIcons}>
-          <MdExpandMore className={classes.faqCarotIcon} />
-        </div>
         <button
           className={classes.toggleButton}
           onClick={() => toggleExpandCollapse(true)}
         >
-          Expand All
+          <MdUnfoldMore className={classes.faqCarotIcon} />
+          <span style={{ marginLeft: "0.2rem", marginBottom: ".1rem" }}>
+            Expand All
+          </span>
         </button>
-        <MdExpandLess className={classes.faqCarotIcon} />
         <button
           className={classes.toggleButton}
           onClick={() => toggleExpandCollapse()}
         >
-          Collapse All
+          <MdUnfoldLess className={classes.faqCarotIcon} />
+          <span style={{ marginLeft: "0.1rem" }}>Collapse All</span>
         </button>
       </div>
     </div>

client/src/components/Faq/FaqButtonContainer.jsx

@@ -51,12 +51,12 @@ export const FaqButtonContainer = ({
       )}
       <div className={classes.faqIcon}>
         {faq.expand ? (
-          <MdExpandMore
+          <MdExpandLess
             style={{ cursor: "pointer" }}
             onClick={() => collapseFaq(faq)}
           />
         ) : (
-          <MdExpandLess
+          <MdExpandMore
             style={{ cursor: "pointer" }}
             onClick={() => expandFaq(faq)}
           />