From 612b6d4e95ac4eb1c4227dfd5979a04c2de6e600 Mon Sep 17 00:00:00 2001
From: Andrew Aquino <dawneraq@gmail.com>
Date: Wed, 24 Jun 2026 14:00:28 -0700
Subject: [PATCH] refactor(site): make optionalFields a prop of
 ModuleConfiguration instead of children (#26681)

ref: DEVEX-532

During #26627, I think we should've given `ModuleConfiguration` an
`optionalFields` prop in the first place--our one and only usage of
`ModuleConfiguration` doesn't render optional fields in a way that makes
sense as children. Also, `ModuleConfiguration` should be the component
responsible for rendering the collapsible section, not
`ModuleSettingsStep`

This makes Storybook more accurately represent what module config looks
like, since ModuleConfiguration.stories.tsx now shows the optional field
in a collapsible section:

<img width="1840" height="1191" alt="image"
src="https://github.com/user-attachments/assets/2b385ea7-a060-409a-8e84-aa37f0b09c2c"
/>
---
 .../ModuleConfiguration.stories.tsx           | 22 ++++++++++---------
 .../TemplateBuilder/ModuleConfiguration.tsx   | 17 +++++++++-----
 .../TemplateBuilder/ModuleSettingsStep.tsx    | 17 +++-----------
 3 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/site/src/pages/TemplateBuilder/ModuleConfiguration.stories.tsx b/site/src/pages/TemplateBuilder/ModuleConfiguration.stories.tsx
index a86b50d251..78b77f9a86 100644
--- a/site/src/pages/TemplateBuilder/ModuleConfiguration.stories.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleConfiguration.stories.tsx
@@ -38,16 +38,6 @@ export const Default: Story = {
 				placeholder: "Enter API key",
 				field: stubField("anthropic-api-key"),
 			},
-			{
-				type: "select",
-				id: "one-more-example",
-				label: "One more example",
-				options: [
-					{ value: "a", label: "Option A" },
-					{ value: "b", label: "Option B" },
-					{ value: "c", label: "Option C" },
-				],
-			},
 			{
 				type: "radio",
 				id: "other-example",
@@ -71,6 +61,18 @@ export const Default: Story = {
 				],
 			},
 		],
+		optionalFields: [
+			{
+				type: "select",
+				id: "one-more-example",
+				label: "One more example",
+				options: [
+					{ value: "a", label: "Option A" },
+					{ value: "b", label: "Option B" },
+					{ value: "c", label: "Option C" },
+				],
+			},
+		],
 	},
 };
 
diff --git a/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx b/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
index 38443b5bf3..6348a5731a 100644
--- a/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
@@ -1,20 +1,21 @@
 import { TrashIcon } from "lucide-react";
-import type { PropsWithChildren } from "react";
 import { Button } from "#/components/Button/Button";
+import { CollapsibleSummary } from "#/components/CollapsibleSummary/CollapsibleSummary";
 import { Link } from "#/components/Link/Link";
 import {
 	ConfigurationField,
 	type ConfigurationFieldDefinition,
 } from "./ConfigurationField";
 
-type ModuleConfigurationProps = PropsWithChildren<{
+type ModuleConfigurationProps = {
 	name: string;
 	description: string;
 	iconUrl?: string;
 	detailsUrl?: string;
 	onRemove?: () => void;
 	fields?: ConfigurationFieldDefinition[];
-}>;
+	optionalFields?: ConfigurationFieldDefinition[];
+};
 
 export const ModuleConfiguration: React.FC<ModuleConfigurationProps> = ({
 	name,
@@ -23,7 +24,7 @@ export const ModuleConfiguration: React.FC<ModuleConfigurationProps> = ({
 	detailsUrl,
 	onRemove,
 	fields,
-	children,
+	optionalFields,
 }) => {
 	return (
 		<section className="pt-4 px-4 pb-6 rounded bg-surface-secondary">
@@ -79,7 +80,13 @@ export const ModuleConfiguration: React.FC<ModuleConfigurationProps> = ({
 				</div>
 			)}
 
-			{children}
+			{optionalFields && optionalFields.length > 0 && (
+				<CollapsibleSummary label="Advanced settings" className="mt-4">
+					{optionalFields.map((f) => (
+						<ConfigurationField key={f.id} field={f} />
+					))}
+				</CollapsibleSummary>
+			)}
 		</section>
 	);
 };
diff --git a/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx b/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
index acfa21ea81..d53b9777cb 100644
--- a/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
@@ -7,9 +7,7 @@ import type {
 	TemplateBuilderModulesResponse,
 	TemplateBuilderModuleVariable,
 } from "#/api/typesGenerated";
-import { CollapsibleSummary } from "#/components/CollapsibleSummary/CollapsibleSummary";
 import type { ConfigurationFieldDefinition } from "./ConfigurationField";
-import { ConfigurationField } from "./ConfigurationField";
 import { ModuleConfiguration } from "./ModuleConfiguration";
 
 interface ModuleSettingsStepProps {
@@ -143,18 +141,9 @@ export const ModuleSettingsStep: FC<ModuleSettingsStepProps> = ({
 								iconUrl={mod.icon}
 								detailsUrl={moduleDetailsUrl(mod.id)}
 								fields={requiredFields}
-							>
-								{optionalFields.length > 0 && (
-									<CollapsibleSummary
-										label="Advanced settings"
-										className="mt-4"
-									>
-										{optionalFields.map((f) => (
-											<ConfigurationField key={f.id} field={f} />
-										))}
-									</CollapsibleSummary>
-								)}
-							</ModuleConfiguration>
+								optionalFields={optionalFields}
+							/>
+
 							{sensitiveVars.length > 0 && (
 								<div className="flex items-center gap-2 mt-2 p-3 rounded-md text-sm text-content-secondary">
 									<InfoIcon className="size-icon-sm shrink-0 mt-0.5" />