From 2899eacdc963476c11029bfeb771194b7e75ffb8 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 10 Jan 2024 22:49:04 -0300 Subject: [PATCH 01/16] lock --- src/frontend/package-lock.json | 98 +++++++++++++++++----------------- 1 file changed, 49 insertions(+), 49 deletions(-) diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 32ffdf66b..1fb420886 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -1206,16 +1206,16 @@ } }, "node_modules/@mui/base": { - "version": "5.0.0-beta.30", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.30.tgz", - "integrity": "sha512-dc38W4W3K42atE9nSaOeoJ7/x9wGIfawdwC/UmMxMLlZ1iSsITQ8dQJaTATCbn98YvYPINK/EH541YA5enQIPQ==", + "version": "5.0.0-beta.31", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.31.tgz", + "integrity": "sha512-+uNbP3OHJuZVI00WyMg7xfLZotaEY7LgvYXDfONVJbrS+K9wyjCIPNfjy8r9XJn4fbHo/5ibiZqjWnU9LMNv+A==", "dependencies": { - "@babel/runtime": "^7.23.6", - "@floating-ui/react-dom": "^2.0.4", - "@mui/types": "^7.2.12", - "@mui/utils": "^5.15.3", + "@babel/runtime": "^7.23.7", + "@floating-ui/react-dom": "^2.0.5", + "@mui/types": "^7.2.13", + "@mui/utils": "^5.15.4", "@popperjs/core": "^2.11.8", - "clsx": "^2.0.0", + "clsx": "^2.1.0", "prop-types": "^15.8.1" }, "engines": { @@ -1245,27 +1245,27 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.15.3", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.3.tgz", - "integrity": "sha512-sWeihiVyxdJjpLkp8SHkTy9kt2M/o11M60G1MzwljGL2BXdM3Ktzqv5QaQHdi00y7Y1ulvtI3GOSxP2xU8mQJw==", + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.4.tgz", + "integrity": "sha512-0OZN9O6hAtBpx70mMNFOPaAIol/ytwZYPY+z7Rf9dK3+1Xlzwvj5/IeShJKvtp76S1qJyhPuvZg0+BGqQaUnUw==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" } }, "node_modules/@mui/material": { - "version": "5.15.3", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.3.tgz", - "integrity": "sha512-DODBBMouyq1B5f3YkEWL9vO8pGCxuEGqtfpltF6peMJzz/78tJFyLQsDas9MNLC/8AdFu2BQdkK7wox5UBPTAA==", + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.4.tgz", + "integrity": "sha512-T/LGRAC+M0c+D3+y67eHwIN5bSje0TxbcJCWR0esNvU11T0QwrX3jedXItPNBwMupF2F5VWCDHBVLlFnN3+ABA==", "dependencies": { - "@babel/runtime": "^7.23.6", - "@mui/base": "5.0.0-beta.30", - "@mui/core-downloads-tracker": "^5.15.3", - "@mui/system": "^5.15.3", - "@mui/types": "^7.2.12", - "@mui/utils": "^5.15.3", + "@babel/runtime": "^7.23.7", + "@mui/base": "5.0.0-beta.31", + "@mui/core-downloads-tracker": "^5.15.4", + "@mui/system": "^5.15.4", + "@mui/types": "^7.2.13", + "@mui/utils": "^5.15.4", "@types/react-transition-group": "^4.4.10", - "clsx": "^2.0.0", + "clsx": "^2.1.0", "csstype": "^3.1.2", "prop-types": "^15.8.1", "react-is": "^18.2.0", @@ -1306,12 +1306,12 @@ } }, "node_modules/@mui/private-theming": { - "version": "5.15.3", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.3.tgz", - "integrity": "sha512-Q79MhVMmywC1l5bMsMZq5PsIudr1MNPJnx9/EqdMP0vpz5iNvFpnLmxsD7d8/hqTWgFAljI+LH3jX8MxlZH9Gw==", + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.4.tgz", + "integrity": "sha512-9N5myIMEEQTM5WYWPGvvYADzjFo12LgJ7S+2iTZkBNOcJpUxQYM1tvYjkHCDV+t1ocMOEgjR2EfJ9Dus30dBlg==", "dependencies": { - "@babel/runtime": "^7.23.6", - "@mui/utils": "^5.15.3", + "@babel/runtime": "^7.23.7", + "@mui/utils": "^5.15.4", "prop-types": "^15.8.1" }, "engines": { @@ -1332,11 +1332,11 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.15.3", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.3.tgz", - "integrity": "sha512-+d5XZCTeemOO/vBfWGEeHgTm8fjU1Psdgm+xAw+uegycO2EnoA/EfGSaG5UwZ6g3b66y48Mkxi35AggShMr88w==", + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.4.tgz", + "integrity": "sha512-vtrZUXG5XI8CNiNLcxjIirW4dEbOloR+ikfm6ePBo7jXpJdpXjVzBWetrfE+5eI0cHkKWlTptnJ2voKV8pBRfw==", "dependencies": { - "@babel/runtime": "^7.23.6", + "@babel/runtime": "^7.23.7", "@emotion/cache": "^11.11.0", "csstype": "^3.1.2", "prop-types": "^15.8.1" @@ -1363,16 +1363,16 @@ } }, "node_modules/@mui/system": { - "version": "5.15.3", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.3.tgz", - "integrity": "sha512-ewVU4eRgo4VfNMGpO61cKlfWmH7l9s6rA8EknRzuMX3DbSLfmtW2WJJg6qPwragvpPIir0Pp/AdWVSDhyNy5Tw==", + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.4.tgz", + "integrity": "sha512-KCwkHajGBXPs2TK1HJjIyab4NDk0cZoBDYN/TTlXVo1qBAmCjY0vjqrlsjeoG+wrwwcezXMLs/e6OGP66fPCog==", "dependencies": { - "@babel/runtime": "^7.23.6", - "@mui/private-theming": "^5.15.3", - "@mui/styled-engine": "^5.15.3", - "@mui/types": "^7.2.12", - "@mui/utils": "^5.15.3", - "clsx": "^2.0.0", + "@babel/runtime": "^7.23.7", + "@mui/private-theming": "^5.15.4", + "@mui/styled-engine": "^5.15.4", + "@mui/types": "^7.2.13", + "@mui/utils": "^5.15.4", + "clsx": "^2.1.0", "csstype": "^3.1.2", "prop-types": "^15.8.1" }, @@ -1410,9 +1410,9 @@ } }, "node_modules/@mui/types": { - "version": "7.2.12", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.12.tgz", - "integrity": "sha512-3kaHiNm9khCAo0pVe0RenketDSFoZGAlVZ4zDjB/QNZV0XiCj+sh1zkX0VVhQPgYJDlBEzAag+MHJ1tU3vf0Zw==", + "version": "7.2.13", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.13.tgz", + "integrity": "sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0" }, @@ -1423,11 +1423,11 @@ } }, "node_modules/@mui/utils": { - "version": "5.15.3", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.3.tgz", - "integrity": "sha512-mT3LiSt9tZWCdx1pl7q4Q5tNo6gdZbvJel286ZHGuj6LQQXjWNAh8qiF9d+LogvNUI+D7eLkTnj605d1zoazfg==", + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.4.tgz", + "integrity": "sha512-E2wLQGBcs3VR52CpMRjk46cGscC4cbf3Q2uyHNaAeL36yTTm+aVNbtsTCazXtjOP4BDd8lu6VtlTpVC8Rtl4mg==", "dependencies": { - "@babel/runtime": "^7.23.6", + "@babel/runtime": "^7.23.7", "@types/prop-types": "^15.7.11", "prop-types": "^15.8.1", "react-is": "^18.2.0" @@ -5384,9 +5384,9 @@ "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==" }, "node_modules/electron-to-chromium": { - "version": "1.4.626", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.626.tgz", - "integrity": "sha512-f7/be56VjRRQk+Ric6PmIrEtPcIqsn3tElyAu9Sh6egha2VLJ82qwkcOdcnT06W+Pb6RUulV1ckzrGbKzVcTHg==" + "version": "1.4.627", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.627.tgz", + "integrity": "sha512-BPFdHKPzyGxYQpgiCoIGnkzlMlps3bRdnjeh3qd/Q2pSacL0YW81i4llqsTY/wNbN/Ztw++7HNfp8v4Rm8VDuA==" }, "node_modules/emoji-regex": { "version": "8.0.0", From d250bf868b808972266844fd7c284c77569ee5f9 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Thu, 11 Jan 2024 09:52:02 -0300 Subject: [PATCH 02/16] fix(headerComponent): handle case where stars is null by displaying 0 instead to prevent rendering issues --- src/frontend/package-lock.json | 12 ++++++------ .../src/components/headerComponent/index.tsx | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 1fb420886..168078c1d 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -5093,9 +5093,9 @@ } }, "node_modules/daisyui": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.5.0.tgz", - "integrity": "sha512-RWQCPQ0vBUaxGy768O7Ku8SRQgwdoto1lDzuKeVOcMtYghuSbUY7NoPoMK+k8JH4s1J02OvpNAgtB9MeKpZIwg==", + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.6.0.tgz", + "integrity": "sha512-B5ZB/sczXpp4LMdo/SZrtYY/U2hq+Vr9I15QawuWZ0VwgtSAbuZpAZUftKVryEsPuv3BM0yVlBED0nAmtis/dw==", "dev": true, "dependencies": { "css-selector-tokenizer": "^0.8", @@ -5384,9 +5384,9 @@ "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==" }, "node_modules/electron-to-chromium": { - "version": "1.4.627", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.627.tgz", - "integrity": "sha512-BPFdHKPzyGxYQpgiCoIGnkzlMlps3bRdnjeh3qd/Q2pSacL0YW81i4llqsTY/wNbN/Ztw++7HNfp8v4Rm8VDuA==" + "version": "1.4.628", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.628.tgz", + "integrity": "sha512-2k7t5PHvLsufpP6Zwk0nof62yLOsCf032wZx7/q0mv8gwlXjhcxI3lz6f0jBr0GrnWKcm3burXzI3t5IrcdUxw==" }, "node_modules/emoji-regex": { "version": "8.0.0", diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index 2b934942a..77ac85c54 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -102,7 +102,7 @@ export default function Header(): JSX.Element { >
Star
-
{stars}
+
{stars ?? 0}
Date: Thu, 11 Jan 2024 10:02:26 -0300 Subject: [PATCH 03/16] fix(authContext.tsx): add check for isAuthenticated before attempting to logout to prevent unnecessary logout calls --- src/frontend/src/contexts/authContext.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index be2f279c9..18145b0af 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -104,6 +104,9 @@ export function AuthProvider({ children }): React.ReactElement { } async function logout() { + if (!isAuthenticated) { + return; + } try { await requestLogout(); cookies.remove("apikey_tkn_lflw", { path: "/" }); From 60445d3af0af05c8bfd07d70988ccf116c75cbf0 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Thu, 11 Jan 2024 10:02:50 -0300 Subject: [PATCH 04/16] fix(authContext.tsx): fix condition in logout function to check for autoLogin instead of isAuthenticated to prevent unnecessary logout --- src/frontend/src/contexts/authContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index 18145b0af..256712303 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -104,7 +104,7 @@ export function AuthProvider({ children }): React.ReactElement { } async function logout() { - if (!isAuthenticated) { + if (autoLogin) { return; } try { From 2986741e61ae86a49cb40728caef97ae15e8d202 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Thu, 11 Jan 2024 17:48:11 -0300 Subject: [PATCH 05/16] style(App.css): add overflow: hidden to body to prevent horizontal scrolling style(App.css): remove unnecessary auto values for width, height, and border-radius in .react-flow__node class --- src/frontend/src/App.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css index a7a8bad51..c4cc99fd4 100644 --- a/src/frontend/src/App.css +++ b/src/frontend/src/App.css @@ -2,15 +2,19 @@ @tailwind components; @tailwind utilities; +body { + overflow: hidden; +} + .App { text-align: center; } .react-flow__node { - width: auto; - height: auto; - border-radius: auto; - min-width: inherit; + width: auto; + height: auto; + border-radius: auto; + min-width: inherit; } .App-logo { From 3b3bfc9b5ad6f6506a918bf68b8cd97c8d172a00 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Thu, 11 Jan 2024 17:59:45 -0300 Subject: [PATCH 06/16] fixing scroll-overflow on react flow --- src/frontend/src/App.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css index c4cc99fd4..095c63bd7 100644 --- a/src/frontend/src/App.css +++ b/src/frontend/src/App.css @@ -2,6 +2,7 @@ @tailwind components; @tailwind utilities; +/* Prevent react flow to overflow the page */ body { overflow: hidden; } From 4ebbafe4939f0e2186bc00a6fd300c5e2e76910a Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Mon, 15 Jan 2024 22:31:46 -0300 Subject: [PATCH 07/16] fix(components): add data-testid to edit flow button for better testability and identification fix(dragAndDrop.spec): update locator for edit flow button to use data-testid for better stability fix(group.spec): update locator for edit flow button to use data-testid for better stability fix(saveComponents.spec): update locator for edit flow button to use data-testid for better stability --- .../src/pages/MainPage/components/components/index.tsx | 3 +++ src/frontend/tests/onlyFront/dragAndDrop.spec.ts | 4 +--- src/frontend/tests/onlyFront/group.spec.ts | 10 +++++----- src/frontend/tests/onlyFront/saveComponents.spec.ts | 5 +---- 4 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx index 6c48cc80e..130cb9eba 100644 --- a/src/frontend/src/pages/MainPage/components/components/index.tsx +++ b/src/frontend/src/pages/MainPage/components/components/index.tsx @@ -159,6 +159,9 @@ export default function ComponentsComponent({ variant="outline" size="sm" className="whitespace-nowrap " + data-testid={ + "edit-flow-button-" + item.id + "-" + idx + } > { ); await page - .locator( - '//*[@id="root"]/div/div[1]/div[2]/div[3]/div/div/div/div/div/div/div/div[2]/span[2]' - ) + .getByTestId("edit-flow-button-e9ac1bdc-429b-475d-ac03-d26f9a2a3210-0") .click(); await page.waitForTimeout(2000); diff --git a/src/frontend/tests/onlyFront/group.spec.ts b/src/frontend/tests/onlyFront/group.spec.ts index 8218e767b..f4cbe8458 100644 --- a/src/frontend/tests/onlyFront/group.spec.ts +++ b/src/frontend/tests/onlyFront/group.spec.ts @@ -33,7 +33,8 @@ test.describe("group node test", () => { return dt; }, jsonContent); - // Now dispatch + page.waitForTimeout(2000); + await page.dispatchEvent( '//*[@id="root"]/div/div[1]/div[2]/div[3]/div/div', "drop", @@ -43,9 +44,7 @@ test.describe("group node test", () => { ); await page - .locator( - '//*[@id="root"]/div/div[1]/div[2]/div[3]/div/div/div/div/div/div/div/div[2]/span[2]' - ) + .getByTestId("edit-flow-button-e9ac1bdc-429b-475d-ac03-d26f9a2a3210-0") .click(); await page.waitForTimeout(2000); @@ -67,7 +66,6 @@ test.describe("group node test", () => { }); await page.getByRole("button", { name: "Group" }).click(); - await page.locator("div").filter({ hasText: "Star13756" }).nth(3).click(); const textArea = page.getByTestId("div-textarea-2"); const elementCountText = await textArea.count(); @@ -80,5 +78,7 @@ test.describe("group node test", () => { if (elementGroup > 0) { expect(true).toBeTruthy(); } + + // Now dispatch }); }); diff --git a/src/frontend/tests/onlyFront/saveComponents.spec.ts b/src/frontend/tests/onlyFront/saveComponents.spec.ts index 07a074bad..a123a422e 100644 --- a/src/frontend/tests/onlyFront/saveComponents.spec.ts +++ b/src/frontend/tests/onlyFront/saveComponents.spec.ts @@ -51,9 +51,7 @@ test.describe("save component tests", () => { ); await page - .locator( - '//*[@id="root"]/div/div[1]/div[2]/div[3]/div/div/div/div/div/div/div/div[2]/span[2]' - ) + .getByTestId("edit-flow-button-e9ac1bdc-429b-475d-ac03-d26f9a2a3210-0") .click(); await page.waitForTimeout(2000); @@ -75,7 +73,6 @@ test.describe("save component tests", () => { }); await page.getByRole("button", { name: "Group" }).click(); - await page.locator("div").filter({ hasText: "Star13756" }).nth(3).click(); let textArea = page.getByTestId("div-textarea-2"); let elementCountText = await textArea.count(); From dd95a0c69934fd976c93c7b608b6f07d545b89c2 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Thu, 11 Jan 2024 17:47:34 -0300 Subject: [PATCH 08/16] chore(playwright-report): fix indentation and formatting in index.html file style(App.css): add overflow: hidden to body and fix indentation and formatting --- src/frontend/playwright-report/index.html | 26 +++++++++++------------ 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/frontend/playwright-report/index.html b/src/frontend/playwright-report/index.html index d65e584e4..e634446de 100644 --- a/src/frontend/playwright-report/index.html +++ b/src/frontend/playwright-report/index.html @@ -1,18 +1,18 @@ - - - + + + Document - - + + - - \ No newline at end of file + + From 59de3fe50b39bfc6ed4c5b9457339514090578b5 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 15 Jan 2024 16:11:56 -0300 Subject: [PATCH 09/16] fix(App.tsx): increase the timer interval for fetching data to 20 seconds for better performance feat(App.tsx): add cleanup function to clean up flow state when component unmounts feat(PageComponent/index.tsx): add cleanFlow function to reset flow state when component unmounts fix(PageComponent/index.tsx): fix bug where newEdges were not being set correctly in onConnect function fix(PageComponent/index.tsx): remove unnecessary dependencies from onConnect function fix(PageComponent/index.tsx): fix bug where setEdges was not returning the newEdges array correctly feat(flowStore.ts): add cleanFlow function to reset flow state to initial values feat(flowStore.ts): add cleanFlow function to reset flow state to initial values in flowStore type --- src/frontend/src/App.tsx | 2 +- .../components/PageComponent/index.tsx | 53 +++++++++++-------- src/frontend/src/stores/flowStore.ts | 9 ++++ src/frontend/src/types/zustand/flow/index.ts | 1 + 4 files changed, 43 insertions(+), 22 deletions(-) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 3b88ee14c..2bbab91f7 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -149,7 +149,7 @@ export default function App() { .catch(() => { setFetchError(true); }); - }, 5000); + }, 20000); // Clean up the timer on component unmount return () => { diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index ae030e0b7..5852d6999 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -64,6 +64,7 @@ export default function Page({ const onEdgesChange = useFlowStore((state) => state.onEdgesChange); const setNodes = useFlowStore((state) => state.setNodes); const setEdges = useFlowStore((state) => state.setEdges); + const cleanFlow = useFlowStore((state) => state.cleanFlow); const deleteNode = useFlowStore((state) => state.deleteNode); const deleteEdge = useFlowStore((state) => state.deleteEdge); const undo = useFlowsManagerStore((state) => state.undo); @@ -170,6 +171,12 @@ export default function Page({ } }, [currentFlowId, reactFlowInstance]); + useEffect(() => { + return () => { + cleanFlow(); + } + }, []) + const onConnectMod = useCallback( (params: Connection) => { takeSnapshot(); @@ -210,26 +217,30 @@ export default function Page({ const onConnect = useCallback( (connection: Connection) => { - const newEdges = addEdge( - { - ...connection, - data: { - targetHandle: scapeJSONParse(connection.targetHandle!), - sourceHandle: scapeJSONParse(connection.sourceHandle!), + let newEdges:Edge[] = [] + setEdges((oldEdges) => { + newEdges = addEdge( + { + ...connection, + data: { + targetHandle: scapeJSONParse(connection.targetHandle!), + sourceHandle: scapeJSONParse(connection.sourceHandle!), + }, + style: { stroke: "#555" }, + className: + ((scapeJSONParse(connection.targetHandle!) as targetHandleType) + .type === "Text" + ? "stroke-foreground " + : "stroke-foreground ") + " stroke-connection", + animated: + (scapeJSONParse(connection.targetHandle!) as targetHandleType) + .type === "Text", }, - style: { stroke: "#555" }, - className: - ((scapeJSONParse(connection.targetHandle!) as targetHandleType) - .type === "Text" - ? "stroke-foreground " - : "stroke-foreground ") + " stroke-connection", - animated: - (scapeJSONParse(connection.targetHandle!) as targetHandleType) - .type === "Text", - }, - edges - ); - setEdges(newEdges); + oldEdges + ); + return newEdges; + + }) useFlowsManagerStore .getState() .autoSaveCurrentFlow( @@ -238,7 +249,7 @@ export default function Page({ reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 } ); }, - [nodes, edges, setEdges, reactFlowInstance, addEdge] + [nodes, setEdges, reactFlowInstance, addEdge] ); const onDrop = useCallback( @@ -357,7 +368,7 @@ export default function Page({
{Object.keys(templates).length > 0 && - Object.keys(types).length > 0 ? ( + Object.keys(types).length > 0 ? (
((set, get) => ({ setLastCopiedSelection: (newSelection) => { set({ lastCopiedSelection: newSelection }); }, + cleanFlow: () => { + set({ + nodes: [], + edges: [], + flowState: undefined, + sseData: {}, + isBuilt: false, + }); + }, })); export default useFlowStore; diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index 9c331892f..50d2fd45b 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -49,4 +49,5 @@ export type FlowStoreType = { ) => void; isBuilt: boolean; setIsBuilt: (isBuilt: boolean) => void; + cleanFlow: () => void; }; From cbea369c2cf9d94159704d00e20e13a8cdd96576 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 15 Jan 2024 16:20:15 -0300 Subject: [PATCH 10/16] Update setFilterEdge references in code --- .../GenericNode/components/parameterComponent/index.tsx | 2 +- .../src/pages/FlowPage/components/PageComponent/index.tsx | 2 +- .../FlowPage/components/extraSidebarComponent/index.tsx | 4 ++-- src/frontend/src/stores/flowStore.ts | 5 +++++ src/frontend/src/stores/typesStore.ts | 5 +---- src/frontend/src/types/zustand/flow/index.ts | 2 ++ src/frontend/src/types/zustand/types/index.ts | 2 -- 7 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index a76a15d17..9c1b4bbf1 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -71,7 +71,7 @@ export default function ParameterComponent({ const groupedEdge = useRef(null); - const setFilterEdge = useTypesStore((state) => state.setFilterEdge); + const setFilterEdge = useFlowStore((state) => state.setFilterEdge); let disabled = edges.some( diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 5852d6999..2e2c2bac7 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -50,7 +50,7 @@ export default function Page({ ); const types = useTypesStore((state) => state.types); const templates = useTypesStore((state) => state.templates); - const setFilterEdge = useTypesStore((state) => state.setFilterEdge); + const setFilterEdge = useFlowStore((state) => state.setFilterEdge); const reactFlowWrapper = useRef(null); const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance); diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index b610663ac..f9e904581 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -29,8 +29,8 @@ import SidebarDraggableComponent from "./sideBarDraggableComponent"; export default function ExtraSidebar(): JSX.Element { const data = useTypesStore((state) => state.data); const templates = useTypesStore((state) => state.templates); - const getFilterEdge = useTypesStore((state) => state.getFilterEdge); - const setFilterEdge = useTypesStore((state) => state.setFilterEdge); + const getFilterEdge = useFlowStore((state) => state.getFilterEdge); + const setFilterEdge = useFlowStore((state) => state.setFilterEdge); const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow); const currentFlow = useFlowsManagerStore((state) => state.currentFlow); const hasStore = useStoreStore((state) => state.hasStore); diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index 76929cba1..cf041ee0f 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -257,8 +257,13 @@ const useFlowStore = create((set, get) => ({ flowState: undefined, sseData: {}, isBuilt: false, + getFilterEdge: [], }); }, + setFilterEdge: (newState) => { + set({ getFilterEdge: newState }); + }, + getFilterEdge: [] })); export default useFlowStore; diff --git a/src/frontend/src/stores/typesStore.ts b/src/frontend/src/stores/typesStore.ts index e2ab3dfc4..90f2c5b9b 100644 --- a/src/frontend/src/stores/typesStore.ts +++ b/src/frontend/src/stores/typesStore.ts @@ -9,7 +9,6 @@ export const useTypesStore = create((set, get) => ({ types: {}, templates: {}, data: {}, - getFilterEdge: [], getTypes: () => { return new Promise(async (resolve, reject) => { getAll() @@ -44,7 +43,5 @@ export const useTypesStore = create((set, get) => ({ let newChange = typeof change === "function" ? change(get().data) : change; set({ data: newChange }); }, - setFilterEdge: (newState) => { - set({ getFilterEdge: newState }); - }, + })); diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index 50d2fd45b..9b76a5347 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -50,4 +50,6 @@ export type FlowStoreType = { isBuilt: boolean; setIsBuilt: (isBuilt: boolean) => void; cleanFlow: () => void; + setFilterEdge: (newState) => void; + getFilterEdge: any[]; }; diff --git a/src/frontend/src/types/zustand/types/index.ts b/src/frontend/src/types/zustand/types/index.ts index f18d8b22e..133afbda1 100644 --- a/src/frontend/src/types/zustand/types/index.ts +++ b/src/frontend/src/types/zustand/types/index.ts @@ -8,6 +8,4 @@ export type TypesStoreType = { data: APIDataType; setData: (newState: {}) => void; getTypes: () => Promise; - setFilterEdge: (newState) => void; - getFilterEdge: any[]; }; From 41aec50819fa77f08b6473b43f63b2160bc15422 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 15 Jan 2024 17:46:24 -0300 Subject: [PATCH 11/16] Refactor: Change onConnection function to zustand store --- .../components/PageComponent/index.tsx | 38 +------------------ src/frontend/src/stores/flowStore.ts | 35 ++++++++++++++++- src/frontend/src/types/zustand/flow/index.ts | 2 + 3 files changed, 37 insertions(+), 38 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 2e2c2bac7..57716b5b5 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -78,6 +78,7 @@ export default function Page({ const setLastCopiedSelection = useFlowStore( (state) => state.setLastCopiedSelection ); + const onConnect = useFlowStore((state) => state.onConnect); const position = useRef({ x: 0, y: 0 }); const [lastSelection, setLastSelection] = @@ -215,43 +216,6 @@ export default function Page({ } }, []); - const onConnect = useCallback( - (connection: Connection) => { - let newEdges:Edge[] = [] - setEdges((oldEdges) => { - newEdges = addEdge( - { - ...connection, - data: { - targetHandle: scapeJSONParse(connection.targetHandle!), - sourceHandle: scapeJSONParse(connection.sourceHandle!), - }, - style: { stroke: "#555" }, - className: - ((scapeJSONParse(connection.targetHandle!) as targetHandleType) - .type === "Text" - ? "stroke-foreground " - : "stroke-foreground ") + " stroke-connection", - animated: - (scapeJSONParse(connection.targetHandle!) as targetHandleType) - .type === "Text", - }, - oldEdges - ); - return newEdges; - - }) - useFlowsManagerStore - .getState() - .autoSaveCurrentFlow( - nodes, - newEdges, - reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 } - ); - }, - [nodes, setEdges, reactFlowInstance, addEdge] - ); - const onDrop = useCallback( (event: React.DragEvent) => { event.preventDefault(); diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index cf041ee0f..d8338428b 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -263,7 +263,40 @@ const useFlowStore = create((set, get) => ({ setFilterEdge: (newState) => { set({ getFilterEdge: newState }); }, - getFilterEdge: [] + getFilterEdge: [], + onConnect: (connection) => { + let newEdges: Edge[] = [] + get().setEdges((oldEdges) => { + newEdges = addEdge( + { + ...connection, + data: { + targetHandle: scapeJSONParse(connection.targetHandle!), + sourceHandle: scapeJSONParse(connection.sourceHandle!), + }, + style: { stroke: "#555" }, + className: + ((scapeJSONParse(connection.targetHandle!) as targetHandleType) + .type === "Text" + ? "stroke-foreground " + : "stroke-foreground ") + " stroke-connection", + animated: + (scapeJSONParse(connection.targetHandle!) as targetHandleType) + .type === "Text", + }, + oldEdges + ); + return newEdges; + + }) + useFlowsManagerStore + .getState() + .autoSaveCurrentFlow( + get().nodes, + newEdges, + get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 } + ); + }, })); export default useFlowStore; diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index 9b76a5347..273a1958f 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -1,4 +1,5 @@ import { + Connection, Edge, Node, OnEdgesChange, @@ -52,4 +53,5 @@ export type FlowStoreType = { cleanFlow: () => void; setFilterEdge: (newState) => void; getFilterEdge: any[]; + onConnect: (connection: Connection) => void; }; From c3a0dfbd970eb1a10b2ce83d3fa8c7b335209b01 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 15 Jan 2024 22:12:55 +0100 Subject: [PATCH 12/16] Fixed handles not showing when changing the output of the custom code --- .../components/parameterComponent/index.tsx | 23 ++++++++++++++----- .../components/PageComponent/index.tsx | 2 +- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 9c1b4bbf1..09af96c6f 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -1,6 +1,6 @@ import { cloneDeep } from "lodash"; import React, { ReactNode, useEffect, useRef, useState } from "react"; -import { Handle, Position } from "reactflow"; +import { Handle, Position, useUpdateNodeInternals } from "reactflow"; import ShadTooltip from "../../../../components/ShadTooltipComponent"; import CodeAreaComponent from "../../../../components/codeAreaComponent"; import DictComponent from "../../../../components/dictComponent"; @@ -124,27 +124,32 @@ export default function ParameterComponent({ renderTooltips(); }; + const updateNodeInternals = useUpdateNodeInternals(); + const handleNodeClass = (newNodeClass: APIClassType, code?: string): void => { if (!data.node) return; if (data.node!.template[name].value !== code) { takeSnapshot(); } - + + setNode(data.id, (oldNode) => { let newNode = cloneDeep(oldNode); - + newNode.data = { ...newNode.data, node: newNodeClass, description: newNodeClass.description ?? data.node!.description, display_name: newNodeClass.display_name ?? data.node!.display_name, }; - + newNode.data.node.template[name].value = code; - + return newNode; }); - + + updateNodeInternals(data.id); + renderTooltips(); }; @@ -268,6 +273,9 @@ export default function ParameterComponent({ { From 8d86d6208ca29b04b90b640b2efcff42e6dfe1a5 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Tue, 16 Jan 2024 16:16:06 -0300 Subject: [PATCH 13/16] Fix: Input list doesnt show up when template value are empty --- src/frontend/src/components/inputListComponent/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx index e98bba304..b82d37f63 100644 --- a/src/frontend/src/components/inputListComponent/index.tsx +++ b/src/frontend/src/components/inputListComponent/index.tsx @@ -23,6 +23,8 @@ export default function InputListComponent({ value = [value]; } + if (!value.length) value = [""]; + return (
Date: Tue, 16 Jan 2024 18:55:59 -0300 Subject: [PATCH 14/16] Fix: Transform empty object to array without opening 'editNode' modal to prevent flow build breakage. --- src/frontend/src/utils/reactflowUtils.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index 7c8a0b7c0..8d222349a 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -474,6 +474,8 @@ export function convertArrayToObj(arrayOfObjects) { export function hasDuplicateKeys(array) { const keys = {}; + // Transforms an empty object into an object array without opening the 'editNode' modal to prevent the flow build from breaking. + if (!Array.isArray(array)) array = [{"": ""}]; for (const obj of array) { for (const key in obj) { if (keys[key]) { @@ -486,6 +488,8 @@ export function hasDuplicateKeys(array) { } export function hasEmptyKey(objArray) { + // Transforms an empty object into an array without opening the 'editNode' modal to prevent the flow build from breaking. + if (!Array.isArray(objArray)) objArray = []; for (const obj of objArray) { for (const key in obj) { if (obj.hasOwnProperty(key) && key === "") { From 65d8b59885a614174dfd3a77af19be497e3646aa Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Tue, 16 Jan 2024 20:09:18 -0300 Subject: [PATCH 15/16] Fix: Add select trigger to Saved components to make toolbar open again --- .../extraSidebarComponent/sideBarDraggableComponent/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx index d7d3ee925..c2d550e60 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx @@ -4,6 +4,7 @@ import { Select, SelectContent, SelectItem, + SelectTrigger } from "../../../../../components/ui/select-custom"; import { useDarkStore } from "../../../../../stores/darkStore"; import useFlowsManagerStore from "../../../../../stores/flowsManagerStore"; @@ -117,6 +118,7 @@ export const SidebarDraggableComponent = forwardRef( name="Menu" className="side-bar-components-icon " /> + Date: Wed, 17 Jan 2024 13:42:36 -0300 Subject: [PATCH 16/16] Fix: Add value prop initial value to prevent it from breaking when open edit node modal --- src/frontend/src/components/dictComponent/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/components/dictComponent/index.tsx b/src/frontend/src/components/dictComponent/index.tsx index 066819ba1..2cf622e93 100644 --- a/src/frontend/src/components/dictComponent/index.tsx +++ b/src/frontend/src/components/dictComponent/index.tsx @@ -6,7 +6,7 @@ import { classNames } from "../../utils/utils"; import { Input } from "../ui/input"; export default function DictComponent({ - value, + value = [], onChange, disabled, editNode = false,