feat(frontend): add router query for visual editor flows

frontend/src/components/visual-editor/v2/Diagrams.tsx

@@ -29,6 +29,7 @@ import {
   DiagramModel,
   DiagramModelGenerics,
 } from "@projectstorm/react-diagrams";
+import { useRouter } from "next/router";
 import {
   SyntheticEvent,
   useCallback,
@@ -52,7 +53,7 @@ import useDebouncedUpdate from "@/hooks/useDebouncedUpdate";
 import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useSearch } from "@/hooks/useSearch";
 import { useTranslate } from "@/hooks/useTranslate";
-import { EntityType, Format, QueryType } from "@/services/types";
+import { EntityType, Format, QueryType, RouterType } from "@/services/types";
 import { IBlock } from "@/types/block.types";
 import { ICategory } from "@/types/category.types";
 import { BlockPorts } from "@/types/visual-editor.types";
@@ -65,6 +66,8 @@ import { AdvancedLinkModel } from "./AdvancedLink/AdvancedLinkModel";
 
 const Diagrams = () => {
   const { t } = useTranslate();
+  const router = useRouter();
+  const flowId = router.query.id?.toString();
   const [model, setModel] = useState<
     DiagramModel<DiagramModelGenerics> | undefined
   >();
@@ -95,7 +98,9 @@ const Diagrams = () => {
     },
     {
       onSuccess([{ id, zoom, offset }]) {
-        if (id) {
+        if (flowId) {
+          setSelectedCategoryId?.(flowId);
+        } else if (id) {
           setSelectedCategoryId?.(id);
           if (engine?.getModel()) {
             setViewerOffset(offset || [0, 0]);
@@ -161,6 +166,8 @@ const Diagrams = () => {
       if (id) {
         setSelectedCategoryId?.(id);
         setSelectedBlockId(undefined); // Reset selected block when switching categories, resetting edit & remove buttons
+
+        router.push(`/${RouterType.VISUAL_EDITOR}/flows/${id}`);
       }
     }
   };
@@ -181,6 +188,12 @@ const Diagrams = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    setSelectedCategoryId(flowId || "");
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flowId]);
+
   useEffect(() => {
     const { canvas, model, engine } = buildDiagram({
       zoom: currentCategory?.zoom || 100,

frontend/src/pages/visual-editor/flows/[id]/index.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import VisualEditorPage from "../..";
+
+export default VisualEditorPage;

frontend/src/pages/visual-editor/flows/index.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import VisualEditorPage from "..";
+
+export default VisualEditorPage;