have mercy on my soul

coder · aslilac · Jan 29, 2025 · Jan 22, 2025 · Jan 24, 2025 · Jan 24, 2025
commit 7791f86178d01b3c48786dcdb91acbee45390987
diff --git a/site/src/modules/management/OrganizationSettingsLayout.tsx b/site/src/modules/management/OrganizationSettingsLayout.tsx
@@ -60,10 +60,9 @@ const OrganizationSettingsLayout: FC = () => {
 	const canViewOrganizationSettingsPage =
 		permissions.viewDeploymentValues || permissions.editAnyOrganization;
 
-	const organization =
-		organizations && orgName
-			? organizations.find((org) => org.name === orgName)
-			: undefined;
+	const organization = orgName
+		? organizations.find((org) => org.name === orgName)
+		: undefined;
 
 	return (
 		<RequirePermission isFeatureVisible={canViewOrganizationSettingsPage}>

diff --git a/site/src/pages/GroupsPage/CreateGroupPage.tsx b/site/src/pages/GroupsPage/CreateGroupPage.tsx
@@ -2,14 +2,17 @@ import { createGroup } from "api/queries/groups";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQueryClient } from "react-query";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { pageTitle } from "utils/page";
 import CreateGroupPageView from "./CreateGroupPageView";
 
 export const CreateGroupPage: FC = () => {
 	const queryClient = useQueryClient();
 	const navigate = useNavigate();
-	const createGroupMutation = useMutation(createGroup(queryClient, "default"));
+	const { organization } = useParams() as { organization: string };
+	const createGroupMutation = useMutation(
+		createGroup(queryClient, organization ?? "default"),
+	);
 
 	return (
 		<>
@@ -19,7 +22,11 @@ export const CreateGroupPage: FC = () => {
 			<CreateGroupPageView
 				onSubmit={async (data) => {
 					const newGroup = await createGroupMutation.mutateAsync(data);
-					navigate(`/deployment/groups/${newGroup.name}`);
+					navigate(
+						organization
+							? `/organizations/${organization}/groups/${newGroup.name}`
+							: `/deployment/groups/${newGroup.name}`,
+					);
 				}}
 				error={createGroupMutation.error}
 				isLoading={createGroupMutation.isLoading}

diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx
@@ -4,7 +4,7 @@ import { mockApiError } from "testHelpers/entities";
 import { CreateGroupPageView } from "./CreateGroupPageView";
 
 const meta: Meta<typeof CreateGroupPageView> = {
-	title: "pages/GroupsPage/CreateGroupPageView",
+	title: "pages/OrganizationGroupsPage/CreateGroupPageView",
 	component: CreateGroupPageView,
 };
 
@@ -19,7 +19,15 @@ export const WithError: Story = {
 			message: "A group named new-group already exists.",
 			validations: [{ field: "name", detail: "Group names must be unique" }],
 		}),
-		initialTouched: { name: true },
+	},
+	play: async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+
+		await step("Enter name", async () => {
+			const input = canvas.getByLabelText("Name");
+			await userEvent.type(input, "new-group");
+			input.blur();
+		});
 	},
 };
 

diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
@@ -3,13 +3,16 @@ import { isApiValidationError } from "api/errors";
 import type { CreateGroupRequest } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Button } from "components/Button/Button";
-import { FormFooter } from "components/Form/Form";
-import { FullPageForm } from "components/FullPageForm/FullPageForm";
+import {
+	FormFields,
+	FormFooter,
+	FormSection,
+	HorizontalForm,
+} from "components/Form/Form";
 import { IconField } from "components/IconField/IconField";
-import { Margins } from "components/Margins/Margins";
+import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Spinner } from "components/Spinner/Spinner";
-import { Stack } from "components/Stack/Stack";
-import { type FormikTouched, useFormik } from "formik";
+import { useFormik } from "formik";
 import type { FC } from "react";
 import { useNavigate } from "react-router-dom";
 import {
@@ -27,15 +30,12 @@ export type CreateGroupPageViewProps = {
 	onSubmit: (data: CreateGroupRequest) => void;
 	error?: unknown;
 	isLoading: boolean;
-	// Helpful to show field errors on Storybook
-	initialTouched?: FormikTouched<CreateGroupRequest>;
 };
 
 export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
 	onSubmit,
 	error,
 	isLoading,
-	initialTouched,
 }) => {
 	const navigate = useNavigate();
 	const form = useFormik<CreateGroupRequest>({
@@ -47,16 +47,23 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
 		},
 		validationSchema,
 		onSubmit,
-		initialTouched,
 	});
 	const getFieldHelpers = getFormHelpers<CreateGroupRequest>(form, error);
-	const onCancel = () => navigate("/deployment/groups");
+	const onCancel = () => navigate(-1);
 
 	return (
-		<Margins>
-			<FullPageForm title="Create group">
-				<form onSubmit={form.handleSubmit}>
-					<Stack spacing={2.5}>
+		<>
+			<SettingsHeader
+				title="New Group"
+				description="Create a group in this organization."
+			/>
+
+			<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} />
 						)}
@@ -84,21 +91,21 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
 							label="Avatar URL"
 							onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
 						/>
-					</Stack>
+					</FormFields>
+				</FormSection>
 
-					<FormFooter className="mt-8">
-						<Button onClick={onCancel} variant="outline">
-							Cancel
-						</Button>
+				<FormFooter>
+					<Button onClick={onCancel} variant="outline">
+						Cancel
+					</Button>
 
-						<Button type="submit" disabled={isLoading}>
-							{isLoading && <Spinner />}
-							Save
-						</Button>
-					</FormFooter>
-				</form>
-			</FullPageForm>
-		</Margins>
+					<Button type="submit" disabled={isLoading}>
+						<Spinner loading={isLoading} />
+						Save
+					</Button>
+				</FormFooter>
+			</HorizontalForm>
+		</>
 	);
 };
 export default CreateGroupPageView;
diff --git a/...ingsPage/GroupsPage/GroupPage.stories.tsx → ...rc/pages/GroupsPage/GroupPage.stories.tsx b/...ingsPage/GroupsPage/GroupPage.stories.tsx → ...rc/pages/GroupsPage/GroupPage.stories.tsx