Skip to content

feat: setup connection to dynamic parameters websocket #17393

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 20 commits into from
Apr 16, 2025
Merged

feat: setup connection to dynamic parameters websocket #17393

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
7b61485
feat: create dynamic parameter component
jaaydenh Apr 10, 2025
f5d4a1c
fix: format
jaaydenh Apr 11, 2025
0fc4289
chore: cleanup, update validation
jaaydenh Apr 11, 2025
d109874
chore: update for types from typesGenerated
jaaydenh Apr 11, 2025
7c13eb7
fix: remove filters
jaaydenh Apr 11, 2025
4290284
chore: remove unused typesParameter.ts
jaaydenh Apr 11, 2025
74084fb
fix: updates for PR review
jaaydenh Apr 15, 2025
05adc15
fix: format
jaaydenh Apr 15, 2025
b2c662a
fix: remove websocket code
jaaydenh Apr 15, 2025
2da7d99
feat: connect to dynamic parameters websocket
jaaydenh Apr 14, 2025
98dfee2
chore: cleanup
jaaydenh Apr 14, 2025
d1ada89
fix: set initial values
jaaydenh Apr 14, 2025
e04ce2f
fix: fix commit
jaaydenh Apr 16, 2025
a6f480d
fix: fix rebase issues
jaaydenh Apr 16, 2025
2613100
chore: update valid value methods
jaaydenh Apr 16, 2025
1e66a71
chore: onError is required
jaaydenh Apr 16, 2025
9a9201e
chore: display websocket error in UI
jaaydenh Apr 16, 2025
1777ca9
fix: format
jaaydenh Apr 16, 2025
440fedc
fix: updates for PR review
jaaydenh Apr 16, 2025
4f056af
chore: add useCallback
jaaydenh Apr 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
chore: update for types from typesGenerated
  • Loading branch information
