added reload to base URL when FF is turned off

Author: ARajan1084

ui/litellm-dashboard/src/app/(dashboard)/layout.tsx

@@ -63,7 +63,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         />
         <div className="flex flex-1 overflow-auto">
           <div className="mt-2">
-            <Sidebar2 defaultSelectedKey={page} setPage={updatePage} accessToken={accessToken} userRole={userRole} />
+            <Sidebar2 defaultSelectedKey={page} accessToken={accessToken} userRole={userRole} />
           </div>
           <main className="flex-1">{children}</main>
         </div>

ui/litellm-dashboard/src/app/page.tsx

@@ -23,7 +23,6 @@ import ModelHubTable from "@/components/model_hub_table";
 import NewUsagePage from "@/components/new_usage";
 import APIRef from "@/components/api_ref";
 import ChatUI from "@/components/chat_ui/ChatUI";
-import Sidebar from "@/components/leftnav";
 import Usage from "@/components/usage";
 import CacheDashboard from "@/components/cache_dashboard";
 import { getUiConfig, proxyBaseUrl, setGlobalLitellmHeaderName } from "@/components/networking";

ui/litellm-dashboard/src/hooks/useFeatureFlags.tsx

@@ -1,5 +1,13 @@
 "use client";
+
+const getBasePath = () => {
+  const raw = process.env.NEXT_PUBLIC_BASE_URL ?? "";
+  const trimmed = raw.replace(/^\/+|\/+$/g, ""); // strip leading/trailing slashes
+  return trimmed ? `/${trimmed}/` : "/"; // ensure trailing slash
+};
+
 import React, { createContext, useContext, useEffect, useState } from "react";
+import { useRouter } from "next/navigation"; // ⟵ add this
 
 type Flags = {
   refactoredUIFlag: boolean;
@@ -48,6 +56,8 @@ function writeFlagSafely(v: boolean) {
 }
 
 export const FeatureFlagsProvider = ({ children }: { children: React.ReactNode }) => {
+  const router = useRouter(); // ⟵ add this
+
   // Lazy init reads from localStorage only on the client
   const [refactoredUIFlag, setRefactoredUIFlagState] = useState<boolean>(() => readFlagSafely());
 
@@ -73,6 +83,21 @@ export const FeatureFlagsProvider = ({ children }: { children: React.ReactNode }
     return () => window.removeEventListener("storage", onStorage);
   }, []);
 
+  // Redirect to base path the moment the flag is OFF.
+  useEffect(() => {
+    if (refactoredUIFlag) return; // only act when turned off
+
+    const base = getBasePath();
+    const normalize = (p: string) => (p.endsWith("/") ? p : p + "/");
+    const current = normalize(window.location.pathname);
+
+    // Avoid a redirect loop if we're already at the base path.
+    if (current !== base) {
+      // Replace so the "off" redirect doesn't pollute history.
+      router.replace(base);
+    }
+  }, [refactoredUIFlag, router]);
+
   return (
     <FeatureFlagsCtx.Provider value={{ refactoredUIFlag, setRefactoredUIFlag }}>{children}</FeatureFlagsCtx.Provider>
   );