support complex map values

cyclops-ui/src/components/form/fields/map/MapField.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Button, Col, Divider, Form, Input, Row } from "antd";
 import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
+import TextArea from "antd/es/input/TextArea";
 
 interface Props {
   field: any;
@@ -72,7 +73,7 @@ export const MapField = ({
                     rules={[{ required: true, message: "Missing value" }]}
                     style={{ margin: 0, flex: 1, marginRight: "12px" }}
                   >
-                    <Input style={{ margin: 0 }} />
+                    <TextArea style={{ margin: 0 }} rows={1} />
                   </Form.Item>
                 </Col>
                 <MinusCircleOutlined onClick={() => remove(arrField.name)} />

cyclops-ui/src/components/pages/EditModule/EditModule.tsx

@@ -31,6 +31,7 @@ import {
   Template,
 } from "../../../utils/api/template";
 import TemplateFormFields from "../../form/TemplateFormFields";
+import YAML from "yaml";
 
 const { Title } = Typography;
 const layout = {
@@ -166,6 +167,14 @@ const EditModule = () => {
           }
 
           Object.keys(values[field.name]).forEach((key) => {
+            if (typeof values[field.name][key] === "object") {
+              object.push({
+                key: key,
+                value: YAML.stringify(values[field.name][key], null, 4),
+              });
+              return;
+            }
+
             object.push({
               key: key,
               value: values[field.name][key],

cyclops-ui/src/components/pages/NewModule/NewModule.tsx

@@ -171,6 +171,14 @@ const NewModule = () => {
           }
 
           Object.keys(values[field.name]).forEach((key) => {
+            if (typeof values[field.name][key] === "object") {
+              object.push({
+                key: key,
+                value: YAML.stringify(values[field.name][key], null, 4),
+              });
+              return;
+            }
+
             object.push({
               key: key,
               value: values[field.name][key],

cyclops-ui/src/utils/form.tsx

@@ -1,3 +1,5 @@
+import YAML from "yaml";
+
 export function fileExtension(fileExt: string): string {
   switch (fileExt) {
     case "json":
@@ -104,7 +106,7 @@ export function findMaps(fields: any[], values: any, initialValues: any): any {
 
         let object: any = {};
         valuesList.forEach((valueFromList) => {
-          object[valueFromList.key] = valueFromList.value;
+          object[valueFromList.key] = YAML.parse(valueFromList.value);
         });
         out[field.name] = object;
         break;