From 5e82938a60d23d5fe16e2a5725d8b4a08454ac0c Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Mon, 2 Dec 2024 18:48:49 +0100
Subject: [PATCH] Revert to not including hidden fields in the root form

---
 .../computeRootForm/computeRootForm.test.ts   | 36 +++------
 .../computeRootFormFieldGroup.test.ts         | 79 ++++---------------
 .../computeRootFormFieldGroup.ts              | 58 +++++++-------
 .../mergeRangeSliders.test.ts                 | 27 +++----
 .../mergeTemporaryRangeSliders.test.ts        |  9 +--
 .../mergeTemporaryRangeSliders.ts             |  3 +-
 .../mergeRangeSliders/temporaryRangeSlider.ts |  4 +-
 .../launcher/decoupledLogic/formTypes.ts      |  2 -
 .../findInRootForm.test.ts                    | 33 +++-----
 .../mutateHelmValues_update.test.ts           | 12 +--
 .../launcher/RootFormComponent/Accordion.tsx  | 11 +--
 .../ConfigurationTopLevelGroup.tsx            | 26 ++----
 .../FormFieldGroupComponent.stories.tsx       |  9 +--
 .../FormFieldGroupComponent.tsx               | 67 ++++++----------
 .../formFields/CheckboxFormField.stories.tsx  |  1 -
 .../formFields/CheckboxFormField.tsx          | 14 +---
 .../formFields/NumberFormField.stories.tsx    |  1 -
 .../formFields/NumberFormField.tsx            |  5 +-
 .../RangeSliderFormField.stories.tsx          |  1 -
 .../formFields/RangeSliderFormField.tsx       | 13 +--
 .../formFields/SelectFormField.stories.tsx    |  1 -
 .../formFields/SelectFormField.tsx            |  5 +-
 .../formFields/SliderFormField.stories.tsx    |  1 -
 .../formFields/SliderFormField.tsx            |  5 +-
 .../formFields/TextFormField.stories.tsx      |  1 -
 .../formFields/TextFormField.tsx              |  5 +-
 .../YamlCodeBlockFormField.stories.tsx        |  1 -
 .../formFields/YamlCodeBlockFormField.tsx     |  5 +-
 .../formFields/shared/FormFieldWrapper.tsx    | 15 +---
 29 files changed, 137 insertions(+), 313 deletions(-)

diff --git a/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/computeRootForm.test.ts b/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/computeRootForm.test.ts
index 285f4dcd4..475bc8b62 100644
--- a/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/computeRootForm.test.ts
+++ b/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/computeRootForm.test.ts
@@ -79,13 +79,11 @@ describe(symToStr({ computeRootForm }), () => {
                             doRenderAsTextArea: false,
                             isSensitive: false,
                             pattern: undefined,
-                            value: "foo",
-                            isHidden: false
+                            value: "foo"
                         }
                     ],
                     canAdd: false,
-                    canRemove: false,
-                    isHidden: false
+                    canRemove: false
                 }
             ],
             disabledDependencies: [],
