fix: routing fixes (#1671)

Signed-off-by: veds-g <[email protected]>
numaproj · Apr 15, 2024 · 06ca9bc · 06ca9bc
1 parent c2766d8
commit 06ca9bc
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 33 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -108,6 +108,9 @@
     "transformIgnorePatterns": [
       "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates|reactflow|react-toastify|moment)"
     ],
+    "moduleNameMapper": {
+      "^monaco-editor$": "<rootDir>/node_modules/@monaco-editor/react"
+    },
     "resetMocks": false
   }
 }
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -11,7 +11,7 @@ import Drawer from "@mui/material/Drawer";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import CircularProgress from "@mui/material/CircularProgress";
-import { Switch, Route, useLocation } from "react-router-dom";
+import { Switch, Route, useLocation, useHistory } from "react-router-dom";
 import { Breadcrumbs } from "./components/common/Breadcrumbs";
 import { Routes } from "./components/common/Routes";
 import { Login } from "./components/pages/Login";
@@ -64,14 +64,6 @@ const EXCLUDE_APP_BARS: { [key: string]: boolean } = {
 };
 
 function App(props: AppProps) {
-  // TODO remove, used for testing ns only installation
-  // const { systemInfo, error: systemInfoError } = {
-  //   systemInfo: {
-  //     namespaced: true,
-  //     managedNamespace: "test",
-  //   },
-  //   error: undefined,
-  // };
   const { hostUrl = "", namespace = "" } = props;
   const pageRef = useRef<any>();
   const [pageWidth, setPageWidth] = useState(0);
@@ -90,6 +82,18 @@ function App(props: AppProps) {
   } = useSystemInfoFetch({ host: hostUrl });
 
   const location = useLocation();
+  const history = useHistory();
+
+  useEffect(() => {
+    if (systemInfo?.namespaced && systemInfo?.managedNamespace) {
+      const query = new URLSearchParams(location.search);
+      const ns = query.get("namespace") || "";
+
+      if (location.pathname === "/" && ns !== systemInfo.managedNamespace) {
+        history.push(`?namespace=${systemInfo.managedNamespace}`);
+      }
+    }
+  }, [location, history, systemInfo]);
 
   useEffect(() => {
     // Attempt to load user info on app load

diff --git a/ui/src/components/common/Breadcrumbs/index.tsx b/ui/src/components/common/Breadcrumbs/index.tsx
@@ -50,16 +50,20 @@ export function Breadcrumbs() {
         } else if (pl !== "") {
           // Pipeline summary view
           return [
-            <Link key={"namespace-view"} to="/" className="Breadcrumbs-link">
-              Namespace
-            </Link>,
             <Typography
-              key={"namespace-typ"}
+              key={"namespace-view"}
               data-testid="namespace-breadcrumb"
               className="Breadcrumbs-typ"
             >
-              {systemInfo.managedNamespace}
+              Namespace
             </Typography>,
+            <Link
+              key={"namespace-typ"}
+              to={`?namespace=${systemInfo.managedNamespace}`}
+              className="Breadcrumbs-link"
+            >
+              {systemInfo.managedNamespace}
+            </Link>,
             <Typography
               key={"pipeline-typ"}
               data-testid="pipeline-breadcrumb"
@@ -125,7 +129,7 @@ export function Breadcrumbs() {
         Unknown
       </Typography>
     );
-  }, [location, systemInfo]);
+  }, [location, systemInfo, ns, pl]);
 
   return (
     <MUIBreadcrumbs

diff --git a/ui/src/components/pages/Namespace/partials/PipelineCard/index.tsx b/ui/src/components/pages/Namespace/partials/PipelineCard/index.tsx
@@ -51,7 +51,7 @@ export function PipelineCard({
   isbData,
   refresh,
 }: PipelineCardProps) {
-  const { addError, setSidebarProps, systemInfo, host, isReadOnly } =
+  const { addError, setSidebarProps, host, isReadOnly } =
     useContext<AppContextProps>(AppContext);
   const [viewOption] = useState("view");
   const [editOption] = useState("edit");
@@ -334,11 +334,7 @@ export function PipelineCard({
             }}
           >
             <Link
-              to={
-                systemInfo?.namespaced
-                  ? `?pipeline=${data.name}`
-                  : `?namespace=${namespace}&pipeline=${data.name}`
-              }
+              to={`?namespace=${namespace}&pipeline=${data.name}`}
               style={
                 pipelineStatus === DELETING || !pipelineAbleToLoad
                   ? { pointerEvents: "none", textDecoration: "none" }
@@ -460,11 +456,7 @@ export function PipelineCard({
             </Box>
           )}
           <Link
-            to={
-              systemInfo?.namespaced
-                ? `?pipeline=${data.name}`
-                : `?namespace=${namespace}&pipeline=${data.name}`
-            }
+            to={`?namespace=${namespace}&pipeline=${data.name}`}
             style={
               pipelineStatus === DELETING || !pipelineAbleToLoad
                 ? { pointerEvents: "none", textDecoration: "none" }

diff --git a/ui/src/components/plugin/Breadcrumbs/Breadcrumbs.tsx b/ui/src/components/plugin/Breadcrumbs/Breadcrumbs.tsx
@@ -51,16 +51,20 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
     } else if (pl !== "") {
       // Pipeline summary view
       return [
-        <Link key={"namespace-view"} to="/" className="Breadcrumbs-link">
-          Namespace
-        </Link>,
         <Typography
-          key={"namespace-typ"}
+          key={"namespace-view"}
           data-testid="namespace-breadcrumb"
           className="Breadcrumbs-typ"
         >
-          {namespace}
+          Namespace
         </Typography>,
+        <Link
+          key={"namespace-typ"}
+          to={`?namespace=${namespace}`}
+          className="Breadcrumbs-link"
+        >
+          {namespace}
+        </Link>,
         <Typography
           key={"pipeline-typ"}
           data-testid="pipeline-breadcrumb"
@@ -77,7 +81,7 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
         Unknown
       </Typography>
     );
-  }, [location, systemInfo]);
+  }, [location, systemInfo, namespace, pl]);
 
   return (
     <MUIBreadcrumbs

diff --git a/ui/src/components/plugin/NumaflowMonitorApp/App.tsx b/ui/src/components/plugin/NumaflowMonitorApp/App.tsx
@@ -9,7 +9,7 @@ import ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
 import CircularProgress from "@mui/material/CircularProgress";
-import { Route, useLocation, Switch } from "react-router-dom";
+import { Route, useLocation, useHistory, Switch } from "react-router-dom";
 import { Breadcrumbs } from "../Breadcrumbs/Breadcrumbs";
 import { Routes } from "../Routes/Routes";
 import { useSystemInfoFetch } from "../../../utils/fetchWrappers/systemInfoFetch";
@@ -54,6 +54,16 @@ function App(props: AppProps) {
   } = useSystemInfoFetch({ host: hostUrl });
 
   const location = useLocation();
+  const history = useHistory();
+
+  useEffect(() => {
+    const query = new URLSearchParams(location.search);
+    const ns = query.get("namespace") || "";
+
+    if (location.pathname === "/" && ns !== namespace) {
+      history.push(`?namespace=${namespace}`);
+    }
+  }, [location, history, namespace]);
 
   useEffect(() => {
     // Route changed