From 49dbeac7e144e740e7e2be5d934d089887eb1c3c Mon Sep 17 00:00:00 2001
From: ewezy <ziyi.ewe@gojek.com>
Date: Fri, 19 Jul 2024 16:25:33 +0800
Subject: [PATCH] Add temporary caraml ai mockup ui

---
 ui/packages/app/src/App.js                    |  8 +++++++
 ui/packages/app/src/caraml_ai/CaraMLAIPage.js | 24 +++++++++++++++++++
 ui/packages/app/src/config.js                 |  2 +-
 .../src/components/nav_drawer/NavDrawer.js    |  5 ++--
 4 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 ui/packages/app/src/caraml_ai/CaraMLAIPage.js

diff --git a/ui/packages/app/src/App.js b/ui/packages/app/src/App.js
index ba79ecaa..e1008274 100644
--- a/ui/packages/app/src/App.js
+++ b/ui/packages/app/src/App.js
@@ -12,6 +12,7 @@ import { Route, Routes } from "react-router-dom";
 import AppRoutes from "./AppRoutes";
 import { PrivateLayout } from "./PrivateLayout";
 import config from "./config";
+import { CaraMLAIPage } from "./caraml_ai/CaraMLAIPage";
 
 const App = () => (
   <EuiProvider>
@@ -29,6 +30,13 @@ const App = () => (
             </Route>
 
             <Route path="/pages/404" element={<Page404 />} />
+
+            {
+              config.CARAML_AI_STREAMLIT_HOMEPAGE &&
+              <Route element={<PrivateLayout />}>
+                <Route path="/caraml-ai" element={<CaraMLAIPage />} />
+              </Route>
+            }
           </Routes>
           <Toast />
         </AuthProvider>
diff --git a/ui/packages/app/src/caraml_ai/CaraMLAIPage.js b/ui/packages/app/src/caraml_ai/CaraMLAIPage.js
new file mode 100644
index 00000000..dc3892ad
--- /dev/null
+++ b/ui/packages/app/src/caraml_ai/CaraMLAIPage.js
@@ -0,0 +1,24 @@
+import React from "react";
+import { EuiPageTemplate } from "@elastic/eui";
+import config from "./../config";
+
+export const CaraMLAIPage = () => {
+  const iframe = `<iframe src=${config.CARAML_AI_STREAMLIT_HOMEPAGE} style="height: 80vh; width: 100%;"></iframe>`
+
+  function Iframe(props) {
+    return (<div dangerouslySetInnerHTML={ {__html:  props.iframe?props.iframe:""}} />);
+  }
+  return (
+    <EuiPageTemplate restrictWidth="90%" panelled={false}>
+      <EuiPageTemplate.Header
+        bottomBorder={false}
+        iconType="timelionApp"
+        pageTitle="CaraML AI"
+      />
+
+      <EuiPageTemplate.Section paddingSize="none">
+        <Iframe iframe={iframe} />
+      </EuiPageTemplate.Section>
+    </EuiPageTemplate>
+  );
+};
diff --git a/ui/packages/app/src/config.js b/ui/packages/app/src/config.js
index 1761e1bb..d2a7e8a0 100644
--- a/ui/packages/app/src/config.js
+++ b/ui/packages/app/src/config.js
@@ -31,9 +31,9 @@ const config = {
   MAX_AUTHZ_CACHE_EXPIRY_MINUTES: parseInt(
     getEnv("REACT_APP_MAX_AUTHZ_CACHE_EXPIRY_MINUTES") || "0"
   ),
-
   CLOCKWORK_UI_HOMEPAGE: getEnv("REACT_APP_CLOCKWORK_UI_HOMEPAGE"),
   KUBEFLOW_UI_HOMEPAGE: getEnv("REACT_APP_KUBEFLOW_UI_HOMEPAGE"),
+  CARAML_AI_STREAMLIT_HOMEPAGE: getEnv("REACT_APP_CARAML_AI_STREAMLIT_HOMEPAGE"),
   ALLOW_CUSTOM_STREAM:
     getEnv("REACT_APP_ALLOW_CUSTOM_STREAM") != null
       ? getEnv("REACT_APP_ALLOW_CUSTOM_STREAM")
diff --git a/ui/packages/lib/src/components/nav_drawer/NavDrawer.js b/ui/packages/lib/src/components/nav_drawer/NavDrawer.js
index 6a67486e..53077664 100644
--- a/ui/packages/lib/src/components/nav_drawer/NavDrawer.js
+++ b/ui/packages/lib/src/components/nav_drawer/NavDrawer.js
@@ -55,13 +55,12 @@ export const NavDrawer = ({ docLinks }) => {
         className: isAppActive
           ? "euiTreeView__node---small---active"
           : "euiTreeView__node---small",
-
         callback: () =>
-          !children || !currentProject
+          a.is_project_agnostic ? (window.location.href = a.homepage) : (!children || !currentProject
             ? (window.location.href = !!currentProject
               ? urlJoin(a.homepage, "projects", currentProject.id)
               : a.homepage)
-            : {},
+            : {}),
         children: children
       };
     });