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 {
-  ReactNode,
-  forwardRef,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { ReactNode, useContext, useEffect, useRef, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { TagsSelector } from "../../components/tagsSelectorComponent";
@@ -19,27 +12,27 @@ import { removeApiKeys } from "../../utils/reactflowUtils";
 import { getTagsIds } from "../../utils/storeUtils";
 import BaseModal from "../baseModal";
 
-const ShareModal = forwardRef(
-  (
-    props: {
+export default function ShareModal({
+  component,
+  is_component,
+  children,
+  open,
+  setOpen,
+}: {
   children?: ReactNode;
   is_component: boolean;
   component: FlowType;
   open?: boolean;
   setOpen?: (open: boolean) => void;
-    },
-    ref
-  ): JSX.Element => {
+}): JSX.Element {
   const { version, addFlow } = useContext(FlowsContext);
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const [checked, setChecked] = useState(true);
-    const [name, setName] = useState(props.component?.name ?? "");
-    const [description, setDescription] = useState(
-      props.component?.description ?? ""
-    );
-    const [open, setOpen] = useState(props.children ? false : true);
+  const [name, setName] = useState(component?.name ?? "");
+  const [description, setDescription] = useState(component?.description ?? "");
+  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 [loadingTags, setLoadingTags] = useState<boolean>(false);
@@ -60,27 +53,27 @@ const ShareModal = forwardRef(
   }
 
   useEffect(() => {
-      setName(props.component?.name ?? "");
-      setDescription(props.component?.description ?? "");
-    }, [props.component]);
+    setName(component?.name ?? "");
+    setDescription(component?.description ?? "");
+  }, [component]);
 
   const handleShareComponent = () => {
     const saveFlow: FlowType = checked
       ? {
-            id: props.component!.id,
-            data: props.component!.data,
+          id: component!.id,
+          data: component!.data,
           description,
           name,
           last_tested_version: version,
-            is_component: props.is_component,
+          is_component: is_component,
         }
       : removeApiKeys({
-            id: props.component!.id,
-            data: props.component!.data,
+          id: component!.id,
+          data: component!.data,
           description,
           name,
           last_tested_version: version,
-            is_component: props.is_component,
+          is_component: is_component,
         });
     saveFlowStore(
       saveFlow,
@@ -88,7 +81,7 @@ const ShareModal = forwardRef(
       sharePublic
     ).then(
       () => {
-          if (props.is_component) {
+        if (is_component) {
           addFlow(true, saveFlow);
         }
         setSuccessData({
@@ -107,12 +100,10 @@ const ShareModal = forwardRef(
   return (
     <BaseModal
       size="smaller-h-full"
-        open={props.open ?? open}
-        setOpen={props.setOpen ?? setOpen}
+      open={open ?? internalOpen}
+      setOpen={setOpen ?? internalSetOpen}
     >
-        <BaseModal.Trigger>
-          {props.children ? props.children : <></>}
-        </BaseModal.Trigger>
+      <BaseModal.Trigger>{children ? children : <></>}</BaseModal.Trigger>
       <BaseModal.Header
         description={`Share your ${nameComponent} to the Langflow Store`}
       >
@@ -173,17 +164,14 @@ const ShareModal = forwardRef(
         <Button
           onClick={() => {
             handleShareComponent();
-              if (props.setOpen) props.setOpen(false);
-              else setOpen(false);
+            if (setOpen) setOpen(false);
+            else internalSetOpen(false);
           }}
           type="button"
         >
-            {props.is_component ? "Save and " : ""}Share{" "}
-            {!props.is_component ? "Flow" : ""}
+          {is_component ? "Save and " : ""}Share {!is_component ? "Flow" : ""}
         </Button>
       </BaseModal.Footer>
     </BaseModal>
   );
 }
-);
-export default ShareModal;

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) => {