feat(site/src/pages/TemplateBuilder): put optional module variables in collapsible section (#26627)

site/src/pages/TemplateBuilder/ModuleConfiguration.tsx

@@ -1,4 +1,5 @@
 import { TrashIcon } from "lucide-react";
+import type { PropsWithChildren } from "react";
 import { Button } from "#/components/Button/Button";
 import { Link } from "#/components/Link/Link";
 import {
@@ -6,14 +7,14 @@ import {
 	type ConfigurationFieldDefinition,
 } from "./ConfigurationField";
 
-type ModuleConfigurationProps = {
+type ModuleConfigurationProps = PropsWithChildren<{
 	name: string;
 	description: string;
 	iconUrl?: string;
 	detailsUrl?: string;
 	onRemove?: () => void;
 	fields?: ConfigurationFieldDefinition[];
-};
+}>;
 
 export const ModuleConfiguration: React.FC<ModuleConfigurationProps> = ({
 	name,
@@ -22,6 +23,7 @@ export const ModuleConfiguration: React.FC<ModuleConfigurationProps> = ({
 	detailsUrl,
 	onRemove,
 	fields,
+	children,
 }) => {
 	return (
 		<section className="pt-4 px-4 pb-6 rounded bg-surface-secondary">
@@ -77,6 +79,8 @@ export const ModuleConfiguration: React.FC<ModuleConfigurationProps> = ({
 					))}
 				</div>
 			)}
+
+			{children}
 		</section>
 	);
 };

site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx

@@ -7,7 +7,9 @@ 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 {
@@ -122,12 +124,16 @@ export const ModuleSettingsStep: FC<ModuleSettingsStepProps> = ({
 					const sensitiveVars = mod.variables.filter((v) => v.sensitive);
 					const vars = moduleVariables[mod.id] ?? {};
 
-					const fields: ConfigurationFieldDefinition[] = configurableVars.map(
-						(v) =>
-							variableToField(mod.id, v, vars[v.name] ?? "", (name, val) =>
-								handleChange(mod.id, name, val),
-							),
-					);
+					const toField = (v: TemplateBuilderModuleVariable) =>
+						variableToField(mod.id, v, vars[v.name] ?? "", (name, val) =>
+							handleChange(mod.id, name, val),
+						);
+
+					const requiredVars = configurableVars.filter((v) => v.required);
+					const optionalVars = configurableVars.filter((v) => !v.required);
+
+					const requiredFields = requiredVars.map(toField);
+					const optionalFields = optionalVars.map(toField);
 
 					return (
 						<div key={mod.id}>
@@ -136,8 +142,19 @@ export const ModuleSettingsStep: FC<ModuleSettingsStepProps> = ({
 								description={mod.description}
 								iconUrl={mod.icon}
 								detailsUrl={moduleDetailsUrl(mod.id)}
-								fields={fields}
-							/>
+								fields={requiredFields}
+							>
+								{optionalFields.length > 0 && (
+									<CollapsibleSummary
+										label="Advanced settings"
+										className="mt-4"
+									>
+										{optionalFields.map((f) => (
+											<ConfigurationField key={f.id} field={f} />
+										))}
+									</CollapsibleSummary>
+								)}
+							</ModuleConfiguration>
 							{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" />