diff --git a/src/frontend/src/contexts/flowsContext.tsx b/src/frontend/src/contexts/flowsContext.tsx index e89d59715..1ff47edcd 100644 --- a/src/frontend/src/contexts/flowsContext.tsx +++ b/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( @@ -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 ( { - 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 ( @@ -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 diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 6550f94c7..a3c068935 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/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, 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 c8a75c3ef..09ac317a0 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx +++ b/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": diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index d5c331a44..7c903b369 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/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); diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx index 83fc4145d..9c11f66da 100644 --- a/src/frontend/src/pages/FlowPage/index.tsx +++ b/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 ( <>
diff --git a/src/frontend/src/pages/ViewPage/index.tsx b/src/frontend/src/pages/ViewPage/index.tsx index ec64001dd..2f1af3049 100644 --- a/src/frontend/src/pages/ViewPage/index.tsx +++ b/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 (
{flows.length > 0 && diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts index 8bee8219f..baafb8661 100644 --- a/src/frontend/src/types/flow/index.ts +++ b/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; diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts index 0d83065a4..08c21846b 100644 --- a/src/frontend/src/types/tabs/index.ts +++ b/src/frontend/src/types/tabs/index.ts @@ -38,6 +38,7 @@ export type FlowsContextType = { getTweak: tweakType; saveComponent: (component: NodeDataType) => Promise; deleteComponent: (id: string, key: string) => void; + version: string; }; export type FlowsState = { diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index 407828982..8983f4530 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/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; }