Feature/fwf 3620 History part implemented

forms-flow-web/src/actions/actionConstants.js

@@ -83,6 +83,7 @@ const ACTION_CONSTANTS = {
   IS_FORM_PROCESS_STATUS_LOAD_ERROR: "IS_FORM_PROCESS_STATUS_LOAD_ERROR",
   FORM_PROCESS_LIST: "FORM_PROCESS_LIST",
   WORKFLOW_ASSOCIATION_CHANGED: "WORKFLOW_ASSOCIATION_CHANGED",
+  PROCESS_HISTORY: "PROCESS_HISTORY",
   //Application
   LIST_APPLICATIONS: "LIST_APPLICATIONS",
   LIST_APPLICATIONS_OF_FORM: "LIST_APPLICATIONS_OF_FORM",

forms-flow-web/src/actions/processActions.js

@@ -177,6 +177,12 @@ export const setIsPublicDiagram = (data) => (dispatch) => {
   });
 };
 
+export const setProcessHistories = (historyData) => (dispatch) => {
+  dispatch({
+    type: ACTION_CONSTANTS.PROCESS_HISTORY,
+    payload:historyData,
+  });
+};
 export const setSubflowCount = (data) => (dispatch) => {
   dispatch({
     type: ACTION_CONSTANTS.SET_SUBFLOW_COUNT,

forms-flow-web/src/apiManager/endpoints/index.js

@@ -34,6 +34,7 @@ const API = {
   PUBLISH: `${WEB_BASE_URL}/form/<mapper_id>/publish`,
   UN_PUBLISH: `${WEB_BASE_URL}/form/<mapper_id>/unpublish`,
   FORM_HISTORY: `${WEB_BASE_URL}/form/form-history`,
+  PROCESS_HISTORY: `${WEB_BASE_URL}/process`,
   LANG_UPDATE: `${WEB_BASE_URL}/user/locale`,
   FORM_PROCESSES: `${WEB_BASE_URL}/form/formid`,
   GET_BPM_TASKS: `${BPM_BASE_URL_EXT}/v1/task`,

forms-flow-web/src/apiManager/services/FormServices.js

@@ -25,8 +25,12 @@ export const formUpdate = (form_id,formData) => {
   return RequestService.httpPUTRequest(`${API.FORM_DESIGN}/${form_id}`, formData);
 };
 
-export const getFormHistory = (form_id) => {
-  return RequestService.httpGETRequest(`${API.FORM_HISTORY}/${form_id}`);
+export const getFormHistory = (form_id, page = null, limit = null) => {
+  let url = `${API.FORM_HISTORY}/${form_id}`;
+  if (page !== null && limit !== null) {
+    url += `?pageNo=${page}&limit=${limit}`;
+  }
+  return RequestService.httpGETRequest(url);
 };
 
 

forms-flow-web/src/apiManager/services/processServices.js

@@ -546,3 +546,16 @@ export const deleteFormProcessMapper = (mapperId, ...rest) => {
       });
   };
 };
+
+export const getProcessHistory = (process_key, page = null, limit = null) => {
+  let url = `${API.PROCESS_HISTORY}/${process_key}/versions`;
+  if (page !== null && limit !== null) {
+    url += `?pageNo=${page}&limit=${limit}`;
+  }
+  return RequestService.httpGETRequest(url);
+};
+
+export const fetchRevertingProcessData = (process_Id) => {
+  let url = `${API.PROCESS_HISTORY}/${process_Id}`;
+  return RequestService.httpGETRequest(url);
+};

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

@@ -10,17 +10,15 @@ import { toast } from 'react-toastify';
 import { createXMLFromModeler, validateProcessNames, compareXML } from '../../../helper/processHelper.js';
 import { ERROR_LINTING_CLASSNAME } from '../../Modeler/constants/bpmnModelerConstants.js';
 
-const FlowEdit = forwardRef((_, ref) => {
+const FlowEdit = forwardRef(({ handleHistory, CategoryType }, ref) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const bpmnRef = useRef();
   const processData = useSelector((state) => state.process?.processData);
   const [lintErrors, setLintErrors] = useState([]);
-  const [historyModalShow, setHistoryModalShow] = useState(false);
   const [savingFlow, setSavingFlow] = useState(false);
   const [showDiscardModal, setShowDiscardModal] = useState(false);
   // handle history modal
-  const handleHistoryModal = () => setHistoryModalShow(!historyModalShow);
   const handleHanldeDisacardModal = () => setShowDiscardModal(!showDiscardModal);
   //validate any erros in bpmn lint
   const validateBpmnLintErrors = () => {
@@ -120,7 +118,7 @@ const FlowEdit = forwardRef((_, ref) => {
                 size="md"
                 icon={<HistoryIcon />}
                 label={t("History")}
-                onClick={handleHistoryModal}
+                onClick={() => handleHistory(CategoryType.WORKFLOW)}
                 dataTestid="flow-history-button-testid"
                 ariaLabel={t("Flow History Button")}
               />

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

@@ -14,6 +14,7 @@ import {
   HistoryIcon,
   PreviewIcon,
   FormBuilderModal,
+  HistoryModal,
 } from "@formsflow/components";
 import { RESOURCE_BUNDLES_DATA } from "../../../resourceBundles/i18n";
 import LoadingOverlay from "react-loading-overlay-ts";
@@ -31,6 +32,7 @@ import {
   formCreate,
   publish,
   unPublish,
+  getFormHistory,
 } from "../../../apiManager/services/FormServices";
 import utils from "@aot-technologies/formiojs/lib/utils";
 import {
@@ -39,13 +41,19 @@ import {
   setRestoreFormData,
   setRestoreFormId,
   setFormDeleteStatus,
+  setFormHistories,
 } from "../../../actions/formActions";
 import {
   saveFormProcessMapperPut,
   getProcessDetails,
   unPublishForm,
+  getProcessHistory,
+  fetchRevertingProcessData
 } from "../../../apiManager/services/processServices";
-import { setProcessData } from "../../../actions/processActions.js";
+import {
+  setProcessData,
+  setProcessHistories,
+} from "../../../actions/processActions.js";
 import _isEquial from "lodash/isEqual";
 import _ from "lodash";
 import SettingsModal from "../../Modals/SettingsModal";
@@ -67,12 +75,15 @@ const Edit = React.memo(() => {
   const dispatch = useDispatch();
   const { formId } = useParams();
   const { t } = useTranslation();
-  //this variable handle the flow and layot tab switching 
+  //this variable handle the flow and layot tab switching
   const sideTabRef = useRef(null);
 
   /* ------------------------------- mapper data ------------------------------ */
-  const { formProcessList: processListData, formPreviousData: previousData } =
-    useSelector((state) => state.process);
+  const {
+    processHistoryData = {},
+    formProcessList: processListData,
+    formPreviousData: previousData,
+  } = useSelector((state) => state.process);
 
   /* -------------------------------- user data and form access data ------------------------------- */
   const {
@@ -105,9 +116,11 @@ const Edit = React.memo(() => {
   /* ------------------------- form history variables ------------------------- */
   const [isNewVersionLoading, setIsNewVersionLoading] = useState(false);
   const [restoreFormDataLoading, setRestoreFormDataLoading] = useState(false);
-  const { restoredFormData, restoredFormId } = useSelector(
-    (state) => state.formRestore
-  );
+  const {
+    formHistoryData = {},
+    restoredFormData,
+    restoredFormId,
+  } = useSelector((state) => state.formRestore);
 
   /* -------------------------- getting process data -------------------------- */
   const [isProcessDetailsLoading, setIsProcessDetailsLoading] = useState(false);
@@ -128,6 +141,12 @@ const Edit = React.memo(() => {
     (state) => state.process?.applicationCount
   );
 
+  const processHistory = processHistoryData.processHistory || [];
+  const formHistory = formHistoryData.formHistory || [];
+  const pageNo = 1;
+  const limit = 4;
+  const [history, setHistory] = useState(true);
+  const [showHistoryModal, setshowHistoryModal] = useState(false);
   const [showConfirmModal, setShowConfirmModal] = useState(false);
   const [modalType, setModalType] = useState("");
 
@@ -156,7 +175,6 @@ const Edit = React.memo(() => {
       setFormSubmitted(false);
     }
   };
-
   useEffect(() => {
     if (restoredFormId) {
       setRestoreFormDataLoading(true);
@@ -186,6 +204,38 @@ const Edit = React.memo(() => {
     };
   }, [restoredFormId]);
 
+  const fetchRestoredFormData = (restoredFormId) => {
+    if (restoredFormId) {
+      fetchFormById(restoredFormId)
+        .then((res) => {
+          if (res.data) {
+            const { data } = res;
+            dispatch(setRestoreFormData(res.data));
+            dispatchFormAction({
+              type: "components",
+              value: _cloneDeep(data.components),
+            });
+            dispatchFormAction({ type: "type", value: data.type });
+            dispatchFormAction({ type: "display", value: data.display });
+          }
+        })
+        .catch((err) => {
+          toast.error(err.response.data);
+        });
+    }
+
+    const cleanup = () => {
+      dispatch(setRestoreFormData({}));
+      dispatch(setRestoreFormId(null));
+    };
+
+    return cleanup; 
+  };
+
+  useEffect(() => {
+    fetchRestoredFormData(restoredFormId);
+  }, [restoredFormId]);
+
   useEffect(() => {
     if (processListData.processKey) {
       setIsProcessDetailsLoading(true);
@@ -360,9 +410,69 @@ const Edit = React.memo(() => {
   const backToForm = () => {
     dispatch(push(`${redirectUrl}form/`));
   };
+  const closeHistoryModal = () => {
+    setshowHistoryModal(false);
+  };
+  const fetchFormHistory = (parentFormId, page, limit) => {
+    getFormHistory(parentFormId, page, limit)
+      .then((res) => {
+        dispatch(setFormHistories(res.data));
+      })
+      .catch(() => {
+        setFormHistories([]);
+      });
+  };
+
+  const fetchProcessHistory = (processKey, page, limit) => {
+    getProcessHistory(processKey, page, limit)
+      .then((res) => {
+        dispatch(setProcessHistories(res.data));
+      })
+      .catch(() => {
+        setProcessHistories([]);
+      });
+  };
+  const handleHistory = (type) => {
+    setshowHistoryModal(true);
+    if (type === "WORKFLOW") {
+      setHistory(false);
+      dispatch(setProcessHistories({ processHistory: [], totalCount: 0 }));
+      if (processListData?.processKey) {
+        fetchProcessHistory(processListData?.processKey, pageNo, limit);
+      }
+    } else {
+      setHistory(true);
+      dispatch(setFormHistories({ formHistory: [], totalCount: 0 }));
+      if (processListData?.parentFormId) {
+        fetchFormHistory(processListData?.parentFormId, pageNo, limit);
+      }
+    }
+  };
+
+  const loadMoreBtnAction = () => {
+    history
+      ? fetchFormHistory(processListData?.parentFormId)
+      : fetchProcessHistory(processListData?.processKey);
+  };
 
-  const handleHistory = () => {
-    console.log("handleHistory");
+  const revertFormBtnAction = (cloneId) => {
+    dispatch(setRestoreFormId(cloneId));
+    fetchRestoredFormData(cloneId);
+  };
+
+  const revertProcessBtnAction = (processId) => {
+    if(processId){
+      setIsProcessDetailsLoading(true);
+      fetchRevertingProcessData(processId).then((res) =>{
+        if(res.data){
+         const { data } = res;
+         dispatch(setProcessData(data));
+         setIsProcessDetailsLoading(false);
+        }
+       }).catch((err) =>{
+         console.log(err.response.data);
+       });  
+    }
   };
 
   const handlePreview = () => {
@@ -761,7 +871,7 @@ const Edit = React.memo(() => {
                           size="md"
                           icon={<HistoryIcon />}
                           label={t("History")}
-                          onClick={handleHistory}
+                          onClick={() => handleHistory(CategoryType.FORM)}
                           dataTestid="handle-form-history-testid"
                           ariaLabel={t("Form History Button")}
                         />
@@ -822,7 +932,9 @@ const Edit = React.memo(() => {
               className={`wraper flow-wraper ${isFlowLayout ? "visible" : ""}`}
             >
               {/* TBD: Add a loader instead. */}
-              {isProcessDetailsLoading ? <>loading...</> : <FlowEdit />}
+              {isProcessDetailsLoading ? <>loading...</> : <FlowEdit 
+              handleHistory={handleHistory}
+              CategoryType={CategoryType}/>}
             </div>
             <button
               className={`border-0 form-flow-wraper-${
@@ -886,6 +998,21 @@ const Edit = React.memo(() => {
           size="md"
         />
       )}
+
+      <HistoryModal
+        show={showHistoryModal}
+        onClose={closeHistoryModal}
+        title={t("History")}
+        loadMoreBtnText={t("Load More")}
+        revertBtnText={t("Revert To This")}
+        allHistory={history ? formHistory : processHistory}
+        loadMoreBtnAction={loadMoreBtnAction}
+        categoryType={history ? CategoryType.FORM : CategoryType.WORKFLOW}
+        revertBtnAction={history ? revertFormBtnAction : revertProcessBtnAction}
+        historyCount={
+          history ? formHistoryData.totalCount : processHistoryData.totalCount
+        }
+      />
       {renderDeleteModal()}
     </div>
   );

forms-flow-web/src/modules/RestoreFormReducer.js

@@ -1,10 +1,10 @@
 import ACTION_CONSTANTS from "../actions/actionConstants";
-import { setVersionNumberIfNotExist } from "../helper/formHistory";
+// import { setVersionNumberIfNotExist } from "../helper/formHistory";
 
 const initialState = {
   restoredFormData: {},
   restoredFormId: null,
-  formHistory:[]
+  formHistoryData:{}
 
 };
 
@@ -15,7 +15,7 @@ const RestoreFormReducer = (state = initialState, action) => {
     case ACTION_CONSTANTS.RESTORE_FORM_DATA:
       return { ...state, restoredFormData: action.payload };
     case ACTION_CONSTANTS.FORM_HISTORY:
-      return { ...state, formHistory: setVersionNumberIfNotExist(action.payload)};
+      return { ...state, formHistoryData: action.payload};
     default:
       return state;
   }

forms-flow-web/src/modules/processReducer.js

@@ -26,6 +26,7 @@ const initialState = {
   bpmnSearchText: "",
   dmnSearchText: "",
   isPublicDiagram: null,
+  processHistoryData:{},
   processData:{},
   totalCount:0,
 };
@@ -103,6 +104,8 @@ const process = (state = initialState, action) => {
       return { ...state, dmnSearchText: action.payload };
     case ACTION_CONSTANTS.IS_PUBLIC_DIAGRAM:
       return { ...state, isPublicDiagram: action.payload };
+    case ACTION_CONSTANTS.PROCESS_HISTORY:
+      return { ...state, processHistoryData: action.payload };
     case ACTION_CONSTANTS.SET_PROCESS_DATA:
         return { ...state, processData: action.payload };
     case ACTION_CONSTANTS.SET_SUBFLOW_COUNT: