From 94f619aef68fa9267f3050c84b7861e67cecc825 Mon Sep 17 00:00:00 2001
From: shuhaib-aot <shuhaib.s@aot-technologies.com>
Date: Wed, 6 Nov 2024 14:26:45 +0530
Subject: [PATCH 1/2] Fixed process history bugs
---
forms-flow-web/package-lock.json | 196 ++++++++++
forms-flow-web/package.json | 1 +
.../apiManager/services/processServices.js | 10 +-
forms-flow-web/src/components/App.jsx | 8 +-
.../src/components/Form/EditForm/FlowEdit.js | 347 +++++++++---------
.../src/components/Form/EditForm/FormEdit.js | 7 +-
6 files changed, 390 insertions(+), 179 deletions(-)
diff --git a/forms-flow-web/package-lock.json b/forms-flow-web/package-lock.json
index 079323fc24..89c5401af9 100644
--- a/forms-flow-web/package-lock.json
+++ b/forms-flow-web/package-lock.json
@@ -58,6 +58,7 @@
"react-i18next": "^11.15.3",
"react-js-pagination": "^3.0.3",
"react-loading-overlay-ts": "^1.0.5",
+ "react-query": "^3.39.3",
"react-redux": "^7.2.4",
"react-router-dom": "^5.1.2",
"react-scripts": "^5.0.1",
@@ -7718,6 +7719,14 @@
"node": ">= 8.0.0"
}
},
+ "node_modules/big-integer": {
+ "version": "1.6.52",
+ "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
+ "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==",
+ "engines": {
+ "node": ">=0.6"
+ }
+ },
"node_modules/big.js": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -8036,6 +8045,36 @@
"node": ">=8"
}
},
+ "node_modules/broadcast-channel": {
+ "version": "3.7.0",
+ "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
+ "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
+ "dependencies": {
+ "@babel/runtime": "^7.7.2",
+ "detect-node": "^2.1.0",
+ "js-sha3": "0.8.0",
+ "microseconds": "0.2.0",
+ "nano-time": "1.0.0",
+ "oblivious-set": "1.0.0",
+ "rimraf": "3.0.2",
+ "unload": "2.2.0"
+ }
+ },
+ "node_modules/broadcast-channel/node_modules/rimraf": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+ "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+ "deprecated": "Rimraf versions prior to v4 are no longer supported",
+ "dependencies": {
+ "glob": "^7.1.3"
+ },
+ "bin": {
+ "rimraf": "bin.js"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/isaacs"
+ }
+ },
"node_modules/browser-cookies": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/browser-cookies/-/browser-cookies-1.2.0.tgz",
@@ -17518,6 +17557,11 @@
"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
"integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA=="
},
+ "node_modules/js-sha3": {
+ "version": "0.8.0",
+ "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+ "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+ },
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -18260,6 +18304,15 @@
"tmpl": "1.0.5"
}
},
+ "node_modules/match-sorter": {
+ "version": "6.3.4",
+ "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz",
+ "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==",
+ "dependencies": {
+ "@babel/runtime": "^7.23.8",
+ "remove-accents": "0.5.0"
+ }
+ },
"node_modules/matches-selector": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/matches-selector/-/matches-selector-1.2.0.tgz",
@@ -18359,6 +18412,11 @@
"node": ">=8.6"
}
},
+ "node_modules/microseconds": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
+ "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+ },
"node_modules/mime": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -18667,6 +18725,14 @@
"thenify-all": "^1.0.0"
}
},
+ "node_modules/nano-time": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
+ "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
+ "dependencies": {
+ "big-integer": "^1.6.16"
+ }
+ },
"node_modules/nanoid": {
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -19001,6 +19067,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/oblivious-set": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
+ "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
+ },
"node_modules/obuf": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -21571,6 +21642,31 @@
"url": "https://opencollective.com/popperjs"
}
},
+ "node_modules/react-query": {
+ "version": "3.39.3",
+ "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
+ "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
+ "dependencies": {
+ "@babel/runtime": "^7.5.5",
+ "broadcast-channel": "^3.4.1",
+ "match-sorter": "^6.0.2"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "react-dom": {
+ "optional": true
+ },
+ "react-native": {
+ "optional": true
+ }
+ }
+ },
"node_modules/react-redux": {
"version": "7.2.9",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
@@ -22072,6 +22168,11 @@
"node": ">= 0.10"
}
},
+ "node_modules/remove-accents": {
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
+ "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
+ },
"node_modules/renderkid": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
@@ -24709,6 +24810,15 @@
"node": ">= 10.0.0"
}
},
+ "node_modules/unload": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
+ "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
+ "dependencies": {
+ "@babel/runtime": "^7.6.2",
+ "detect-node": "^2.0.4"
+ }
+ },
"node_modules/unpipe": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -31453,6 +31563,11 @@
"tryer": "^1.0.1"
}
},
+ "big-integer": {
+ "version": "1.6.52",
+ "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
+ "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg=="
+ },
"big.js": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -31734,6 +31849,31 @@
"fill-range": "^7.1.1"
}
},
+ "broadcast-channel": {
+ "version": "3.7.0",
+ "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
+ "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
+ "requires": {
+ "@babel/runtime": "^7.7.2",
+ "detect-node": "^2.1.0",
+ "js-sha3": "0.8.0",
+ "microseconds": "0.2.0",
+ "nano-time": "1.0.0",
+ "oblivious-set": "1.0.0",
+ "rimraf": "3.0.2",
+ "unload": "2.2.0"
+ },
+ "dependencies": {
+ "rimraf": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+ "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+ "requires": {
+ "glob": "^7.1.3"
+ }
+ }
+ }
+ },
"browser-cookies": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/browser-cookies/-/browser-cookies-1.2.0.tgz",
@@ -38724,6 +38864,11 @@
"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
"integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA=="
},
+ "js-sha3": {
+ "version": "0.8.0",
+ "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+ "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+ },
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -39331,6 +39476,15 @@
"tmpl": "1.0.5"
}
},
+ "match-sorter": {
+ "version": "6.3.4",
+ "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz",
+ "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==",
+ "requires": {
+ "@babel/runtime": "^7.23.8",
+ "remove-accents": "0.5.0"
+ }
+ },
"matches-selector": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/matches-selector/-/matches-selector-1.2.0.tgz",
@@ -39399,6 +39553,11 @@
"picomatch": "^2.3.1"
}
},
+ "microseconds": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
+ "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+ },
"mime": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -39628,6 +39787,14 @@
"thenify-all": "^1.0.0"
}
},
+ "nano-time": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
+ "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
+ "requires": {
+ "big-integer": "^1.6.16"
+ }
+ },
"nanoid": {
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -39853,6 +40020,11 @@
"es-object-atoms": "^1.0.0"
}
},
+ "oblivious-set": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
+ "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
+ },
"obuf": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -41521,6 +41693,16 @@
}
}
},
+ "react-query": {
+ "version": "3.39.3",
+ "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
+ "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
+ "requires": {
+ "@babel/runtime": "^7.5.5",
+ "broadcast-channel": "^3.4.1",
+ "match-sorter": "^6.0.2"
+ }
+ },
"react-redux": {
"version": "7.2.9",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
@@ -41917,6 +42099,11 @@
"resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
"integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog=="
},
+ "remove-accents": {
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
+ "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
+ },
"renderkid": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
@@ -43890,6 +44077,15 @@
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw=="
},
+ "unload": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
+ "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
+ "requires": {
+ "@babel/runtime": "^7.6.2",
+ "detect-node": "^2.0.4"
+ }
+ },
"unpipe": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
diff --git a/forms-flow-web/package.json b/forms-flow-web/package.json
index 3998706255..4b6082cdd3 100644
--- a/forms-flow-web/package.json
+++ b/forms-flow-web/package.json
@@ -85,6 +85,7 @@
"react-i18next": "^11.15.3",
"react-js-pagination": "^3.0.3",
"react-loading-overlay-ts": "^1.0.5",
+ "react-query": "^3.39.3",
"react-redux": "^7.2.4",
"react-router-dom": "^5.1.2",
"react-scripts": "^5.0.1",
diff --git a/forms-flow-web/src/apiManager/services/processServices.js b/forms-flow-web/src/apiManager/services/processServices.js
index 03cae13587..779f5b5c31 100644
--- a/forms-flow-web/src/apiManager/services/processServices.js
+++ b/forms-flow-web/src/apiManager/services/processServices.js
@@ -562,16 +562,16 @@ export const deleteFormProcessMapper = (mapperId, ...rest) => {
};
};
-export const getProcessHistory = (process_key, page = null, limit = null) => {
- let url = `${API.GET_PROCESSES_DETAILS}/${process_key}/versions`;
- if (page !== null && limit !== null) {
+export const getProcessHistory = ({parentProcessKey, page = null, limit = null}) => {
+ let url = `${API.GET_PROCESSES_DETAILS}/${parentProcessKey}/versions`;
+ if (page && limit) {
url += `?pageNo=${page}&limit=${limit}`;
}
return RequestService.httpGETRequest(url);
};
-export const fetchRevertingProcessData = (process_Id) => {
- let url = `${API.GET_PROCESSES_DETAILS}/${process_Id}`;
+export const fetchRevertingProcessData = (processId) => {
+ let url = `${API.GET_PROCESSES_DETAILS}/${processId}`;
return RequestService.httpGETRequest(url);
};
diff --git a/forms-flow-web/src/components/App.jsx b/forms-flow-web/src/components/App.jsx
index 52459027fe..a62d7a9d81 100644
--- a/forms-flow-web/src/components/App.jsx
+++ b/forms-flow-web/src/components/App.jsx
@@ -7,7 +7,11 @@ import "../assets/styles/user-styles.css";
import BaseRouting from "./BaseRouting";
import { Helmet } from "react-helmet";
import { KEYCLOAK_URL } from "../constants/constants";
-
+import {
+ QueryClient,
+ QueryClientProvider,
+} from 'react-query';
+const queryClient = new QueryClient();
const App = React.memo((props) => {
const { store, history, publish, subscribe, getKcInstance } = props;
return (
@@ -16,6 +20,7 @@ const App = React.memo((props) => {
{KEYCLOAK_URL ? <link rel="preconnect" href={KEYCLOAK_URL} /> : null}
</Helmet>
<Provider store={store}>
+ <QueryClientProvider client={queryClient}>
<ConnectedRouter history={history}>
<BaseRouting
store={store}
@@ -24,6 +29,7 @@ const App = React.memo((props) => {
getKcInstance={getKcInstance}
/>
</ConnectedRouter>
+ </QueryClientProvider>
</Provider>
</div>
);
diff --git a/forms-flow-web/src/components/Form/EditForm/FlowEdit.js b/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
index 55c35b7f9a..96ef9b78a5 100644
--- a/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
+++ b/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
@@ -13,11 +13,10 @@ import {
import { Card } from "react-bootstrap";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
-import {
- setProcessData,
- setProcessHistories,
-} from "../../../actions/processActions.js";
+import { useMutation } from "react-query";
+import { setProcessData } from "../../../actions/processActions.js";
import BpmnEditor from "../../Modeler/Editors/BpmnEditor/index.js";
+import LoadingOverlay from "react-loading-overlay-ts";
import {
updateProcess,
getProcessHistory,
@@ -31,203 +30,207 @@ import {
} from "../../../helper/processHelper.js";
import PropTypes from "prop-types";
-const FlowEdit = forwardRef(
- ({ isPublished = false, CategoryType, setIsProcessDetailsLoading }, ref) => {
- const { t } = useTranslation();
- const dispatch = useDispatch();
- const bpmnRef = useRef();
- const processData = useSelector((state) => state.process?.processData);
- const [lintErrors, setLintErrors] = useState([]);
- const [savingFlow, setSavingFlow] = useState(false);
- const [showDiscardModal, setShowDiscardModal] = useState(false);
- const [showHistoryModal, setShowHistoryModal] = useState(false);
- const { processHistoryData = {}, formProcessList: processListData } =
- useSelector((state) => state.process);
- const processHistory = processHistoryData.processHistory || [];
- const handleDiscardModal = () => setShowDiscardModal(!showDiscardModal);
+const FlowEdit = forwardRef(({ isPublished = false, CategoryType }, ref) => {
+ const { t } = useTranslation();
+ const dispatch = useDispatch();
+ const bpmnRef = useRef();
+ const processData = useSelector((state) => state.process?.processData);
+ const [lintErrors, setLintErrors] = useState([]);
+ const [savingFlow, setSavingFlow] = useState(false);
+ const [showDiscardModal, setShowDiscardModal] = useState(false);
+ const [showHistoryModal, setShowHistoryModal] = useState(false);
+ const [isReverted, setIsReverted] = useState(false);
+ /* --------- fetching all process history when click history button --------- */
+ const {
+ data: { data: historiesData } = {}, // response data destructured
+ mutate: fetchHistories, // mutate function used to call the api function and here mutate renamed to fetch histories
+ // isLoading: historiesLoading,
+ // isError: historiesError,
+ } = useMutation(
+ ({ parentProcessKey, page, limit }) =>
+ getProcessHistory({ parentProcessKey, page, limit }) // this is api calling function and mutate function accepting some parameter and passing to the apicalling function
+ );
- const saveFlow = async () => {
- try {
- const bpmnModeler = bpmnRef.current?.getBpmnModeler();
- const xml = await createXMLFromModeler(bpmnModeler);
- if (!validateProcess(xml, lintErrors, t)) {
- return;
- }
- //if xml is same as existing process data, no need to update
- const isEqual = await compareXML(processData?.processData, xml);
- if (isEqual) {
- toast.success(t("Process updated successfully"));
- return;
- }
+ /* --------- fetch a perticular history when click the revert button -------- */
+ const {
+ data: { data: historyData } = {},
+ mutate: fetchHistoryData,
+ isLoading: historyLoading,
+ // isError: historyDataError,
+ } = useMutation((processId) => fetchRevertingProcessData(processId), {
+ onSuccess: () => {
+ setIsReverted(true);
+ },
+ });
- setSavingFlow(true);
- const response = await updateProcess({
- type: "BPMN",
- id: processData.id,
- data: xml,
- });
- dispatch(setProcessData(response.data));
- toast.success(t("Process updated successfully"));
- setSavingFlow(false);
- } catch (error) {
- setSavingFlow(false);
- toast.error(t("Failed to update process"));
- }
- };
+ const handleDiscardModal = () => setShowDiscardModal(!showDiscardModal);
+ const handleToggleHistoryModal = () => setShowHistoryModal(!showHistoryModal);
- //handle discard changes
- const handleDiscardConfirm = () => {
- if (bpmnRef.current) {
- //import the existing process data to bpmn
- bpmnRef.current?.handleImport(processData?.processData);
- handleDiscardModal();
- }
- };
+ //handle discard changes
+ const handleDiscardConfirm = () => {
+ if (bpmnRef.current) {
+ //import the existing process data to bpmn
+ bpmnRef.current?.handleImport(processData?.processData);
+ isReverted && setIsReverted(!isReverted); //once it reverted then need to make it false
+ handleDiscardModal();
+ }
+ };
+
+ const handleProcessHistory = () => {
+ handleToggleHistoryModal();
+ fetchHistories({
+ parentProcessKey: processData.parentProcessKey, // passing process key to get histories data
+ page: 1,
+ limit: 4,
+ });
+ };
- useImperativeHandle(ref, () => ({
- saveFlow,
- }));
+ const loadMoreBtnAction = () => {
+ fetchHistories({ parentProcessKey: processData.parentProcessKey });
+ };
- const closeHistoryModal = () => {
- setShowHistoryModal(false);
- };
+
- const fetchProcessHistory = (processKey, page, limit) => {
- getProcessHistory(processKey, page, limit)
- .then((res) => {
- dispatch(setProcessHistories(res.data));
- })
- .catch(() => {
- setProcessHistories([]);
- });
- };
- const handleProcessHistory = () => {
- setShowHistoryModal(true);
- dispatch(setProcessHistories({ processHistory: [], totalCount: 0 }));
- if (processListData?.processKey) {
- fetchProcessHistory(processListData?.processKey, 1, 4);
+ const saveFlow = async (showToast = true) => {
+ try {
+ const bpmnModeler = bpmnRef.current?.getBpmnModeler();
+ const xml = await createXMLFromModeler(bpmnModeler);
+ if (!validateProcess(xml, lintErrors, t)) {
+ return;
+ }
+ //if xml is same as existing process data, no need to update
+ const isEqual = await compareXML(processData?.processData, xml);
+ if (isEqual && !isReverted) {
+ showToast && toast.success(t("Process updated successfully"));
+ return;
}
- };
- const loadMoreBtnAction = () => {
- fetchProcessHistory(processListData?.processKey);
- };
+ setSavingFlow(true);
+ const response = await updateProcess({
+ type: "BPMN",
+ id: processData.id,
+ data: xml,
+ });
+ dispatch(setProcessData(response.data));
+ isReverted && setIsReverted(!isReverted); //if it already reverted the need to make it false
+ showToast && toast.success(t("Process updated successfully"));
+ } catch (error) {
+ toast.error(t("Failed to update process"));
+ } finally {
+ setSavingFlow(false);
+ }
+ };
- 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);
- });
- }
- };
+ useImperativeHandle(ref, () => ({
+ saveFlow,
+ }));
- return (
- <>
- <Card>
- <ConfirmModal
- show={showDiscardModal}
- title={t(`Are you Sure you want to Discard Flow Changes`)}
- message={t(
- "Are you sure you want to discard all the changes of the Flow?"
- )}
- messageSecondary={t("This action cannot be undone.")}
- primaryBtnAction={handleDiscardConfirm}
- onClose={handleDiscardModal}
- primaryBtnText={t("Discard Changes")}
- secondaryBtnText={t("Cancel")}
- secondayBtnAction={handleDiscardModal}
- size="sm"
- />
- <Card.Header>
- <div
- className="d-flex justify-content-between align-items-center"
- style={{ width: "100%" }}
- >
- <div className="d-flex align-items-center justify-content-between">
- <div className="mx-2 builder-header-text">Flow</div>
- <div>
- <CustomButton
- variant="secondary"
- size="md"
- icon={<HistoryIcon />}
- label={t("History")}
- onClick={() => handleProcessHistory()}
- dataTestid="flow-history-button-testid"
- ariaLabel={t("Flow History Button")}
- />
- <CustomButton
- variant="secondary"
- size="md"
- className="mx-2"
- label={t("Preview & Variables")}
- onClick={() => console.log("handlePreviewAndVariables")}
- dataTestid="preview-and-variables-testid"
- ariaLabel={t("{Preview and Variables Button}")}
- />
- </div>
- </div>
+
+ return (
+ <>
+ <Card>
+ <ConfirmModal
+ show={showDiscardModal}
+ title={t(`Are you Sure you want to Discard Flow Changes`)}
+ message={t(
+ "Are you sure you want to discard all the changes of the Flow?"
+ )}
+ messageSecondary={t("This action cannot be undone.")}
+ primaryBtnAction={handleDiscardConfirm}
+ onClose={handleDiscardModal}
+ primaryBtnText={t("Discard Changes")}
+ secondaryBtnText={t("Cancel")}
+ secondayBtnAction={handleDiscardModal}
+ size="sm"
+ />
+ <Card.Header>
+ <div
+ className="d-flex justify-content-between align-items-center"
+ style={{ width: "100%" }}
+ >
+ <div className="d-flex align-items-center justify-content-between">
+ <div className="mx-2 builder-header-text">Flow</div>
<div>
<CustomButton
- variant="primary"
+ variant="secondary"
size="md"
- className="mx-2"
- label={t("Save Flow")}
- onClick={saveFlow}
- disabled={isPublished}
- dataTestid="save-flow-layout"
- ariaLabel={t("Save Flow Layout")}
- buttonLoading={savingFlow}
+ icon={<HistoryIcon />}
+ label={t("History")}
+ onClick={handleProcessHistory}
+ dataTestid="flow-history-button-testid"
+ ariaLabel={t("Flow History Button")}
/>
<CustomButton
variant="secondary"
size="md"
- label={t("Discard Changes")}
- onClick={handleDiscardModal}
- dataTestid="discard-flow-changes-testid"
- ariaLabel={t("Discard Flow Changes")}
+ className="mx-2"
+ label={t("Preview & Variables")}
+ onClick={() => console.log("handlePreviewAndVariables")}
+ dataTestid="preview-and-variables-testid"
+ ariaLabel={t("{Preview and Variables Button}")}
/>
</div>
</div>
- </Card.Header>
- <Card.Body>
+ <div>
+ <CustomButton
+ variant="primary"
+ size="md"
+ className="mx-2"
+ label={t("Save Flow")}
+ onClick={saveFlow}
+ disabled={isPublished}
+ dataTestid="save-flow-layout"
+ ariaLabel={t("Save Flow Layout")}
+ buttonLoading={savingFlow}
+ />
+ <CustomButton
+ variant="secondary"
+ size="md"
+ label={t("Discard Changes")}
+ onClick={handleDiscardModal}
+ dataTestid="discard-flow-changes-testid"
+ ariaLabel={t("Discard Flow Changes")}
+ />
+ </div>
+ </div>
+ </Card.Header>
+ <Card.Body>
+ <LoadingOverlay
+ active={historyLoading}
+ spinner
+ text={t("Loading...")}
+ >
<BpmnEditor
ref={bpmnRef}
setLintErrors={setLintErrors}
- bpmnXml={processData?.processData}
+ bpmnXml={
+ isReverted ? historyData?.processData : processData?.processData
+ }
/>
- </Card.Body>
- </Card>
- <HistoryModal
- show={showHistoryModal}
- onClose={closeHistoryModal}
- title={t("History")}
- loadMoreBtnText={t("Load More")}
- revertBtnText={t("Revert To This")}
- allHistory={processHistory}
- loadMoreBtnAction={loadMoreBtnAction}
- categoryType={CategoryType.WORKFLOW}
- revertBtnAction={revertProcessBtnAction}
- historyCount={processHistoryData.totalCount}
- />
- </>
- );
- }
-);
+ </LoadingOverlay>
+ </Card.Body>
+ </Card>
+ <HistoryModal
+ show={showHistoryModal}
+ onClose={handleToggleHistoryModal}
+ title={t("History")}
+ loadMoreBtnText={t("Load More")}
+ revertBtnText={t("Revert To This")}
+ allHistory={historiesData?.processHistory || []}
+ loadMoreBtnAction={loadMoreBtnAction}
+ categoryType={CategoryType.WORKFLOW}
+ revertBtnAction={fetchHistoryData}
+ historyCount={historiesData?.totalCount || 0}
+ currentVersionId={processData.id}
+ />
+ </>
+ );
+});
FlowEdit.propTypes = {
CategoryType: PropTypes.shape({
WORKFLOW: PropTypes.string.isRequired,
}).isRequired,
- setIsProcessDetailsLoading: PropTypes.func.isRequired,
isPublished: PropTypes.bool.isRequired,
};
diff --git a/forms-flow-web/src/components/Form/EditForm/FormEdit.js b/forms-flow-web/src/components/Form/EditForm/FormEdit.js
index 8122611f80..3394baac6d 100644
--- a/forms-flow-web/src/components/Form/EditForm/FormEdit.js
+++ b/forms-flow-web/src/components/Form/EditForm/FormEdit.js
@@ -112,6 +112,8 @@ const EditComponent = () => {
const [nameError, setNameError] = useState("");
const [newVersionModal, setNewVersionModal] = useState(false);
+ /* ------------------------------ fowvariables ------------------------------ */
+ const flowRef = useRef(null);
/* ------------------------- file import ------------------------- */
const [formTitle, setFormTitle] = useState("");
const [importError, setImportError] = useState("");
@@ -620,6 +622,9 @@ const EditComponent = () => {
const actionFunction = isPublished ? unPublish : publish;
closeModal();
setIsPublishLoading(true);
+ if(!isPublished){
+ await flowRef.current.saveFlow(false);
+ }
await actionFunction(processListData.id);
if (isPublished) {
await fetchProcessDetails(processListData);
@@ -1008,8 +1013,8 @@ const EditComponent = () => {
>
{/* TBD: Add a loader instead. */}
{isProcessDetailsLoading ? <>loading...</> : <FlowEdit
+ ref={flowRef}
CategoryType={CategoryType}
- setIsProcessDetailsLoading={setIsProcessDetailsLoading}
isPublished={isPublished}
/>}
</div>
From c018800d3d9831ad69a606729f0c6a5c6fdf8eb8 Mon Sep 17 00:00:00 2001
From: shuhaib-aot <shuhaib.s@aot-technologies.com>
Date: Wed, 6 Nov 2024 14:47:20 +0530
Subject: [PATCH 2/2] added translation tag and removed inline style
---
forms-flow-web/src/components/Form/EditForm/FlowEdit.js | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/forms-flow-web/src/components/Form/EditForm/FlowEdit.js b/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
index 96ef9b78a5..a06c78301e 100644
--- a/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
+++ b/forms-flow-web/src/components/Form/EditForm/FlowEdit.js
@@ -145,11 +145,10 @@ const FlowEdit = forwardRef(({ isPublished = false, CategoryType }, ref) => {
/>
<Card.Header>
<div
- className="d-flex justify-content-between align-items-center"
- style={{ width: "100%" }}
+ className="d-flex justify-content-between align-items-center w-100"
>
<div className="d-flex align-items-center justify-content-between">
- <div className="mx-2 builder-header-text">Flow</div>
+ <div className="mx-2 builder-header-text">{t("Flow")}</div>
<div>
<CustomButton
variant="secondary"