Display top level yaml code block as group

InseeFrLab · Oct 21, 2024 · 2f80c54 · 2f80c54
1 parent e94c90d
commit 2f80c54
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 15 deletions.
diff --git a/web/src/ui/pages/launcher/RootFormComponent/ConfigurationTopLevelGroup.tsx b/web/src/ui/pages/launcher/RootFormComponent/ConfigurationTopLevelGroup.tsx
@@ -6,6 +6,7 @@ import type {
 } from "core/usecases/launcher/decoupledLogic/formTypes";
 import { AccordionGroupComponent } from "./AccordionGroupComponent";
 import type { FormCallbacks } from "./FormCallbacks";
+import { id } from "tsafe/id";
 
 type Props = {
     className?: string;
@@ -20,14 +21,21 @@ export function ConfigurationTopLevelGroup(props: Props) {
     const { cx, classes } = useStyles();
 
     const { main_formFields, main_formFieldGroups } = useMemo(() => {
-        const main_formFields: FormField[] = [];
-        const main_formFieldGroups: FormFieldGroup[] = [];
+        const main_formFields: Exclude<FormField, FormField.YamlCodeBlock>[] = [];
+        const main_formFieldGroups: (FormFieldGroup | FormField.YamlCodeBlock)[] = [];
 
         for (const node of main) {
-            if (node.type === "field") {
-                main_formFields.push(node);
-            } else {
-                main_formFieldGroups.push(node);
+            switch (node.type) {
+                case "field":
+                    if (node.fieldType === "yaml code block") {
+                        main_formFieldGroups.push(node);
+                        break;
+                    }
+                    main_formFields.push(node);
+                    break;
+                case "group":
+                    main_formFieldGroups.push(node);
+                    break;
             }
         }
 
@@ -61,15 +69,36 @@ export function ConfigurationTopLevelGroup(props: Props) {
                               "nodes": main_formFields
                           }
                       ]),
-                ...main_formFieldGroups.map(
-                    ({ nodes, description, helmValuesPath, canAdd, canRemove }) => ({
-                        helmValuesPath,
-                        description,
-                        canAdd,
-                        canRemove,
-                        nodes
-                    })
-                )
+                ...main_formFieldGroups.map(node => {
+                    if (node.type === "field") {
+                        return {
+                            "helmValuesPath": [node.title],
+                            "description": node.description,
+                            "canAdd": false,
+                            "canRemove": false,
+                            "nodes": [
+                                id<FormField.YamlCodeBlock>({
+                                    "type": "field",
+                                    "fieldType": "yaml code block",
+                                    "description": "",
+                                    "expectedDataType": node.expectedDataType,
+                                    "helmValuesPath": node.helmValuesPath,
+                                    "isReadonly": node.isReadonly,
+                                    "title": "",
+                                    "value": node.value
+                                })
+                            ]
+                        };
+                    }
+
+                    return {
+                        "helmValuesPath": node.helmValuesPath,
+                        "description": node.description,
+                        "canAdd": node.canAdd,
+                        "canRemove": node.canRemove,
+                        "nodes": node.nodes
+                    };
+                })
             ]}
             callbacks={callbacks}
         />

diff --git a/...c/ui/pages/launcher/RootFormComponent/FormFieldGroupComponent/FormFieldGroupComponent.tsx b/...c/ui/pages/launcher/RootFormComponent/FormFieldGroupComponent/FormFieldGroupComponent.tsx
@@ -218,6 +218,7 @@ export function FormFieldGroupComponentInner(
                         return (
                             <YamlCodeBlockFormField
                                 key={key}
+                                className={classes.field_yamlCodeBlock}
                                 title={node.title}
                                 description={node.description}
                                 expectedDataType={node.expectedDataType}
@@ -362,6 +363,9 @@ const useStyles_inner = tss
             "field_text": {
                 "flex": "0 0 300px"
             },
+            "field_yamlCodeBlock": {
+                "flex": "0 0 100%"
+            },
             "field_slider": {
                 "flex": `0 0 calc(50% - ${gap / 2}px)`,
                 "boxSizing": "border-box"