fix: add navigation to kurtosis enclave manager (#1458)

User cans navigate to home from any page;; i have added a home logo on
top left corner of the enclave manager ui.

engine/frontend/src/component/Home.js

@@ -11,7 +11,7 @@ import {createBrowserRouter, Route, RouterProvider} from 'react-router-dom';
 import {useAppContext} from "../context/AppState";
 import LoadingOverlay from "./LoadingOverflow";
 import CreateEnclave from "./CreateEnclave";
-import {createRoutesFromElements} from "react-router";
+import {createRoutesFromElements, Outlet} from "react-router";
 
 const queryParamToBool = (value) => {
     return ((value + '').toLowerCase() === 'true')
@@ -33,6 +33,18 @@ const makeUrl = () => {
     if (path.charAt(0) !== "/") path = path + "/"
     return path;
 }
+
+const Layout = () => {
+    return (
+        <>
+            <TitleBar/>
+            <div className="flex h-[calc(100vh-4rem)]">
+                <Outlet/>
+            </div>
+        </>
+    )
+}
+
 const Home = () => {
     const [enclaves, setEnclaves] = useState([])
     const [enclaveLoading, setEnclaveLoading] = useState(false)
@@ -149,35 +161,38 @@ const Home = () => {
 
     const routes = (
         <>
-            <Route exact
-                   path="/enclaves"
-                   element={checkAuth(<Enclaves enclaves={enclaves}
-                                                isLoading={enclaveLoading}
-                                                handleDeleteClick={handleDeleteClick}
-                       />
-                   )}
-            />
-            <Route exact
-                   path="/enclave/*"
-                   element={checkAuth(<CreateEnclave addEnclave={addEnclave}/>)}
-            />
-            <Route path="/enclaves/:name"
-                   element={checkAuth(<EnclaveInfo enclaves={enclaves}/>)}
-            />
-            <Route path="/enclaves/:name/services/:uuid/*"
-                   element={checkAuth(<ServiceInfo/>)}
-            />
-            <Route path="/enclaves/:name/files/:fileArtifactName"
-                   element={checkAuth(<FileArtifactInfo enclaves={enclaves}/>)}
-            />
-            <Route exact
-                   path="/catalog/*"
-                   element={checkAuth(<PackageCatalogRouter addEnclave={addEnclave}/>)}
-            />
-            <Route
-                path="/"
-                element={checkAuth(<Main totalEnclaves={enclaves.length}/>)}
-            />
+            <Route path="/" element={checkAuth(<Layout/>)}>
+                <Route
+                    path="/enclaves"
+                    element={<Enclaves 
+                        enclaves={enclaves}
+                        isLoading={enclaveLoading}
+                        handleDeleteClick={handleDeleteClick}
+                    />
+                    }
+                />
+                <Route
+                    path="/enclave/*"
+                    element={<CreateEnclave addEnclave={addEnclave}/>}
+                />
+                <Route path="/enclaves/:name"
+                    element={<EnclaveInfo enclaves={enclaves}/>}
+                />
+                <Route path="/enclaves/:name/services/:uuid/*"
+                    element={<ServiceInfo/>}
+                />
+                <Route path="/enclaves/:name/files/:fileArtifactName"
+                    element={<FileArtifactInfo enclaves={enclaves}/>}
+                />
+                <Route
+                    path="/catalog/*"
+                    element={<PackageCatalogRouter addEnclave={addEnclave}/>}
+                />
+                <Route exact
+                    path="/"
+                    element={<Main totalEnclaves={enclaves.length}/>}
+                />
+            </Route>     
         </>
     )
 
@@ -190,10 +205,7 @@ const Home = () => {
 
     return (
         <div className="h-screen flex flex-col bg-[#171923]">
-            <TitleBar/>
-            <div className="flex h-[calc(100vh-4rem)]">
-                <RouterProvider router={router}/>
-            </div>
+            <RouterProvider router={router} />
         </div>
     );
 }

engine/frontend/src/component/PackageCatalogRouter.js

@@ -8,7 +8,6 @@ import {createEnclave} from "../api/enclave";
 import {useState} from "react";
 import {useAppContext} from "../context/AppState";
 
-
 const PackageCatalogRouter = ({addEnclave}) => {
     const navigate = useNavigate()
     const {appData} = useAppContext()

engine/frontend/src/component/RightPanel.js

@@ -1,4 +1,3 @@
-import Heading  from "./Heading";
 import { useNavigate } from "react-router";
 
 const RightPanel = ({isServiceInfo, enclaveName}) => {

engine/frontend/src/component/TitleBar.js

@@ -1,10 +1,25 @@
+import { Center, SimpleGrid, Heading, Text, Box } from '@chakra-ui/react';
 import React from 'react';
+import { Link } from "react-router-dom";
 
 const TitleBar = () => {
     return (
-        <div className="h-[4rem] sticky top-0 py-4 px-8 bg-[#171923] text-center">
-            <h1 className="text-3xl font-bold text-[#24BA27]">Kurtosis Enclave Manager</h1>
-        </div>
+        <SimpleGrid columns={3} spacing={1} paddingBottom={5}>
+            <Link to="/">
+                <Box 
+                    height={"40px"} 
+                    justify={'flex-start'}> 
+                        <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8v10a1 1 0 0 0 1 1h4v-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5h4a1 1 0 0 0 1-1V8M1 10l9-9 9 9"/>
+                        </svg>
+                </Box>
+            </Link>
+            <Heading color={"#24BA27"}>
+                <Center>
+                    <Text> Kurtosis Enclave Manager </Text>
+                </Center>
+            </Heading>  
+        </SimpleGrid>
     );
 };
 

engine/server/webapp/asset-manifest.json

@@ -1,13 +1,13 @@
 {
   "files": {
-    "main.css": "./static/css/main.d26dfda9.css",
-    "main.js": "./static/js/main.53dc80c0.js",
+    "main.css": "./static/css/main.c490ddc6.css",
+    "main.js": "./static/js/main.2a215aca.js",
     "index.html": "./index.html",
-    "main.d26dfda9.css.map": "./static/css/main.d26dfda9.css.map",
-    "main.53dc80c0.js.map": "./static/js/main.53dc80c0.js.map"
+    "main.c490ddc6.css.map": "./static/css/main.c490ddc6.css.map",
+    "main.2a215aca.js.map": "./static/js/main.2a215aca.js.map"
   },
   "entrypoints": [
-    "static/css/main.d26dfda9.css",
-    "static/js/main.53dc80c0.js"
+    "static/css/main.c490ddc6.css",
+    "static/js/main.2a215aca.js"
   ]
 }

engine/server/webapp/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.53dc80c0.js"></script><link href="./static/css/main.d26dfda9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.2a215aca.js"></script><link href="./static/css/main.c490ddc6.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>