Skip to content

Commit 0c2ddac

Browse files
aslilacaslilac
committed
better
1 parent 5ef6485 commit 0c2ddac

File tree

2 files changed

+104
-90
lines changed

2 files changed

+104
-90
lines changed

‎site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx

Lines changed: 39 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
HorizontalForm,
1414
} from "components/Form/Form";
1515
import { IconField } from "components/IconField/IconField";
16+
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
1617
import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
1718

1819
const validationSchema = Yup.object({
@@ -49,40 +50,45 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
4950
const onCancel = () => navigate(-1);
5051

5152
return (
52-
<HorizontalForm onSubmit={form.handleSubmit}>
53-
<FormSection
54-
title="Group settings"
55-
description="Set a name and avatar for this group."
56-
>
57-
<FormFields>
58-
{Boolean(error) && !isApiValidationError(error) && (
59-
<ErrorAlert error={error} />
60-
)}
53+
<>
54+
<PageHeader css={{ paddingTop: 8 }}>
55+
<PageHeaderTitle>Create a group</PageHeaderTitle>
56+
</PageHeader>
57+
<HorizontalForm onSubmit={form.handleSubmit}>
58+
<FormSection
59+
title="Group settings"
60+
description="Set a name and avatar for this group."
61+
>
62+
<FormFields>
63+
{Boolean(error) && !isApiValidationError(error) && (
64+
<ErrorAlert error={error} />
65+
)}
6166

62-
<TextField
63-
{...getFieldHelpers("name")}
64-
autoFocus
65-
fullWidth
66-
label="Name"
67-
/>
68-
<TextField
69-
{...getFieldHelpers("display_name", {
70-
helperText: "Optional: keep empty to default to the name.",
71-
})}
72-
fullWidth
73-
label="Display Name"
74-
/>
75-
<IconField
76-
{...getFieldHelpers("avatar_url")}
77-
onChange={onChangeTrimmed(form)}
78-
fullWidth
79-
label="Avatar URL"
80-
onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
81-
/>
82-
</FormFields>
83-
</FormSection>
84-
<FormFooter onCancel={onCancel} isLoading={isLoading} />
85-
</HorizontalForm>
67+
<TextField
68+
{...getFieldHelpers("name")}
69+
autoFocus
70+
fullWidth
71+
label="Name"
72+
/>
73+
<TextField
74+
{...getFieldHelpers("display_name", {
75+
helperText: "Optional: keep empty to default to the name.",
76+
})}
77+
fullWidth
78+
label="Display Name"
79+
/>
80+
<IconField
81+
{...getFieldHelpers("avatar_url")}
82+
onChange={onChangeTrimmed(form)}
83+
fullWidth
84+
label="Avatar URL"
85+
onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
86+
/>
87+
</FormFields>
88+
</FormSection>
89+
<FormFooter onCancel={onCancel} isLoading={isLoading} />
90+
</HorizontalForm>
91+
</>
8692
);
8793
};
8894
export default CreateGroupPageView;

‎site/src/pages/ManagementSettingsPage/GroupsPage/GroupSettingsPageView.tsx

Lines changed: 65 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
} from "components/Form/Form";
1212
import { IconField } from "components/IconField/IconField";
1313
import { Loader } from "components/Loader/Loader";
14+
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
1415
import {
1516
getFormHelpers,
1617
nameValidator,
@@ -58,65 +59,72 @@ const UpdateGroupForm: FC<UpdateGroupFormProps> = ({
5859
const getFieldHelpers = getFormHelpers<FormData>(form, errors);
5960

6061
return (
61-
<HorizontalForm onSubmit={form.handleSubmit}>
62-
<FormSection
63-
title="Group settings"
64-
description="Set a name and avatar for this group."
65-
>
66-
<FormFields>
67-
<TextField
68-
{...getFieldHelpers("name")}
69-
onChange={onChangeTrimmed(form)}
70-
autoComplete="name"
71-
autoFocus
72-
fullWidth
73-
label="Name"
74-
disabled={isEveryoneGroup(group)}
75-
/>
76-
{!isEveryoneGroup(group) && (
77-
<>
78-
<TextField
79-
{...getFieldHelpers("display_name", {
80-
helperText: "Optional: keep empty to default to the name.",
81-
})}
82-
autoComplete="display_name"
83-
autoFocus
84-
fullWidth
85-
label="Display Name"
86-
disabled={isEveryoneGroup(group)}
87-
/>
88-
<IconField
89-
{...getFieldHelpers("avatar_url")}
90-
onChange={onChangeTrimmed(form)}
91-
fullWidth
92-
label="Avatar URL"
93-
onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
94-
/>
95-
</>
96-
)}
97-
</FormFields>
98-
</FormSection>
99-
<FormSection
100-
title="Quota"
101-
description="You can use quotas to restrict how many resources a user can create."
102-
>
103-
<FormFields>
104-
<TextField
105-
{...getFieldHelpers("quota_allowance", {
106-
helperText: `This group gives ${form.values.quota_allowance} quota credits to each
62+
<>
63+
<PageHeader css={{ padding: "8px 0" }}>
64+
<PageHeaderTitle>{group.name}</PageHeaderTitle>
65+
</PageHeader>
66+
<HorizontalForm onSubmit={form.handleSubmit}>
67+
<FormSection
68+
title="Group settings"
69+
description="Set a name and avatar for this group."
70+
>
71+
<FormFields>
72+
<TextField
73+
{...getFieldHelpers("name")}
74+
onChange={onChangeTrimmed(form)}
75+
autoComplete="name"
76+
autoFocus
77+
fullWidth
78+
label="Name"
79+
disabled={isEveryoneGroup(group)}
80+
/>
81+
{!isEveryoneGroup(group) && (
82+
<>
83+
<TextField
84+
{...getFieldHelpers("display_name", {
85+
helperText: "Optional: keep empty to default to the name.",
86+
})}
87+
autoComplete="display_name"
88+
autoFocus
89+
fullWidth
90+
label="Display Name"
91+
disabled={isEveryoneGroup(group)}
92+
/>
93+
<IconField
94+
{...getFieldHelpers("avatar_url")}
95+
onChange={onChangeTrimmed(form)}
96+
fullWidth
97+
label="Avatar URL"
98+
onPickEmoji={(value) =>
99+
form.setFieldValue("avatar_url", value)
100+
}
101+
/>
102+
</>
103+
)}
104+
</FormFields>
105+
</FormSection>
106+
<FormSection
107+
title="Quota"
108+
description="You can use quotas to restrict how many resources a user can create."
109+
>
110+
<FormFields>
111+
<TextField
112+
{...getFieldHelpers("quota_allowance", {
113+
helperText: `This group gives ${form.values.quota_allowance} quota credits to each
107114
of its members.`,
108-
})}
109-
onChange={onChangeTrimmed(form)}
110-
autoFocus
111-
fullWidth
112-
type="number"
113-
label="Quota Allowance"
114-
/>
115-
</FormFields>
116-
</FormSection>
115+
})}
116+
onChange={onChangeTrimmed(form)}
117+
autoFocus
118+
fullWidth
119+
type="number"
120+
label="Quota Allowance"
121+
/>
122+
</FormFields>
123+
</FormSection>
117124

118-
<FormFooter onCancel={onCancel} isLoading={isLoading} />
119-
</HorizontalForm>
125+
<FormFooter onCancel={onCancel} isLoading={isLoading} />
126+
</HorizontalForm>
127+
</>
120128
);
121129
};
122130

0 commit comments

Comments
 (0)