Skip to content

feat: setup url autofill for dynamic parameters #17739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
May 16, 2025
Merged

feat: setup url autofill for dynamic parameters #17739

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4209d7d
feat: setup autofill for dynamic parameters
jaaydenh May 7, 2025
1d798ea
chore: cleanup
jaaydenh May 8, 2025
9d10195
feat: set initial param values from autofill
jaaydenh May 9, 2025
ec35a7f
fix: setup ParameterLabel to use htmlfor
jaaydenh May 12, 2025
04c7f83
chore: change autofill to boolean
jaaydenh May 12, 2025
03dde8a
chore: updates for PR review comments
jaaydenh May 12, 2025
afdab85
chore: move logic for sending initial parameters to websocket
jaaydenh May 12, 2025
a76159f
fix: improvements to dynamic parameter handling
jaaydenh May 13, 2025
6711e28
fix: updates for PR review
jaaydenh May 15, 2025
7dc96bb
fix: update logic for onMessage
jaaydenh May 15, 2025
eb413fb
fix: format
jaaydenh May 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: setup ParameterLabel to use htmlfor
  • Loading branch information
@jaaydenh
jaaydenh committed May 15, 2025
commit ec35a7f4bd47383b88cea03000c90c7ec1c62d4f
1 change: 1 addition & 0 deletions site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -514,6 +514,7 @@ export const MultiSelectCombobox = forwardRef<
})}
{/* Avoid having the "Search" Icon */}
<CommandPrimitive.Input
id={inputProps?.id}
{...inputProps}
ref={inputRef}
value={inputValue}
Expand Down
5 changes: 3 additions & 2 deletions site/src/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,11 @@ export const SelectValue = SelectPrimitive.Value;

export const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { id?: string }
>(({ className, children, id, ...props }, ref) => (
<SelectPrimitive.Trigger
ref={ref}
id={id}
className={cn(
`flex h-10 w-full font-medium items-center justify-between whitespace-nowrap rounded-md
border border-border border-solid bg-transparent px-3 py-2 text-sm shadow-sm
Expand Down
39 changes: 23 additions & 16 deletions site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
data-testid={`parameter-field-${parameter.name}`}
>
<ParameterLabel
id={id}
parameter={parameter}
isPreset={isPreset}
autofill={autofill}
Expand All @@ -86,12 +87,14 @@ interface ParameterLabelProps {
parameter: PreviewParameter;
isPreset?: boolean;
autofill?: AutofillBuildParameter;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this is only being used for a truthy check to influence the conditional rendering, can we replace this with an autofill boolean?

id: string;
}

const ParameterLabel: FC<ParameterLabelProps> = ({
parameter,
isPreset,
autofill,
id,
}) => {
const hasDescription = parameter.description && parameter.description !== "";
const displayName = parameter.display_name
Expand All @@ -109,7 +112,10 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
)}

<div className="flex flex-col w-full gap-1">
<Label className="flex gap-2 flex-wrap text-sm font-medium">
<Label
htmlFor={id}
className="flex gap-2 flex-wrap text-sm font-medium"
>
<span className="flex">
{displayName}
{parameter.required && (
Expand Down Expand Up @@ -197,15 +203,12 @@ const ParameterField: FC<ParameterFieldProps> = ({
disabled,
id,
}) => {
const initialValue =
value !== undefined ? value : validValue(parameter.value);
const [localValue, setLocalValue] = useState(initialValue);

useEffect(() => {
if (value !== undefined) {
setLocalValue(value);
}
}, [value]);
const [localValue, setLocalValue] = useState(
value !== undefined ? value : validValue(parameter.value)
);
if (value !== undefined && value !== localValue) {
setLocalValue(value);
}

switch (parameter.form_type) {
case "dropdown":
Expand All @@ -216,7 +219,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
disabled={disabled}
required={parameter.required}
>
<SelectTrigger>
<SelectTrigger id={id}>
<SelectValue
placeholder={parameter.styling?.placeholder || "Select option"}
/>
Expand Down Expand Up @@ -256,7 +259,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
return (
<MultiSelectCombobox
inputProps={{
id: `${id}-${parameter.name}`,
id: id,
}}
options={options}
defaultOptions={selectedOptions}
Expand All @@ -281,7 +284,7 @@ const ParameterField: FC<ParameterFieldProps> = ({

return (
<TagInput
id={parameter.name}
id={id}
label={parameter.display_name || parameter.name}
values={values}
onChange={(values) => {
Expand All @@ -294,6 +297,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
case "switch":
return (
<Switch
id={id}
checked={value === "true"}
onCheckedChange={(checked) => {
onChange(checked ? "true" : "false");
Expand Down Expand Up @@ -329,23 +333,24 @@ const ParameterField: FC<ParameterFieldProps> = ({
return (
<div className="flex items-center space-x-2">
<Checkbox
id={parameter.name}
id={id}
checked={value === "true"}
onCheckedChange={(checked) => {
onChange(checked ? "true" : "false");
}}
disabled={disabled}
/>
<Label htmlFor={parameter.name}>{parameter.styling?.label}</Label>
<Label htmlFor={id}>{parameter.styling?.label}</Label>
</div>
);

case "slider":
return (
<div className="flex flex-row items-baseline gap-3">
<Slider
id={id}
className="mt-2"
value={[Number(localValue ?? 0)]}
value={[Number(localValue)]}
onValueChange={([value]) => {
setLocalValue(value.toString());
onChange(value.toString());
Expand All @@ -361,6 +366,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
case "textarea":
return (
<Textarea
id={id}
className="max-w-2xl"
value={localValue}
onChange={(e) => {
Expand Down Expand Up @@ -397,6 +403,7 @@ const ParameterField: FC<ParameterFieldProps> = ({

return (
<Input
id={id}
type={inputType}
value={localValue}
onChange={(e) => {
Expand Down