@@ -99,8 +97,7 @@ describe(symToStr({ computeRootForm }), () => {
                     description: undefined,
                     value: 2,
                     isInteger: false,
-                    minimum: undefined,
-                    isHidden: false
+                    minimum: undefined
                 }
             ],
             dependencies: {
@@ -113,8 +110,7 @@ describe(symToStr({ computeRootForm }), () => {
                             fieldType: "checkbox",
                             helmValuesPath: ["postgresql", "enabled"],
                             description: undefined,
-                            value: true,
-                            isHidden: false
+                            value: true
                         }
                     ],
                     global: [
@@ -128,8 +124,7 @@ describe(symToStr({ computeRootForm }), () => {
                             doRenderAsTextArea: false,
                             isSensitive: false,
                             pattern: undefined,
-                            value: "admin",
-                            isHidden: false
+                            value: "admin"
                         },
                         {
                             type: "field",
@@ -141,8 +136,7 @@ describe(symToStr({ computeRootForm }), () => {
                             doRenderAsTextArea: false,
                             isSensitive: false,
                             pattern: undefined,
-                            value: "xxx",
-                            isHidden: false
+                            value: "xxx"
                         }
                     ]
                 }
@@ -227,13 +221,11 @@ describe(symToStr({ computeRootForm }), () => {
                             doRenderAsTextArea: false,
                             isSensitive: false,
                             pattern: undefined,
-                            value: "value of services.a",
-                            isHidden: false
+                            value: "value of services.a"
                         }
                     ],
                     canAdd: false,
-                    canRemove: false,
-                    isHidden: false
+                    canRemove: false
                 },
                 {
                     type: "field",
@@ -245,8 +237,7 @@ describe(symToStr({ computeRootForm }), () => {
                     doRenderAsTextArea: false,
                     isSensitive: false,
                     pattern: undefined,
-                    value: "value of foo.b",
-                    isHidden: false
+                    value: "value of foo.b"
                 }
             ],
             disabledDependencies: [],
@@ -260,8 +251,7 @@ describe(symToStr({ computeRootForm }), () => {
                     description: undefined,
                     value: 2,
                     isInteger: false,
-                    minimum: undefined,
-                    isHidden: false
+                    minimum: undefined
                 },
                 {
                     type: "field",
@@ -273,8 +263,7 @@ describe(symToStr({ computeRootForm }), () => {
                     doRenderAsTextArea: false,
                     isSensitive: false,
                     pattern: undefined,
-                    value: "value of global.foo.username",
-                    isHidden: false
+                    value: "value of global.foo.username"
                 },
                 {
                     type: "field",
@@ -286,8 +275,7 @@ describe(symToStr({ computeRootForm }), () => {
                     doRenderAsTextArea: false,
                     isSensitive: false,
                     pattern: undefined,
-                    value: "value of global.foo.password",
-                    isHidden: false
+                    value: "value of global.foo.password"
                 }
             ],
             dependencies: {}
diff --git a/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/computeRootFormFieldGroup.test.ts b/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/computeRootFormFieldGroup.test.ts
index e7bfed1d9..ec30ad8ad 100644
--- a/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/computeRootFormFieldGroup.test.ts
+++ b/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/computeRootFormFieldGroup.test.ts
@@ -47,8 +47,7 @@ describe(symToStr({ computeRootFormFieldGroup }), () => {
                     helmValuesPath: ["a"],
                     doRenderAsTextArea: false,
                     isSensitive: false,
-                    value: "foo",
-                    isHidden: false
+                    value: "foo"
                 },
                 {
                     type: "field",
@@ -58,13 +57,11 @@ describe(symToStr({ computeRootFormFieldGroup }), () => {
                     fieldType: "select",
                     helmValuesPath: ["b"],
                     options: [1, 2, 3],
-                    selectedOptionIndex: 1,
-                    isHidden: false
+                    selectedOptionIndex: 1
                 }
             ],
             canAdd: false,
-            canRemove: false,
-            isHidden: false
+            canRemove: false
         };
 
         expect(got).toStrictEqual(expected);
@@ -103,13 +100,11 @@ describe(symToStr({ computeRootFormFieldGroup }), () => {
                     helmValuesPath: ["a"],
                     doRenderAsTextArea: false,
                     isSensitive: false,
-                    value: "foo",
-                    isHidden: false
+                    value: "foo"
                 }
             ],
             canAdd: false,
-            canRemove: false,
-            isHidden: false
+            canRemove: false
         };
 
         expect(got).toStrictEqual(expected);
@@ -177,32 +172,15 @@ describe(symToStr({ computeRootFormFieldGroup }), () => {
                             fieldType: "checkbox",
                             helmValuesPath: ["persistence", "enabled"],
                             description: "Create a persistent volume",
-                            value: false,
-                            isHidden: false
-                        },
-                        {
-                            type: "field",
-                            title: "Persistent volume size",
-                            isReadonly: false,
-                            fieldType: "slider",
-                            helmValuesPath: ["persistence", "size"],
-                            description: "Size of the persistent volume",
-                            min: 1,
-                            max: 100,
-                            unit: "Gi",
-                            step: 1,
-                            value: 10,
-                            isHidden: true
+                            value: false
                         }
                     ],
                     canAdd: false,
-                    canRemove: false,
-                    isHidden: false
+                    canRemove: false
                 }
             ],
             canAdd: false,
-            canRemove: false,
-            isHidden: false
+            canRemove: false
         };
 
         expect(got).toStrictEqual(expected);
@@ -270,32 +248,15 @@ describe(symToStr({ computeRootFormFieldGroup }), () => {
                             fieldType: "checkbox",
                             helmValuesPath: ["persistence", "enabled"],
                             description: "Create a persistent volume",
-                            value: false,
-                            isHidden: false
-                        },
-                        {
-                            type: "field",
-                            title: "Persistent volume size",
-                            isReadonly: false,
-                            fieldType: "slider",
-                            helmValuesPath: ["persistence", "size"],
-                            description: "Size of the persistent volume",
-                            min: 1,
-                            max: 100,
-                            unit: "Gi",
-                            step: 1,
-                            value: 10,
-                            isHidden: true
+                            value: false
                         }
                     ],
                     canAdd: false,
-                    canRemove: false,
-                    isHidden: false
+                    canRemove: false
                 }
             ],
             canAdd: false,
-            canRemove: false,
-            isHidden: false
+            canRemove: false
         };
 
         expect(got).toStrictEqual(expected);
@@ -347,8 +308,7 @@ describe(symToStr({ computeRootFormFieldGroup }), () => {
                     doRenderAsTextArea: false,
                     isSensitive: false,
                     pattern: undefined,
-                    value: "value of a",
-                    isHidden: false
+                    value: "value of a"
                 },
                 {
                     type: "group",
@@ -372,8 +332,7 @@ describe(symToStr({ computeRootFormFieldGroup }), () => {
                                     doRenderAsTextArea: false,
                                     isSensitive: false,
                                     pattern: undefined,
-                                    value: "value of foo",
-                                    isHidden: false
+                                    value: "value of foo"
                                 },
                                 {
                                     type: "field",
@@ -384,23 +343,19 @@ describe(symToStr({ computeRootFormFieldGroup }), () => {
                                     description: undefined,
                                     value: 42,
                                     isInteger: false,
-                                    minimum: undefined,
-                                    isHidden: false
+                                    minimum: undefined
                                 }
                             ],
                             canAdd: false,
-                            canRemove: false,
-                            isHidden: false
+                            canRemove: false
                         }
                     ],
                     canAdd: true,
-                    canRemove: false,
-                    isHidden: false
+                    canRemove: false
                 }
             ],
             canAdd: false,
-            canRemove: false,
-            isHidden: false
+            canRemove: false
         };
 
         expect(got).toStrictEqual(expected);
diff --git a/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/computeRootFormFieldGroup.ts b/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/computeRootFormFieldGroup.ts
index fb580d25b..8f5a94497 100644
--- a/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/computeRootFormFieldGroup.ts
+++ b/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/computeRootFormFieldGroup.ts
@@ -9,6 +9,7 @@ import {
     type XOnyxiaParams
 } from "core/ports/OnyxiaApi/XOnyxia";
 import { getValueAtPathInObject } from "core/tools/getValueAtPathInObject";
+import { exclude } from "tsafe/exclude";
 import { same } from "evt/tools/inDepth/same";
 import { isAmong } from "tsafe/isAmong";
 import type { XOnyxiaContext } from "core/ports/OnyxiaApi";
@@ -73,6 +74,7 @@ export function computeRootFormFieldGroup(params: {
         helmValuesPath: []
     });
 
+    assert(formFieldGroup !== undefined);
     assert(formFieldGroup.type === "group");
 
     return formFieldGroup;
@@ -83,7 +85,7 @@ function computeRootFormFieldGroup_rec(params: {
     helmValues: Stringifyable;
     xOnyxiaContext: XOnyxiaContextLike;
     helmValuesPath: (string | number)[];
-}): FormFieldGroup | FormField {
+}): FormFieldGroup | FormField | undefined {
     const { helmValuesSchema, helmValues, xOnyxiaContext, helmValuesPath } = params;
 
     const isHidden: boolean = (() => {
@@ -129,6 +131,10 @@ function computeRootFormFieldGroup_rec(params: {
         return false;
     })();
 
+    if (isHidden) {
+        return undefined;
+    }
+
     const title = (() => {
         const { title } = helmValuesSchema;
 
@@ -202,8 +208,7 @@ function computeRootFormFieldGroup_rec(params: {
                 assert(value instanceof Object);
 
                 return value;
-            })(),
-            isHidden
+            })()
         });
     }
 
@@ -235,8 +240,7 @@ function computeRootFormFieldGroup_rec(params: {
                 assert(selectedOptionIndex !== -1);
 
                 return selectedOptionIndex;
-            })(),
-            isHidden
+            })()
         });
     }
 
