Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit35cb572

Browse files
refactor(site): refactor the workspace settings form (#13198)
1 parent24448e7 commit35cb572

File tree

2 files changed

+50
-36
lines changed

2 files changed

+50
-36
lines changed

‎site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.test.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,9 @@ describe("templateInheritance", () => {
281281
};
282282
render(<WorkspaceScheduleForm{...props}/>);
283283

284-
constautoStartToggle=awaitscreen.findByLabelText("Enable Autostart");
284+
constautoStartToggle=awaitscreen.findByLabelText("Enable Autostart",{
285+
exact:false,
286+
});
285287
expect(autoStartToggle).toBeDisabled();
286288

287289
conststartTimeInput=awaitscreen.findByLabelText("Start time");
@@ -313,7 +315,9 @@ describe("templateInheritance", () => {
313315

314316
render(<WorkspaceScheduleForm{...props}/>);
315317

316-
constautoStartToggle=awaitscreen.findByLabelText("Enable Autostart");
318+
constautoStartToggle=awaitscreen.findByLabelText("Enable Autostart",{
319+
exact:false,
320+
});
317321
expect(autoStartToggle).toBeEnabled();
318322

319323
conststartTimeInput=awaitscreen.findByLabelText("Start time");
@@ -346,7 +350,9 @@ describe("templateInheritance", () => {
346350
jest.spyOn(API,"getTemplateByName").mockResolvedValue(MockTemplate);
347351
render(<WorkspaceScheduleForm{...props}/>);
348352

349-
constautoStopToggle=awaitscreen.findByLabelText("Enable Autostop");
353+
constautoStopToggle=awaitscreen.findByLabelText("Enable Autostop",{
354+
exact:false,
355+
});
350356
expect(autoStopToggle).toBeDisabled();
351357

352358
constttlInput=awaitscreen.findByLabelText(

‎site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import FormLabel from "@mui/material/FormLabel";
77
importMenuItemfrom"@mui/material/MenuItem";
88
importSwitchfrom"@mui/material/Switch";
99
importTextFieldfrom"@mui/material/TextField";
10-
importTooltipfrom"@mui/material/Tooltip";
1110
import{formatDuration,intervalToDuration}from"date-fns";
1211
importdayjsfrom"dayjs";
1312
importadvancedFormatfrom"dayjs/plugin/advancedFormat";
@@ -19,14 +18,17 @@ import { type FormikTouched, useFormik } from "formik";
1918
importtype{ChangeEvent,FC}from"react";
2019
import*asYupfrom"yup";
2120
importtype{Template}from"api/typesGenerated";
22-
import{DisabledBadge}from"components/Badges/Badges";
2321
import{
2422
HorizontalForm,
2523
FormFooter,
2624
FormSection,
2725
FormFields,
2826
}from"components/Form/Form";
2927
import{Stack}from"components/Stack/Stack";
28+
import{
29+
StackLabel,
30+
StackLabelHelperText,
31+
}from"components/StackLabel/StackLabel";
3032
import{
3133
defaultSchedule,
3234
emptySchedule,
@@ -180,6 +182,10 @@ export const validationSchema = Yup.object({
180182
}),
181183
});
182184

185+
// This form utilizes complex, visually-intensive fields. Increasing the space
186+
// between these fields enhances readability and cleanliness.
187+
constFIELDS_SPACING=4;
188+
183189
exportconstWorkspaceScheduleForm:FC<WorkspaceScheduleFormProps>=({
184190
error,
185191
initialValues,
@@ -275,31 +281,30 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
275281
<HorizontalFormonSubmit={form.handleSubmit}>
276282
<FormSection
277283
title="Autostart"
278-
description={
279-
<>
280-
<divcss={{marginBottom:16}}>
281-
Select the time and days of week on which you want the workspace
282-
starting automatically.
283-
</div>
284-
{!template.allow_user_autostart&&(
285-
<Tooltiptitle="This option can be enabled in the template settings">
286-
<DisabledBadge/>
287-
</Tooltip>
288-
)}
289-
</>
290-
}
284+
description="Select the time and days of week on which you want the workspace starting automatically."
291285
>
292-
<FormFields>
286+
<FormFieldsspacing={FIELDS_SPACING}>
293287
<FormControlLabel
294288
control={
295289
<Switch
296290
disabled={!template.allow_user_autostart}
297291
name="autostartEnabled"
298292
checked={form.values.autostartEnabled}
299293
onChange={handleToggleAutostart}
294+
size="small"
300295
/>
301296
}
302-
label={Language.startSwitch}
297+
label={
298+
<StackLabel>
299+
{Language.startSwitch}
300+
{!template.allow_user_autostart&&(
301+
<StackLabelHelperText>
302+
The template for this workspace does not allow modification
303+
of autostart.
304+
</StackLabelHelperText>
305+
)}
306+
</StackLabel>
307+
}
303308
/>
304309
<Stackdirection="row">
305310
<TextField
@@ -387,34 +392,37 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
387392
title="Autostop"
388393
description={
389394
<>
390-
<divcss={{marginBottom:16}}>
391-
Set how many hours should elapse after the workspace started
392-
before the workspace automatically shuts down. This will be
393-
extended by{" "}
394-
{dayjs
395-
.duration({milliseconds:template.activity_bump_ms})
396-
.humanize()}{" "}
397-
after last activity in the workspace was detected.
398-
</div>
399-
{!template.allow_user_autostop&&(
400-
<Tooltiptitle="This option can be enabled in the template settings">
401-
<DisabledBadge/>
402-
</Tooltip>
403-
)}
395+
Set how many hours should elapse after the workspace started before
396+
the workspace automatically shuts down. This will be extended by{" "}
397+
{dayjs
398+
.duration({milliseconds:template.activity_bump_ms})
399+
.humanize()}{" "}
400+
after last activity in the workspace was detected.
404401
</>
405402
}
406403
>
407-
<FormFields>
404+
<FormFieldsspacing={FIELDS_SPACING}>
408405
<FormControlLabel
409406
control={
410407
<Switch
408+
size="small"
411409
name="autostopEnabled"
412410
checked={form.values.autostopEnabled}
413411
onChange={handleToggleAutostop}
414412
disabled={!template.allow_user_autostop}
415413
/>
416414
}
417-
label={Language.stopSwitch}
415+
label={
416+
<StackLabel>
417+
{Language.stopSwitch}
418+
{!template.allow_user_autostop&&(
419+
<StackLabelHelperText>
420+
The template for this workspace does not allow modification
421+
of autostop.
422+
</StackLabelHelperText>
423+
)}
424+
</StackLabel>
425+
}
418426
/>
419427
<TextField
420428
{...formHelpers("ttl",{

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp