Bugfix - Deep-cloning the nodes when duplicate (#547)

2023-06-27 13:16:21 -03:00 · 2023-06-27 13:16:21 -03:00 · 09a72fa856
commit 09a72fa856
parent 3a5cd957c3 ae5f04a1b0
9 changed files with 48 additions and 28 deletions
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@ -1212,15 +1212,15 @@
      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
    },
    "node_modules/@mui/system": {
-      "version": "5.13.5",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.5.tgz",
-      "integrity": "sha512-n0gzUxoZ2ZHZgnExkh2Htvo9uW2oakofgPRQrDoa/GQOWyRD0NH9MDszBwOb6AAoXZb+OV5TE7I4LeZ/dzgHYA==",
+      "version": "5.13.6",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.6.tgz",
+      "integrity": "sha512-G3Xr28uLqU3DyF6r2LQkHGw/ku4P0AHzlKVe7FGXOPl7X1u+hoe2xxj8Vdiq/69II/mh9OP21i38yBWgWb7WgQ==",
      "dependencies": {
-        "@babel/runtime": "^7.21.0",
+        "@babel/runtime": "^7.22.5",
        "@mui/private-theming": "^5.13.1",
        "@mui/styled-engine": "^5.13.2",
        "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.13.1",
+        "@mui/utils": "^5.13.6",
        "clsx": "^1.2.1",
        "csstype": "^3.1.2",
        "prop-types": "^15.8.1"
@ -1280,11 +1280,11 @@
      }
    },
    "node_modules/@mui/utils": {
-      "version": "5.13.1",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.1.tgz",
-      "integrity": "sha512-6lXdWwmlUbEU2jUI8blw38Kt+3ly7xkmV9ljzY4Q20WhsJMWiNry9CX8M+TaP/HbtuyR8XKsdMgQW7h7MM3n3A==",
+      "version": "5.13.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.6.tgz",
+      "integrity": "sha512-ggNlxl5NPSbp+kNcQLmSig6WVB0Id+4gOxhx644987v4fsji+CSXc+MFYLocFB/x4oHtzCUlSzbVHlJfP/fXoQ==",
      "dependencies": {
-        "@babel/runtime": "^7.21.0",
+        "@babel/runtime": "^7.22.5",
        "@types/prop-types": "^15.7.5",
        "@types/react-is": "^18.2.0",
        "prop-types": "^15.8.1",
@ -3444,7 +3444,7 @@
      "version": "16.18.12",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz",
      "integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==",
-      "devOptional": true
+      "dev": true
    },
    "node_modules/@types/parse-json": {
      "version": "4.0.0",
@ -3714,9 +3714,9 @@
      }
    },
    "node_modules/aria-query": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.2.1.tgz",
