Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat: Group immutable and mutable rich parameters #5975

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 1 commit into from
Feb 2, 2023
Merged

feat: Group immutable and mutable rich parameters #5975

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
17 changes: 16 additions & 1 deletion site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useMachine } from "@xstate/react"
import { TemplateVersionParameter } from "api/typesGenerated"
import { useMe } from "hooks/useMe"
import { useOrganizationId } from "hooks/useOrganizationId"
import { FC } from "react"
Expand Down Expand Up @@ -58,7 +59,7 @@ const CreateWorkspacePage: FC = () => {
templateName={templateName}
templates={templates}
selectedTemplate={selectedTemplate}
templateParameters={templateParameters}
templateParameters={orderedTemplateParameters(templateParameters)}
templateSchema={templateSchema}
createWorkspaceErrors={{
[CreateWorkspaceErrors.GET_TEMPLATES_ERROR]: getTemplatesError,
Expand Down Expand Up @@ -104,4 +105,18 @@ const getDefaultParameterValues = (
return paramValues
}

export const orderedTemplateParameters = (
Copy link
Collaborator

Choose a reason for hiding this comment

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

Is it used in more than one place? If not, I think we can remove the export or move this function to live in the file where it is used.

Copy link
Member Author

Choose a reason for hiding this comment

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

It is used in 2 places as it's also in WorkspaceBuildParametersPage, so I will keep it as is, but thanks for raising this!

templateParameters?: TemplateVersionParameter[],
): TemplateVersionParameter[] => {
if (!templateParameters) {
return []
}

const immutables = templateParameters.filter(
(parameter) => !parameter.mutable,
)
const mutables = templateParameters.filter((parameter) => parameter.mutable)
return [...immutables, ...mutables]
}

export default CreateWorkspacePage
141 changes: 100 additions & 41 deletions site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,48 +257,107 @@ export const CreateWorkspacePageView: FC<
</div>
)}

{/* Rich parameters */}
{props.templateParameters && props.templateParameters.length > 0 && (
<div className={styles.formSection}>
<div className={styles.formSectionInfo}>
<h2 className={styles.formSectionInfoTitle}>
Rich template params
</h2>
<p className={styles.formSectionInfoDescription}>
Those values are provided by your template&lsquo;s Terraform
configuration.
</p>
{/* Immutable rich parameters */}
{props.templateParameters &&
props.templateParameters.filter((p) => !p.mutable).length > 0 && (
<div className={styles.formSection}>
<div className={styles.formSectionInfo}>
<h2 className={styles.formSectionInfoTitle}>
Immutable parameters
</h2>
<p className={styles.formSectionInfoDescription}>
Those values are provided by your template&lsquo;s Terraform
configuration. Values cannot be changed after creating the
workspace.
</p>
</div>

<Stack
direction="column"
spacing={4} // Spacing here is diff because the fields here don't have the MUI floating label spacing
className={styles.formSectionFields}
>
{props.templateParameters.map(
(parameter, index) =>
!parameter.mutable && (
<RichParameterInput
{...getFieldHelpers(
"rich_parameter_values[" + index + "].value",
)}
disabled={form.isSubmitting}
index={index}
key={parameter.name}
onChange={(value) => {
form.setFieldValue(
"rich_parameter_values." + index,
{
name: parameter.name,
value: value,
},
)
}}
parameter={parameter}
initialValue={workspaceBuildParameterValue(
initialRichParameterValues,
parameter,
)}
/>
),
)}
</Stack>
</div>

<Stack
direction="column"
spacing={4} // Spacing here is diff because the fields here don't have the MUI floating label spacing
className={styles.formSectionFields}
>
{props.templateParameters.map((parameter, index) => (
<RichParameterInput
{...getFieldHelpers(
"rich_parameter_values[" + index + "].value",
)}
disabled={form.isSubmitting}
index={index}
key={parameter.name}
onChange={(value) => {
form.setFieldValue("rich_parameter_values." + index, {
name: parameter.name,
value: value,
})
}}
parameter={parameter}
initialValue={workspaceBuildParameterValue(
initialRichParameterValues,
parameter,
)}
/>
))}
</Stack>
</div>
)}
)}

{/* Mutable rich parameters */}
{props.templateParameters &&
props.templateParameters.filter((p) => p.mutable).length > 0 && (
<div className={styles.formSection}>
<div className={styles.formSectionInfo}>
<h2 className={styles.formSectionInfoTitle}>
Mutable parameters
</h2>
<p className={styles.formSectionInfoDescription}>
Those values are provided by your template&lsquo;s Terraform
configuration. Values can be changed after creating the
workspace.
</p>
</div>

<Stack
direction="column"
spacing={4} // Spacing here is diff because the fields here don't have the MUI floating label spacing
className={styles.formSectionFields}
>
{props.templateParameters.map(
(parameter, index) =>
parameter.mutable && (
<RichParameterInput
{...getFieldHelpers(
"rich_parameter_values[" + index + "].value",
)}
disabled={form.isSubmitting}
index={index}
key={parameter.name}
onChange={(value) => {
form.setFieldValue(
"rich_parameter_values." + index,
{
name: parameter.name,
value: value,
},
)
}}
parameter={parameter}
initialValue={workspaceBuildParameterValue(
initialRichParameterValues,
parameter,
)}
/>
),
)}
</Stack>
</div>
)}
<FormFooter
styles={formFooterStyles}
onCancel={props.onCancel}
Expand Down
8 changes: 7 additions & 1 deletion site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
UpdateWorkspaceErrors,
WorkspaceBuildParametersPageView,
} from "./WorkspaceBuildParametersPageView"
import { orderedTemplateParameters } from "pages/CreateWorkspacePage/CreateWorkspacePage"