@@ -294,8 +298,7 @@ function computeRootFormFieldGroup_rec(params: {
                 }
 
                 assert(false);
-            })(),
-            isHidden
+            })()
         });
     }
 
@@ -342,7 +345,6 @@ function computeRootFormFieldGroup_rec(params: {
                     })(),
                     helmValuesPath,
                     description: helmValuesSchema.description,
-                    isHidden,
                     ...(() => {
                         switch (sliderExtremity) {
                             case "down":
@@ -361,15 +363,16 @@ function computeRootFormFieldGroup_rec(params: {
         case "object": {
             assert(helmValuesSchema.properties !== undefined);
 
-            const nodes = Object.entries(helmValuesSchema.properties).map(
-                ([segment, helmValuesSchema_child]) =>
+            const nodes = Object.entries(helmValuesSchema.properties)
+                .map(([segment, helmValuesSchema_child]) =>
                     computeRootFormFieldGroup_rec({
                         helmValues,
                         helmValuesPath: [...helmValuesPath, segment],
                         xOnyxiaContext,
                         helmValuesSchema: helmValuesSchema_child
                     })
-            );
+                )
+                .filter(exclude(undefined));
 
             return id<FormFieldGroup>({
                 type: "group",
@@ -378,8 +381,7 @@ function computeRootFormFieldGroup_rec(params: {
                 description: helmValuesSchema.description,
                 nodes,
                 canAdd: false,
-                canRemove: false,
-                isHidden: isHidden || nodes.every(node => node.isHidden)
+                canRemove: false
             });
         }
         case "array": {
@@ -395,14 +397,16 @@ function computeRootFormFieldGroup_rec(params: {
             assert(values !== undefined);
             assert(values instanceof Array);
 
-            const nodes = values.map((...[, index]) =>
-                computeRootFormFieldGroup_rec({
-                    helmValues,
-                    helmValuesPath: [...helmValuesPath, index],
-                    xOnyxiaContext,
-                    helmValuesSchema: itemSchema
-                })
-            );
+            const nodes = values
+                .map((...[, index]) =>
+                    computeRootFormFieldGroup_rec({
+                        helmValues,
+                        helmValuesPath: [...helmValuesPath, index],
+                        xOnyxiaContext,
+                        helmValuesSchema: itemSchema
+                    })
+                )
+                .filter(exclude(undefined));
 
             return id<FormFieldGroup>({
                 type: "group",
@@ -411,8 +415,7 @@ function computeRootFormFieldGroup_rec(params: {
                 description: helmValuesSchema.description,
                 nodes,
                 canAdd: values.length < (helmValuesSchema.maxItems ?? Infinity),
-                canRemove: values.length > (helmValuesSchema.minItems ?? 0),
-                isHidden: isHidden || nodes.every(node => node.isHidden)
+                canRemove: values.length > (helmValuesSchema.minItems ?? 0)
             });
         }
         case "boolean":
@@ -429,8 +432,7 @@ function computeRootFormFieldGroup_rec(params: {
                     assert(typeof value === "boolean");
 
                     return value;
-                })(),
-                isHidden
+                })()
             });
         case "string":
             return id<FormField.TextField>({
@@ -449,8 +451,7 @@ function computeRootFormFieldGroup_rec(params: {
                     assert(typeof value === "string");
 
                     return value;
-                })(),
-                isHidden
+                })()
             });
         case "integer":
         case "number":
@@ -469,8 +470,7 @@ function computeRootFormFieldGroup_rec(params: {
                     return value;
                 })(),
                 isInteger: helmValuesSchemaType === "integer",
-                minimum: helmValuesSchema.minimum,
-                isHidden
+                minimum: helmValuesSchema.minimum
             });
     }
 
diff --git a/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/mergeRangeSliders.test.ts b/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/mergeRangeSliders.test.ts
index 6fbfea40f..01d0c0d59 100644
--- a/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/mergeRangeSliders.test.ts
+++ b/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/mergeRangeSliders.test.ts
@@ -32,8 +32,7 @@ describe(symToStr({ mergeRangeSliders }), () => {
                                         helmValuesPath: ["resources", "requests", "cpu"],
                                         description: "The amount of cpu guaranteed",
                                         sliderExtremity: "down",
-                                        title: "CPU",
-                                        isHidden: false
+                                        title: "CPU"
                                     }
                                 })
                             ],
@@ -55,8 +54,7 @@ describe(symToStr({ mergeRangeSliders }), () => {
                                         helmValue: "30000m",
                                         helmValuesPath: ["resources", "limits", "cpu"],
                                         description: "The maximum amount of cpu",
-                                        sliderExtremity: "up",
-                                        isHidden: false
+                                        sliderExtremity: "up"
                                     }
                                 })
                             ],
@@ -102,8 +100,7 @@ describe(symToStr({ mergeRangeSliders }), () => {
                                 min: 50,
                                 max: 40000,
                                 description: "The maximum amount of cpu"
-                            },
-                            isHidden: false
+                            }
                         })
                     ],
                     canAdd: false
@@ -139,8 +136,7 @@ describe(symToStr({ mergeRangeSliders }), () => {
                                         helmValuesPath: ["resources", "requests", "cpu"],
                                         description: "The amount of cpu guaranteed",
                                         sliderExtremity: "down",
-                                        title: "CPU",
-                                        isHidden: false
+                                        title: "CPU"
                                     }
                                 }),
                                 createTemporaryRangeSlider({
@@ -160,8 +156,7 @@ describe(symToStr({ mergeRangeSliders }), () => {
                                         ],
                                         description: "The amount of memory guaranteed",
                                         sliderExtremity: "down",
-                                        title: "memory",
-                                        isHidden: false
+                                        title: "memory"
                                     }
                                 })
                             ],
@@ -183,8 +178,7 @@ describe(symToStr({ mergeRangeSliders }), () => {
                                         helmValue: "30000m",
                                         helmValuesPath: ["resources", "limits", "cpu"],
                                         description: "The maximum amount of cpu",
-                                        sliderExtremity: "up",
-                                        isHidden: false
+                                        sliderExtremity: "up"
                                     }
                                 }),
                                 createTemporaryRangeSlider({
@@ -199,8 +193,7 @@ describe(symToStr({ mergeRangeSliders }), () => {
                                         helmValue: "50Gi",
                                         helmValuesPath: ["resources", "limits", "memory"],
                                         description: "The maximum amount of memory",
-                                        sliderExtremity: "up",
-                                        isHidden: false
+                                        sliderExtremity: "up"
                                     }
                                 })
                             ],
