fix(flowsContext.tsx): add version property to FlowsContextInitialValue to prevent undefined errors

feat(flowsContext.tsx): add support for version property in FlowsProvider to store and retrieve the version of the app
fix(exportModal/index.tsx): change version property to last_tested_version to match FlowType definition
fix(extraSidebarComponent/index.tsx): add version property to saveFlowStore function call to match FlowType definition
fix(extraSidebarComponent/sideBarDraggableComponent/index.tsx): add version property to downloadNode function call to match FlowType definition
fix(nodeToolbarComponent/index.tsx): add version property to saveFlowStore function call to match FlowType definition
fix(FlowPage/index.tsx): add version property to useContext to prevent undefined errors
fix(ViewPage/index.tsx): add version property to useContext to prevent undefined errors
fix(flow/index.ts): change version property to last_tested_version to match FlowType definition
fix(tabs/index.ts): add version property to FlowsContextType to prevent undefined errors
fix(reactflowUtils.ts): change createFlowComponent function signature to include version parameter

src/frontend/src/contexts/flowsContext.tsx

@@ -14,6 +14,7 @@ import { skipNodeUpdate } from "../constants/constants";
 import {
   deleteFlowFromDatabase,
   downloadFlowsFromDatabase,
+  getVersion,
   readFlowsFromDatabase,
   saveFlowToDatabase,
   updateFlowInDatabase,
@@ -82,6 +83,7 @@ const FlowsContextInitialValue: FlowsContextType = {
   ) => {},
   saveComponent: async (component: NodeDataType) => "",
   deleteComponent: (id: string, key: string) => {},
+  version: "",
 };
 
 export const FlowsContext = createContext<FlowsContextType>(
@@ -711,10 +713,18 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
   }
 
   const [isBuilt, setIsBuilt] = useState(false);
