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 2 commits
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
39 changes: 38 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 @@ -47,6 +47,43 @@ export const Basic: Story = {
},
};

export const Optional: Story = {
args: {
value: "initial-value",
id: "project_name",
parameter: createTemplateVersionParameter({
required: false,
name: "project_name",
description:
"Customize the name of a Google Cloud project that will be created!",
}),
},
};

export const Immutable: Story = {
args: {
value: "initial-value",
id: "project_name",
parameter: createTemplateVersionParameter({
mutable: false,
name: "project_name",
description:
"Customize the name of a Google Cloud project that will be created!",
}),
},
};

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
37 changes: 34 additions & 3 deletions site/src/components/RichParameterInput/RichParameterInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,11 @@ const styles = {
labelPrimary: (theme) => ({
fontSize: 16,
color: theme.palette.text.primary,
fontWeight: 600,
fontWeight: 500,
display: "flex",
alignItems: "center",
flexWrap: "wrap",
gap: 8,

"& p": {
margin: 0,
Expand All @@ -42,6 +46,16 @@ const styles = {
fontSize: 14,
},
}),
immutableLabel: (theme) => ({
fontSize: 14,
color: theme.experimental.roles.warning.fill,
fontWeight: 500,
}),
optionalLabel: (theme) => ({
fontSize: 14,
color: theme.palette.text.disabled,
fontWeight: 500,
}),
textField: {
".small & .MuiInputBase-root": {
height: 36,
Expand Down Expand Up @@ -102,6 +116,23 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter }) => {
? parameter.display_name
: parameter.name;

const labelPrimary = (
<span css={styles.labelPrimary}>
{displayName}

{!parameter.required && (
<Tooltip title="If no value is specified, the system will default to the value set by the administrator.">
<span css={styles.optionalLabel}>(optional)</span>
</Tooltip>
)}
{!parameter.mutable && (
<Tooltip title="This value cannot be modified after the workspace has been created.">
<span css={styles.immutableLabel}>Immutable*</span>
</Tooltip>
)}
</span>
);

return (
<label htmlFor={parameter.name}>
<Stack direction="row" alignItems="center">
Expand All @@ -117,13 +148,13 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter }) => {

{hasDescription ? (
<Stack spacing={0}>
<span css={styles.labelPrimary}>{displayName}</span>
{labelPrimary}
<MemoizedMarkdown css={styles.labelCaption}>
{parameter.description}
</MemoizedMarkdown>
</Stack>
) : (
<span css={styles.labelPrimary}>{displayName}</span>
labelPrimary
)}
</Stack>
</label>
Expand Down
45 changes: 5 additions & 40 deletions site/src/components/TemplateParameters/TemplateParameters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,11 @@ export type TemplateParametersSectionProps = {
) => Omit<RichParameterInputProps, "parameter" | "index">;
} & Pick<ComponentProps<typeof FormSection>, "classes">;

export const MutableTemplateParametersSection: FC<
TemplateParametersSectionProps
> = ({ templateParameters, getInputProps, ...formSectionProps }) => {
export const TemplateParametersSection: FC<TemplateParametersSectionProps> = ({
templateParameters,
getInputProps,
...formSectionProps
}) => {
const hasMutableParameters =
templateParameters.filter((p) => p.mutable).length > 0;

Expand Down Expand Up @@ -45,40 +47,3 @@ export const MutableTemplateParametersSection: FC<
</>
);
};

export const ImmutableTemplateParametersSection: FC<
TemplateParametersSectionProps
> = ({ templateParameters, getInputProps, ...formSectionProps }) => {
const hasImmutableParameters =
templateParameters.filter((p) => !p.mutable).length > 0;

return (
<>
{hasImmutableParameters && (
<FormSection
{...formSectionProps}
title="Immutable parameters"
description={
<>
These settings <strong>cannot be changed</strong> after creating
the workspace.
</>
}
>
<FormFields>
{templateParameters.map(
(parameter, index) =>
!parameter.mutable && (
<RichParameterInput
{...getInputProps(parameter, index)}
key={parameter.name}
parameter={parameter}
/>
),
)}
</FormFields>
</FormSection>
)}
</>
);
};
99 changes: 35 additions & 64 deletions site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { css } from "@emotion/css";
import { useTheme, type Interpolation, type Theme } from "@emotion/react";
import { type Interpolation, type Theme } from "@emotion/react";
import TextField from "@mui/material/TextField";
import type * as TypesGen from "api/typesGenerated";
import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
Expand All @@ -21,10 +20,6 @@ import {
getInitialRichParameterValues,
useValidationSchemaForRichParameters,
} from "utils/richParameters";
import {
ImmutableTemplateParametersSection,
MutableTemplateParametersSection,
} from "components/TemplateParameters/TemplateParameters";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { Stack } from "components/Stack/Stack";
import {
Expand All @@ -44,6 +39,7 @@ import {
PageHeaderSubtitle,
} from "components/PageHeader/PageHeader";
import { Pill } from "components/Pill/Pill";
import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";

export const Language = {
duplicationWarning:
Expand Down Expand Up @@ -90,7 +86,6 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
onSubmit,
onCancel,
}) => {
const theme = useTheme();
const [owner, setOwner] = useState(defaultOwner);
const [searchParams] = useSearchParams();
const disabledParamsList = searchParams?.get("disable_params")?.split(",");
Expand Down Expand Up @@ -223,64 +218,40 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
</FormSection>

{parameters && (
<>
<MutableTemplateParametersSection
templateParameters={parameters}
getInputProps={(parameter, index) => {
return {
...getFieldHelpers(
"rich_parameter_values[" + index + "].value",
),
onChange: async (value) => {
await form.setFieldValue(
"rich_parameter_values." + index,
{
name: parameter.name,
value: value,
},
);
},
disabled:
disabledParamsList?.includes(
parameter.name.toLowerCase().replace(/ /g, "_"),
) || creatingWorkspace,
};
}}
/>
<ImmutableTemplateParametersSection
templateParameters={parameters}
classes={{
root: css`
border: 1px solid ${theme.palette.warning.light};
border-radius: 8px;
background-color: ${theme.palette.background.paper};
padding: 80px;
margin-left: -80px;
margin-right: -80px;
`,
}}
getInputProps={(parameter, index) => {
return {
...getFieldHelpers(
"rich_parameter_values[" + index + "].value",
),
onChange: async (value) => {
await form.setFieldValue(
"rich_parameter_values." + index,
{
<FormSection
title="Parameters"
description="These are the settings used by your template. Please note that immutable parameters cannot be modified once the workspace is created."
>
{/*
Opted not to use FormFields in order to increase spacing.
This decision was made because rich parameter inputs are more visually dense than standard text fields.
*/}
<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 parameterField = `rich_parameter_values.${index}`;
const parameterInputName = `${parameterField}.value`;
const isDisabled =
disabledParamsList?.includes(
parameter.name.toLowerCase().replace(/ /g, "_"),
) || creatingWorkspace;

return (
<RichParameterInput
{...getFieldHelpers(parameterInputName)}
onChange={async (value) => {
await form.setFieldValue(parameterField, {
name: parameter.name,
value: value,
},
);
},
disabled:
disabledParamsList?.includes(
parameter.name.toLowerCase().replace(/ /g, "_"),
) || creatingWorkspace,
};
}}
/>
</>
value,
});
}}
key={parameter.name}
parameter={parameter}
disabled={isDisabled}
/>
);
})}
</div>
</FormSection>
)}