@@ -246,8 +239,7 @@ describe(symToStr({ mergeRangeSliders }), () => {
                                 min: 50,
                                 max: 40000,
                                 description: "The maximum amount of cpu"
-                            },
-                            isHidden: false
+                            }
                         }),
                         id<FormField.RangeSlider>({
                             type: "field",
@@ -272,8 +264,7 @@ describe(symToStr({ mergeRangeSliders }), () => {
                                 min: 1,
                                 max: 200,
                                 description: "The maximum amount of memory"
-                            },
-                            isHidden: false
+                            }
                         })
                     ],
                     canAdd: false
diff --git a/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/mergeTemporaryRangeSliders.test.ts b/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/mergeTemporaryRangeSliders.test.ts
index 276218e6d..0630ee64a 100644
--- a/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/mergeTemporaryRangeSliders.test.ts
+++ b/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/mergeTemporaryRangeSliders.test.ts
@@ -29,8 +29,7 @@ describe(symToStr({ mergeTemporaryRangeSliders }), () => {
                 min: 50,
                 max: 40000,
                 description: "The maximum amount of cpu"
-            },
-            isHidden: false
+            }
         };
 
         const got = mergeTemporaryRangeSliders({
@@ -47,8 +46,7 @@ describe(symToStr({ mergeTemporaryRangeSliders }), () => {
                     helmValuesPath: ["resources", "requests", "cpu"],
                     description: "The amount of cpu guaranteed",
                     sliderExtremity: "down",
-                    title: "CPU",
-                    isHidden: false
+                    title: "CPU"
                 }
             }),
             temporaryRangeSlider_higherBound: createTemporaryRangeSlider({
@@ -63,8 +61,7 @@ describe(symToStr({ mergeTemporaryRangeSliders }), () => {
                     helmValue: "30000m",
                     helmValuesPath: ["resources", "limits", "cpu"],
                     description: "The maximum amount of cpu",
-                    sliderExtremity: "up",
-                    isHidden: false
+                    sliderExtremity: "up"
                 }
             })
         });
diff --git a/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/mergeTemporaryRangeSliders.ts b/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/mergeTemporaryRangeSliders.ts
index 26568a98a..37a82868a 100644
--- a/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/mergeTemporaryRangeSliders.ts
+++ b/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/mergeTemporaryRangeSliders.ts
@@ -130,7 +130,6 @@ export function mergeTemporaryRangeSliders(params: {
                 lowEndRange,
                 highEndRange
             };
-        })(),
-        isHidden: payload_lowEnd.isHidden || payload_highEnd.isHidden
+        })()
     };
 }
diff --git a/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/temporaryRangeSlider.ts b/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/temporaryRangeSlider.ts
index c01286a9f..57b627618 100644
--- a/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/temporaryRangeSlider.ts
+++ b/web/src/core/usecases/launcher/decoupledLogic/computeRootForm/mergeRangeSliders/temporaryRangeSlider.ts
@@ -12,7 +12,6 @@ export type TemporaryRangeSliderPayload = {
     helmValue: string | number;
     helmValuesPath: (string | number)[];
     description: string | undefined;
-    isHidden: boolean;
 } & (
     | {
           sliderExtremity: "down";
@@ -72,7 +71,6 @@ export function createTemporaryRangeSlider(params: {
             max: NaN
         },
         unit: prefix + JSON.stringify(payload),
-        step: NaN,
-        isHidden: false
+        step: NaN
     };
 }
diff --git a/web/src/core/usecases/launcher/decoupledLogic/formTypes.ts b/web/src/core/usecases/launcher/decoupledLogic/formTypes.ts
index 83ef6917f..98997bd73 100644
--- a/web/src/core/usecases/launcher/decoupledLogic/formTypes.ts
+++ b/web/src/core/usecases/launcher/decoupledLogic/formTypes.ts
@@ -23,7 +23,6 @@ export type FormFieldGroup = {
     nodes: (FormField | FormFieldGroup)[];
     canAdd: boolean;
     canRemove: boolean;
-    isHidden: boolean;
 };
 
 export type FormField =
@@ -39,7 +38,6 @@ export namespace FormField {
     type Common = {
         type: "field";
         title: string;
-        isHidden: boolean;
     };
 
     export type Checkbox = Common & {
diff --git a/web/src/core/usecases/launcher/decoupledLogic/mutateHelmValues/mutateHelmValues_update/findInRootForm.test.ts b/web/src/core/usecases/launcher/decoupledLogic/mutateHelmValues/mutateHelmValues_update/findInRootForm.test.ts
index 7063e056e..32f0c4b07 100644
--- a/web/src/core/usecases/launcher/decoupledLogic/mutateHelmValues/mutateHelmValues_update/findInRootForm.test.ts
+++ b/web/src/core/usecases/launcher/decoupledLogic/mutateHelmValues/mutateHelmValues_update/findInRootForm.test.ts
@@ -21,13 +21,11 @@ const rootForm: RootForm = {
                     doRenderAsTextArea: false,
                     isSensitive: false,
                     pattern: undefined,
-                    value: "foo",
-                    isHidden: false
+                    value: "foo"
                 }
             ],
             canAdd: false,
-            canRemove: false,
-            isHidden: false
+            canRemove: false
         },
         {
             type: "group",
@@ -58,13 +56,11 @@ const rootForm: RootForm = {
                     },
                     step: undefined,
                     unit: "Mi",
-                    title: "cpu",
-                    isHidden: false
+                    title: "cpu"
                 }
             ],
             canAdd: false,
-            canRemove: false,
-            isHidden: false
+            canRemove: false
         }
     ],
     disabledDependencies: [],
@@ -78,8 +74,7 @@ const rootForm: RootForm = {
             description: undefined,
             value: 2,
             isInteger: false,
-            minimum: undefined,
-            isHidden: false
+            minimum: undefined
         }
     ],
     dependencies: {
@@ -92,8 +87,7 @@ const rootForm: RootForm = {
                     fieldType: "checkbox",
                     helmValuesPath: ["postgresql", "enabled"],
                     description: undefined,
-                    value: true,
-                    isHidden: false
+                    value: true
                 }
             ],
             global: [
@@ -107,8 +101,7 @@ const rootForm: RootForm = {
                     doRenderAsTextArea: false,
                     isSensitive: false,
                     pattern: undefined,
-                    value: "admin",
-                    isHidden: false
+                    value: "admin"
                 },
                 {
                     type: "field",
@@ -120,8 +113,7 @@ const rootForm: RootForm = {
                     doRenderAsTextArea: false,
                     isSensitive: false,
                     pattern: undefined,
-                    value: "xxx",
-                    isHidden: false
+                    value: "xxx"
                 }
             ]
         }
