8000 feat: form for editing ws schedule by greyscaled · Pull Request #1634 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

feat: form for editing ws schedule #1634

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 4 commits into from
May 20, 2022
Merged

feat: form for editing ws schedule #1634

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
adeb0ff
feat: ui for editing ws schedule
greyscaled May 20, 2022
2ee8d87
validation
greyscaled May 20, 2022
a651f0e
fixup! validation
greyscaled May 20, 2022
e0a35ca
Fix helperText
greyscaled May 20, 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
validation
  • Loading branch information
@greyscaled
greyscaled committed May 20, 2022
commit 2ee8d87e682c618fd9ebe568f57a45ed7e589caa
57 changes: 57 additions & 0 deletions site/src/components/WorkspaceStats/WorkspaceScheduleForm.test.ts
View file
Open in desktop
10000
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { Language, validationSchema, WorkspaceScheduleFormValues } from "./WorkspaceScheduleForm"

const valid: WorkspaceScheduleFormValues = {
sunday: false,
monday: true,
tuesday: true,
wednesday: true,
thursday: true,
friday: true,
saturday: false,

startTime: "09:30",
ttl: 120,
}

describe("validationSchema", () => {
it("allows everything to be falsy", () => {
const values: WorkspaceScheduleFormValues = {
sunday: false,
monday: false,
tuesday: false,
wednesday: false,
thursday: false,
friday: false,
saturday: false,

startTime: "",
ttl: 0,
}
const validate = () => validationSchema.validateSync(values)
expect(validate).not.toThrow()
})

it("disallows ttl to be negative", () => {
const values = {
...valid,
ttl: -1,
}
const validate = () => validationSchema.validateSync(values)
expect(validate).toThrow()
})

it("disallows all days-of-week to be false when startTime is set", () => {
const values = {
...valid,
sunday: false,
monday: false,
tuesday: false,
wednesday: false,
thursday: false,
friday: false,
saturday: false,
}
const validate = () => validationSchema.validateSync(values)
expect(validate).toThrowError(Language.errorNoDayOfWeek)
})
})
95 changes: 88 additions & 7 deletions site/src/components/WorkspaceStats/WorkspaceScheduleForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@ import makeStyles from "@material-ui/core/styles/makeStyles"
import TextField from "@material-ui/core/TextField"
import { useFormik } from "formik"
import React from "react"
import * as Yup from "yup"
import { getFormHelpers } from "../../util/formUtils"
import { FormFooter } from "../FormFooter/FormFooter"
import { FullPageForm } from "../FullPageForm/FullPageForm"
import { Stack } from "../Stack/Stack"

export const Language = {
errorNoDayOfWeek: "Must set at least one day of week",
daysOfWeekLabel: "Days of Week",
daySundayLabel: "Sunday",
dayMondayLabel: "Monday",
Expand Down Expand Up @@ -44,6 +46,35 @@ export interface WorkspaceScheduleFormValues {
ttl: number
}

export const validationSchema = Yup.object({
sunday: Yup.boolean(),
monday: Yup.boolean().test("at-least-one-day", Language.errorNoDayOfWeek, function (value) {
const parent = this.parent as WorkspaceScheduleFormValues

if (!parent.startTime) {
return true
} else {
return ![
parent.sunday,
value,
parent.tuesday,
parent.wednesday,
parent.thursday,
parent.friday,
parent.saturday,
].every((day) => day === false)
}
}),
tuesday: Yup.boolean(),
wednesday: Yup.boolean(),
thursday: Yup.boolean(),
friday: Yup.boolean(),
saturday: Yup.boolean(),

startTime: Yup.string(),
ttl: Yup.number().min(0).integer(),
})

export const WorkspaceScheduleForm: React.FC<WorkspaceScheduleFormProps> = ({ onCancel, onSubmit }) => {
const styles = useStyles()

Expand All @@ -61,6 +92,7 @@ export const WorkspaceScheduleForm: React.FC<WorkspaceScheduleFormProps> = ({ on
ttl: 0,
},
onSubmit,
validationSchema,
})
const formHelpers = getFormHelpers<WorkspaceScheduleFormValues>(form)

Expand All @@ -85,31 +117,80 @@ export const WorkspaceScheduleForm: React.FC<WorkspaceScheduleFormProps> = ({ on

<FormGroup>
<FormControlLabel
control={<Checkbox checked={form.values.sunday} onChange={form.handleChange} name="sunday" />}
control={
<Checkbox
checked={form.values.sunday}
disabled={!form.values.startTime}
onChange={form.handleChange}
name="sunday"
/>
}
label={Language.daySundayLabel}
/>
<FormControlLabel
control={<Checkbox checked={form.values.monday} onChange={form.handleChange} name="monday" />}
control={
<Checkbox
checked={form.values.monday}
disabled={!form.values.startTime}
onChange={form.handleChange}
name="monday"
/>
}
label={Language.dayMondayLabel}
/>
<FormControlLabel
control={<Checkbox checked={form.values.tuesday} onChange={form.handleChange} name="tuesday" />}
control={
<Checkbox
checked={form.values.tuesday}
disabled={!form.values.startTime}
onChange={form.handleChange}
name="tuesday"
/>
}
label={Language.dayTuesdayLabel}
/>
<FormControlLabel
control={<Checkbox checked={form.values.wednesday} onChange={form.handleChange} name="wednesday" />}
control={
<Checkbox
checked={form.values.wednesday}
disabled={!form.values.startTime}
onChange={form.handleChange}
name="wednesday"
/>
}
label={Language.dayWednesdayLabel}
/>
<FormControlLabel
control={<Checkbox checked={form.values.thursday} onChange={form.handleChange} name="thursday" />}
control={
<Checkbox
checked={form.values.thursday}
disabled={!form.values.startTime}
onChange={form.handleChange}
name="thursday"
/>
}
label={Language.dayThursdayLabel}
/>
<FormControlLabel
control={<Checkbox checked={form.values.friday} onChange={form.handleChange} name="friday" />}
control={
<Checkbox
checked={form.values.friday}
disabled={!form.values.startTime}
onChange={form.handleChange}
name="friday"
/>
}
label={Language.dayFridayLabel}
/>
<FormControlLabel
control={<Checkbox checked={form.values.saturday} onChange={form.handleChange} name="saturday" />}
control={
<Checkbox
checked={form.values.saturday}
disabled={!form.values.startTime}
onChange={form.handleChange}
name="saturday"
/>
}
label={Language.daySaturdayLabel}
/>
</FormGroup>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Review: I can create a map for these as a refactor...will do in follow-up/later.

Expand Down
0