<FormFooter
Expand Down
54 changes: 23 additions & 31 deletions site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,13 @@ import { Template, TemplateVersionParameter } from "api/typesGenerated";
import { FormSection, VerticalForm } from "components/Form/Form";
import { Loader } from "components/Loader/Loader";
import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
import {
ImmutableTemplateParametersSection,
MutableTemplateParametersSection,
TemplateParametersSectionProps,
} from "components/TemplateParameters/TemplateParameters";
import { useClipboard } from "hooks/useClipboard";
import { type FC, useEffect, useState } from "react";
import { Helmet } from "react-helmet-async";
import { pageTitle } from "utils/page";
import { getInitialRichParameterValues } from "utils/richParameters";
import { paramsUsedToCreateWorkspace } from "utils/workspace";
import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";

type ButtonValues = Record<string, string>;

Expand Down Expand Up @@ -64,22 +60,6 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
const buttonUrl = `${createWorkspaceUrl}?${createWorkspaceParams.toString()}`;
const buttonMkdCode = `[![Open in Coder](${deploymentUrl}/open-in-coder.svg)](${buttonUrl})`;
const clipboard = useClipboard(buttonMkdCode);
const getInputProps: TemplateParametersSectionProps["getInputProps"] = (
parameter,
) => {
if (!buttonValues) {
throw new Error("buttonValues is undefined");
}
return {
value: buttonValues[`param.${parameter.name}`] ?? "",
onChange: (value) => {
setButtonValues((buttonValues) => ({
...buttonValues,
[`param.${parameter.name}`]: value,
}));
},
};
};

// template parameters is async so we need to initialize the values after it
// is loaded
Expand Down Expand Up @@ -135,16 +115,28 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
</FormSection>

{templateParameters.length > 0 && (
<>
<MutableTemplateParametersSection
templateParameters={templateParameters}
getInputProps={getInputProps}
/>
<ImmutableTemplateParametersSection
templateParameters={templateParameters}
getInputProps={getInputProps}
/>
</>
<div
css={{ display: "flex", flexDirection: "column", gap: 36 }}
>
{templateParameters.map((parameter) => {
const parameterValue =
buttonValues[`param.${parameter.name}`] ?? "";

return (
<RichParameterInput
value={parameterValue}
onChange={async (value) => {
setButtonValues((buttonValues) => ({
...buttonValues,
[`param.${parameter.name}`]: value,
}));
}}
key={parameter.name}
parameter={parameter}
/>
);
})}
</div>
)}
</VerticalForm>
</div>
Expand Down