@@ -145,8 +137,7 @@ describe(symToStr({ findInRootForm }), () => {
             doRenderAsTextArea: false,
             isSensitive: false,
             pattern: undefined,
-            value: "foo",
-            isHidden: false
+            value: "foo"
         });
     });
 
@@ -163,8 +154,7 @@ describe(symToStr({ findInRootForm }), () => {
             fieldType: "checkbox",
             helmValuesPath: ["postgresql", "enabled"],
             description: undefined,
-            value: true,
-            isHidden: false
+            value: true
         });
     });
 });
@@ -200,8 +190,7 @@ describe(symToStr({ findInRootForm_rangeSlider }), () => {
             },
             step: undefined,
             unit: "Mi",
-            title: "cpu",
-            isHidden: false
+            title: "cpu"
         });
     });
 });
diff --git a/web/src/core/usecases/launcher/decoupledLogic/mutateHelmValues/mutateHelmValues_update/mutateHelmValues_update.test.ts b/web/src/core/usecases/launcher/decoupledLogic/mutateHelmValues/mutateHelmValues_update/mutateHelmValues_update.test.ts
index 68b216c2a..9fb9ad10b 100644
--- a/web/src/core/usecases/launcher/decoupledLogic/mutateHelmValues/mutateHelmValues_update/mutateHelmValues_update.test.ts
+++ b/web/src/core/usecases/launcher/decoupledLogic/mutateHelmValues/mutateHelmValues_update/mutateHelmValues_update.test.ts
@@ -42,8 +42,7 @@ describe(symToStr({ mutateHelmValues_update }), () => {
                         isReadonly: THROW_IF_ACCESSED,
                         description: THROW_IF_ACCESSED,
                         selectedOptionIndex: THROW_IF_ACCESSED,
-                        title: THROW_IF_ACCESSED,
-                        isHidden: THROW_IF_ACCESSED
+                        title: THROW_IF_ACCESSED
                     })
                 ],
                 dependencies: {},
@@ -80,8 +79,7 @@ describe(symToStr({ mutateHelmValues_update }), () => {
                         min: THROW_IF_ACCESSED,
                         max: THROW_IF_ACCESSED,
                         step: THROW_IF_ACCESSED,
-                        value: THROW_IF_ACCESSED,
-                        isHidden: THROW_IF_ACCESSED
+                        value: THROW_IF_ACCESSED
                     })
                 ],
                 dependencies: {},
@@ -162,12 +160,10 @@ describe(symToStr({ mutateHelmValues_update }), () => {
                                             }
                                         ),
                                     step: THROW_IF_ACCESSED,
-                                    title: THROW_IF_ACCESSED,
-                                    isHidden: THROW_IF_ACCESSED
+                                    title: THROW_IF_ACCESSED
                                 }
                             )
-                        ],
-                        isHidden: THROW_IF_ACCESSED
+                        ]
                     })
                 ],
                 dependencies: {},
diff --git a/web/src/ui/pages/launcher/RootFormComponent/Accordion.tsx b/web/src/ui/pages/launcher/RootFormComponent/Accordion.tsx
index d4868b740..f3e97a4a7 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/Accordion.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/Accordion.tsx
@@ -26,7 +26,6 @@ export type Props = {
     canAdd: boolean;
     canRemove: boolean;
     callbacks: FormCallbacks;
-    isHidden: boolean;
 };
 
 export function Accordion(props: Props) {
@@ -38,11 +37,10 @@ export function Accordion(props: Props) {
         nodes,
         canAdd,
         canRemove,
-        callbacks,
-        isHidden
+        callbacks
     } = props;
 
-    const { classes, cx } = useStyles({ isHidden });
+    const { classes, cx } = useStyles();
 
     const contentId = useId();
 
@@ -150,7 +148,6 @@ export function Accordion(props: Props) {
                     canAdd={canAdd}
                     canRemove={canRemove}
                     callbacks={callbacks}
-                    isHidden={false}
                 />
             </MuiAccordionDetails>
         </MuiAccordion>
@@ -160,10 +157,8 @@ export function Accordion(props: Props) {
 const useStyles = tss
     .withName({ Accordion })
     .withNestedSelectors<"summary" | "summaryExpanded">()
-    .withParams<{ isHidden: boolean }>()
-    .create(({ theme, isHidden, classes }) => ({
+    .create(({ theme, classes }) => ({
         root: {
-            display: isHidden ? "none" : undefined,
             backgroundColor: theme.colors.useCases.surfaces.surface1
         },
         summaryExpanded: {},
diff --git a/web/src/ui/pages/launcher/RootFormComponent/ConfigurationTopLevelGroup.tsx b/web/src/ui/pages/launcher/RootFormComponent/ConfigurationTopLevelGroup.tsx
index 04b8b4768..a1597af13 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/ConfigurationTopLevelGroup.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/ConfigurationTopLevelGroup.tsx
@@ -63,8 +63,7 @@ export function ConfigurationTopLevelGroup(props: Props) {
                           description: t("Configuration that applies to all charts"),
                           canAdd: false,
                           canRemove: false,
-                          nodes: global,
-                          isHidden: global.every(node => node.isHidden)
+                          nodes: global
                       })
                   ]),
             ...(main_formFields.length === 0
@@ -77,8 +76,7 @@ export function ConfigurationTopLevelGroup(props: Props) {
                           description: t("Top level configuration values"),
                           canAdd: false,
                           canRemove: false,
-                          nodes: main_formFields,
-                          isHidden: main_formFields.every(node => node.isHidden)
+                          nodes: main_formFields
                       })
                   ]),
             ...main_formFieldGroups.map(node => {
@@ -99,11 +97,9 @@ export function ConfigurationTopLevelGroup(props: Props) {
                                 helmValuesPath: node.helmValuesPath,
                                 isReadonly: node.isReadonly,
                                 title: "",
-                                value: node.value,
-                                isHidden: node.isHidden
+                                value: node.value
                             })
-                        ],
-                        isHidden: node.isHidden
+                        ]
                     });
                 }
 
@@ -113,8 +109,7 @@ export function ConfigurationTopLevelGroup(props: Props) {
                     description: node.description,
                     canAdd: node.canAdd,
                     canRemove: node.canRemove,
-                    nodes: node.nodes,
-                    isHidden: node.isHidden
+                    nodes: node.nodes
                 });
             })
         ];
