Skip to content

Commit 551191d

Browse files
aslilacaslilac
committed
🧹
1 parent 1c397bc commit 551191d

File tree

6 files changed

+83
-79
lines changed

6 files changed

+83
-79
lines changed

‎site/src/components/Margins/Margins.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,10 @@ const widthBySize: Record<Size, number> = {
1515

1616
type MarginsProps = JSX.IntrinsicElements["div"] & {
1717
size?: Size;
18-
verticalMargin?: string | number;
1918
};
2019

2120
export const Margins: FC<MarginsProps> = ({
2221
size = "regular",
23-
verticalMargin = 0,
2422
children,
2523
...divProps
2624
}) => {
@@ -29,12 +27,13 @@ export const Margins: FC<MarginsProps> = ({
2927
<div
3028
{...divProps}
3129
css={{
32-
margin: "0 auto",
30+
marginLeft: "auto",
31+
marginRight: "auto",
3332
maxWidth: maxWidth,
34-
padding: `0 ${sidePadding}px`,
33+
paddingLeft: sidePadding,
34+
paddingRight: sidePadding,
3535
width: "100%",
3636
}}
37-
style={{ marginTop: verticalMargin, marginBottom: verticalMargin }}
3837
>
3938
{children}
4039
</div>

‎site/src/pages/OrganizationSettingsPage/OrganizationSettingsPage.tsx

Lines changed: 53 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -29,20 +29,19 @@ import {
2929
onChangeTrimmed,
3030
} from "utils/formUtils";
3131
import { useOrganizationSettings } from "./OrganizationSettingsLayout";
32+
import { displaySuccess } from "components/GlobalSnackbar/utils";
3233

3334
const MAX_DESCRIPTION_CHAR_LIMIT = 128;
34-
const MAX_DESCRIPTION_MESSAGE =
35-
"Please enter a description that is no longer than 128 characters.";
36-
37-
export const getValidationSchema = (): Yup.AnyObjectSchema =>
38-
Yup.object({
39-
name: nameValidator("Name"),
40-
display_name: displayNameValidator("Display name"),
41-
description: Yup.string().max(
42-
MAX_DESCRIPTION_CHAR_LIMIT,
43-
MAX_DESCRIPTION_MESSAGE,
44-
),
45-
});
35+
const MAX_DESCRIPTION_MESSAGE = `Please enter a description that is no longer than ${MAX_DESCRIPTION_CHAR_LIMIT} characters.`;
36+
37+
export const validationSchema = Yup.object({
38+
name: nameValidator("Name"),
39+
display_name: displayNameValidator("Display name"),
40+
description: Yup.string().max(
41+
MAX_DESCRIPTION_CHAR_LIMIT,
42+
MAX_DESCRIPTION_MESSAGE,
43+
),
44+
});
4645

4746
const OrganizationSettingsPage: FC = () => {
4847
const queryClient = useQueryClient();
@@ -68,17 +67,22 @@ const OrganizationSettingsPage: FC = () => {
6867
description: org.description,
6968
icon: org.icon,
7069
},
71-
validationSchema: getValidationSchema(),
72-
onSubmit: (values) =>
73-
updateOrganizationMutation.mutateAsync({ orgId: org.id, req: values }),
70+
validationSchema,
71+
onSubmit: async (values) => {
72+
await updateOrganizationMutation.mutateAsync({
73+
orgId: org.id,
74+
req: values,
75+
});
76+
displaySuccess("Organization settings updated.");
77+
},
7478
enableReinitialize: true,
7579
});
7680
const getFieldHelpers = getFormHelpers(form, error);
7781

7882
const [newOrgName, setNewOrgName] = useState("");
7983

8084
return (
81-
<Margins verticalMargin={18}>
85+
<Margins css={{ marginTop: 18, marginBottom: 18 }}>
8286
{Boolean(error) && <ErrorAlert error={error} />}
8387

8488
<PageHeader css={{ paddingTop: 0 }}>
@@ -93,37 +97,38 @@ const OrganizationSettingsPage: FC = () => {
9397
title="General info"
9498
description="Change the name or description of the organization."
9599
>
96-
<FormFields>
97-
<TextField
98-
{...getFieldHelpers("name")}
99-
disabled={form.isSubmitting}
100-
onChange={onChangeTrimmed(form)}
101-
autoFocus
102-
fullWidth
103-
label="Name"
104-
/>
105-
<TextField
106-
{...getFieldHelpers("display_name")}
107-
disabled={form.isSubmitting}
108-
fullWidth
109-
label="Display name"
110-
/>
111-
<TextField
112-
{...getFieldHelpers("description")}
113-
multiline
114-
disabled={form.isSubmitting}
115-
fullWidth
116-
label="Description"
117-
rows={2}
118-
/>
119-
<IconField
120-
{...getFieldHelpers("icon")}
121-
disabled={form.isSubmitting}
122-
onChange={onChangeTrimmed(form)}
123-
fullWidth
124-
onPickEmoji={(value) => form.setFieldValue("icon", value)}
125-
/>
126-
</FormFields>
100+
<fieldset
101+
disabled={form.isSubmitting}
102+
css={{ border: "unset", padding: 0, margin: 0, width: "100%" }}
103+
>
104+
<FormFields>
105+
<TextField
106+
{...getFieldHelpers("name")}
107+
onChange={onChangeTrimmed(form)}
108+
autoFocus
109+
fullWidth
110+
label="Name"
111+
/>
112+
<TextField
113+
{...getFieldHelpers("display_name")}
114+
fullWidth
115+
label="Display name"
116+
/>
117+
<TextField
118+
{...getFieldHelpers("description")}
119+
multiline
120+
fullWidth
121+
label="Description"
122+
rows={2}
123+
/>
124+
<IconField
125+
{...getFieldHelpers("icon")}
126+
onChange={onChangeTrimmed(form)}
127+
fullWidth
128+
onPickEmoji={(value) => form.setFieldValue("icon", value)}
129+
/>
130+
</FormFields>
131+
</fieldset>
127132
</FormSection>
128133
<FormFooter isLoading={form.isSubmitting} />
129134
</HorizontalForm>
@@ -148,7 +153,7 @@ const OrganizationSettingsPage: FC = () => {
148153
<Button
149154
onClick={() => addOrganizationMutation.mutate({ name: newOrgName })}
150155
>
151-
Create new team
156+
Create new organization
152157
</Button>
153158
</Stack>
154159
</Margins>

‎site/src/pages/OrganizationSettingsPage/OrganizationSettingsPlaceholder.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const OrganizationSettingsPage: FC = () => {
2323
addOrganizationMutation.error ?? deleteOrganizationMutation.error;
2424

2525
return (
26-
<Margins verticalMargin={48}>
26+
<Margins css={{ marginTop: 48, marginBottom: 48 }}>
2727
{Boolean(error) && <ErrorAlert error={error} />}
2828

2929
<h1>Organization settings</h1>

‎site/src/pages/OrganizationSettingsPage/Sidebar.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ import { useOrganizationSettings } from "./OrganizationSettingsLayout";
1111
export const Sidebar: FC = () => {
1212
const { currentOrganizationId, organizations } = useOrganizationSettings();
1313

14-
// maybe do something nice to scroll to the active org
14+
// TODO: Do something nice to scroll to the active org.
1515

1616
return (
1717
<BaseSidebar>
1818
{organizations.map((organization) => (
19-
<OrganizationBloob
19+
<OrganizationSettingsNavigation
2020
key={organization.id}
2121
organization={organization}
2222
active={organization.id === currentOrganizationId}
@@ -35,7 +35,10 @@ function urlForSubpage(organizationName: string, subpage: string = ""): string {
3535
return `/organizations/${organizationName}/${subpage}`;
3636
}
3737

38-
export const OrganizationBloob: FC<BloobProps> = ({ organization, active }) => {
38+
export const OrganizationSettingsNavigation: FC<BloobProps> = ({
39+
organization,
40+
active,
41+
}) => {
3942
return (
4043
<>
4144
<SidebarNavItem

‎site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,21 @@ import {
3333
} from "utils/formUtils";
3434

3535
const MAX_DESCRIPTION_CHAR_LIMIT = 128;
36-
const MAX_DESCRIPTION_MESSAGE =
37-
"Please enter a description that is no longer than 128 characters.";
36+
const MAX_DESCRIPTION_MESSAGE = `Please enter a description that is no longer than ${MAX_DESCRIPTION_CHAR_LIMIT} characters.`;
3837

39-
export const getValidationSchema = (): Yup.AnyObjectSchema =>
40-
Yup.object({
41-
name: nameValidator("Name"),
42-
display_name: displayNameValidator("Display name"),
43-
description: Yup.string().max(
44-
MAX_DESCRIPTION_CHAR_LIMIT,
45-
MAX_DESCRIPTION_MESSAGE,
46-
),
47-
allow_user_cancel_workspace_jobs: Yup.boolean(),
48-
icon: iconValidator,
49-
require_active_version: Yup.boolean(),
50-
deprecation_message: Yup.string(),
51-
max_port_sharing_level: Yup.string().oneOf(WorkspaceAppSharingLevels),
52-
});
38+
export const validationSchema = Yup.object({
39+
name: nameValidator("Name"),
40+
display_name: displayNameValidator("Display name"),
41+
description: Yup.string().max(
42+
MAX_DESCRIPTION_CHAR_LIMIT,
43+
MAX_DESCRIPTION_MESSAGE,
44+
),
45+
allow_user_cancel_workspace_jobs: Yup.boolean(),
46+
icon: iconValidator,
47+
require_active_version: Yup.boolean(),
48+
deprecation_message: Yup.string(),
49+
max_port_sharing_level: Yup.string().oneOf(WorkspaceAppSharingLevels),
50+
});
5351

5452
export interface TemplateSettingsForm {
5553
template: Template;
@@ -75,7 +73,6 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
7573
advancedSchedulingEnabled,
7674
portSharingControlsEnabled,
7775
}) => {
78-
const validationSchema = getValidationSchema();
7976
const form = useFormik<UpdateTemplateMeta>({
8077
initialValues: {
8178
name: template.name,

‎site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.test.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
waitForLoaderToBeRemoved,
1111
} from "testHelpers/renderHelpers";
1212
import { server } from "testHelpers/server";
13-
import { getValidationSchema } from "./TemplateSettingsForm";
13+
import { validationSchema } from "./TemplateSettingsForm";
1414
import { TemplateSettingsPage } from "./TemplateSettingsPage";
1515

1616
type FormValues = Required<
@@ -116,19 +116,19 @@ describe("TemplateSettingsPage", () => {
116116
const values: UpdateTemplateMeta = {
117117
...validFormValues,
118118
description:
119-
"Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, port",
119+
"The quick brown fox jumps over the lazy dog repeatedly, enjoying the weather of the bright, summer day in the lush, scenic park.",
120120
};
121-
const validate = () => getValidationSchema().validateSync(values);
121+
const validate = () => validationSchema.validateSync(values);
122122
expect(validate).not.toThrowError();
123123
});
124124

125125
it("disallows a description of 128 + 1 chars", () => {
126126
const values: UpdateTemplateMeta = {
127127
...validFormValues,
128128
description:
129-
"Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, port a",
129+
"The quick brown fox jumps over the lazy dog multiple times, enjoying the warmth of the bright, sunny day in the lush, green park.",
130130
};
131-
const validate = () => getValidationSchema().validateSync(values);
131+
const validate = () => validationSchema.validateSync(values);
132132
expect(validate).toThrowError();
133133
});
134134

0 commit comments

Comments
 (0)