Skip to content

feat: create and modify organization groups #13887

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.

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 14 commits into from
Jul 22, 2024
Prev Previous commit
Next Next commit
better
  • Loading branch information
aslilac committed Jul 18, 2024
commit 0c2ddac5ea74a6468425766dff9ee362f2714e81
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
HorizontalForm,
} from "components/Form/Form";
import { IconField } from "components/IconField/IconField";
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";

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

return (
<HorizontalForm onSubmit={form.handleSubmit}>
<FormSection
title="Group settings"
description="Set a name and avatar for this group."
>
<FormFields>
{Boolean(error) && !isApiValidationError(error) && (
<ErrorAlert error={error} />
)}
<>
<PageHeader css={{ paddingTop: 8 }}>
<PageHeaderTitle>Create a group</PageHeaderTitle>
</PageHeader>
<HorizontalForm onSubmit={form.handleSubmit}>
<FormSection
title="Group settings"
description="Set a name and avatar for this group."
>
<FormFields>
{Boolean(error) && !isApiValidationError(error) && (
<ErrorAlert error={error} />
)}

<TextField
{...getFieldHelpers("name")}
autoFocus
fullWidth
label="Name"
/>
<TextField
{...getFieldHelpers("display_name", {
helperText: "Optional: keep empty to default to the name.",
})}
fullWidth
label="Display Name"
/>
<IconField
{...getFieldHelpers("avatar_url")}
onChange={onChangeTrimmed(form)}
fullWidth
label="Avatar URL"
onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
/>
</FormFields>
</FormSection>
<FormFooter onCancel={onCancel} isLoading={isLoading} />
</HorizontalForm>
<TextField
{...getFieldHelpers("name")}
autoFocus
fullWidth
label="Name"
/>
<TextField
{...getFieldHelpers("display_name", {
helperText: "Optional: keep empty to default to the name.",
})}
fullWidth
label="Display Name"
/>
<IconField
{...getFieldHelpers("avatar_url")}
onChange={onChangeTrimmed(form)}
fullWidth
label="Avatar URL"
onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
/>
</FormFields>
</FormSection>
<FormFooter onCancel={onCancel} isLoading={isLoading} />
</HorizontalForm>
</>
);
};
export default CreateGroupPageView;
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
} from "components/Form/Form";
import { IconField } from "components/IconField/IconField";
import { Loader } from "components/Loader/Loader";
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
import {
getFormHelpers,
nameValidator,
Expand Down Expand Up @@ -58,65 +59,72 @@ const UpdateGroupForm: FC<UpdateGroupFormProps> = ({
const getFieldHelpers = getFormHelpers<FormData>(form, errors);

return (
<HorizontalForm onSubmit={form.handleSubmit}>
<FormSection
title="Group settings"
description="Set a name and avatar for this group."
>
<FormFields>
<TextField
{...getFieldHelpers("name")}
onChange={onChangeTrimmed(form)}
autoComplete="name"
autoFocus
fullWidth
label="Name"
disabled={isEveryoneGroup(group)}
/>
{!isEveryoneGroup(group) && (
<>
<TextField
{...getFieldHelpers("display_name", {
helperText: "Optional: keep empty to default to the name.",
})}
autoComplete="display_name"
autoFocus
fullWidth
label="Display Name"
disabled={isEveryoneGroup(group)}
/>
<IconField
{...getFieldHelpers("avatar_url")}
onChange={onChangeTrimmed(form)}
fullWidth
label="Avatar URL"
onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
/>
</>
)}
</FormFields>
</FormSection>
<FormSection
title="Quota"
description="You can use quotas to restrict how many resources a user can create."
>
<FormFields>
<TextField
{...getFieldHelpers("quota_allowance", {
helperText: `This group gives ${form.values.quota_allowance} quota credits to each
<>
<PageHeader css={{ padding: "8px 0" }}>
<PageHeaderTitle>{group.name}</PageHeaderTitle>
</PageHeader>
<HorizontalForm onSubmit={form.handleSubmit}>
<FormSection
title="Group settings"
description="Set a name and avatar for this group."
>
<FormFields>
<TextField
{...getFieldHelpers("name")}
onChange={onChangeTrimmed(form)}
autoComplete="name"
autoFocus
fullWidth
label="Name"
disabled={isEveryoneGroup(group)}
/>
{!isEveryoneGroup(group) && (
<>
<TextField
{...getFieldHelpers("display_name", {
helperText: "Optional: keep empty to default to the name.",
})}
autoComplete="display_name"
autoFocus
fullWidth
label="Display Name"
disabled={isEveryoneGroup(group)}
/>
<IconField
{...getFieldHelpers("avatar_url")}
onChange={onChangeTrimmed(form)}
fullWidth
label="Avatar URL"
onPickEmoji={(value) =>
form.setFieldValue("avatar_url", value)
}
/>
</>
)}
</FormFields>
</FormSection>
<FormSection
title="Quota"
description="You can use quotas to restrict how many resources a user can create."
>
<FormFields>
<TextField
{...getFieldHelpers("quota_allowance", {
helperText: `This group gives ${form.values.quota_allowance} quota credits to each
of its members.`,
})}
onChange={onChangeTrimmed(form)}
autoFocus
fullWidth
type="number"
label="Quota Allowance"
/>
</FormFields>
</FormSection>
})}
onChange={onChangeTrimmed(form)}
autoFocus
fullWidth
type="number"
label="Quota Allowance"
/>
</FormFields>
</FormSection>

<FormFooter onCancel={onCancel} isLoading={isLoading} />
</HorizontalForm>
<FormFooter onCancel={onCancel} isLoading={isLoading} />
</HorizontalForm>
</>
);
};

Expand Down
Loading