+  // Initialize state variable for the version
+  const [version, setVersion] = useState("");
+  useEffect(() => {
+    getVersion().then((data) => {
+      setVersion(data.version);
+    });
+  }, []);
 
   return (
     <FlowsContext.Provider
       value={{
+        version,
         saveFlow,
         isBuilt,
         setIsBuilt,

src/frontend/src/modals/exportModal/index.tsx

@@ -7,13 +7,12 @@ import { EXPORT_DIALOG_SUBTITLE } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 import { FlowsContext } from "../../contexts/flowsContext";
 import { typesContext } from "../../contexts/typesContext";
-import { getVersion } from "../../controllers/API";
 import { removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
 
 const ExportModal = forwardRef(
   (props: { children: ReactNode }, ref): JSX.Element => {
-    const { flows, tabId, downloadFlow } = useContext(FlowsContext);
+    const { flows, tabId, downloadFlow, version } = useContext(FlowsContext);
     const { reactFlowInstance } = useContext(typesContext);
     const { setNoticeData } = useContext(alertContext);
     const [checked, setChecked] = useState(true);
@@ -25,13 +24,6 @@ const ExportModal = forwardRef(
     const [name, setName] = useState(flow!.name);
     const [description, setDescription] = useState(flow!.description);
     const [open, setOpen] = useState(false);
-    // Initialize state variable for the version
-    const [version, setVersion] = useState("");
-    useEffect(() => {
-      getVersion().then((data) => {
-        setVersion(data.version);
-      });
-    }, []);
 
     return (
       <BaseModal size="smaller-h-full" open={open} setOpen={setOpen}>
@@ -81,7 +73,7 @@ const ExportModal = forwardRef(
                     data: reactFlowInstance?.toObject()!,
                     description,
                     name,
-                    version,
+                    last_tested_version: version,
                   },
                   name!,
                   description
@@ -97,7 +89,7 @@ const ExportModal = forwardRef(
                     data: reactFlowInstance?.toObject()!,
                     description,
                     name,
-                    version: version,
+                    last_tested_version: version,
                   }),
                   name!,
                   description

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

@@ -31,9 +31,9 @@ import DisclosureComponent from "../DisclosureComponent";
 import SidebarDraggableComponent from "./sideBarDraggableComponent";
 
 export default function ExtraSidebar(): JSX.Element {
-  const { data, templates, getFilterEdge, setFilterEdge } =
+  const { data, templates, getFilterEdge, setFilterEdge, reactFlowInstance } =
     useContext(typesContext);
-  const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt } =
+  const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt, version } =
     useContext(FlowsContext);
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
@@ -173,7 +173,9 @@ export default function ExtraSidebar(): JSX.Element {
   }, [getFilterEdge]);
 
   const handleShareFlow = () => {
-    const reactFlow = flow!.data as ReactFlowJsonObject;
+    const reactFlow = reactFlowInstance
+      ? reactFlowInstance.toObject()
+      : (flow!.data as ReactFlowJsonObject);
     const saveFlow: FlowType = {
       name: flow!.name,
       id: flow!.id,
@@ -182,6 +184,7 @@ export default function ExtraSidebar(): JSX.Element {
         ...reactFlow,
       },
       is_component: false,
+      last_tested_version: version,
     };
     saveFlowStore(
       saveFlow,

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx

@@ -35,7 +35,7 @@ export default function SidebarDraggableComponent({
   official: boolean;
 }) {
   const open = useRef(false);
-  const { getNodeId, deleteComponent } = useContext(FlowsContext);
+  const { getNodeId, deleteComponent, version } = useContext(FlowsContext);
   const { autoLogin, userData } = useContext(AuthContext);
 
   function handleSelectChange(value: string) {
@@ -45,7 +45,10 @@ export default function SidebarDraggableComponent({
       case "download":
         const type = removeCountFromString(itemName);
         downloadNode(
-          createFlowComponent({ id: getNodeId(type), type, node: apiClass })
+          createFlowComponent(
+            { id: getNodeId(type), type, node: apiClass },
+            version
+          )
         );
         break;
       case "delete":

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

@@ -65,7 +65,7 @@ export default function NodeToolbarComponent({
   const isMinimal = canMinimize();
   const isGroup = data.node?.flow ? true : false;
 
-  const { paste, saveComponent } = useContext(FlowsContext);
+  const { paste, saveComponent, version } = useContext(FlowsContext);
   const reactFlowInstance = useReactFlow();
   const [showModalAdvanced, setShowModalAdvanced] = useState(false);
   const [showconfirmShare, setShowconfirmShare] = useState(false);
@@ -99,7 +99,7 @@ export default function NodeToolbarComponent({
     const componentFlow = cloneDeep(data);
     saveComponent(componentFlow).then(() => {
       saveFlowStore(
-        createFlowComponent(componentFlow),
+        createFlowComponent(componentFlow, version),
         getTagsIds(Array.from(selectedTags), tagListId),
         sharePublic
       ).then(
@@ -127,7 +127,7 @@ export default function NodeToolbarComponent({
         updateNodeInternals(data.id);
         break;
       case "Download":
-        downloadNode(createFlowComponent(cloneDeep(data)));
+        downloadNode(createFlowComponent(cloneDeep(data), version));
         break;
       case "Share":
         setShowconfirmShare(true);

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

@@ -1,12 +1,11 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import Header from "../../components/headerComponent";
 import { FlowsContext } from "../../contexts/flowsContext";
-import { getVersion } from "../../controllers/API";
 import Page from "./components/PageComponent";
 
 export default function FlowPage(): JSX.Element {
-  const { flows, tabId, setTabId } = useContext(FlowsContext);
+  const { flows, tabId, setTabId, version } = useContext(FlowsContext);
   const { id } = useParams();
 
   // Set flow tab id
@@ -14,14 +13,6 @@ export default function FlowPage(): JSX.Element {
     setTabId(id!);
   }, [id]);
 
-  // Initialize state variable for the version
-  const [version, setVersion] = useState("");
-  useEffect(() => {
-    getVersion().then((data) => {
-      setVersion(data.version);
-    });
-  }, []);
-
   return (
     <>
       <Header />

src/frontend/src/pages/ViewPage/index.tsx

@@ -1,7 +1,6 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { FlowsContext } from "../../contexts/flowsContext";
-import { getVersion } from "../../controllers/API";
 import Page from "../FlowPage/components/PageComponent";
 
 export default function ViewPage() {
@@ -13,14 +12,6 @@ export default function ViewPage() {
     setTabId(id!);
   }, [id]);
 
-  // Initialize state variable for the version
-  const [version, setVersion] = useState("");
-  useEffect(() => {
-    getVersion().then((data) => {
-      setVersion(data.version);
-    });
-  }, []);
-
   return (
     <div className="flow-page-positioning">
       {flows.length > 0 &&

src/frontend/src/types/flow/index.ts

@@ -10,7 +10,7 @@ export type FlowType = {
   is_component?: boolean;
   parent?: string;
   date_created?: string;
-  version?: string;
+  last_tested_version?: string;
 };
 export type NodeType = {
   id: string;

src/frontend/src/types/tabs/index.ts

@@ -38,6 +38,7 @@ export type FlowsContextType = {
   getTweak: tweakType;
   saveComponent: (component: NodeDataType) => Promise<String | undefined>;
   deleteComponent: (id: string, key: string) => void;
+  version: string;
 };
 
 export type FlowsState = {

src/frontend/src/utils/reactflowUtils.ts

@@ -1058,7 +1058,10 @@ export function getGroupStatus(
   return status;
 }
 
-export function createFlowComponent(nodeData: NodeDataType): FlowType {
+export function createFlowComponent(
+  nodeData: NodeDataType,
+  version: string
+): FlowType {
   nodeData.node!.official = false;
   const flowNode: FlowType = {
     data: {
@@ -1077,6 +1080,7 @@ export function createFlowComponent(nodeData: NodeDataType): FlowType {
     name: nodeData.node?.display_name || nodeData.type || "",
     id: nodeData.id || "",
     is_component: true,
+    last_tested_version: version,
   };
   return flowNode;
 }