Jul 22, 2024 · Jul 12, 2024 · Jul 17, 2024 · Jul 17, 2024 · Jul 17, 2024 · Jul 17, 2024
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx
 import { isApiValidationError } from "api/errors";
 import type { CreateGroupRequest } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { FormFooter } from "components/FormFooter/FormFooter";
 import { FullPageForm } from "components/FullPageForm/FullPageForm";
 import { IconField } from "components/IconField/IconField";
 import { Margins } from "components/Margins/Margins";
 import { Stack } from "components/Stack/Stack";
 import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
 import {
  FormFields,
  FormFooter,
  FormSection,
  HorizontalForm,
 } from "components/Form/Form";

 const validationSchema = Yup.object({
  name: Yup.string().required().label("Name"),
  const onCancel = () => navigate(-1);

  return (
    <Margins>
      <FullPageForm title="Create group">
        <form onSubmit={form.handleSubmit}>
          <Stack spacing={2.5}>
            {Boolean(error) && !isApiValidationError(error) && (
              <ErrorAlert error={error} />
            )}
    <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)}
            />
          </Stack>
          <FormFooter onCancel={onCancel} isLoading={isLoading} />
        </form>
      </FullPageForm>
    </Margins>
          <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		@@ -6,12 +6,14 @@ import * as Yup from "yup";
		import { isApiValidationError } from "api/errors";
		import type { CreateGroupRequest } from "api/typesGenerated";
		import { ErrorAlert } from "components/Alert/ErrorAlert";
		import { FormFooter } from "components/FormFooter/FormFooter";
		import { FullPageForm } from "components/FullPageForm/FullPageForm";
		import { IconField } from "components/IconField/IconField";
		import { Margins } from "components/Margins/Margins";
		import { Stack } from "components/Stack/Stack";
		import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
		import {
		FormFields,
		FormFooter,
		FormSection,
		HorizontalForm,
		} from "components/Form/Form";

		const validationSchema = Yup.object({
		name: Yup.string().required().label("Name"),
Expand DownExpand Up		@@ -47,39 +49,40 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
		const onCancel = () => navigate(-1);

		return (
		<Margins>
		<FullPageForm title="Create group">
		<form onSubmit={form.handleSubmit}>
		<Stack spacing={2.5}>
		{Boolean(error) && !isApiValidationError(error) && (
		<ErrorAlert error={error} />
		)}
		<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)}
		/>
		</Stack>
		<FormFooter onCancel={onCancel} isLoading={isLoading} />
		</form>
		</FullPageForm>
		</Margins>
		<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;