8000 refactor: Update create workspace flow to allow creation from the workspaces page by BrunoQuaresma · Pull Request #1684 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

refactor: Update create workspace flow to allow creation from the workspaces page #1684

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 11 commits into from
May 24, 2022
Merged

refactor: Update create workspace flow to allow creation from the workspaces page #1684

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c90c226
Refactor create workspace machine
BrunoQuaresma May 23, 2022
6f6b910
Update router
BrunoQuaresma May 23, 2022
679cb4a
Fix route
BrunoQuaresma May 23, 2022
ef43684
Move buttons to condition
BrunoQuaresma May 23, 2022
4af315b
Add minor adjustments on spacing
BrunoQuaresma May 23, 2022
20f8742
Accept pre defined template
BrunoQuaresma May 23, 2022
3b7d3d0
Fix storybooks
BrunoQuaresma May 23, 2022
2cea3c7
Fix cancel redirect
BrunoQuaresma May 23, 2022
eeeda45
Fix tests
BrunoQuaresma May 23, 2022
58f9231
Fix test
BrunoQuaresma May 24, 2022
48088e3
Fix tests
BrunoQuaresma May 24, 2022
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
Add minor adjustments on spacing
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed May 23, 2022
commit 4af315ba8ac4b4848a5f38fc9bdc0ade4a42e172
106 changes: 51 additions & 55 deletions site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import MenuItem from "@material-ui/core/MenuItem"
import { makeStyles } from "@material-ui/core/styles"
import TextField, { TextFieldProps } from "@material-ui/core/TextField"
import { FormikContextType, useFormik } from "formik"
import React from "react"
import * as Yup from "yup"
import * as TypesGen from "../../api/typesGenerated"
import { FormFooter } from "../../components/FormFooter/FormFooter"
import { FullPageForm } from "../../components/FullPageForm/FullPageForm"
import { Loader } from "../../components/Loader/Loader"
import { Margins } from "../../components/Margins/Margins"
import { ParameterInput } from "../../components/ParameterInput/ParameterInput"
import { Stack } from "../../components/Stack/Stack"
import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"

export const Language = {
Expand Down Expand Up @@ -45,7 +46,6 @@ export const validationSchema = Yup.object({
})

export const CreateWorkspacePageView: React.FC<CreateWorkspacePageViewProps> = (props) => {
const styles = useStyles()
const [parameterValues, setParameterValues] = React.useState<Record<string, string>>({})
const form: FormikContextType<TypesGen.CreateWorkspaceRequest> = useFormik<TypesGen.CreateWorkspaceRequest>({
initialValues: {
Expand Down Expand Up @@ -95,68 +95,64 @@ export const CreateWorkspacePageView: React.FC<CreateWorkspacePageViewProps> = (
<Margins>
<FullPageForm title="Create workspace" onCancel={props.onCancel}>
<form onSubmit={form.handleSubmit}>
{props.templates && (
<TextField
{...getFieldHelpers("template_id")}
disabled={form.isSubmitting}
onChange={handleTemplateChange}
autoFocus
fullWidth
label={Language.templateLabel}
variant="outlined"
select
>
{props.templates.map((template) => (
<MenuItem key={template.id} value={template.id}>
{template.name}
</MenuItem>
))}
</TextField>
)}
{props.loadingTemplates && <Loader />}

{props.selectedTemplate && props.templateSchema && (
<>
<Stack>
{props.templates && (
<TextField
{...getFieldHelpers("name")}
{...getFieldHelpers("template_id")}
disabled={form.isSubmitting}
onChange={onChangeTrimmed(form)}
onChange={handleTemplateChange}
autoFocus
fullWidth
label={Language.nameLabel}
label={Language.templateLabel}
variant="outlined"
/>
{props.templateSchema.length > 0 && (
<div className={styles.parameters}>
{props.templateSchema.map((schema) => (
<ParameterInput
disabled={form.isSubmitting}
key={schema.id}
onChange={(value) => {
setParameterValues({
...parameterValues,
[schema.name]: value,
})
}}
schema={schema}
/>
))}
</div>
)}
select
>
{props.templates.map((template) => (
<MenuItem key={template.id} value={template.id}>
{template.name}
</MenuItem>
))}
</TextField>
)}

<FormFooter onCancel={props.onCancel} isLoading={props.creatingWorkspace} />
</>
)}
{props.selectedTemplate && props.templateSchema && (
<>
<TextField
{...getFieldHelpers("name")}
disabled={form.isSubmitting}
onChange={onChangeTrimmed(form)}
autoFocus
fullWidth
label={Language.nameLabel}
variant="outlined"
/>

{props.templateSchema.length > 0 && (
<Stack>
{props.templateSchema.map((schema) => (
<ParameterInput
disabled={form.isSubmitting}
key={schema.id}
onChange={(value) => {
setParameterValues({
...parameterValues,
[schema.name]: value,
})
}}
schema={schema}
/>
))}
</Stack>
)}

<FormFooter onCancel={props.onCancel} isLoading={props.creatingWorkspace} />
</>
)}
</Stack>
</form>
</FullPageForm>
</Margins>
)
}

const useStyles = makeStyles((theme) => ({
parameters: {
paddingTop: theme.spacing(4),
"& > *": {
marginBottom: theme.spacing(4),
},
},
}))
0