fix(shareModal/index.tsx): fix variable naming and improve code readability

fix(nodeToolbarComponent/index.tsx): fix issue with flowComponent not being cloned before setting it

src/frontend/src/modals/shareModal/index.tsx

@@ -1,11 +1,4 @@
-import {
+import { ReactNode, useContext, useEffect, useRef, useState } from "react";
-  ReactNode,
-  forwardRef,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { TagsSelector } from "../../components/tagsSelectorComponent";
@@ -19,171 +12,166 @@ import { removeApiKeys } from "../../utils/reactflowUtils";
 import { getTagsIds } from "../../utils/storeUtils";
 import BaseModal from "../baseModal";
 
-const ShareModal = forwardRef(
+export default function ShareModal({
-  (
+  component,
-    props: {
+  is_component,
-      children?: ReactNode;
+  children,
-      is_component: boolean;
+  open,
-      component: FlowType;
+  setOpen,
-      open?: boolean;
+}: {
-      setOpen?: (open: boolean) => void;
+  children?: ReactNode;
-    },
+  is_component: boolean;
-    ref
+  component: FlowType;
-  ): JSX.Element => {
+  open?: boolean;
-    const { version, addFlow } = useContext(FlowsContext);
+  setOpen?: (open: boolean) => void;
-    const { setSuccessData, setErrorData } = useContext(alertContext);
+}): JSX.Element {
-    const [checked, setChecked] = useState(true);
+  const { version, addFlow } = useContext(FlowsContext);
-    const [name, setName] = useState(props.component?.name ?? "");
+  const { setSuccessData, setErrorData } = useContext(alertContext);
-    const [description, setDescription] = useState(
+  const [checked, setChecked] = useState(true);
-      props.component?.description ?? ""
+  const [name, setName] = useState(component?.name ?? "");
-    );
+  const [description, setDescription] = useState(component?.description ?? "");
-    const [open, setOpen] = useState(props.children ? false : true);
+  const [internalOpen, internalSetOpen] = useState(children ? false : true);
 
-    const nameComponent = props.is_component ? "Component" : "Flow";
+  const nameComponent = is_component ? "Component" : "Flow";
 
-    const [tags, setTags] = useState<{ id: string; name: string }[]>([]);
+  const [tags, setTags] = useState<{ id: string; name: string }[]>([]);
-    const [loadingTags, setLoadingTags] = useState<boolean>(false);
+  const [loadingTags, setLoadingTags] = useState<boolean>(false);
-    const [sharePublic, setSharePublic] = useState(true);
+  const [sharePublic, setSharePublic] = useState(true);
-    const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
-    const tagListId = useRef<{ id: string; name: string }[]>([]);
+  const tagListId = useRef<{ id: string; name: string }[]>([]);
 
-    useEffect(() => {
+  useEffect(() => {
-      handleGetTags();
+    handleGetTags();
-    }, []);
+  }, []);
 
-    function handleGetTags() {
+  function handleGetTags() {
-      setLoadingTags(true);
+    setLoadingTags(true);
-      getStoreTags().then((res) => {
+    getStoreTags().then((res) => {
-        setTags(res);
+      setTags(res);
-        setLoadingTags(false);
+      setLoadingTags(false);
-      });
+    });
-    }
-
-    useEffect(() => {
-      setName(props.component?.name ?? "");
-      setDescription(props.component?.description ?? "");
-    }, [props.component]);
-
-    const handleShareComponent = () => {
-      const saveFlow: FlowType = checked
-        ? {
-            id: props.component!.id,
-            data: props.component!.data,
-            description,
-            name,
-            last_tested_version: version,
-            is_component: props.is_component,
-          }
-        : removeApiKeys({
-            id: props.component!.id,
-            data: props.component!.data,
-            description,
-            name,
-            last_tested_version: version,
-            is_component: props.is_component,
-          });
-      saveFlowStore(
-        saveFlow,
-        getTagsIds(selectedTags, tagListId),
-        sharePublic
-      ).then(
-        () => {
-          if (props.is_component) {
-            addFlow(true, saveFlow);
-          }
-          setSuccessData({
-            title: `${nameComponent} shared successfully`,
-          });
-        },
-        (err) => {
-          setErrorData({
-            title: "Error sharing flow",
-            list: [err["response"]["data"]["detail"]],
-          });
-        }
-      );
-    };
-
-    return (
-      <BaseModal
-        size="smaller-h-full"
-        open={props.open ?? open}
-        setOpen={props.setOpen ?? setOpen}
-      >
-        <BaseModal.Trigger>
-          {props.children ? props.children : <></>}
-        </BaseModal.Trigger>
-        <BaseModal.Header
-          description={`Share your ${nameComponent} to the Langflow Store`}
-        >
-          <span className="pr-2">Share</span>
-          <IconComponent
-            name="Share2"
-            className="h-6 w-6 pl-1 text-foreground"
-            aria-hidden="true"
-          />
-        </BaseModal.Header>
-        <BaseModal.Content>
-          <EditFlowSettings
-            name={name}
-            description={description}
-            setName={setName}
-            setDescription={setDescription}
-          />
-          <div className="mt-3 flex h-8 w-full">
-            <TagsSelector
-              tags={tags}
-              loadingTags={loadingTags}
-              disabled={false}
-              selectedTags={selectedTags}
-              setSelectedTags={setSelectedTags}
-            />
-          </div>
-          <div className="mt-5 flex items-center space-x-2">
-            <Checkbox
-              id="terms"
-              checked={sharePublic}
-              onCheckedChange={(event: boolean) => {
-                setSharePublic(event);
-              }}
-            />
-            <label htmlFor="terms" className="export-modal-save-api text-sm ">
-              Make {nameComponent} Public
-            </label>
-          </div>
-          <div className="mt-3 flex items-center space-x-2">
-            <Checkbox
-              id="terms"
-              checked={checked}
-              onCheckedChange={(event: boolean) => {
-                setChecked(event);
-              }}
-            />
-            <label htmlFor="terms" className="export-modal-save-api text-sm ">
-              Save with my API keys
-            </label>
-          </div>
-          <span className=" text-xs text-destructive ">
-            Caution: Uncheck this box only removes API keys from fields
-            specifically designated for API keys.
-          </span>
-        </BaseModal.Content>
-
-        <BaseModal.Footer>
-          <Button
-            onClick={() => {
-              handleShareComponent();
-              if (props.setOpen) props.setOpen(false);
-              else setOpen(false);
-            }}
-            type="button"
-          >
-            {props.is_component ? "Save and " : ""}Share{" "}
-            {!props.is_component ? "Flow" : ""}
-          </Button>
-        </BaseModal.Footer>
-      </BaseModal>
-    );
   }
-);
+
-export default ShareModal;
+  useEffect(() => {
+    setName(component?.name ?? "");
+    setDescription(component?.description ?? "");
+  }, [component]);
+
+  const handleShareComponent = () => {
+    const saveFlow: FlowType = checked
+      ? {
+          id: component!.id,
+          data: component!.data,
+          description,
+          name,
+          last_tested_version: version,
+          is_component: is_component,
+        }
+      : removeApiKeys({
+          id: component!.id,
+          data: component!.data,
+          description,
+          name,
+          last_tested_version: version,
+          is_component: is_component,
+        });
+    saveFlowStore(
+      saveFlow,
+      getTagsIds(selectedTags, tagListId),
+      sharePublic
+    ).then(
+      () => {
+        if (is_component) {
+          addFlow(true, saveFlow);
+        }
+        setSuccessData({
+          title: `${nameComponent} shared successfully`,
+        });
+      },
+      (err) => {
+        setErrorData({
+          title: "Error sharing flow",
+          list: [err["response"]["data"]["detail"]],
+        });
+      }
+    );
+  };
+
+  return (
+    <BaseModal
+      size="smaller-h-full"
+      open={open ?? internalOpen}
+      setOpen={setOpen ?? internalSetOpen}
+    >
+      <BaseModal.Trigger>{children ? children : <></>}</BaseModal.Trigger>
+      <BaseModal.Header
+        description={`Share your ${nameComponent} to the Langflow Store`}
+      >
+        <span className="pr-2">Share</span>
+        <IconComponent
+          name="Share2"
+          className="h-6 w-6 pl-1 text-foreground"
+          aria-hidden="true"
+        />
+      </BaseModal.Header>
+      <BaseModal.Content>
+        <EditFlowSettings
+          name={name}
+          description={description}
+          setName={setName}
+          setDescription={setDescription}
+        />
+        <div className="mt-3 flex h-8 w-full">
+          <TagsSelector
+            tags={tags}
+            loadingTags={loadingTags}
+            disabled={false}
+            selectedTags={selectedTags}
+            setSelectedTags={setSelectedTags}
+          />
+        </div>
+        <div className="mt-5 flex items-center space-x-2">
+          <Checkbox
+            id="terms"
+            checked={sharePublic}
+            onCheckedChange={(event: boolean) => {
+              setSharePublic(event);
+            }}
+          />
+          <label htmlFor="terms" className="export-modal-save-api text-sm ">
+            Make {nameComponent} Public
+          </label>
+        </div>
+        <div className="mt-3 flex items-center space-x-2">
+          <Checkbox
+            id="terms"
+            checked={checked}
+            onCheckedChange={(event: boolean) => {
+              setChecked(event);
+            }}
+          />
+          <label htmlFor="terms" className="export-modal-save-api text-sm ">
+            Save with my API keys
+          </label>
+        </div>
+        <span className=" text-xs text-destructive ">
+          Caution: Uncheck this box only removes API keys from fields
+          specifically designated for API keys.
+        </span>
+      </BaseModal.Content>
+
+      <BaseModal.Footer>
+        <Button
+          onClick={() => {
+            handleShareComponent();
+            if (setOpen) setOpen(false);
+            else internalSetOpen(false);
+          }}
+          type="button"
+        >
+          {is_component ? "Save and " : ""}Share {!is_component ? "Flow" : ""}
+        </Button>
+      </BaseModal.Footer>
+    </BaseModal>
+  );
+}

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -69,7 +69,7 @@ export default function NodeToolbarComponent({
   const [flowComponent, setFlowComponent] = useState<FlowType>();
 
   useEffect(() => {
-    setFlowComponent(createFlowComponent(data, version));
+    setFlowComponent(createFlowComponent(cloneDeep(data), version));
   }, [data]);
 
   const handleSelectChange = (event) => {