Skip to content

fix(site): fix floating number on duration fields #13209

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 18 commits into from
May 17, 2024
Merged

fix(site): fix floating number on duration fields #13209

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
6d359fd
Add DurationField component
BrunoQuaresma May 8, 2024
5ac0602
Add empty story
BrunoQuaresma May 8, 2024
95e4f44
Avoid negative values
BrunoQuaresma May 8, 2024
4a48102
Use duration field time_til_dormant_ms
BrunoQuaresma May 9, 2024
09ddb8f
Fix parent updates
BrunoQuaresma May 9, 2024
3427160
Fix helper text
BrunoQuaresma May 9, 2024
eef159c
Support errors
BrunoQuaresma May 9, 2024
b3042c6
Use valueMs to make the value is in miliseconds
BrunoQuaresma May 10, 2024
e6101cf
Replace useState by useReducer
BrunoQuaresma May 10, 2024
c82fc8f
Add 10 to base int
BrunoQuaresma May 10, 2024
1b77488
Merge branch 'main' of https://github.com/coder/coder into bq/fix-flo…
BrunoQuaresma May 13, 2024
9036465
Use a number mask
BrunoQuaresma May 13, 2024
cac3a89
Make number input full width
BrunoQuaresma May 13, 2024
d89ec94
Add duration field to auto deletion
BrunoQuaresma May 13, 2024
0a93c9f
Apply duration field to failure clean up
BrunoQuaresma May 13, 2024
5a35e1a
Merge branch 'main' of https://github.com/coder/coder into bq/fix-flo…
BrunoQuaresma May 17, 2024
45a5eb5
Add extra tests to storybook
BrunoQuaresma May 17, 2024
a6ff426
Fix tests
BrunoQuaresma May 17, 2024
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
Support errors
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed May 9, 2024
commit eef159cf5d2b1c2f1336a6c8b238f7164adb16e2
25 changes: 14 additions & 11 deletions site/src/components/DurationField/DurationField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,18 @@ import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
import FormHelperText from "@mui/material/FormHelperText";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import { type ReactNode, useState, type FC, useEffect } from "react";
import TextField, { type TextFieldProps } from "@mui/material/TextField";
import { useState, type FC, useEffect } from "react";
import {
type TimeUnit,
durationInDays,
durationInHours,
suggestedTimeUnit,
} from "utils/time";

type DurationFieldProps = {
label: string;
type DurationFieldProps = Omit<TextFieldProps, "value" | "onChange"> & {
// Value is in ms
value: number;
disabled?: boolean;
helperText?: ReactNode;
onChange: (value: number) => void;
};

Expand All @@ -28,7 +25,7 @@ type State = {
};

export const DurationField: FC<DurationFieldProps> = (props) => {
const { label, value: parentValue, disabled, helperText, onChange } = props;
const { value: parentValue, onChange, helperText, ...textFieldProps } = props;
const [state, setState] = useState<State>(() => initState(parentValue));
const currentDurationInMs = durationInMs(
state.durationFieldValue,
Expand All @@ -50,10 +47,9 @@ export const DurationField: FC<DurationFieldProps> = (props) => {
}}
>
<TextField
{...textFieldProps}
type="number"
css={{ maxWidth: 160 }}
label={label}
disabled={disabled}
value={state.durationFieldValue}
onChange={(e) => {
const durationFieldValue = e.currentTarget.value;
Expand All @@ -76,7 +72,7 @@ export const DurationField: FC<DurationFieldProps> = (props) => {
}}
/>
<Select
disabled={disabled}
disabled={props.disabled}
css={{ width: 120, "& .MuiSelect-icon": { padding: 2 } }}
value={state.unit}
onChange={(e) => {
Expand Down Expand Up @@ -107,7 +103,9 @@ export const DurationField: FC<DurationFieldProps> = (props) => {
</Select>
</div>

{helperText && <FormHelperText>{helperText}</FormHelperText>}
{helperText && (
<FormHelperText error={props.error}>{helperText}</FormHelperText>
Copy link
Member

Choose a reason for hiding this comment

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

Was there a reason why props.error wasn't destructured from the props at the top of the component?

Copy link
Collaborator Author

@BrunoQuaresma BrunoQuaresma May 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Because it is used by the TextField props as well.

)}
</div>
);
};
Expand All @@ -127,6 +125,11 @@ function initState(value: number): State {

function durationInMs(durationFieldValue: string, unit: TimeUnit): number {
const durationInMs = parseInt(durationFieldValue);

if (Number.isNaN(durationInMs)) {
return 0;
}

return unit === "hours"
? hoursToDuration(durationInMs)
: daysToDuration(durationInMs);
Expand Down
12 changes: 7 additions & 5 deletions site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,12 +497,14 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
/>

<DurationField
{...getFieldHelpers("time_til_dormant_ms", {
helperText: (
<DormancyTTLHelperText
ttl={form.values.time_til_dormant_ms}
/>
),
})}
label="Time until dormant"
helperText={
<DormancyTTLHelperText
ttl={form.values.time_til_dormant_ms}
/>
}
value={form.values.time_til_dormant_ms ?? 0}
onChange={(v) => form.setFieldValue("time_til_dormant_ms", v)}
disabled={
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/TemplateSettingsPage/TemplateSchedulePage/formHelpers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,10 @@ export const getValidationSchema = (): Yup.AnyObjectSchema =>
time_til_dormant_ms: Yup.number()
.integer()
.required()
.min(0, "Dormancy threshold days must not be less than 0.")
.min(0, "Dormancy threshold must not be less than 0.")
.test(
"positive-if-enabled",
"Dormancy threshold days must be greater than zero when enabled.",
"Dormancy threshold must be greater than zero when enabled.",
function (value) {
const parent = this.parent as TemplateScheduleFormValues;
if (parent.inactivity_cleanup_enabled) {
Expand Down