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 835f98c69d6d..1dc7e2afa2af 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
@@ -72,7 +72,7 @@ export const SidebarDraggableComponent = forwardRef(
);
break;
case "delete":
- const flowId = flows.find((f) => f.name === display_name);
+ const flowId = flows?.find((f) => f.name === display_name);
if (flowId) deleteFlow({ id: flowId.id });
break;
}
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index d2c80c02dd38..743c5acd444d 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -82,7 +82,7 @@ export default function NodeToolbarComponent({
const validApiKey = useStoreStore((state) => state.validApiKey);
const shortcuts = useShortcutsStore((state) => state.shortcuts);
const unselectAll = useFlowStore((state) => state.unselectAll);
- const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+ const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
const addFlow = useAddFlow();
function handleMinimizeWShortcut(e: KeyboardEvent) {
@@ -179,7 +179,7 @@ export default function NodeToolbarComponent({
function handleFreezeAll(e: KeyboardEvent) {
if (isWrappedWithClass(e, "noflow")) return;
e.preventDefault();
- FreezeAllVertices({ flowId: currentFlow!.id, stopNodeId: data.id });
+ FreezeAllVertices({ flowId: currentFlowId, stopNodeId: data.id });
}
const advanced = useShortcutsStore((state) => state.advanced);
@@ -280,7 +280,7 @@ export default function NodeToolbarComponent({
}));
break;
case "freezeAll":
- FreezeAllVertices({ flowId: currentFlow!.id, stopNodeId: data.id });
+ FreezeAllVertices({ flowId: currentFlowId, stopNodeId: data.id });
break;
case "code":
setOpenModal(!openModal);
@@ -355,7 +355,7 @@ export default function NodeToolbarComponent({
}
};
- const isSaved = flows.some((flow) =>
+ const isSaved = flows?.some((flow) =>
Object.values(flow).includes(data.node?.display_name!),
);
@@ -480,7 +480,7 @@ export default function NodeToolbarComponent({
event.preventDefault();
takeSnapshot();
FreezeAllVertices({
- flowId: currentFlow!.id,
+ flowId: currentFlowId,
stopNodeId: data.id,
});
}}
@@ -543,7 +543,8 @@ export default function NodeToolbarComponent({
obj.name === "Save")?.shortcut!
+ shortcuts.find((obj) => obj.name === "Save Component")
+ ?.shortcut!
}
value={"Save"}
icon={"SaveAll"}
@@ -712,7 +713,7 @@ export default function NodeToolbarComponent({
});
setSuccessData({ title: `${data.id} successfully overridden!` });
}}
- onClose={setShowOverrideModal}
+ onClose={() => setShowOverrideModal(false)}
onCancel={() => {
addFlow({
flow: flowComponent,
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index c8e4f334443f..e4a6553d996e 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -1,7 +1,10 @@
import FeatureFlags from "@/../feature-config.json";
import { useGetGlobalVariables } from "@/controllers/API/queries/variables";
+import useSaveFlow from "@/hooks/flows/use-save-flow";
+import { SaveChangesModal } from "@/modals/saveChangesModal";
+import { customStringify } from "@/utils/reactflowUtils";
import { useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useBlocker, useNavigate, useParams } from "react-router-dom";
import FlowToolbar from "../../components/chatComponent";
import Header from "../../components/headerComponent";
import { useDarkStore } from "../../stores/darkStore";
@@ -11,34 +14,66 @@ import Page from "./components/PageComponent";
import ExtraSidebar from "./components/extraSidebarComponent";
export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
- const setCurrentFlowId = useFlowsManagerStore(
- (state) => state.setCurrentFlowId,
- );
+ const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
+ const currentFlow = useFlowStore((state) => state.currentFlow);
+ const currentSavedFlow = useFlowsManagerStore((state) => state.currentFlow);
+
+ const changesNotSaved =
+ customStringify(currentFlow) !== customStringify(currentSavedFlow);
+
+ const blocker = useBlocker(changesNotSaved);
const version = useDarkStore((state) => state.version);
const setOnFlowPage = useFlowStore((state) => state.setOnFlowPage);
- const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
const { id } = useParams();
const navigate = useNavigate();
useGetGlobalVariables();
+ const saveFlow = useSaveFlow();
const flows = useFlowsManagerStore((state) => state.flows);
+ const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+
+ const handleSave = () => {
+ saveFlow().then(() => (blocker.proceed ? blocker.proceed() : null));
+ };
+
+ useEffect(() => {
+ const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+ if (changesNotSaved) {
+ event.preventDefault();
+ event.returnValue = ""; // Required for Chrome
+ }
+ };
+
+ window.addEventListener("beforeunload", handleBeforeUnload);
+
+ return () => {
+ window.removeEventListener("beforeunload", handleBeforeUnload);
+ };
+ }, [changesNotSaved, navigate]);
// Set flow tab id
useEffect(() => {
- const isAnExistingFlow = flows.some((flow) => flow.id === id);
+ if (flows && currentFlowId === "") {
+ const isAnExistingFlow = flows.find((flow) => flow.id === id);
- if (!isAnExistingFlow) {
- navigate("/all");
- return;
+ if (!isAnExistingFlow) {
+ navigate("/all");
+ return;
+ }
+
+ setCurrentFlow(isAnExistingFlow);
}
+ }, [id, flows]);
- setCurrentFlowId(id!);
+ useEffect(() => {
setOnFlowPage(true);
return () => {
setOnFlowPage(false);
+ setCurrentFlow();
};
}, [id]);
+
return (
<>
@@ -49,7 +84,7 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
{/* Primary column */}
{!view && }
@@ -66,6 +101,13 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
⛓️ v{version}
- {loading ? (
+ {!currentSavedFlow ? (
diff --git a/src/frontend/src/pages/ProfileSettingsPage/index.tsx b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
index 5d0135d9f622..ef8beadaa5af 100644
--- a/src/frontend/src/pages/ProfileSettingsPage/index.tsx
+++ b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
@@ -4,7 +4,7 @@ import {
} from "@/controllers/API/queries/auth";
import * as Form from "@radix-ui/react-form";
import { cloneDeep } from "lodash";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useState } from "react";
import IconComponent from "../../components/genericIconComponent";
import Header from "../../components/headerComponent";
import InputComponent from "../../components/inputComponent";
@@ -18,7 +18,6 @@ import {
import { CONTROL_PATCH_USER_STATE } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext";
import useAlertStore from "../../stores/alertStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
import {
inputHandlerEventType,
patchUserInputStateType,
@@ -26,18 +25,9 @@ import {
import { gradients } from "../../utils/styleUtils";
import GradientChooserComponent from "../SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent";
export default function ProfileSettingsPage(): JSX.Element {
- const setCurrentFlowId = useFlowsManagerStore(
- (state) => state.setCurrentFlowId,
- );
-
const [inputState, setInputState] = useState
(
CONTROL_PATCH_USER_STATE,
);
-
- // set null id
- useEffect(() => {
- setCurrentFlowId("");
- }, []);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setErrorData = useAlertStore((state) => state.setErrorData);
const { userData, setUserData } = useContext(AuthContext);
diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx
index bb08417d4d66..297aba418743 100644
--- a/src/frontend/src/pages/SettingsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/index.tsx
@@ -1,19 +1,12 @@
import FeatureFlags from "@/../feature-config.json";
import useAuthStore from "@/stores/authStore";
import { useStoreStore } from "@/stores/storeStore";
-import { useEffect } from "react";
import { Outlet } from "react-router-dom";
import ForwardedIconComponent from "../../components/genericIconComponent";
import PageLayout from "../../components/pageLayout";
import SidebarNav from "../../components/sidebarComponent";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function SettingsPage(): JSX.Element {
- const pathname = location.pathname;
- const setCurrentFlowId = useFlowsManagerStore(
- (state) => state.setCurrentFlowId,
- );
-
const autoLogin = useAuthStore((state) => state.autoLogin);
const hasStore = useStoreStore((state) => state.hasStore);
@@ -21,10 +14,6 @@ export default function SettingsPage(): JSX.Element {
const showGeneralSettings =
FeatureFlags.ENABLE_PROFILE_ICONS || hasStore || !autoLogin;
- useEffect(() => {
- setCurrentFlowId("");
- }, [pathname]);
-
const sidebarNavItems: {
href?: string;
title: string;
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
index 5218edb5d228..a4570f7c5d18 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
@@ -18,7 +18,6 @@ import { useParams } from "react-router-dom";
import { CONTROL_PATCH_USER_STATE } from "../../../../constants/constants";
import { AuthContext } from "../../../../contexts/authContext";
import useAlertStore from "../../../../stores/alertStore";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useStoreStore } from "../../../../stores/storeStore";
import {
inputHandlerEventType,
@@ -31,10 +30,6 @@ import ProfilePictureFormComponent from "./components/ProfilePictureForm";
import StoreApiKeyFormComponent from "./components/StoreApiKeyForm";
export const GeneralPage = () => {
- const setCurrentFlowId = useFlowsManagerStore(
- (state) => state.setCurrentFlowId,
- );
-
const { scrollId } = useParams();
const [inputState, setInputState] = useState(
@@ -112,7 +107,7 @@ export const GeneralPage = () => {
}
};
- useScrollToElement(scrollId, setCurrentFlowId);
+ useScrollToElement(scrollId);
const { mutate } = usePostAddApiKey({
onSuccess: () => {
diff --git a/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx b/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx
index faa7408a3332..966d4bb34812 100644
--- a/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/hooks/use-scroll-to-element.tsx
@@ -1,9 +1,6 @@
import { useEffect } from "react";
-const useScrollToElement = (
- scrollId: string | null | undefined,
- setCurrentFlowId: (currentFlowId: string) => void,
-) => {
+const useScrollToElement = (scrollId: string | null | undefined) => {
useEffect(() => {
const element = document.getElementById(scrollId ?? "null");
if (element) {
@@ -11,10 +8,6 @@ const useScrollToElement = (
element.scrollIntoView({ behavior: "smooth" });
}
}, [scrollId]);
-
- useEffect(() => {
- setCurrentFlowId("");
- }, [setCurrentFlowId]);
};
export default useScrollToElement;
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 36e6ce08de18..5342eb248ee5 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -28,7 +28,7 @@ import {
} from "../../constants/alerts_constants";
import { STORE_DESC, STORE_TITLE } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext";
-import { getStoreComponents, getStoreTags } from "../../controllers/API";
+import { getStoreComponents } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { useStoreStore } from "../../stores/storeStore";
@@ -46,9 +46,6 @@ export default function StorePage(): JSX.Element {
const { apiKey } = useContext(AuthContext);
const setErrorData = useAlertStore((state) => state.setErrorData);
- const setCurrentFlowId = useFlowsManagerStore(
- (state) => state.setCurrentFlowId,
- );
const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
const [loading, setLoading] = useState(true);
const { id } = useParams();
@@ -148,11 +145,6 @@ export default function StorePage(): JSX.Element {
});
}
- // Set a null id
- useEffect(() => {
- setCurrentFlowId("");
- }, []);
-
function resetPagination() {
setPageIndex(1);
setPageSize(12);
diff --git a/src/frontend/src/pages/ViewPage/index.tsx b/src/frontend/src/pages/ViewPage/index.tsx
index 5498b77bd1e0..456e8c35d77b 100644
--- a/src/frontend/src/pages/ViewPage/index.tsx
+++ b/src/frontend/src/pages/ViewPage/index.tsx
@@ -1,23 +1,47 @@
+import { useGetGlobalVariables } from "@/controllers/API/queries/variables";
+import useFlowStore from "@/stores/flowStore";
import { useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import Page from "../FlowPage/components/PageComponent";
export default function ViewPage() {
- const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
- const setCurrentFlowId = useFlowsManagerStore(
- (state) => state.setCurrentFlowId,
- );
+ const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
+
+ const setOnFlowPage = useFlowStore((state) => state.setOnFlowPage);
const { id } = useParams();
+ const navigate = useNavigate();
+ useGetGlobalVariables();
+
+ const flows = useFlowsManagerStore((state) => state.flows);
+ const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
// Set flow tab id
useEffect(() => {
- setCurrentFlowId(id!);
+ if (flows && currentFlowId === "") {
+ const isAnExistingFlow = flows.find((flow) => flow.id === id);
+
+ if (!isAnExistingFlow) {
+ navigate("/all");
+ return;
+ }
+
+ setCurrentFlow(isAnExistingFlow);
+ }
+ }, [id, flows]);
+
+ useEffect(() => {
+ setOnFlowPage(true);
+
+ return () => {
+ setOnFlowPage(false);
+ setCurrentFlow();
+ };
}, [id]);
return (
);
}
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index fd2bc6bda0ff..028b44e23c16 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -1,16 +1,20 @@
-import FeatureFlags from "@/../feature-config.json";
-import useAuthStore from "@/stores/authStore";
-import { useStoreStore } from "@/stores/storeStore";
-import { Suspense, lazy } from "react";
-import { Navigate, Route, Routes } from "react-router-dom";
+import { lazy } from "react";
+import {
+ createBrowserRouter,
+ createRoutesFromElements,
+ Navigate,
+ Route,
+} from "react-router-dom";
+import App from "./App";
import { ProtectedAdminRoute } from "./components/authAdminGuard";
import { ProtectedRoute } from "./components/authGuard";
import { ProtectedLoginRoute } from "./components/authLoginGuard";
+import { AuthSettingsGuard } from "./components/authSettingsGuard";
import { CatchAllRoute } from "./components/catchAllRoutes";
-import LoadingComponent from "./components/loadingComponent";
import { StoreGuard } from "./components/storeGuard";
-import MessagesPage from "./pages/SettingsPage/pages/messagesPage";
-
+const MessagesPage = lazy(
+ () => import("./pages/SettingsPage/pages/messagesPage"),
+);
const AdminPage = lazy(() => import("./pages/AdminPage"));
const LoginAdminPage = lazy(() => import("./pages/AdminPage/LoginPage"));
const ApiKeysPage = lazy(
@@ -38,184 +42,161 @@ const SignUp = lazy(() => import("./pages/SignUpPage"));
const StorePage = lazy(() => import("./pages/StorePage"));
const ViewPage = lazy(() => import("./pages/ViewPage"));
-const Router = () => {
- const autoLogin = useAuthStore((state) => state.autoLogin);
- const hasStore = useStoreStore((state) => state.hasStore);
-
- // Hides the General settings if there is nothing to show
- const showGeneralSettings =
- FeatureFlags.ENABLE_PROFILE_ICONS || hasStore || !autoLogin;
-
- return (
-
-
-