From 6f302833b8422caeb2ec32ca4e5b2705ae3fbcad Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Sun, 10 Nov 2024 06:50:11 -0800
Subject: [PATCH 1/4] Added task variable UI

---
 .../CustomComponents/MultiSelect.js           |   4 +-
 .../src/components/Form/EditForm/FlowEdit.js  |  27 +-
 .../src/components/Form/EditForm/FormEdit.js  |   1 +
 .../components/Modals/TaskVariableModal.js    | 299 ++++++++++++++++++
 4 files changed, 325 insertions(+), 6 deletions(-)
 create mode 100644 forms-flow-web/src/components/Modals/TaskVariableModal.js

diff --git a/forms-flow-web/src/components/CustomComponents/MultiSelect.js b/forms-flow-web/src/components/CustomComponents/MultiSelect.js
index 6a2e610272..b9140d2f85 100644
--- a/forms-flow-web/src/components/CustomComponents/MultiSelect.js
+++ b/forms-flow-web/src/components/CustomComponents/MultiSelect.js
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { ListGroup } from "react-bootstrap";
-import { CustomPill } from "@formsflow/components";
+import { CustomPill,DeleteIcon } from "@formsflow/components";
 import PropTypes from 'prop-types';
 
 const RoleSelector = ({ allRoles = [], selectedRoles = [], setSelectedRoles }) => { 
@@ -62,7 +62,7 @@ const RoleSelector = ({ allRoles = [], selectedRoles = [], setSelectedRoles }) =
           <CustomPill
             key={role + index}
             label={role}
-            icon={true}
+            icon={<DeleteIcon color="#253DF4" />}
             bg="primary"
             onClick={() => removeRole(role)}
           />
diff --git a/forms-flow-web/src/components/Form/EditForm/FlowEdit.js b/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
index 55c35b7f9a..413bc9c126 100644
--- a/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
+++ b/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
@@ -9,6 +9,7 @@ import {
   HistoryIcon,
   ConfirmModal,
   HistoryModal,
+  CurlyBracketsIcon
 } from "@formsflow/components";
 import { Card } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
@@ -30,9 +31,10 @@ import {
   validateProcess,
 } from "../../../helper/processHelper.js";
 import PropTypes from "prop-types";
+import TaskVariableModal from "../../Modals/TaskVariableModal.js";
 
 const FlowEdit = forwardRef(
-  ({ isPublished = false, CategoryType, setIsProcessDetailsLoading }, ref) => {
+  ({ isPublished = false, CategoryType, setIsProcessDetailsLoading, form }, ref) => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
     const bpmnRef = useRef();
@@ -45,6 +47,8 @@ const FlowEdit = forwardRef(
       useSelector((state) => state.process);
     const processHistory = processHistoryData.processHistory || [];
     const handleDiscardModal = () => setShowDiscardModal(!showDiscardModal);
+    const [showTaskVarModal, setShowTaskVarModal] = useState(false);
+    const [taskVariable ,setTaskVariable] = useState([]);
 
     const saveFlow = async () => {
       try {
@@ -129,7 +133,12 @@ const FlowEdit = forwardRef(
           });
       }
     };
-
+    const handlePreviewAndVariables = () => {
+      setShowTaskVarModal(true);
+    };
+    const CloseTaskVarModal = () => {
+      setShowTaskVarModal(false);
+    };
     return (
       <>
         <Card>
@@ -168,8 +177,9 @@ const FlowEdit = forwardRef(
                     variant="secondary"
                     size="md"
                     className="mx-2"
-                    label={t("Preview & Variables")}
-                    onClick={() => console.log("handlePreviewAndVariables")}
+                    icon={<CurlyBracketsIcon />}
+                    label={t("Variables")}
+                    onClick={() => handlePreviewAndVariables()}
                     dataTestid="preview-and-variables-testid"
                     ariaLabel={t("{Preview and Variables Button}")}
                   />
@@ -218,6 +228,15 @@ const FlowEdit = forwardRef(
           revertBtnAction={revertProcessBtnAction}
           historyCount={processHistoryData.totalCount}
         />
+        {showTaskVarModal && (
+          <TaskVariableModal
+            form={form}
+            showTaskVarModal={showTaskVarModal}
+            onClose={CloseTaskVarModal}
+            setTaskVariable={setTaskVariable}
+            taskVariable={taskVariable}
+          />
+        )}
       </>
     );
   }
diff --git a/forms-flow-web/src/components/Form/EditForm/FormEdit.js b/forms-flow-web/src/components/Form/EditForm/FormEdit.js
index 8122611f80..d0242d037e 100644
--- a/forms-flow-web/src/components/Form/EditForm/FormEdit.js
+++ b/forms-flow-web/src/components/Form/EditForm/FormEdit.js
@@ -1011,6 +1011,7 @@ const EditComponent = () => {
               CategoryType={CategoryType}
               setIsProcessDetailsLoading={setIsProcessDetailsLoading}
               isPublished={isPublished}
+              form={form}
               />}
             </div>
             <button
diff --git a/forms-flow-web/src/components/Modals/TaskVariableModal.js b/forms-flow-web/src/components/Modals/TaskVariableModal.js
new file mode 100644
index 0000000000..bc1e52fd99
--- /dev/null
+++ b/forms-flow-web/src/components/Modals/TaskVariableModal.js
@@ -0,0 +1,299 @@
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import { Modal } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import {
+  CloseIcon,
+  CustomInfo,
+  CustomButton,
+  CustomPill,
+  FormInput,
+} from "@formsflow/components";
+import { Form } from "@aot-technologies/formio-react";
+
+//TBD in case of Bundle form display
+const PillList = React.memo(({ alternativeLabels, onRemove }) => {
+  const { t } = useTranslation();
+  return (
+    <div className="pill-container">
+      {Object.entries(alternativeLabels).length > 0 ? (
+        Object.entries(alternativeLabels).map(
+          ([key, { altVariable, labelOfComponent }], index) => (
+            <CustomPill
+              key={index}
+              label={altVariable || labelOfComponent}
+              icon={<CloseIcon color="#253DF4" data-testid="pill-remove-icon" />}
+              bg="#E7E9FE"
+              onClick={() => onRemove(key)}
+              secondaryLabel={key}
+            />
+          )
+        )
+      ) : (
+        <p className="select-text">{t("Pick variables below")}</p>
+      )}
+    </div>
+  );
+});
+
+const FormComponent = React.memo(
+  ({ form, 
+    alternativeLabels, 
+    setAlternativeLabels,
+    selectedComponent,
+    setSelectedComponent
+ }) => {
+    const [showElement, setShowElement] = useState(false);
+    const formRef = useRef(null);
+    const { t } = useTranslation();
+    
+    const handleClick = useCallback(
+      (e) => {
+        setShowElement(true);
+        const formioComponent = e.target.closest(".formio-component");
+        const highlightedElement = document.querySelector(".formio-hilighted");
+
+        if (highlightedElement) {
+          highlightedElement.classList.remove("formio-hilighted");
+        }
+
+        if (formioComponent) {
+          formioComponent.classList.add("formio-hilighted");
+
+          let classes = Array.from(formioComponent.classList);
+          classes = classes.filter((cls) =>
+            cls.startsWith("formio-component-")
+          );
+          const typeClass = classes[classes.length - 2];
+          const keyClass = classes[classes.length - 1];
+          const labelElement = formioComponent.querySelector("label");
+          let label = "";
+          if (labelElement) {
+            label = Array.from(labelElement.childNodes)
+              .filter(
+                (node) =>
+                  !(
+                    node.nodeType === Node.ELEMENT_NODE &&
+                    node.classList.contains("sr-only")
+                  )
+              )
+              .map((node) => node.textContent.trim())
+              .join(" ");
+          }
+
+          const componentKey = keyClass?.split("-").pop();
+          const componentType = typeClass?.split("-").pop();
+          setSelectedComponent({
+            key: componentKey,
+            type: componentType,
+            label,
+            altVariable: alternativeLabels[componentKey]?.altVariable || "",
+          });
+        } else {
+          setSelectedComponent({
+            key: null,
+            type: "",
+            label: "",
+            altVariable: "",
+          });
+        }
+      },
+      [alternativeLabels]
+    );
+
+    useEffect(() => {
+      const formHilighter = document.querySelector(".form-hilighter");
+
+      formHilighter?.addEventListener("click", handleClick);
+
+      return () => {
+        formHilighter?.removeEventListener("click", handleClick);
+      };
+    }, [handleClick]);
+
+    const handleAddAlternative = () => {
+      if (selectedComponent.key) {
+        setAlternativeLabels((prev) => ({
+          ...prev,
+          [selectedComponent.key]: {
+            altVariable: selectedComponent.altVariable,
+            labelOfComponent: selectedComponent.label,
+          },
+        }));
+      }
+      setShowElement(false);
+    };
+
+    return (
+      <div className="d-flex">
+        <div className="flex-grow-1 form-hilighter form-field-container">
+          <Form
+            form={form}
+            options={{
+              viewAsHtml: true,
+              readOnly: true,
+            }}
+            formReady={(e) => {
+              formRef.current = e;
+            }}
+          />
+        </div>
+
+        <div className="field-details-container">
+          {showElement ? (
+            <div className="details-section">
+              <div className="d-flex flex-column">
+                {t("Type:")}
+                <span className="text-bold"> {selectedComponent.type}</span>
+              </div>
+              <div className="d-flex flex-column">
+                {t("Variable:")}
+                <span className="text-bold">{selectedComponent.key}</span>
+                {/* TBD in case of Bundle  */}
+              </div>
+              <FormInput
+                type="text"
+                ariaLabel="Add alternative label input"
+                dataTestid="Add-alternative-input"
+                label="Add Alternative Label"
+                value={selectedComponent.altVariable}
+                onChange={(e) =>
+                  setSelectedComponent((prev) => ({
+                    ...prev,
+                    altVariable: e.target.value,
+                  }))
+                }
+              />
+              <CustomButton
+                dataTestid="Add-alternative-btn"
+                ariaLabel="Add alternative label button"
+                size="sm"
+                label={
+                  alternativeLabels[selectedComponent.key]?.altVariable
+                    ? t("Update Variable")
+                    : t("Add Variable")
+                }
+                onClick={handleAddAlternative}
+                disabled={selectedComponent.
+                    altVariable === alternativeLabels[selectedComponent.key]?.altVariable} //TBD need to create a variable to compare values 
+              />
+            </div>
+          ) : (
+            <p className="select-text">{t("Select a form field on the left")}</p>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+const TaskVariableModal = React.memo(
+  ({ showTaskVarModal, onClose, form, setTaskVariable, taskVariable }) => {
+    const { t } = useTranslation();
+    const [alternativeLabels, setAlternativeLabels] = useState(() => {
+      const initialLabels = {};
+      taskVariable.forEach(({ key, label }) => {
+        initialLabels[key] = { altVariable: label, labelOfComponent: label };
+      });
+      return initialLabels;
+    });
+    const [selectedComponent, setSelectedComponent] = useState({
+        key: null,
+        type: "",
+        label: "",
+        altVariable: "",
+      });
+    const removeSelectedVariable = useCallback((key) => {
+        setSelectedComponent((prev) => ({
+            ...prev,
+            altVariable: "",
+          }));
+      setAlternativeLabels((prev) => {
+        const newLabels = { ...prev };
+        delete newLabels[key];
+        return newLabels;
+      });
+      
+    }, []);
+
+    const handleClose = () => onClose();
+
+    const handleSaveTaskVariable = () => {
+      const taskVariables = Object.entries(alternativeLabels).map(
+        ([key, { altVariable, labelOfComponent }]) => ({
+          key: key,
+          label: altVariable || labelOfComponent, // If altVariable exists, use it, otherwise it will be  labelOfComponent
+        })
+      );
+
+      setTaskVariable(taskVariables);
+      onClose();
+    };
+
+    return (
+      <Modal
+        show={showTaskVarModal}
+        onHide={handleClose}
+        className="task-variable-modal"
+        size="lg"
+        centered={true}
+      >
+        <Modal.Header>
+          <Modal.Title>
+            {t("Variables for Flow, Submissions, and Tasks")}
+          </Modal.Title>
+          <div className="d-flex align-items-center">
+            <CloseIcon width="16.5" height="16.5" onClick={handleClose} />
+          </div>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="info-pill-container">
+            <CustomInfo
+              heading="Note"
+              content="To use variables in the flow, as well as sorting by them in 
+        the submissions and tasks you need to specify which variables you want to import from the layout. Variables get imported into the system at the time of the submission, if the variables that are needed 
+        are not selected prior to the form submission THEY WILL NOT BE AVAILABLE in the flow, submissions, and tasks."
+            />
+            <div>
+              <label className="selected-var-text">{t("Selected Variables")}</label>
+              <PillList
+                alternativeLabels={alternativeLabels}
+                onRemove={removeSelectedVariable}
+              />
+            </div>
+          </div>
+          <div className="variable-container">
+            <FormComponent
+              form={form}
+              alternativeLabels={alternativeLabels}
+              setAlternativeLabels={setAlternativeLabels}
+              setSelectedComponent={setSelectedComponent}
+              selectedComponent={selectedComponent}
+            />
+          </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <CustomButton
+            variant="primary"
+            size="md"
+            className=""
+            label={t("Save")}
+            ariaLabel="save task variable btn"
+            dataTestid="save-task-variable-btn"
+            onClick={handleSaveTaskVariable}
+          />
+          <CustomButton
+            variant="secondary"
+            size="md"
+            className=""
+            label={t("Cancel")}
+            ariaLabel="Cancel btn"
+            dataTestid="Cancel-btn"
+            onClick={handleClose}
+          />
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+);
+
+export default TaskVariableModal;

From 5f8c645236d1ccc63cb9ffa667fdba76f2cf27fe Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Sun, 10 Nov 2024 08:12:43 -0800
Subject: [PATCH 2/4] Added prop-types

---
 .../components/Modals/TaskVariableModal.js    | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/forms-flow-web/src/components/Modals/TaskVariableModal.js b/forms-flow-web/src/components/Modals/TaskVariableModal.js
index bc1e52fd99..5e6f1ac9ab 100644
--- a/forms-flow-web/src/components/Modals/TaskVariableModal.js
+++ b/forms-flow-web/src/components/Modals/TaskVariableModal.js
@@ -9,6 +9,8 @@ import {
   FormInput,
 } from "@formsflow/components";
 import { Form } from "@aot-technologies/formio-react";
+import PropTypes from "prop-types";
+
 
 //TBD in case of Bundle form display
 const PillList = React.memo(({ alternativeLabels, onRemove }) => {
@@ -19,7 +21,7 @@ const PillList = React.memo(({ alternativeLabels, onRemove }) => {
         Object.entries(alternativeLabels).map(
           ([key, { altVariable, labelOfComponent }], index) => (
             <CustomPill
-              key={index}
+              key={key}
               label={altVariable || labelOfComponent}
               icon={<CloseIcon color="#253DF4" data-testid="pill-remove-icon" />}
               bg="#E7E9FE"
@@ -34,7 +36,11 @@ const PillList = React.memo(({ alternativeLabels, onRemove }) => {
     </div>
   );
 });
-
+// PropTypes for PillList
+PillList.propTypes = {
+  alternativeLabels: PropTypes.object.isRequired,
+  onRemove: PropTypes.func.isRequired,
+};
 const FormComponent = React.memo(
   ({ form, 
     alternativeLabels, 
@@ -142,11 +148,11 @@ const FormComponent = React.memo(
           {showElement ? (
             <div className="details-section">
               <div className="d-flex flex-column">
-                {t("Type:")}
+                <span>{t("Type")}:</span>
                 <span className="text-bold"> {selectedComponent.type}</span>
               </div>
               <div className="d-flex flex-column">
-                {t("Variable:")}
+                <span>{t("Variable")}:</span>
                 <span className="text-bold">{selectedComponent.key}</span>
                 {/* TBD in case of Bundle  */}
               </div>
@@ -173,6 +179,7 @@ const FormComponent = React.memo(
                     : t("Add Variable")
                 }
                 onClick={handleAddAlternative}
+                className="w-75"
                 disabled={selectedComponent.
                     altVariable === alternativeLabels[selectedComponent.key]?.altVariable} //TBD need to create a variable to compare values 
               />
@@ -186,6 +193,14 @@ const FormComponent = React.memo(
   }
 );
 
+// PropTypes for FormComponent
+FormComponent.propTypes = {
+  form: PropTypes.object.isRequired,
+  alternativeLabels: PropTypes.object.isRequired,
+  setAlternativeLabels: PropTypes.func.isRequired,
+  selectedComponent: PropTypes.object.isRequired,
+  setSelectedComponent: PropTypes.func.isRequired,
+};
 const TaskVariableModal = React.memo(
   ({ showTaskVarModal, onClose, form, setTaskVariable, taskVariable }) => {
     const { t } = useTranslation();
@@ -296,4 +311,12 @@ const TaskVariableModal = React.memo(
   }
 );
 
+// PropTypes for TaskVariableModal
+TaskVariableModal.propTypes = {
+  showTaskVarModal: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  form: PropTypes.object.isRequired,
+  setTaskVariable: PropTypes.func.isRequired,
+  taskVariable: PropTypes.array.isRequired,
+};
 export default TaskVariableModal;

From cdd08a80052ed37edb71d38429ce32f9e32e4b72 Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Mon, 11 Nov 2024 03:25:55 -0800
Subject: [PATCH 3/4] Api integrated

---
 .../src/components/Form/EditForm/FlowEdit.js  |  3 -
 .../components/Modals/TaskVariableModal.js    | 86 +++++++++++++------
 2 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/forms-flow-web/src/components/Form/EditForm/FlowEdit.js b/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
index 09bd46d197..5e1501299e 100644
--- a/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
+++ b/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
@@ -43,7 +43,6 @@ const FlowEdit = forwardRef(({ isPublished = false, CategoryType,form }, ref) =>
   const [showHistoryModal, setShowHistoryModal] = useState(false);
   const [isReverted, setIsReverted] = useState(false);
   const [showTaskVarModal, setShowTaskVarModal] = useState(false);
-    const [taskVariable ,setTaskVariable] = useState([]);
   /* --------- fetching all process history when click history button --------- */
   const {
     data: { data: historiesData } = {}, // response data destructured
@@ -237,8 +236,6 @@ const FlowEdit = forwardRef(({ isPublished = false, CategoryType,form }, ref) =>
           form={form}
           showTaskVarModal={showTaskVarModal}
           onClose={CloseTaskVarModal}
-          setTaskVariable={setTaskVariable}
-          taskVariable={taskVariable}
         />
         )}
     </>
diff --git a/forms-flow-web/src/components/Modals/TaskVariableModal.js b/forms-flow-web/src/components/Modals/TaskVariableModal.js
index 5e6f1ac9ab..e25e82110e 100644
--- a/forms-flow-web/src/components/Modals/TaskVariableModal.js
+++ b/forms-flow-web/src/components/Modals/TaskVariableModal.js
@@ -10,7 +10,11 @@ import {
 } from "@formsflow/components";
 import { Form } from "@aot-technologies/formio-react";
 import PropTypes from "prop-types";
-
+import { useDispatch ,useSelector } from "react-redux";
+import {
+  saveFormProcessMapperPut,
+} from "../../apiManager/services/processServices";
+import utils from "@aot-technologies/formiojs/lib/utils";
 
 //TBD in case of Bundle form display
 const PillList = React.memo(({ alternativeLabels, onRemove }) => {
@@ -19,7 +23,7 @@ const PillList = React.memo(({ alternativeLabels, onRemove }) => {
     <div className="pill-container">
       {Object.entries(alternativeLabels).length > 0 ? (
         Object.entries(alternativeLabels).map(
-          ([key, { altVariable, labelOfComponent }], index) => (
+          ([key, { altVariable, labelOfComponent }]) => (
             <CustomPill
               key={key}
               label={altVariable || labelOfComponent}
@@ -52,9 +56,10 @@ const FormComponent = React.memo(
     const formRef = useRef(null);
     const { t } = useTranslation();
     
+    
     const handleClick = useCallback(
       (e) => {
-        setShowElement(true);
+        
         const formioComponent = e.target.closest(".formio-component");
         const highlightedElement = document.querySelector(".formio-hilighted");
 
@@ -63,14 +68,16 @@ const FormComponent = React.memo(
         }
 
         if (formioComponent) {
+          setShowElement(true);
           formioComponent.classList.add("formio-hilighted");
-
+          
           let classes = Array.from(formioComponent.classList);
           classes = classes.filter((cls) =>
             cls.startsWith("formio-component-")
           );
           const typeClass = classes[classes.length - 2];
           const keyClass = classes[classes.length - 1];
+         
           const labelElement = formioComponent.querySelector("label");
           let label = "";
           if (labelElement) {
@@ -88,6 +95,7 @@ const FormComponent = React.memo(
 
           const componentKey = keyClass?.split("-").pop();
           const componentType = typeClass?.split("-").pop();
+          // const currentComponent = utils.getComponent(form.components,componentKey);
           setSelectedComponent({
             key: componentKey,
             type: componentType,
@@ -123,9 +131,14 @@ const FormComponent = React.memo(
           [selectedComponent.key]: {
             altVariable: selectedComponent.altVariable,
             labelOfComponent: selectedComponent.label,
+            key:selectedComponent.key
           },
         }));
-      }
+        const highlightedElement = document.querySelector(".formio-hilighted");
+        if (highlightedElement) {
+          highlightedElement.classList.remove("formio-hilighted");
+        }
+      }     
       setShowElement(false);
     };
 
@@ -174,7 +187,7 @@ const FormComponent = React.memo(
                 ariaLabel="Add alternative label button"
                 size="sm"
                 label={
-                  alternativeLabels[selectedComponent.key]?.altVariable
+                  alternativeLabels[selectedComponent.key]
                     ? t("Update Variable")
                     : t("Add Variable")
                 }
@@ -202,15 +215,28 @@ FormComponent.propTypes = {
   setSelectedComponent: PropTypes.func.isRequired,
 };
 const TaskVariableModal = React.memo(
-  ({ showTaskVarModal, onClose, form, setTaskVariable, taskVariable }) => {
+  ({ showTaskVarModal, onClose, form }) => {
     const { t } = useTranslation();
-    const [alternativeLabels, setAlternativeLabels] = useState(() => {
-      const initialLabels = {};
-      taskVariable.forEach(({ key, label }) => {
-        initialLabels[key] = { altVariable: label, labelOfComponent: label };
-      });
-      return initialLabels;
-    });
+    const dispatch = useDispatch();
+    const formProcessList = useSelector(
+      (state) => state.process.formProcessList
+    );
+    
+    const [alternativeLabels, setAlternativeLabels] = useState({});
+
+    useEffect(() => {
+      if (formProcessList?.taskVariables?.length > 0) {
+        const updatedLabels = {};
+        formProcessList.taskVariables.forEach(({ key, label }) => {
+          updatedLabels[key] = {
+            key,
+            altVariable: label, // Use label from taskVariables as altVariable
+            labelOfComponent: label, // Set the same label for labelOfComponent
+          };
+        });
+        setAlternativeLabels(updatedLabels);
+      }
+    }, [formProcessList]);
     const [selectedComponent, setSelectedComponent] = useState({
         key: null,
         type: "",
@@ -232,18 +258,24 @@ const TaskVariableModal = React.memo(
 
     const handleClose = () => onClose();
 
-    const handleSaveTaskVariable = () => {
-      const taskVariables = Object.entries(alternativeLabels).map(
-        ([key, { altVariable, labelOfComponent }]) => ({
-          key: key,
-          label: altVariable || labelOfComponent, // If altVariable exists, use it, otherwise it will be  labelOfComponent
+    const handleSaveTaskVariable = async() => {
+      const currentTaskVariables = Object.values(alternativeLabels).map(
+        (i) => ({
+          key: i.key,
+          label: i.altVariable || i.labelOfComponent,    // If altVariable exists, use it, otherwise it will be  labelOfComponent
         })
       );
-
-      setTaskVariable(taskVariables);
-      onClose();
+      const mapper = {
+        formId: formProcessList.formId,
+        id: formProcessList.id,
+        parentFormId: formProcessList.parentFormId,
+        taskVariables:currentTaskVariables,
+        formName: formProcessList.formName
+      };
+       await dispatch(saveFormProcessMapperPut({ mapper}));
+       
+       onClose();
     };
-
     return (
       <Modal
         show={showTaskVarModal}
@@ -265,8 +297,8 @@ const TaskVariableModal = React.memo(
             <CustomInfo
               heading="Note"
               content="To use variables in the flow, as well as sorting by them in 
-        the submissions and tasks you need to specify which variables you want to import from the layout. Variables get imported into the system at the time of the submission, if the variables that are needed 
-        are not selected prior to the form submission THEY WILL NOT BE AVAILABLE in the flow, submissions, and tasks."
+              the submissions and tasks you need to specify which variables you want to import from the layout. Variables get imported into the system at the time of the submission, if the variables that are needed 
+             are not selected prior to the form submission THEY WILL NOT BE AVAILABLE in the flow, submissions, and tasks."
             />
             <div>
               <label className="selected-var-text">{t("Selected Variables")}</label>
@@ -315,8 +347,6 @@ const TaskVariableModal = React.memo(
 TaskVariableModal.propTypes = {
   showTaskVarModal: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
-  form: PropTypes.object.isRequired,
-  setTaskVariable: PropTypes.func.isRequired,
-  taskVariable: PropTypes.array.isRequired,
+  form: PropTypes.object.isRequired
 };
 export default TaskVariableModal;

From be619f7ded839da6964c66a2e91aa95e9f28252d Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Mon, 11 Nov 2024 04:37:43 -0800
Subject: [PATCH 4/4] sonar error fixed

---
 forms-flow-web/src/components/Form/EditForm/FlowEdit.js   | 1 +
 forms-flow-web/src/components/Modals/TaskVariableModal.js | 2 +-
 forms-flow-web/src/components/Modeler/DecisionTable.js    | 4 ++--
 forms-flow-web/src/components/Modeler/SubFlowTable.js     | 6 +++---
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/forms-flow-web/src/components/Form/EditForm/FlowEdit.js b/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
index 5e1501299e..df9402b1c9 100644
--- a/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
+++ b/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
@@ -247,6 +247,7 @@ FlowEdit.propTypes = {
     WORKFLOW: PropTypes.string.isRequired,
   }).isRequired,
   isPublished: PropTypes.bool.isRequired,
+  form: PropTypes.object.isRequired,
 };
 
 export default FlowEdit;
diff --git a/forms-flow-web/src/components/Modals/TaskVariableModal.js b/forms-flow-web/src/components/Modals/TaskVariableModal.js
index e25e82110e..18d6a9e03e 100644
--- a/forms-flow-web/src/components/Modals/TaskVariableModal.js
+++ b/forms-flow-web/src/components/Modals/TaskVariableModal.js
@@ -14,7 +14,7 @@ import { useDispatch ,useSelector } from "react-redux";
 import {
   saveFormProcessMapperPut,
 } from "../../apiManager/services/processServices";
-import utils from "@aot-technologies/formiojs/lib/utils";
+
 
 //TBD in case of Bundle form display
 const PillList = React.memo(({ alternativeLabels, onRemove }) => {
diff --git a/forms-flow-web/src/components/Modeler/DecisionTable.js b/forms-flow-web/src/components/Modeler/DecisionTable.js
index e7671734b8..3920bc63a8 100644
--- a/forms-flow-web/src/components/Modeler/DecisionTable.js
+++ b/forms-flow-web/src/components/Modeler/DecisionTable.js
@@ -29,7 +29,7 @@ const DecisionTable = React.memo(() => {
   const [currentDmnSort, setCurrentDmnSort] = useState({
     activeKey: "name",
     name: { sortOrder: "asc" },
-    id: { sortOrder: "asc" },
+    processKey: { sortOrder: "asc" },
     modified: { sortOrder: "asc" },
     status: { sortOrder: "asc" },
   });
@@ -175,7 +175,7 @@ const contents = [
                   </th>
                   <th className="w-20" scope="col">
                     <SortableHeader
-                      columnKey="id"
+                      columnKey="processKey"
                       title="ID"
                       currentSort={currentDmnSort}
                       handleSort={handleSort}
diff --git a/forms-flow-web/src/components/Modeler/SubFlowTable.js b/forms-flow-web/src/components/Modeler/SubFlowTable.js
index 309b962169..91083e724f 100644
--- a/forms-flow-web/src/components/Modeler/SubFlowTable.js
+++ b/forms-flow-web/src/components/Modeler/SubFlowTable.js
@@ -34,7 +34,7 @@ const SubFlow = React.memo(() => {
   const [currentBpmnSort, setCurrentBpmnSort] = useState({
     activeKey: "name",
     name: { sortOrder: "asc" },
-    id: { sortOrder: "asc" },
+    processKey: { sortOrder: "asc" },
     modified: { sortOrder: "asc" },
     status: { sortOrder: "asc" },
   });
@@ -193,8 +193,8 @@ const SubFlow = React.memo(() => {
                   </th>
                   <th className="w-20" scope="col">
                     <SortableHeader
-                      columnKey="id"
-                      title="id"
+                      columnKey="processKey"
+                      title="ID"
                       currentSort={currentBpmnSort}
                       handleSort={handleSort}
                     />