-      "integrity": "sha512-7uFg4b+lETFgdaJyETnILsXgnnzVnkHcgRbwbPwevm5x/LmUlt3MjczMRe1zg824iBgXZNRPTBftNYyRSKLp2g==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
      "dev": true,
      "dependencies": {
        "dequal": "^2.0.3"
@ -5010,9 +5010,9 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.4.438",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.438.tgz",
-      "integrity": "sha512-x94U0FhphEsHsOloCvlsujHCvoir0ZQ73ZAs/QN4PLx98uNvyEU79F75rq1db75Bx/atvuh7KPeuxelh+xfYJw=="
+      "version": "1.4.440",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz",
+      "integrity": "sha512-r6dCgNpRhPwiWlxbHzZQ/d9swfPaEJGi8ekqRBwQYaR3WmA5VkqQfBWSDDjuJU1ntO+W9tHx8OHV/96Q8e0dVw=="
    },
    "node_modules/emoji-regex": {
      "version": "8.0.0",
@ -5504,6 +5504,7 @@
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
      "hasInstallScript": true,
      "optional": true,
      "os": [
@ -6745,9 +6746,9 @@
      }
    },
    "node_modules/katex": {
-      "version": "0.16.7",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.7.tgz",
-      "integrity": "sha512-Xk9C6oGKRwJTfqfIbtr0Kes9OSv6IFsuhFGc7tW4urlpMJtuh+7YhzU6YEG9n8gmWKcMAFzkp7nr+r69kV0zrA==",
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz",
+      "integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==",
      "funding": [
        "https://opencollective.com/katex",
        "https://github.com/sponsors/katex"
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@ -1,9 +1,11 @@
 import { Listbox, Transition } from "@headlessui/react";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useContext, useEffect, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 import { INPUT_STYLE } from "../../constants";
 import { ChevronsUpDown, Check } from "lucide-react";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { TabsContext } from "../../contexts/tabsContext";

 export default function Dropdown({
  value,
@ -12,12 +14,15 @@ export default function Dropdown({
  editNode = false,
  numberOfOptions = 0,
 }: DropDownComponentType) {
+  const { closePopUp } = useContext(PopUpContext);
+
  let [internalValue, setInternalValue] = useState(
    value === "" || !value ? "Choose an option" : value
  );
+
  useEffect(() => {
    setInternalValue(value === "" || !value ? "Choose an option" : value);
-  }, [value]);
+  }, [closePopUp]);

  return (
    <>
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@ -2,6 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 import { INPUT_STYLE } from "../../constants";
+import { PopUpContext } from "../../contexts/popUpContext";

 export default function FloatComponent({
  value,
@ -12,6 +13,7 @@ export default function FloatComponent({
 }: FloatComponentType) {
  const [myValue, setMyValue] = useState(value ?? "");
  const { setDisableCopyPaste } = useContext(TabsContext);
+  const { closePopUp } = useContext(PopUpContext);

  const step = 0.1;
  const min = 0;
@ -26,7 +28,7 @@ export default function FloatComponent({

  useEffect(() => {
    setMyValue(value);
-  }, [value]);
+  }, [closePopUp]);

  return (
    <div
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@ -5,6 +5,7 @@ import { TabsContext } from "../../contexts/tabsContext";
 import _ from "lodash";
 import { INPUT_STYLE } from "../../constants";
 import { X, Plus } from "lucide-react";
+import { PopUpContext } from "../../contexts/popUpContext";

 export default function InputListComponent({
  value,
@ -13,12 +14,19 @@ export default function InputListComponent({
  editNode = false,
 }: InputListComponentType) {
  const [inputList, setInputList] = useState(value ?? [""]);
+  const { closePopUp } = useContext(PopUpContext);
+
  useEffect(() => {
    if (disabled) {
      setInputList([""]);
      onChange([""]);
    }
  }, [disabled, onChange]);
+
+  useEffect(() => {
+    setInputList(value);
+  }, [closePopUp]);
+
  return (
    <div
      className={
@ -44,9 +52,9 @@ export default function InputListComponent({
              setInputList((old) => {
                let newInputList = _.cloneDeep(old);
                newInputList[idx] = e.target.value;
+                onChange(newInputList);
                return newInputList;
              });
-              onChange(inputList);
            }}
          />
          {idx === inputList.length - 1 ? (
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@ -3,6 +3,7 @@ import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 import { classNames } from "../../utils";
 import { INPUT_STYLE } from "../../constants";
+import { PopUpContext } from "../../contexts/popUpContext";

 export default function IntComponent({
  value,
@ -14,6 +15,7 @@ export default function IntComponent({
  const [myValue, setMyValue] = useState(value ?? "");
  const { setDisableCopyPaste } = useContext(TabsContext);
  const min = 0;
+  const { closePopUp } = useContext(PopUpContext);

  useEffect(() => {
    if (disabled) {
@ -24,7 +26,7 @@ export default function IntComponent({

  useEffect(() => {
    setMyValue(value);
-  }, [value]);
+  }, [closePopUp]);

  return (
    <div
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@ -414,7 +414,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
          y: insidePosition.y + n.position.y - minimumY,
        },
        data: {
-          ...n.data,
+          ..._.cloneDeep(n.data),
          id: newId,
        },
      };
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@ -103,7 +103,9 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
          <div className="flex items-center justify-between px-2">
            <TabsList>
              {tabs.map((tab, index) => (
-                <TabsTrigger key={index} value={index.toString()}>{tab.name}</TabsTrigger>
+                <TabsTrigger key={index} value={index.toString()}>
+                  {tab.name}
+                </TabsTrigger>
              ))}
            </TabsList>
            <div className="float-right">
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@ -79,7 +79,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
  }

  return (
-    <Dialog open={true} onOpenChange={setModalOpen} >
+    <Dialog open={true} onOpenChange={setModalOpen}>
      <DialogTrigger asChild></DialogTrigger>
      <DialogContent className="lg:max-w-[700px] ">
        <DialogHeader>
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@ -978,5 +978,5 @@ export function getRandomKeyByssmm(): string {
  const now = new Date();
  const seconds = String(now.getSeconds()).padStart(2, "0");
  const milliseconds = String(now.getMilliseconds()).padStart(3, "0");
-  return seconds + milliseconds;
+  return seconds + milliseconds + Math.abs(Math.floor(Math.random() * 10001));
 }