selfhosted
/
coder
mirror of https://github.com/coder/coder.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: Group immutable and mutable rich parameters (#5975)

This commit is contained in:
Marcin Tojek 2023-02-02 18:01:18 +01:00 committed by GitHub
parent ab1f6ce090
commit e27f7accd7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 198 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
View File

@ -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"
@ -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,
@ -104,4 +105,18 @@ const getDefaultParameterValues = (
return paramValues
}
export const orderedTemplateParameters = (
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
site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
View File

@ -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>
</div>
{/* 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) => (
<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) =>
!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>
)}
{/* 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}

8
site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPage.tsx
View File

@ -9,6 +9,7 @@ import {
UpdateWorkspaceErrors,
WorkspaceBuildParametersPageView,
} from "./WorkspaceBuildParametersPageView"
import { orderedTemplateParameters } from "pages/CreateWorkspacePage/CreateWorkspacePage"
export const WorkspaceBuildParametersPage: FC = () => {
const { t } = useTranslation("workspaceBuildParametersPage")
@ -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={{

99
site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPageView.tsx
View File

@ -29,6 +29,7 @@ export interface WorkspaceBuildParametersPageViewProps {
templateParameters?: TypesGen.TemplateVersionParameter[]
workspaceBuildParameters?: TypesGen.WorkspaceBuildParameter[]
isLoading: boolean
initialTouched?: FormikTouched<TypesGen.CreateWorkspaceRequest>
updatingWorkspace: boolean
onCancel: () => void
@ -150,7 +151,9 @@ export const WorkspaceBuildParametersPageView: FC<
<Maybe
condition={Boolean(
props.templateParameters && props.templateParameters.length === 0,
!props.isLoading &&
props.templateParameters &&
props.templateParameters.length === 0,
)}
>
<div className={styles.formSection}>
@ -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}>
@ -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}
@ -279,7 +323,7 @@ const stripImmutableParameters = (
}
}
const useStyles = makeStyles(() => ({
const useStyles = makeStyles((theme) => ({
goBackSection: {
display: "flex",
width: "100%",
@ -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) => ({