@jaaydenh
jaaydenh committed Apr 16, 2025
commit d109874195c9d44396e02dbde27911e6beef6675
129 changes: 75 additions & 54 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 @@ -173,26 +173,35 @@ const ParameterField: FC<ParameterFieldProps> = ({
<SelectValue placeholder="Select option" />
</SelectTrigger>
<SelectContent>
{parameter.options.map((option) => (
<SelectItem key={option.value.value} value={option.value.value}>
<OptionDisplay option={option} />
</SelectItem>
))}
{parameter.options
.filter(
(option): option is NonNullable<typeof option> =>
option !== null,
)
.map((option) => (
<SelectItem key={option.value.value} value={option.value.value}>
<OptionDisplay option={option} />
</SelectItem>
))}
</SelectContent>
</Select>
);

case "multi-select": {
// Map parameter options to MultiSelectCombobox options format
const comboboxOptions: Option[] = parameter.options.map((opt) => ({
value: opt.value.value,
label: opt.name,
disable: false,
}));
const comboboxOptions: Option[] = parameter.options
.filter((opt): opt is NonNullable<typeof opt> => opt !== null)
.map((opt) => ({
value: opt.value.value,
label: opt.name,
disable: false,
}));

const defaultOptions: Option[] = JSON.parse(defaultValue).map(
(val: string) => {
const option = parameter.options.find((o) => o.value.value === val);
const option = parameter.options
.filter((o): o is NonNullable<typeof o> => o !== null)
.find((o) => o.value.value === val);
return {
value: val,
label: option?.name || val,
Expand Down Expand Up @@ -242,20 +251,24 @@ const ParameterField: FC<ParameterFieldProps> = ({
disabled={disabled}
defaultValue={defaultValue}
>
{parameter.options.map((option) => (
<div
key={option.value.value}
className="flex items-center space-x-2"
>
<RadioGroupItem
id={option.value.value}
value={option.value.value}
/>
<Label htmlFor={option.value.value} className="cursor-pointer">
<OptionDisplay option={option} />
</Label>
</div>
))}
{parameter.options
.filter(
(option): option is NonNullable<typeof option> => option !== null,
)
.map((option) => (
<div
key={option.value.value}
className="flex items-center space-x-2"
>
<RadioGroupItem
id={option.value.value}
value={option.value.value}
/>
<Label htmlFor={option.value.value} className="cursor-pointer">
<OptionDisplay option={option} />
</Label>
</div>
))}
</RadioGroup>
);

Expand All @@ -281,7 +294,10 @@ const ParameterField: FC<ParameterFieldProps> = ({
const inputProps: Record<string, unknown> = {};

if (parameter.type === "number") {
const validations = parameter.validations[0] || {};
const validations =
parameter.validations.filter(
(v): v is NonNullable<typeof v> => v !== null,
)[0] || {};
const { validation_min, validation_max } = validations;

if (validation_min !== null) {
Expand Down Expand Up @@ -349,19 +365,24 @@ const ParameterDiagnostics: FC<ParameterDiagnosticsProps> = ({
}) => {
return (
<div className="flex flex-col gap-2">
{diagnostics.map((diagnostic, index) => (
<div
key={`diagnostic-${diagnostic.summary}-${index}`}
className={`text-xs px-1 ${
diagnostic.severity === "error"
? "text-content-destructive"
: "text-content-warning"
}`}
>
<div className="font-medium">{diagnostic.summary}</div>
{diagnostic.detail && <div>{diagnostic.detail}</div>}
</div>
))}
{diagnostics
.filter(
(diagnostic): diagnostic is NonNullable<typeof diagnostic> =>
diagnostic !== null,
)
.map((diagnostic, index) => (
<div
key={`diagnostic-${diagnostic.summary}-${index}`}
className={`text-xs px-1 ${
diagnostic.severity === "error"
? "text-content-destructive"
: "text-content-warning"
}`}
>
<div className="font-medium">{diagnostic.summary}</div>
{diagnostic.detail && <div>{diagnostic.detail}</div>}
</div>
))}
</div>
);
};
Expand Down Expand Up @@ -433,12 +454,12 @@ export const useValidationSchemaForDynamicParameters = (
if (parameter) {
switch (parameter.type) {
case "number": {
const minValidation = parameter.validations.find(
(v) => v.validation_min !== null,
);
const maxValidation = parameter.validations.find(
(v) => v.validation_max !== null,
);
const minValidation = parameter.validations
.filter((v): v is NonNullable<typeof v> => v !== null)
.find((v) => v.validation_min !== null);
const maxValidation = parameter.validations
.filter((v): v is NonNullable<typeof v> => v !== null)
.find((v) => v.validation_max !== null);

if (
minValidation &&
Expand Down Expand Up @@ -547,15 +568,15 @@ const parameterError = (
parameter: PreviewParameter,
value?: string,
): string | undefined => {
const validation_error = parameter.validations.find(
(v) => v.validation_error !== null,
);
const minValidation = parameter.validations.find(
(v) => v.validation_min !== null,
);
const maxValidation = parameter.validations.find(
(v) => v.validation_max !== null,
);
const validation_error = parameter.validations
.filter((v): v is NonNullable<typeof v> => v !== null)
.find((v) => v.validation_error !== null);
const minValidation = parameter.validations
.filter((v): v is NonNullable<typeof v> => v !== null)
.find((v) => v.validation_min !== null);
const maxValidation = parameter.validations
.filter((v): v is NonNullable<typeof v> => v !== null)
.find((v) => v.validation_max !== null);

if (!validation_error || !value) {
return;
Expand Down
38 changes: 0 additions & 38 deletions site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,44 +72,6 @@ export interface CreateWorkspacePageViewExperimentalProps {
startPollingExternalAuth: () => void;
}

// const getInitialParameterValues1 = (
// params: Parameter[],
// autofillParams?: AutofillBuildParameter[],
// ): WorkspaceBuildParameter[] => {
// return params.map((parameter) => {
// // Short-circuit for ephemeral parameters, which are always reset to
// // the template-defined default.
// if (parameter.ephemeral) {
// return {
// name: parameter.name,
// value: parameter.default_value,
// };
// }

// const autofillParam = autofillParams?.find(
// ({ name }) => name === parameter.name,
// );

// return {
// name: parameter.name,
// value:
// autofillParam &&
// isValidValue(parameter, autofillParam) &&
// autofillParam.source !== "user_history"
// ? autofillParam.value
// : parameter.default_value,
// };
// });
// };

const getInitialParameterValues = (parameters: Parameter[]) => {
return parameters.map((parameter) => {
return {
name: parameter.name,
value: parameter.default_value.valid ? parameter.default_value.value : "",
};
});
};
export const CreateWorkspacePageViewExperimental: FC<
CreateWorkspacePageViewExperimentalProps
> = ({
Expand Down