diff --git a/ui/src/AppRoutes.js b/ui/src/AppRoutes.js
index 53f04430..c1739727 100644
--- a/ui/src/AppRoutes.js
+++ b/ui/src/AppRoutes.js
@@ -7,13 +7,19 @@ import Home from "Home";
const App = () => {
const { appConfig } = useConfig();
+
return (
-
- } />
-
- } />
- } />
+ {/* We need this redirection because XP is not a recognized MLP app and so PrivateLayout
+ should not redirect to /xp directly on project change. */}
+ } />
+ {/* ALL ROUTES */}
+
+ } />
+
+ } />
+ } />
+
{/* DEFAULT */}
} />
diff --git a/ui/src/Home.js b/ui/src/Home.js
index 052eed5c..889144e9 100644
--- a/ui/src/Home.js
+++ b/ui/src/Home.js
@@ -1,13 +1,14 @@
-import React, { Fragment } from "react";
-
+import React, { Fragment, useContext } from "react";
import { EuiPageTemplate } from "@elastic/eui";
-
+import { ProjectsContext } from "@gojek/mlp-ui";
+import { Navigate } from "react-router-dom";
import { useConfig } from "config";
const Home = () => {
const { appConfig } = useConfig();
+ const { currentProject } = useContext(ProjectsContext);
- return (
+ return !currentProject ? (
{
}
/>
+ ) : (
+
);
};
diff --git a/ui/src/PrivateLayout.js b/ui/src/PrivateLayout.js
index 467aac61..ed5c4abb 100644
--- a/ui/src/PrivateLayout.js
+++ b/ui/src/PrivateLayout.js
@@ -22,14 +22,14 @@ export const PrivateLayout = () => {
- {({ currentApp }) => (
+ {() => (
- navigate(urlJoin(currentApp?.href, "projects", pId, "experiments"))
+ navigate(urlJoin("projects", pId))
}
docLinks={appConfig.docsUrl}
- />)}
+ />
+ )}
diff --git a/ui/src/experiments/ExperimentsLandingPage.js b/ui/src/experiments/ExperimentsLandingPage.js
index f2dd3d90..673a9a86 100644
--- a/ui/src/experiments/ExperimentsLandingPage.js
+++ b/ui/src/experiments/ExperimentsLandingPage.js
@@ -68,7 +68,7 @@ const ExperimentsLandingPage = () => {
which results in incorrect /experiments/experiments prefix.
*/}
} />
diff --git a/ui/src/experiments/list/ListExperimentsTable.js b/ui/src/experiments/list/ListExperimentsTable.js
index ee47d02d..461626c1 100644
--- a/ui/src/experiments/list/ListExperimentsTable.js
+++ b/ui/src/experiments/list/ListExperimentsTable.js
@@ -1,6 +1,8 @@
import React from "react";
import { EuiHealth, EuiLink, EuiText } from "@elastic/eui";
+import { useLocation } from "react-router-dom";
+import urlJoin from "proper-url-join";
import { useConfig } from "config";
import { BasicTable } from "components/table/BasicTable";
@@ -17,6 +19,7 @@ const ListExperimentsTable = ({
onRowClick,
}) => {
const { appConfig } = useConfig();
+ const location = useLocation();
const tableColumns = [
{
field: "id",
@@ -88,11 +91,12 @@ const ListExperimentsTable = ({
width: "5%",
render: (item) => {
return (
+ // We need to do urlJoin to correctly handle trailing slash when used as a remote component
{
e.stopPropagation();
}}
- href={item.id}
+ href={urlJoin(location.pathname, item.id)}
target="_blank"
/>
);