fix: this pr fixes the search issue. (#1201)

## Description:
<!-- Describe this change, how it works, and the motivation behind it.
-->

## Is this change user facing?
YES/NO
<!-- If yes, please add the "user facing" label to the PR -->
<!-- If yes, don't forget to include docs changes where relevant -->

## References (if applicable):
<!-- Add relevant Github Issues, Discord threads, or other helpful
information. -->

engine/frontend/src/App.js

@@ -3,7 +3,7 @@ import Home from './component/Home';
 import { ChakraProvider } from '@chakra-ui/react'
 
 const App = () => {
-  console.log("Enclave Manager version: 2023-08-28-8")
+  console.log("Enclave Manager version: 2023-08-28-9")
   return (
     <ChakraProvider>
       <div className="h-screen w-screen">

engine/frontend/src/api/packageCatalog.js

@@ -1,7 +1,15 @@
 import axios from "axios"
 
 export const getKurtosisPackages = async () => {
-    const response = await axios.post(`https://cloud.kurtosis.com:9770/kurtosis_package_indexer.KurtosisPackageIndexer/GetPackages`, {"field":""}, {"headers":{'Content-Type': "application/json"}})
-    const {data} = response
-    return data.packages
+    try {
+        const response = await axios.post(`https://cloud.kurtosis.com:9770/kurtosis_package_indexer.KurtosisPackageIndexer/GetPackages`, {"field":""}, {"headers":{'Content-Type': "application/json"}})
+        const {data} = response
+        if ("packages" in data) {
+            return data.packages
+        } 
+        return []
+    } catch {
+        console.log("error occurred")
+        return []
+    } 
 }

engine/frontend/src/component/FileArtifactInfo.js

@@ -155,7 +155,7 @@ const FileArtifactInfo = ({enclaves}) => {
         <div className='flex flex-col h-[90%] space-y-1 overflow-auto'>
             {
                 (Object.keys(detailInfo).length !== 0) ?
-                    <div className="flex h-3/4 flex-col">
+                    <div className="flex h-3/4 flex-col text-black">
                         <p className="text-lg font-bold text-right"> Size: {detailInfo.size}B </p>
                         <p className="break-all overflow-y-auto"> {detailInfo.textPreview.length > 0 ? detailInfo.textPreview :
                             <h2 className="text-2xl text-center mt-20 text-red-800 font-bold">No Preview

engine/frontend/src/component/PackageCatalog.js

@@ -17,26 +17,24 @@ import PackageCatalogOption from "./PackageCatalogOption";
 import { useNavigate } from "react-router";
 
 const PackageCatalog = ({kurtosisPackages: defaultPackages}) => {
-
-    const [kurtosisPackages, setKurtosisPackages] = useState([])
     const navigate = useNavigate()
-    const [chosenPackage, setChosenPackage] = useState(null)
+    const [kurtosisPackages, setKurtosisPackages] = useState([])
+    const [chosenPackage, setChosenPackage] = useState({})
 
     useEffect(()=> {
         setKurtosisPackages(defaultPackages)
     }, [defaultPackages.length])
 
-    const selectPackage = (index) => {
-        if (index === chosenPackage) {
-            setChosenPackage(null)
+    const selectPackage = (selectedPackage) => {
+        if (selectedPackage["name"] === chosenPackage["name"]) {
+            setChosenPackage({})
         } else {
-            setChosenPackage(index)
+            setChosenPackage(selectedPackage)
         }
     }
 
     const handleConfigureButtonClick = () => {
-        const kurtosisPackage = kurtosisPackages[chosenPackage]
-        navigate("/catalog/form", {state: {kurtosisPackage}})
+        navigate("/catalog/form", {state: {kurtosisPackage: chosenPackage}})
     }
 
     const handleSearchEvent = (e) => {
@@ -85,10 +83,10 @@ const PackageCatalog = ({kurtosisPackages: defaultPackages}) => {
                     <List spacing={1} padding="10px" h="100%">
                         {
                             kurtosisPackages.map( (kurtosisPackage, index) => {
-                                const bgcolor = (index === chosenPackage) ? '#24BA27' : 'gray.300'
+                                const bgcolor = (kurtosisPackage.name === chosenPackage.name) ? '#24BA27' : 'gray.300'
                                 if ("name" in kurtosisPackage) {
                                     return (
-                                        <ListItem bg={bgcolor} key={index} onClick={() => selectPackage(index)}>
+                                        <ListItem bg={bgcolor} key={index} onClick={() => selectPackage(kurtosisPackage)}>
                                             <Center h="70px" w="100%">
                                                 <Text fontSize={"2xl"} color='blue.800' fontWeight={"bold"}> {kurtosisPackage.name} </Text>
                                             </Center>
@@ -100,7 +98,7 @@ const PackageCatalog = ({kurtosisPackages: defaultPackages}) => {
                     </List>
                 </GridItem>
                 <GridItem area={'configure'} m="10px">
-                    <Button bg='#24BA27' w="100%" isDisabled={chosenPackage === null} onClick={handleConfigureButtonClick} >Configure >> </Button>
+                    <Button bg='#24BA27' w="100%" isDisabled={Object.keys(chosenPackage).length === 0} onClick={handleConfigureButtonClick} >Configure >> </Button>
                 </GridItem>
             </Grid>
         </div>

engine/frontend/src/component/PackageCatalogForm.js

@@ -107,7 +107,8 @@ const PackageCatalogForm = ({handleCreateNewEnclave}) => {
     const {state} = location;
     const {kurtosisPackage} = state
     const [runningPackage, setRunningPackage] = useState(false)
-
+    const [enclaveName, setEnclaveName] = useState("")
+
     let initialFormData = {}
     kurtosisPackage.args.map(
         (arg, index)=> {
@@ -198,7 +199,6 @@ const PackageCatalogForm = ({handleCreateNewEnclave}) => {
                 if (!["INTEGER", "STRING", "BOOL", "FLOAT"].includes(kurtosisPackage.args[key]["type"])) {
                     try {
                         const val = JSON.parse(value)
-                        console.log(val)
                         args[argName] = val
                     } catch(ex) {
                         console.log("this error should not come up")

engine/frontend/src/component/PackageCatalogProgress.js

@@ -21,8 +21,8 @@ const PackageCatalogProgress = ({appData}) => {
     const navigate = useNavigate();
     const [loading, setLoading] = useState(false)
     const [logs, setLogs] = useState([])
+
     const [services, setServices] = useState([])
-
     const getServices = async (enclave) => {
         const {services: newServices} = await getEnclaveInformation(enclave.host, enclave.port, appData.jwtToken, appData.apiHost);
         if (newServices.length > services.length) {

engine/server/webapp/asset-manifest.json

@@ -1,13 +1,13 @@
 {
   "files": {
     "main.css": "./static/css/main.36b0e1c8.css",
-    "main.js": "./static/js/main.0daa7465.js",
+    "main.js": "./static/js/main.ae44d0f7.js",
     "index.html": "./index.html",
     "main.36b0e1c8.css.map": "./static/css/main.36b0e1c8.css.map",
-    "main.0daa7465.js.map": "./static/js/main.0daa7465.js.map"
+    "main.ae44d0f7.js.map": "./static/js/main.ae44d0f7.js.map"
   },
   "entrypoints": [
     "static/css/main.36b0e1c8.css",
-    "static/js/main.0daa7465.js"
+    "static/js/main.ae44d0f7.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.0daa7465.js"></script><link href="./static/css/main.36b0e1c8.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.ae44d0f7.js"></script><link href="./static/css/main.36b0e1c8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>