@@ -125,15 +120,7 @@ export function ConfigurationTopLevelGroup(props: Props) {
     return (
         <div className={cx(classes.root, className)}>
             {accordionEntries.map(
-                ({
-                    helmValuesPath,
-                    title,
-                    description,
-                    canAdd,
-                    canRemove,
-                    nodes,
-                    isHidden
-                }) => (
+                ({ helmValuesPath, title, description, canAdd, canRemove, nodes }) => (
                     <Accordion
                         key={(() => {
                             if (isObjectThatThrowIfAccessed(helmValuesPath)) {
@@ -149,7 +136,6 @@ export function ConfigurationTopLevelGroup(props: Props) {
                         canRemove={canRemove}
                         nodes={nodes}
                         callbacks={callbacks}
-                        isHidden={isHidden}
                     />
                 )
             )}
diff --git a/web/src/ui/pages/launcher/RootFormComponent/FormFieldGroupComponent/FormFieldGroupComponent.stories.tsx b/web/src/ui/pages/launcher/RootFormComponent/FormFieldGroupComponent/FormFieldGroupComponent.stories.tsx
index 7d1a9b578..b03085860 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/FormFieldGroupComponent/FormFieldGroupComponent.stories.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/FormFieldGroupComponent/FormFieldGroupComponent.stories.tsx
@@ -36,8 +36,7 @@ export const Default: Story = {
                 doRenderAsTextArea: false,
                 isSensitive: false,
                 pattern: undefined,
-                value: "value 1",
-                isHidden: false
+                value: "value 1"
             }),
             id<FormField.TextField>({
                 type: "field",
@@ -49,8 +48,7 @@ export const Default: Story = {
                 doRenderAsTextArea: false,
                 isSensitive: false,
                 pattern: undefined,
-                value: "value 2",
-                isHidden: false
+                value: "value 2"
             })
         ],
         callbacks: {
@@ -58,7 +56,6 @@ export const Default: Story = {
             onAdd,
             onRemove,
             onFieldErrorChange
-        },
-        isHidden: false
+        }
     }
 };
diff --git a/web/src/ui/pages/launcher/RootFormComponent/FormFieldGroupComponent/FormFieldGroupComponent.tsx b/web/src/ui/pages/launcher/RootFormComponent/FormFieldGroupComponent/FormFieldGroupComponent.tsx
index 01c4d3c5d..7ce27977b 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/FormFieldGroupComponent/FormFieldGroupComponent.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/FormFieldGroupComponent/FormFieldGroupComponent.tsx
@@ -25,12 +25,10 @@ export type Props = {
     canAdd: boolean;
     canRemove: boolean;
     callbacks: FormCallbacks;
-    isHidden: boolean;
 };
 
 export function FormFieldGroupComponent(props: Props) {
-    const { className, canAdd, canRemove, nodes, callbacks, helmValuesPath, isHidden } =
-        props;
+    const { className, canAdd, canRemove, nodes, callbacks, helmValuesPath } = props;
 
     const { onRemove, onAdd, onChange, onFieldErrorChange } = callbacks;
 
@@ -126,7 +124,7 @@ export function FormFieldGroupComponent(props: Props) {
             })
     );
 
-    const { cx, classes } = useStyles({ isHidden });
+    const { cx, classes } = useStyles();
 
     const { t } = useTranslation({ FormFieldGroupComponent });
 
@@ -159,7 +157,6 @@ export function FormFieldGroupComponent(props: Props) {
                                 canAdd={node.canAdd}
                                 canRemove={node.canRemove}
                                 helmValuesPath={node.helmValuesPath}
-                                isHidden={node.isHidden}
                             />
                         </FormFieldGroupComponentWrapper>
                     );
@@ -178,7 +175,6 @@ export function FormFieldGroupComponent(props: Props) {
                                 onChange={getOnChange_checkbox(
                                     JSON.stringify(node.helmValuesPath)
                                 )}
-                                isHidden={node.isHidden}
                             />
                         );
                     case "yaml code block": {
@@ -196,7 +192,6 @@ export function FormFieldGroupComponent(props: Props) {
                                 onErrorChange={getOnFieldErrorChange_child(
                                     helmValuesPathStr
                                 )}
-                                isHidden={node.isHidden}
                             />
                         );
                     }
@@ -216,7 +211,6 @@ export function FormFieldGroupComponent(props: Props) {
                                 onErrorChange={getOnFieldErrorChange_child(
                                     helmValuesPathStr
                                 )}
-                                isHidden={node.isHidden}
                             />
                         );
                     }
@@ -233,7 +227,6 @@ export function FormFieldGroupComponent(props: Props) {
                                 onSelectedOptionIndexChange={getOnChange_select(
                                     JSON.stringify(node.helmValuesPath)
                                 )}
-                                isHidden={node.isHidden}
                             />
                         );
                     case "text field": {
@@ -254,7 +247,6 @@ export function FormFieldGroupComponent(props: Props) {
                                 onErrorChange={getOnFieldErrorChange_child(
                                     helmValuesPathStr
                                 )}
-                                isHidden={node.isHidden}
                             />
                         );
                     }
@@ -275,7 +267,6 @@ export function FormFieldGroupComponent(props: Props) {
                                 onChange={getOnChange_slider(
                                     JSON.stringify(node.helmValuesPath)
                                 )}
-                                isHidden={node.isHidden}
                             />
                         );
                     case "range slider":
@@ -306,7 +297,6 @@ export function FormFieldGroupComponent(props: Props) {
                                     JSON.stringify(node.lowEndRange.helmValuesPath),
                                     JSON.stringify(node.highEndRange.helmValuesPath)
                                 )}
-                                isHidden={node.isHidden}
                             />
                         );
                 }
@@ -327,33 +317,28 @@ export function FormFieldGroupComponent(props: Props) {
 const { i18n } = declareComponentKeys<"add">()({ FormFieldGroupComponent });
 export type I18n = typeof i18n;
 
-const useStyles = tss
-    .withName({ FormFieldGroupComponent })
-    .withParams<{ isHidden: boolean }>()
-    .create(({ theme, isHidden }) => {
-        const gap = theme.spacing(6);
+const useStyles = tss.withName({ FormFieldGroupComponent }).create(({ theme }) => {
+    const gap = theme.spacing(6);
 
-        return {
-            root: isHidden
-                ? { display: "none" }
-                : {
-                      display: "flex",
-                      flexWrap: "wrap",
-                      gap,
-                      alignItems: "baseline"
-                  },
-            group: {
-                flex: "0 0 100%"
-            },
-            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"
-            }
-        };
-    });
+    return {
+        root: {
+            display: "flex",
+            flexWrap: "wrap",
+            gap,
+            alignItems: "baseline"
+        },
+        group: {
+            flex: "0 0 100%"
+        },
+        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"
+        }
+    };
+});
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/CheckboxFormField.stories.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/CheckboxFormField.stories.tsx
index f806f9a82..7bcdab24f 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/CheckboxFormField.stories.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/CheckboxFormField.stories.tsx
@@ -38,7 +38,6 @@ function StoryWrapper(params: Params) {
                     setValue(newValue);
                 }}
                 onRemove={undefined}
