Skip to content

Commit 396b3c3

Browse files
bryphe-coderbryphe-coder
committed
Add dropdown field; /projects/create route; initial form
1 parent 362bb53 commit 396b3c3

File tree

10 files changed

+309
-88
lines changed

10 files changed

+309
-88
lines changed

‎site/api.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,32 @@ interface LoginResponse {
22
session_token: string
33
}
44

5+
/**
6+
* `Organization` must be kept in sync with the go struct in organizations.go
7+
*/
8+
export interface Organization {
9+
id: string
10+
name: string
11+
created_at: string
12+
updated_at: string
13+
}
14+
15+
export interface Provisioner {
16+
id: string
17+
name: string
18+
}
19+
20+
export const provisioners: Provisioner[] = [
21+
{
22+
id: "terraform",
23+
name: "Terraform",
24+
},
25+
{
26+
id: "cdr-basic",
27+
name: "Basic",
28+
},
29+
]
30+
531
export const login = async (email: string, password: string): Promise<LoginResponse> => {
632
const response = await fetch("/api/v2/login", {
733
method: "POST",

‎site/components/Form/FormDropdownField.tsx

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import Box from "@material-ui/core/Box"
2+
import MenuItem from "@material-ui/core/MenuItem"
3+
import { makeStyles } from "@material-ui/core/styles"
4+
import Typography from "@material-ui/core/Typography"
5+
import React from "react"
6+
7+
import { formTextFieldFactory, FormTextFieldProps } from "./FormTextField"
8+
9+
export interface DropdownItem {
10+
value: string
11+
name: string
12+
description?: string
13+
}
14+
15+
export interface FormDropdownFieldProps<T> extends FormTextFieldProps<T> {
16+
items: DropdownItem[]
17+
}
18+
19+
export const formDropdownFieldFactory = <T,>(): React.FC<FormDropdownFieldProps<T>> => {
20+
const FormTextField = formTextFieldFactory<T>()
21+
22+
const component: React.FC<FormDropdownFieldProps<T>> = ({ items, ...props }) => {
23+
const styles = useStyles()
24+
return (
25+
<FormTextField select {...props}>
26+
{items.map((item: DropdownItem) => (
27+
<MenuItem key={item.value} value={item.value}>
28+
<Box alignItems="center" display="flex">
29+
<Box ml={1}>
30+
<Typography>{item.name}</Typography>
31+
</Box>
32+
{item.description && (
33+
<Box ml={1}>
34+
<Typography className={styles.hintText} variant="caption">
35+
{item.description}
36+
</Typography>
37+
</Box>
38+
)}
39+
</Box>
40+
</MenuItem>
41+
))}
42+
</FormTextField>
43+
)
44+
}
45+
46+
// Required when using an anonymous factory function
47+
component.displayName = "FormDropdownField"
48+
return component
49+
}
50+
51+
const useStyles = makeStyles({
52+
hintText: {
53+
opacity: 0.75,
54+
},
55+
})
56+
57+
/*
58+
<TextField
59+
autoComplete="off"
60+
variant="outlined"
61+
onChange={(ev) => handleSelectPool(ev.target.value)}
62+
value={selectedPool ? selectedPool.name : ""}
63+
disabled={fieldIsDisabled}
64+
required
65+
label="Workspace provider"
66+
select
67+
>
68+
{poolsSorted.map((pool: UIResourcePoolWithRegion) => (
69+
<MenuItem key={pool.name} value={pool.name}>
70+
<Box alignItems="center" display="flex">
71+
<ProviderIcon provider={pool} type={pool.type} />
72+
<Box ml={1}>
73+
<Typography>{pool.name}</Typography>
74+
</Box>
75+
{pool.region !== null && (
76+
<Box ml={1}>
77+
<Typography className={styles.hintText} variant="caption">
78+
{pool.region}
79+
</Typography>
80+
</Box>
81+
)}
82+
</Box>
83+
</MenuItem>
84+
))}
85+
</TextField>*/

‎site/components/Form/FormRow.tsx

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎site/components/Form/FormSection.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ export const useStyles = makeStyles((theme) => ({
3434
},
3535
contents: {
3636
flex: 1,
37-
marginTop: theme.spacing(2),
38-
marginBottom: theme.spacing(2),
37+
marginTop: theme.spacing(4),
38+
marginBottom: theme.spacing(4),
3939
},
4040
}))
4141

‎site/components/Form/FormTextField.tsx

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import TextField, { TextFieldProps } from "@material-ui/core/TextField"
2-
import { FormikLike } from "../../util/formik"
32
import React from "react"
43
import { PasswordField } from "./PasswordField"
4+
import { FormikContextType } from "formik"
55

66
/**
77
* FormFieldProps are required props for creating form fields using a factory.
@@ -11,7 +11,7 @@ export interface FormFieldProps<T> {
1111
* form is a reference to a form or subform and is used to compute common
1212
* states such as error and helper text
1313
*/
14-
form: FormikLike<T>
14+
form: FormikContextType<T>
1515
/**
1616
* formFieldName is a field name associated with the form schema.
1717
*/
@@ -26,31 +26,31 @@ export interface FormFieldProps<T> {
2626
*/
2727
export interface FormTextFieldProps<T>
2828
extends Pick<
29-
TextFieldProps,
30-
| "autoComplete"
31-
| "autoFocus"
32-
| "children"
33-
| "className"
34-
| "disabled"
35-
| "fullWidth"
36-
| "helperText"
37-
| "id"
38-
| "InputLabelProps"
39-
| "InputProps"
40-
| "inputProps"
41-
| "label"
42-
| "margin"
43-
| "multiline"
44-
| "onChange"
45-
| "placeholder"
46-
| "required"
47-
| "rows"
48-
| "select"
49-
| "SelectProps"
50-
| "style"
51-
| "type"
52-
>,
53-
FormFieldProps<T> {
29+
TextFieldProps,
30+
| "autoComplete"
31+
| "autoFocus"
32+
| "children"
33+
| "className"
34+
| "disabled"
35+
| "fullWidth"
36+
| "helperText"
37+
| "id"
38+
| "InputLabelProps"
39+
| "InputProps"
40+
| "inputProps"
41+
| "label"
42+
| "margin"
43+
| "multiline"
44+
| "onChange"
45+
| "placeholder"
46+
| "required"
47+
| "rows"
48+
| "select"
49+
| "SelectProps"
50+
| "style"
51+
| "type"
52+
>,
53+
FormFieldProps<T> {
5454
/**
5555
* eventTransform is an optional transformer on the event data before it is
5656
* processed by formik.
@@ -124,7 +124,7 @@ export const formTextFieldFactory = <T,>(): React.FC<FormTextFieldProps<T>> => {
124124

125125
// Conversion to a string primitive is necessary as formFieldName is an in
126126
// indexable type such as a string, number or enum.
127-
const fieldId = FormikLike.getFieldId<T>(form, String(formFieldName))
127+
const fieldId = String(formFieldName)
128128

129129
const Component = isPassword ? PasswordField : TextField
130130
const inputType = isPassword ? undefined : type
@@ -167,4 +167,4 @@ export const formTextFieldFactory = <T,>(): React.FC<FormTextFieldProps<T>> => {
167167
// Required when using an anonymous factory function
168168
component.displayName = "FormTextField"
169169
return component
170-
}
170+
}

‎site/components/Form/FormTitle.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { makeStyles } from "@material-ui/core/styles"
22
import Typography from "@material-ui/core/Typography"
33
import React from "react"
44

5-
export interface TitleProps {
5+
export interface FormTitleProps {
66
title: string
7-
detail: React.ReactNode
7+
detail?: React.ReactNode
88
}
99

1010
const useStyles = makeStyles((theme) => ({
@@ -19,13 +19,13 @@ const useStyles = makeStyles((theme) => ({
1919
},
2020
}))
2121

22-
export const Title: React.FC<TitleProps> = ({ title, detail }) => {
22+
export const FormTitle: React.FC<FormTitleProps> = ({ title, detail }) => {
2323
const styles = useStyles()
2424

2525
return (
2626
<div className={styles.title}>
2727
<Typography variant="h3">{title}</Typography>
28-
<Typography variant="caption">{detail}</Typography>
28+
{detail && <Typography variant="caption">{detail}</Typography>}
2929
</div>
3030
)
3131
}

‎site/components/Form/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export * from "./FormRow"
21
export * from "./FormSection"
2+
export * from "./FormDropdownField"
33
export * from "./FormTextField"
4-
export * from "./FormTitle"
4+
export * from "./FormTitle"

‎site/components/Form/index.tsx

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)