fix: Implement functionality for admin to edit tooltips

client/babel.config.cjs

@@ -1,7 +1,7 @@
-    module.exports = {
-      presets: [
-        '@babel/preset-env',
-        '@babel/preset-react' // Add this if you are using React
-      ],
-      plugins: ["@babel/plugin-transform-modules-commonjs"]
-    };
+module.exports = {
+  presets: [
+    "@babel/preset-env",
+    "@babel/preset-react" // Add this if you are using React
+  ],
+  plugins: ["@babel/plugin-transform-modules-commonjs"]
+};

client/jest.config.cjs

@@ -86,8 +86,9 @@ module.exports = {
   // ],
 
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
-  "moduleNameMapper": {
-    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+  moduleNameMapper: {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/__mocks__/fileMock.js",
     "\\.(css|less)$": "identity-obj-proxy"
   },
 
@@ -173,9 +174,9 @@ module.exports = {
 
   // A map from regular expressions to paths to transformers
   transform: {
-    '^.+\\.(js|jsx)$': 'babel-jest',
+    "^.+\\.(js|jsx)$": "babel-jest"
     //'^.+\\.(ts|tsx)$': 'ts-jest' // If using TypeScript
-  },
+  }
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   // transformIgnorePatterns: [
   //   "\\\\node_modules\\\\",

client/src/components/ProjectWizard/Common/RuleLabel.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { MdLink } from "react-icons/md";
 import { createUseStyles, useTheme } from "react-jss";
 import clsx from "clsx";
-import { MdInfo } from "react-icons/md";
+import { MdInfo, MdAddCircle } from "react-icons/md";
 
 const useStyles = createUseStyles(theme => ({
   labelWrapper: {
@@ -20,7 +20,13 @@ const useStyles = createUseStyles(theme => ({
   labelWrapperWithoutDesc: {
     flexGrow: "1",
     flexShrink: "1",
-    flexBasis: "50%"
+    flexBasis: "50%",
+    "&:hover $iconContainer": {
+      visibility: "visible"
+    },
+    "&:hover": {
+      cursor: "pointer"
+    }
   },
   tooltipLabel: {
     flexGrow: "1",
@@ -81,7 +87,8 @@ const RuleLabel = ({
   link,
   name,
   setShowDescription,
-  showDescription
+  showDescription,
+  setIsEditing
 }) => {
   const theme = useTheme();
   const classes = useStyles(theme);
@@ -93,6 +100,14 @@ const RuleLabel = ({
     setShowDescription(prev => !prev);
   };
 
+  const addDescriptionHandler = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (setIsEditing) {
+      setIsEditing(prev => !prev);
+    }
+  };
+
   // if (code && code.startsWith("UNITS_HABIT")) {
   //   return (
   //     <div
@@ -191,7 +206,15 @@ const RuleLabel = ({
         >
           <MdInfo className={classes.infoIcon} />
         </span>
-      ) : null}
+      ) : (
+        <span
+          className={clsx("fa-layers fa-fw", classes.iconContainer)}
+          style={showDescription ? { visibility: "visible" } : {}}
+          onClick={addDescriptionHandler}
+        >
+          <MdAddCircle className={classes.infoIcon} />
+        </span>
+      )}
     </div>
   );
 };
@@ -205,6 +228,7 @@ RuleLabel.propTypes = {
   required: PropTypes.bool,
   link: PropTypes.string,
   setShowDescription: PropTypes.func,
-  showDescription: PropTypes.bool
+  showDescription: PropTypes.bool,
+  setIsEditing: PropTypes.func
 };
 export default RuleLabel;

client/src/components/ProjectWizard/RuleInput/RuleInput.jsx

@@ -166,6 +166,14 @@ const RuleInput = ({
   const [showValidationErrors, setShowValidationErrors] = useState(false);
   const [showDescription, setShowDescription] = useState(false);
   const [inputError, setInputError] = useState(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [localDescription, setLocalDescription] = useState(description);
+
+  // Add callback to handle description updates
+  const handleDescriptionUpdate = newDescription => {
+    setLocalDescription(newDescription);
+    setIsEditing(false); // Close editing mode
+  };
 
   const onInputChange = e => {
     setShowValidationErrors(true);
@@ -191,14 +199,15 @@ const RuleInput = ({
           >
             <RuleLabel
               id={id}
-              description={description}
+              description={localDescription}
               code={code}
               display={display}
               required={required}
               link={link}
               name={name}
               setShowDescription={setShowDescription}
               showDescription={showDescription}
+              setIsEditing={setIsEditing}
             />
 
             <div>
@@ -238,13 +247,14 @@ const RuleInput = ({
           <div className={clsx(classes.rowContainer)}>
             <RuleLabel
               id={id}
-              description={description}
+              description={localDescription}
               code={code}
               display={display}
               required={required}
               link={link}
               name={name}
               setShowDescription={setShowDescription}
+              setIsEditing={setIsEditing}
             />
             <input
               type="checkbox"
@@ -266,13 +276,14 @@ const RuleInput = ({
           >
             <RuleLabel
               id={id}
-              description={description}
+              description={localDescription}
               code={code}
               display={display}
               required={required}
               link={link}
               name={name}
               setShowDescription={setShowDescription}
+              setIsEditing={setIsEditing}
             />
             <select
               autoFocus={autoFocus}
@@ -299,14 +310,15 @@ const RuleInput = ({
           >
             <RuleLabel
               id={id}
-              description={description}
+              description={localDescription}
               code={code}
               display={display}
               required={required}
               link={link}
               name={name}
               setShowDescription={setShowDescription}
               showDescription={showDescription}
+              setIsEditing={setIsEditing}
             />
 
             {dataType === "string" ? (
@@ -370,13 +382,14 @@ const RuleInput = ({
           <div className={clsx(classes.rowContainer, classes.miscFieldWrapper)}>
             <RuleLabel
               id={id}
-              description={description}
+              description={localDescription}
               code={code}
               display={display}
               required={required}
               link={link}
               name={name}
               setShowDescription={setShowDescription}
+              setIsEditing={setIsEditing}
             />
             <div className={classes.codeWrapper} name={code} id={code} />
             <div className={classes.unitsCaption}>{units}</div>
@@ -398,10 +411,13 @@ const RuleInput = ({
           </div>
         </div>
       ) : null}
-      {showDescription && description ? (
+      {(showDescription && localDescription) || isEditing ? (
         <AccordionToolTip
-          description={description}
+          description={localDescription || ""}
           setShowDescription={setShowDescription}
+          id={id}
+          forceEditMode={isEditing}
+          onEditDescription={handleDescriptionUpdate}
         />
       ) : null}
     </React.Fragment>

client/src/components/ProjectWizard/RuleStrategy/RuleStrategy.jsx

@@ -142,6 +142,8 @@ const RuleStrategy = ({
     useState(false);
   const [inputEvent, setInputEvent] = useState({});
   const [previousValue, setPreviousValue] = useState(value);
+  const [localDescription, setLocalDescription] = useState(description);
+  const [isEditing, setIsEditing] = useState(false);
 
   const closeAffordableEdgeCaseModal = () => {
     // Need to modify event to change value back to previous value and
@@ -159,6 +161,11 @@ const RuleStrategy = ({
     setAffordableEdgeCaseModalOpen(false);
   };
 
+  const handleDescriptionUpdate = newDescription => {
+    setLocalDescription(newDescription);
+    setIsEditing(false);
+  };
+
   const onInputChangeIfAllowed = e => {
     // If user changes affordable housing strategy to 100% for a Level 1
     // project, we want to prompt them to confirm the change before
@@ -223,12 +230,13 @@ const RuleStrategy = ({
         <div className={clsx(classes.rowContainer, disabledStyle)}>
           <RuleLabel
             id={id}
-            description={description}
+            description={localDescription}
             code={code}
             display={display}
             link={link}
             name={name}
             setShowDescription={setShowDescription}
+            setIsEditing={setIsEditing}
           />
           <div>
             <input
@@ -253,12 +261,13 @@ const RuleStrategy = ({
         <div className={clsx(classes.rowContainer, disabledStyle)}>
           <RuleLabel
             id={id}
-            description={description}
+            description={localDescription}
             code={code}
             display={display}
             link={link}
             name={name}
             setShowDescription={setShowDescription}
+            setIsEditing={setIsEditing}
           />
           <div>
             <input
@@ -279,12 +288,13 @@ const RuleStrategy = ({
         <div className={clsx(classes.rowContainer, disabledStyle)}>
           <RuleLabel
             id={id}
-            description={description}
+            description={localDescription}
             code={code}
             display={display}
             link={link}
             name={name}
             setShowDescription={setShowDescription}
+            setIsEditing={setIsEditing}
           />
           <div className={classes.choiceSelectContainer}>
             <UniversalSelect
@@ -307,12 +317,13 @@ const RuleStrategy = ({
         <div className={clsx(classes.rowContainer, disabledStyle)}>
           <RuleLabel
             id={id}
-            description={description}
+            description={localDescription}
             code={code}
             display={display}
             link={link}
             name={name}
             setShowDescription={setShowDescription}
+            setIsEditing={setIsEditing}
           />
           <input
             autoFocus={autoFocus}
@@ -334,12 +345,13 @@ const RuleStrategy = ({
         <div className={clsx(classes.rowContainer, disabledStyle)}>
           <RuleLabel
             id={id}
-            description={description}
+            description={localDescription}
             code={code}
             display={display}
             link={link}
             name={name}
             setShowDescription={setShowDescription}
+            setIsEditing={setIsEditing}
           />
           <div className={classes.allElse} name={code} />
           {possibleAndEarnedPointsContainers()}
@@ -370,11 +382,14 @@ const RuleStrategy = ({
           </div>
         </div>
       ) : null}
-      {showDescription && description ? (
+      {(showDescription && localDescription) || isEditing ? (
         <AccordionToolTip
-          description={description}
+          description={localDescription || ""}
           setShowDescription={setShowDescription}
           disabledStyle={disabledStyle}
+          id={id}
+          forceEditMode={isEditing}
+          onEditDescription={handleDescriptionUpdate}
         />
       ) : null}