-                isHidden={false}
             />
             <Divider />
             <p>Value: </p>
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/CheckboxFormField.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/CheckboxFormField.tsx
index 08d7a8632..52620932e 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/CheckboxFormField.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/CheckboxFormField.tsx
@@ -12,20 +12,11 @@ type Props = {
     onRemove: (() => void) | undefined;
     value: boolean;
     onChange: (newValue: boolean) => void;
-    isHidden: boolean;
 };
 
 export const CheckboxFormField = memo((props: Props) => {
-    const {
-        className,
-        title,
-        description,
-        isReadonly,
-        onRemove,
-        value,
-        onChange,
-        isHidden
-    } = props;
+    const { className, title, description, isReadonly, onRemove, value, onChange } =
+        props;
 
     const { serializedValue, setSerializedValue, resetToDefault } = useFormField<
         boolean,
@@ -54,7 +45,6 @@ export const CheckboxFormField = memo((props: Props) => {
             onResetToDefault={resetToDefault}
             inputId={inputId}
             onRemove={onRemove}
-            isHidden={isHidden}
         >
             <div className={classes.switchWrapper}>
                 <Switch
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/NumberFormField.stories.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/NumberFormField.stories.tsx
index b395d4bf1..6f2c85576 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/NumberFormField.stories.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/NumberFormField.stories.tsx
@@ -45,7 +45,6 @@ function StoryWrapper(params: Params) {
                 }}
                 onRemove={undefined}
                 onErrorChange={onErrorChangeAction}
-                isHidden={false}
             />
             <Divider />
             <p>Value: </p>
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/NumberFormField.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/NumberFormField.tsx
index 6492d1ca0..dd4006ae6 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/NumberFormField.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/NumberFormField.tsx
@@ -18,7 +18,6 @@ type Props = {
     value: number;
     onChange: (newValue: number) => void;
     onErrorChange: (params: { hasError: boolean }) => void;
-    isHidden: boolean;
 };
 
 export const NumberFormField = memo((props: Props) => {
@@ -32,8 +31,7 @@ export const NumberFormField = memo((props: Props) => {
         onRemove,
         value,
         onChange,
-        onErrorChange,
-        isHidden
+        onErrorChange
     } = props;
 
     const { serializedValue, setSerializedValue, errorMessageKey, resetToDefault } =
@@ -116,7 +114,6 @@ export const NumberFormField = memo((props: Props) => {
             onResetToDefault={resetToDefault}
             inputId={inputId}
             onRemove={onRemove}
-            isHidden={isHidden}
         >
             <Input
                 id={inputId}
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/RangeSliderFormField.stories.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/RangeSliderFormField.stories.tsx
index e40499153..c2d5383fb 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/RangeSliderFormField.stories.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/RangeSliderFormField.stories.tsx
@@ -66,7 +66,6 @@ function StoryWrapper(params: Params) {
                     const { lowEndRangeValue, highEndRangeValue } = params;
                     setLowEndRangeValue([lowEndRangeValue, highEndRangeValue]);
                 }}
-                isHidden={false}
             />
             <Divider />
             <p>Value: </p>
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/RangeSliderFormField.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/RangeSliderFormField.tsx
index 43b1af679..a0ce7a7e9 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/RangeSliderFormField.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/RangeSliderFormField.tsx
@@ -13,7 +13,6 @@ export type Props = {
     lowEndRange: Props.RangeEnd;
     highEndRange: Props.RangeEnd;
     onChange: (params: { lowEndRangeValue: number; highEndRangeValue: number }) => void;
-    isHidden: boolean;
 };
 
 export namespace Props {
@@ -28,16 +27,7 @@ export namespace Props {
 }
 
 export const RangeSliderFormField = memo((props: Props) => {
-    const {
-        className,
-        title,
-        unit,
-        step,
-        lowEndRange,
-        highEndRange,
-        onChange,
-        isHidden
-    } = props;
+    const { className, title, unit, step, lowEndRange, highEndRange, onChange } = props;
 
     const serialize = ([lowEndRangeValue, highEndRangeValue]: [number, number]) =>
         JSON.stringify([lowEndRangeValue, highEndRangeValue]);
@@ -80,7 +70,6 @@ export const RangeSliderFormField = memo((props: Props) => {
             onResetToDefault={resetToDefault}
             inputId={inputId}
             onRemove={undefined}
-            isHidden={isHidden}
         >
             <RangeSlider
                 inputId={inputId}
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/SelectFormField.stories.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/SelectFormField.stories.tsx
index a633082bb..196da9f1f 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/SelectFormField.stories.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/SelectFormField.stories.tsx
@@ -41,7 +41,6 @@ function StoryWrapper(params: Params) {
                     setSelectedOptionIndex(newSelectedOptionIndex);
                 }}
                 onRemove={undefined}
-                isHidden={false}
             />
             <Divider />
             <p>selectedOptionIndex: </p>
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/SelectFormField.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/SelectFormField.tsx
index 7eadb516f..6435e12d1 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/SelectFormField.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/SelectFormField.tsx
@@ -15,7 +15,6 @@ type Props = {
     onRemove: (() => void) | undefined;
     selectedOptionIndex: number;
     onSelectedOptionIndexChange: (selectedOptionIndex: number) => void;
-    isHidden: boolean;
 };
 
 export const SelectFormField = memo((props: Props) => {
@@ -27,8 +26,7 @@ export const SelectFormField = memo((props: Props) => {
         options,
         onRemove,
         selectedOptionIndex,
-        onSelectedOptionIndexChange,
-        isHidden
+        onSelectedOptionIndexChange
     } = props;
 
     const { serializedValue, setSerializedValue, resetToDefault } = useFormField<
@@ -58,7 +56,6 @@ export const SelectFormField = memo((props: Props) => {
             onResetToDefault={resetToDefault}
             inputId={inputId}
             onRemove={onRemove}
-            isHidden={isHidden}
         >
             <Select
                 className={classes.select}
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/SliderFormField.stories.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/SliderFormField.stories.tsx
index 6c3b706f8..d065c14a5 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/SliderFormField.stories.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/SliderFormField.stories.tsx
@@ -49,7 +49,6 @@ function StoryWrapper(params: Params) {
                     setValue(newValue);
                 }}
                 onRemove={hasOnRemove ? () => onRemoveAction() : undefined}
-                isHidden={false}
             />
             <Divider />
             <p>Value: </p>
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/SliderFormField.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/SliderFormField.tsx
index 9df993d57..22f5550e3 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/SliderFormField.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/SliderFormField.tsx
@@ -18,7 +18,6 @@ type Props = {
     onRemove: (() => void) | undefined;
     value: number;
     onChange: (newValue: number) => void;
-    isHidden: boolean;
 };
 
 export const SliderFormField = memo((props: Props) => {
@@ -33,8 +32,7 @@ export const SliderFormField = memo((props: Props) => {
         step,
         onRemove,
         value,
-        onChange,
-        isHidden
+        onChange
     } = props;
 
     const { serializedValue, setSerializedValue, resetToDefault } = useFormField<
@@ -64,7 +62,6 @@ export const SliderFormField = memo((props: Props) => {
             onResetToDefault={resetToDefault}
             inputId={inputId}
             onRemove={onRemove}
-            isHidden={isHidden}
         >
             <div>
                 <div className={classes.valueWrapper}>
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/TextFormField.stories.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/TextFormField.stories.tsx
index bed177ceb..e633fb54e 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/TextFormField.stories.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/TextFormField.stories.tsx
@@ -48,7 +48,6 @@ function StoryWrapper(params: Params) {
                 }}
                 onRemove={hasOnRemove ? () => onRemoveAction() : undefined}
                 onErrorChange={onErrorChangeAction}
-                isHidden={false}
             />
             <Divider />
             <p>Value: </p>
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/TextFormField.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/TextFormField.tsx
index 32df04ff5..1a9c00cf9 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/TextFormField.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/TextFormField.tsx
@@ -21,7 +21,6 @@ type Props = {
     value: string;
     onChange: (newValue: string) => void;
     onErrorChange: (params: { hasError: boolean }) => void;
-    isHidden: boolean;
 };
 
 export const TextFormField = memo((props: Props) => {
@@ -36,8 +35,7 @@ export const TextFormField = memo((props: Props) => {
         onRemove,
         value,
         onChange,
-        onErrorChange,
-        isHidden
+        onErrorChange
     } = props;
 
     const { serializedValue, setSerializedValue, errorMessageKey, resetToDefault } =
@@ -99,7 +97,6 @@ export const TextFormField = memo((props: Props) => {
             onResetToDefault={resetToDefault}
             inputId={inputId}
             onRemove={onRemove}
-            isHidden={isHidden}
         >
             <Input
                 id={inputId}
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/YamlCodeBlockFormField.stories.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/YamlCodeBlockFormField.stories.tsx
index f10b63998..0c57015ed 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/YamlCodeBlockFormField.stories.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/YamlCodeBlockFormField.stories.tsx
@@ -46,7 +46,6 @@ function StoryWrapper() {
                 }}
                 onRemove={undefined}
                 onErrorChange={onErrorChangeAction}
-                isHidden={false}
             />
             <br />
             <br />
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/YamlCodeBlockFormField.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/YamlCodeBlockFormField.tsx
index 87743f6b4..493710ab2 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/YamlCodeBlockFormField.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/YamlCodeBlockFormField.tsx
@@ -17,7 +17,6 @@ type Props = {
     value: Record<string, Stringifyable> | Stringifyable[];
     onChange: (newValue: Record<string, Stringifyable> | Stringifyable[]) => void;
     onErrorChange: (params: { hasError: boolean }) => void;
-    isHidden: boolean;
 };
 
 const DEFAULT_HEIGHT = 300;
@@ -31,8 +30,7 @@ export const YamlCodeBlockFormField = memo((props: Props) => {
         onRemove,
         value,
         onChange,
-        onErrorChange,
-        isHidden
+        onErrorChange
     } = props;
 
     const { t } = useTranslation({ YamlCodeBlockFormField });
@@ -101,7 +99,6 @@ export const YamlCodeBlockFormField = memo((props: Props) => {
             onResetToDefault={resetToDefault}
             inputId={inputId}
             onRemove={onRemove}
-            isHidden={isHidden}
         >
             <CodeEditor
                 fallback={
diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/shared/FormFieldWrapper.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/shared/FormFieldWrapper.tsx
index aa078c8b7..50b6cde5d 100644
--- a/web/src/ui/pages/launcher/RootFormComponent/formFields/shared/FormFieldWrapper.tsx
+++ b/web/src/ui/pages/launcher/RootFormComponent/formFields/shared/FormFieldWrapper.tsx
@@ -16,7 +16,6 @@ type Props = {
     error: JSX.Element | string | undefined;
     inputId: string | undefined;
     onRemove: (() => void) | undefined;
-    isHidden: boolean;
     children: ReactNode;
 };
 
@@ -29,20 +28,18 @@ export function FormFieldWrapper(props: Props) {
         error,
         inputId,
         onRemove,
-        isHidden,
         children
     } = props;
 
-    const { cx, classes } = useStyles({
+    const { classes } = useStyles({
         isErrored: error !== undefined,
-        isResetToDefaultButtonVisible: onResetToDefault !== undefined,
-        isHidden
+        isResetToDefaultButtonVisible: onResetToDefault !== undefined
     });
 
     const { t } = useTranslation({ FormFieldWrapper });
 
     return (
-        <div className={cx(classes.root, className)}>
+        <div className={className}>
             <div className={classes.header}>
                 {onRemove !== undefined && (
                     <IconButton
@@ -96,12 +93,8 @@ const useStyles = tss
     .withParams<{
         isErrored: boolean;
         isResetToDefaultButtonVisible: boolean;
-        isHidden: boolean;
     }>()
-    .create(({ theme, isErrored, isResetToDefaultButtonVisible, isHidden }) => ({
-        root: {
-            display: isHidden ? "none" : undefined
-        },
+    .create(({ theme, isErrored, isResetToDefaultButtonVisible }) => ({
         title: {
             color: !isErrored ? undefined : theme.colors.useCases.alertSeverity.error.main
         },