chore: add interface for parameter styling

jaaydenh · jaaydenh · commit 0fca373a7ff8 · 2025-05-05T21:09:57.000Z
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -36,6 +36,12 @@ import { type FC, useId } from "react";
 import type { AutofillBuildParameter } from "utils/richParameters";
 import * as Yup from "yup";
 
+export interface ParameterStyling {
+	placeholder?: string;
+	label?: string;
+	disabled?: boolean;
+}
+
 export interface DynamicParameterProps {
 	parameter: PreviewParameter;
 	onChange: (value: string) => void;
@@ -165,6 +171,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 }) => {
 	const value = validValue(parameter.value);
 	const defaultValue = validValue(parameter.default_value);
+	const styling = parameter.styling as ParameterStyling;
 
 	switch (parameter.form_type) {
 		case "dropdown":
@@ -177,10 +184,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 				>
 					<SelectTrigger>
 						<SelectValue
-							placeholder={
-								(parameter.styling as { placeholder?: string })?.placeholder ||
-								"Select option"
-							}
+							placeholder={styling?.placeholder || "Select option"}
 						/>
 					</SelectTrigger>
 					<SelectContent>
@@ -224,10 +228,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 						onChange(JSON.stringify(values));
 					}}
 					hidePlaceholderWhenSelected
-					placeholder={
-						(parameter.styling as { placeholder?: string })?.placeholder ||
-						"Select option"
-					}
+					placeholder={styling?.placeholder || "Select option"}
 					emptyIndicator={
 						<p className="text-center text-md text-content-primary">
 							No results found
@@ -288,9 +289,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 						}}
 						disabled={disabled}
 					/>
-					<Label htmlFor={parameter.name}>
-						{(parameter.styling as { label?: string })?.label}
-					</Label>
+					<Label htmlFor={parameter.name}>{styling?.label}</Label>
 				</div>
 			);
 
@@ -327,9 +326,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 						target.style.height = `${target.scrollHeight}px`;
 					}}
 					disabled={disabled}
-					placeholder={
-						(parameter.styling as { placeholder?: string })?.placeholder
-					}
+					placeholder={styling?.placeholder}
 					required={parameter.required}
 				/>
 			);
@@ -358,9 +355,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 					onChange={(e) => onChange(e.target.value)}
 					disabled={disabled}
 					required={parameter.required}
-					placeholder={
-						(parameter.styling as { placeholder?: string })?.placeholder
-					}
+					placeholder={styling?.placeholder}
 					{...inputProps}
 				/>
 			);
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -18,6 +18,7 @@ import { useDebouncedFunction } from "hooks/debounce";
 import { ArrowLeft, CircleAlert, TriangleAlert } from "lucide-react";
 import {
 	DynamicParameter,
+	type ParameterStyling,
 	getInitialParameterValues,
 	useValidationSchemaForDynamicParameters,
 } from "modules/workspaces/DynamicParameter/DynamicParameter";
@@ -470,6 +471,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 
 							<div className="flex flex-col gap-9">
 								{parameters.map((parameter, index) => {
+									const styling = parameter.styling as ParameterStyling;
 									const parameterField = `rich_parameter_values.${index}`;
 									const parameterInputName = `${parameterField}.value`;
 									const isPresetParameter = presetParameterNames.includes(
@@ -479,7 +481,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 										disabledParams?.includes(
 											parameter.name.toLowerCase().replace(/ /g, "_"),
 										) ||
-										(parameter.styling as { disabled?: boolean })?.disabled ||
+										styling?.disabled ||
 										creatingWorkspace ||
 										isPresetParameter;
 

No results found