Feature/fwf 3661 create task variable UI

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)}
           />

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";
@@ -29,8 +30,9 @@ import {
   validateProcess,
 } from "../../../helper/processHelper.js";
 import PropTypes from "prop-types";
+import TaskVariableModal from "../../Modals/TaskVariableModal.js";
 
-const FlowEdit = forwardRef(({ isPublished = false, CategoryType }, ref) => {
+const FlowEdit = forwardRef(({ isPublished = false, CategoryType,form }, ref) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const bpmnRef = useRef();
@@ -40,6 +42,7 @@ const FlowEdit = forwardRef(({ isPublished = false, CategoryType }, ref) => {
   const [showDiscardModal, setShowDiscardModal] = useState(false);
   const [showHistoryModal, setShowHistoryModal] = useState(false);
   const [isReverted, setIsReverted] = useState(false);
+  const [showTaskVarModal, setShowTaskVarModal] = useState(false);
   /* --------- fetching all process history when click history button --------- */
   const {
     data: { data: historiesData } = {}, // response data destructured
@@ -124,7 +127,12 @@ const FlowEdit = forwardRef(({ isPublished = false, CategoryType }, ref) => {
   useImperativeHandle(ref, () => ({
     saveFlow,
   }));
-
+  const handlePreviewAndVariables = () => {
+    setShowTaskVarModal(true);
+  };
+  const CloseTaskVarModal = () => {
+    setShowTaskVarModal(false);
+  };
 
   return (
     <>
@@ -163,8 +171,9 @@ const FlowEdit = forwardRef(({ isPublished = false, CategoryType }, ref) => {
                   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}")}
                 />
@@ -222,6 +231,13 @@ const FlowEdit = forwardRef(({ isPublished = false, CategoryType }, ref) => {
         historyCount={historiesData?.totalCount || 0}
         currentVersionId={processData.id}
       />
+      {showTaskVarModal && (
+        <TaskVariableModal
+          form={form}
+          showTaskVarModal={showTaskVarModal}
+          onClose={CloseTaskVarModal}
+        />
+        )}
     </>
   );
 });
@@ -231,6 +247,7 @@ FlowEdit.propTypes = {
     WORKFLOW: PropTypes.string.isRequired,
   }).isRequired,
   isPublished: PropTypes.bool.isRequired,
+  form: PropTypes.object.isRequired,
 };
 
 export default FlowEdit;

forms-flow-web/src/components/Form/EditForm/FormEdit.js

@@ -1017,6 +1017,7 @@ const EditComponent = () => {
               ref={flowRef}
               CategoryType={CategoryType}
               isPublished={isPublished}
+              form={form}
               />}
             </div>
             <button