Skip to content

refactor(site): improve parameters field #11802

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 5 commits into from
Jan 26, 2024
Merged

refactor(site): improve parameters field #11802

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e97824a
refactor(site): improve parameters fields
BrunoQuaresma Jan 24, 2024
49fab93
Fix error validation
BrunoQuaresma Jan 24, 2024
ae1890d
Use pill instead of text
BrunoQuaresma Jan 26, 2024
0a5e6b7
Fix when showing parameters
BrunoQuaresma Jan 26, 2024
6c2b035
Remove immutable parameters section from workspace parameters form
BrunoQuaresma Jan 26, 2024
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 error validation
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Jan 24, 2024
commit 49fab9309ae127d74edf41fc91c832af9d8c205c
13 changes: 12 additions & 1 deletion site/src/components/RichParameterInput/RichParameterInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const createTemplateVersionParameter = (
name: "first_parameter",
description: "This is first parameter.",
type: "string",
mutable: false,
mutable: true,
default_value: "default string",
icon: "/icon/folder.svg",
options: [],
Expand Down Expand Up @@ -73,6 +73,17 @@ export const Immutable: Story = {
},
};

export const WithError: Story = {
args: {
id: "number_parameter",
parameter: createTemplateVersionParameter({
name: "number_parameter",
type: "number",
description: "Numeric parameter",
}),
},
};

export const NumberType: Story = {
args: {
value: "4",
Expand Down
10 changes: 4 additions & 6 deletions site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,20 +228,18 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
*/}
<div css={{ display: "flex", flexDirection: "column", gap: 36 }}>
{parameters.map((parameter, index) => {
Copy link
Member

Choose a reason for hiding this comment

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

NIT: I might lift this function outside of the JSX.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Which function? The map?

Copy link
Member

Choose a reason for hiding this comment

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

the callback that the map takes

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I think it is quite normal in react codebases but any specific concern?

Copy link
Member

Choose a reason for hiding this comment

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

I feel like it lowers general readability because its a longer callback that defines multiple variables, but no strong concerns!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I see! But in this case, we would have to pass 3+ arguments to the function so I'm not sure if extracting it to a new function or component would improve that much but I can understand the reasoning.

Copy link
Member

Choose a reason for hiding this comment

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

good point, good point

const parameterFieldName = `rich_parameter_values.${index}`;
const parameterField = `rich_parameter_values.${index}`;
const parameterInputName = `${parameterField}.value`;
const isDisabled =
disabledParamsList?.includes(
parameter.name.toLowerCase().replace(/ /g, "_"),
) || creatingWorkspace;
const parameterValue =
form.values.rich_parameter_values?.[index];

return (
<RichParameterInput
{...getFieldHelpers(parameterFieldName)}
value={parameterValue?.value}
{...getFieldHelpers(parameterInputName)}
onChange={async (value) => {
await form.setFieldValue(parameterFieldName, {
await form.setFieldValue(parameterField, {
name: parameter.name,
value,
});
Expand Down