export const WorkspaceBuildParametersPage: FC = () => {
const { t } = useTranslation("workspaceBuildParametersPage")
Expand Down Expand Up @@ -48,8 +49,13 @@ export const WorkspaceBuildParametersPage: FC = () => {
</Helmet>
<WorkspaceBuildParametersPageView
workspace={selectedWorkspace}
templateParameters={templateParameters}
templateParameters={orderedTemplateParameters(templateParameters)}
workspaceBuildParameters={workspaceBuildParameters}
isLoading={
state.matches("gettingWorkspace") ||
state.matches("gettingTemplateParameters") ||
state.matches("gettingWorkspaceBuildParameters")
}
updatingWorkspace={state.matches("updatingWorkspace")}
hasErrors={state.matches("error")}
updateWorkspaceErrors={{
Expand Down
99 changes: 75 additions & 24 deletions site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export interface WorkspaceBuildParametersPageViewProps {
templateParameters?: TypesGen.TemplateVersionParameter[]
workspaceBuildParameters?: TypesGen.WorkspaceBuildParameter[]

isLoading: boolean
initialTouched?: FormikTouched<TypesGen.CreateWorkspaceRequest>
updatingWorkspace: boolean
onCancel: () => void
Expand Down Expand Up @@ -150,7 +151,9 @@ export const WorkspaceBuildParametersPageView: FC<

<Maybe
condition={Boolean(
props.templateParameters && props.templateParameters.length === 0,
!props.isLoading &&
props.templateParameters &&
Copy link
Member

Choose a reason for hiding this comment

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

Usage could be nicer here if we defaulted to an empty array for the prop.

Copy link
Member Author

Choose a reason for hiding this comment

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

Before introducing isLoading it was not possible, but I can retake a look.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Usually, it is not a good idea to use an empty array in the FE because we usually use undefined to identify the "loading data" state. However, if this data is provided internally and not from an external source that depends on an effect like network calls, file reading, etc. Providing an empty array is ok 👍

Copy link
Collaborator

Choose a reason for hiding this comment

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

Also, we could introduce isLoading and set it as an empty array but I don't see what is the value on it if compared to just letting the value as undefined.

props.templateParameters.length === 0,
)}
>
<div className={styles.formSection}>
Expand All @@ -161,7 +164,8 @@ export const WorkspaceBuildParametersPageView: FC<
</div>
</Maybe>

{props.templateParameters &&
{!props.isLoading &&
props.templateParameters &&
props.templateParameters.length > 0 &&
props.workspaceBuildParameters && (
<div className={styles.formSection}>
Expand All @@ -171,27 +175,67 @@ export const WorkspaceBuildParametersPageView: FC<
spacing={4} // Spacing here is diff because the fields here don't have the MUI floating label spacing
className={styles.formSectionFields}
>
{props.templateParameters.map((parameter, index) => (
<RichParameterInput
{...getFieldHelpers(
"rich_parameter_values[" + index + "].value",
)}
disabled={!parameter.mutable || form.isSubmitting}
index={index}
key={parameter.name}
onChange={(value) => {
form.setFieldValue("rich_parameter_values." + index, {
name: parameter.name,
value: value,
})
}}
parameter={parameter}
initialValue={workspaceBuildParameterValue(
initialRichParameterValues,
parameter,
)}
/>
))}
{props.templateParameters.filter((p) => !p.mutable).length >
0 && (
<div className={styles.formSectionParameterTitle}>
Immutable parameters
</div>
)}
{props.templateParameters.map(
(parameter, index) =>
!parameter.mutable && (
<RichParameterInput
{...getFieldHelpers(
"rich_parameter_values[" + index + "].value",
)}
disabled={!parameter.mutable || form.isSubmitting}
index={index}
key={parameter.name}
onChange={(value) => {
form.setFieldValue("rich_parameter_values." + index, {
name: parameter.name,
value: value,
})
}}
parameter={parameter}
initialValue={workspaceBuildParameterValue(
initialRichParameterValues,
parameter,
)}
/>
),
)}

{props.templateParameters.filter((p) => p.mutable).length >
0 && (
<div className={styles.formSectionParameterTitle}>
Mutable parameters
</div>
)}
{props.templateParameters.map(
(parameter, index) =>
parameter.mutable && (
<RichParameterInput
{...getFieldHelpers(
"rich_parameter_values[" + index + "].value",
)}
disabled={!parameter.mutable || form.isSubmitting}
index={index}
key={parameter.name}
onChange={(value) => {
form.setFieldValue("rich_parameter_values." + index, {
name: parameter.name,
value: value,
})
}}
parameter={parameter}
initialValue={workspaceBuildParameterValue(
initialRichParameterValues,
parameter,
)}
/>
),
)}
<FormFooter
styles={formFooterStyles}
onCancel={props.onCancel}
Expand Down Expand Up @@ -279,7 +323,7 @@ const stripImmutableParameters = (
}
}

const useStyles = makeStyles(() => ({
const useStyles = makeStyles((theme) => ({
goBackSection: {
display: "flex",
width: "100%",
Expand All @@ -292,6 +336,13 @@ const useStyles = makeStyles(() => ({
formSectionFields: {
width: "100%",
},
formSectionParameterTitle: {
fontSize: 20,
color: theme.palette.text.primary,
fontWeight: 400,
margin: 0,
marginBottom: theme.spacing(1),
},
}))

const useFormFooterStyles = makeStyles((theme) => ({
Expand Down