fix: enclave manager ui was reading the wrong type fields (#1367)

## Description:
Title describes the change.

## Is this change user facing?
YES

## References (if applicable):

engine/frontend/src/component/PackageCatalogForm.js

@@ -121,7 +121,7 @@ const KeyValueTable = (dataCallBack) => {
 const prettyPrintTypeSpecialCases = (type, arg) => {
     if (type === "LIST") {
         try {
-            const dataType = arg.typeV2.innerType1
+            const dataType = getType(arg)
             if (dataType === undefined) return "LIST"
             return `${dataType} LIST`.toLowerCase()
         } catch (e) {
@@ -130,8 +130,8 @@ const prettyPrintTypeSpecialCases = (type, arg) => {
     }
     if (type === "DICT") {
         try {
-            const x = arg.typeV2.innerType1
-            const y = arg.typeV2.innerType2
+            const x = getFirstSubType(arg)
+            const y = getSecondSubType(arg)
             if (x === undefined || y === undefined) return "DICT"
             return `${x} -> ${y}`.toLowerCase()
         } catch (e) {
@@ -141,10 +141,36 @@ const prettyPrintTypeSpecialCases = (type, arg) => {
     return type.toLowerCase()
 }
 
+const getArgName = (arg) => {
+    return arg["name"]
+}
+
+const getType = (arg) => {
+    return arg["typeV2"]["topLevelType"]
+}
+
+const getFirstSubType = (arg) => {
+    return arg["typeV2"]["innerType1"]
+}
+
+const getSecondSubType = (arg) => {
+    return arg["typeV2"]["innerType2"]
+}
+
+const isRequired = (arg) => {
+    return arg["isRequired"]
+}
+
 const renderArgs = (args, handleChange, formData, errorData) => {
     return args.map((arg, index) => {
+
+        // no need to process plan arg as it's internal!
+        if (arg["name"] === "plan") {
+            return
+        }
+
         let dataType = "";
-        switch (arg.type) {
+        switch (arg["typeV2"]["topLevelType"]) {
             case "INTEGER":
                 dataType = "INTEGER"
                 break;
@@ -167,11 +193,6 @@ const renderArgs = (args, handleChange, formData, errorData) => {
                 dataType = "JSON"
         }
 
-        // no need to show plan arg as it's internal!
-        if (arg.name === "plan") {
-            return
-        }
-
         return (
             <Flex color={"white"} key={`entry-${index}`}>
                 <Flex mr="3" direction={"column"} w="15%">
@@ -443,8 +464,9 @@ const PackageCatalogForm = ({handleCreateNewEnclave}) => {
         let errorsFound = {}
 
         Object.keys(formData).filter(key => {
-            let type = kurtosisPackage.args[key]["type"]
-            const required = kurtosisPackage.args[key]["isRequired"]
+            const arg = kurtosisPackage.args[key]
+            const type = getType(arg)
+            const required = isRequired(arg)
 
             // if it's optional and empty it's fine
             if (!required && formData[key].length === 0) {
@@ -461,7 +483,7 @@ const PackageCatalogForm = ({handleCreateNewEnclave}) => {
             } else if (type === "FLOAT") {
                 valid = checkValidFloatType(formData[key])
             } else if (type === "LIST") {
-                let subType = kurtosisPackage.args[key]["typeV2"]["innerType1"]
+                let subType = getFirstSubType(arg)
                 valid = checkValidListType(formData[key], subType)
             } else if (type === "DICT") {
                 valid = checkValidJsonType(formData[key])
@@ -486,8 +508,8 @@ const PackageCatalogForm = ({handleCreateNewEnclave}) => {
         })
 
         Object.keys(formData).filter(key => {
+            const required = isRequired(kurtosisPackage.args[key])
             let valid = true;
-            const required = kurtosisPackage.args[key]["isRequired"]
             if (required) {
                 if (formData[key].length === 0) {
                     valid = false;
@@ -503,25 +525,27 @@ const PackageCatalogForm = ({handleCreateNewEnclave}) => {
             setRunningPackage(true)
             let args = {}
             Object.keys(formData).map(key => {
-                const argName = kurtosisPackage.args[key].name
+                const arg = kurtosisPackage.args[key]
+                const argName = getArgName(arg)
+                const type = getType(arg)
                 const value = formData[key]
 
                 let val;
                 if (value.length > 0) {
-                    if (kurtosisPackage.args[key]["type"] === "INTEGER") {
+                    if (type === "INTEGER") {
                         val = parseInt(value)
                         args[argName] = val
-                    } else if (kurtosisPackage.args[key]["type"] === "BOOL") {
+                    } else if (type === "BOOL") {
                         val = value.toUpperCase()
                         args[argName] = (val === "TRUE") ? true : false
-                    } else if (kurtosisPackage.args[key]["type"] === "FLOAT") {
+                    } else if (type === "FLOAT") {
                         val = parseFloat(value)
                         args[argName] = val
-                    } else if (kurtosisPackage.args[key]["type"] === "LIST") {
-                        let subType = kurtosisPackage.args[key]["typeV2"]["innerType1"]
+                    } else if (type === "LIST") {
+                        let subType = getFirstSubType(kurtosisPackage, key)
                         val = parseList(value, subType)
                         args[argName] = val
-                    } else if (kurtosisPackage.args[key]["type"] === "STRING") {
+                    } else if (type === "STRING") {
                         args[argName] = value
                     } else {
                         val = JSON.parse(value)
@@ -631,8 +655,3 @@ const PackageCatalogForm = ({handleCreateNewEnclave}) => {
     );
 };
 export default PackageCatalogForm;
-
-
-
-
-

engine/server/webapp/asset-manifest.json

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