coder · bpmct · Jan 18, 2025 · Jan 18, 2025 · Jan 18, 2025 · Jan 18, 2025
diff --git a/site/e2e/helpers.ts b/site/e2e/helpers.ts
@@ -232,13 +232,15 @@ export const createTemplate = async (
  * random name.
  */
 export const createGroup = async (page: Page): Promise<string> => {
-	await page.goto("/groups/create", { waitUntil: "domcontentloaded" });
-	await expectUrl(page).toHavePathName("/groups/create");
+	await page.goto("/deployment/groups/create", {
+		waitUntil: "domcontentloaded",
+	});
+	await expectUrl(page).toHavePathName("/deployment/groups/create");
 
 	const name = randomName();
 	await page.getByLabel("Name", { exact: true }).fill(name);
 	await page.getByTestId("form-submit").click();
-	await expectUrl(page).toHavePathName(`/groups/${name}`);
+	await expectUrl(page).toHavePathName(`/deployment/groups/${name}`);
 	return name;
 };
 

diff --git a/site/src/modules/management/SidebarView.tsx b/site/src/modules/management/SidebarView.tsx
@@ -147,6 +147,9 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
 					{permissions.viewAllUsers && (
 						<SidebarNavSubItem href="users">Users</SidebarNavSubItem>
 					)}
+					{permissions.viewAnyGroup && (
+						<SidebarNavSubItem href="groups">Groups</SidebarNavSubItem>
+					)}
 					{permissions.viewNotificationTemplate && (
 						<SidebarNavSubItem href="notifications">
 							<Stack direction="row" alignItems="center" spacing={1}>

diff --git a/site/src/pages/GroupsPage/CreateGroupPage.tsx b/site/src/pages/GroupsPage/CreateGroupPage.tsx
@@ -19,7 +19,7 @@ export const CreateGroupPage: FC = () => {
 			<CreateGroupPageView
 				onSubmit={async (data) => {
 					const newGroup = await createGroupMutation.mutateAsync(data);
-					navigate(`/groups/${newGroup.name}`);
+					navigate(`/deployment/groups/${newGroup.name}`);
 				}}
 				error={createGroupMutation.error}
 				isLoading={createGroupMutation.isLoading}

diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
@@ -44,7 +44,7 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
 		initialTouched,
 	});
 	const getFieldHelpers = getFormHelpers<CreateGroupRequest>(form, error);
-	const onCancel = () => navigate("/groups");
+	const onCancel = () => navigate("/deployment/groups");
 
 	return (
 		<Margins>

diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -211,7 +211,7 @@ export const GroupPage: FC = () => {
 						try {
 							await deleteGroupMutation.mutateAsync(groupId);
 							displaySuccess("Group deleted successfully.");
-							navigate("/groups");
+							navigate("/deployment/groups");
 						} catch (error) {
 							displayError(getErrorMessage(error, "Failed to delete group."));
 						}

diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx
@@ -81,7 +81,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
 														canCreateGroup && (
 															<Button
 																component={RouterLink}
-																to="/groups/create"
+																to="/deployment/groups/create"
 																startIcon={<AddOutlined />}
 																variant="contained"
 															>
@@ -96,7 +96,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
 
 									<Cond>
 										{groups?.map((group) => {
-											const groupPageLink = `/groups/${group.name}`;
+											const groupPageLink = `/deployment/groups/${group.name}`;
 
 											return (
 												<TableRow

diff --git a/site/src/pages/GroupsPage/SettingsGroupPage.tsx b/site/src/pages/GroupsPage/SettingsGroupPage.tsx
@@ -18,7 +18,7 @@ export const SettingsGroupPage: FC = () => {
 	const navigate = useNavigate();
 
 	const navigateToGroup = () => {
-		navigate(`/groups/${groupName}`);
+		navigate(`/deployment/groups/${groupName}`);
 	};
 
 	const helmet = (
@@ -56,7 +56,7 @@ export const SettingsGroupPage: FC = () => {
 							add_users: [],
 							remove_users: [],
 						});
-						navigate(`/groups/${data.name}`, { replace: true });
+						navigate(`/deployment/groups/${data.name}`, { replace: true });
 					} catch (error) {
 						displayError(getErrorMessage(error, "Failed to update group"));
 					}

diff --git a/site/src/pages/UsersPage/UsersLayout.tsx b/site/src/pages/UsersPage/UsersLayout.tsx
@@ -1,80 +1,39 @@
 import GroupAdd from "@mui/icons-material/GroupAddOutlined";
-import PersonAdd from "@mui/icons-material/PersonAddOutlined";
 import Button from "@mui/material/Button";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
-import { TAB_PADDING_Y, TabLink, Tabs, TabsList } from "components/Tabs/Tabs";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
-import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
-import { linkToUsers } from "modules/navigation";
 import { type FC, Suspense } from "react";
-import {
-	Outlet,
-	Link as RouterLink,
-	useLocation,
-	useNavigate,
-} from "react-router-dom";
+import { Outlet, Link as RouterLink } from "react-router-dom";
 
 export const UsersLayout: FC = () => {
 	const { permissions } = useAuthenticated();
-	const { showOrganizations } = useDashboard();
-	const navigate = useNavigate();
 	const feats = useFeatureVisibility();
-	const location = useLocation();
-	const activeTab = location.pathname.endsWith("groups") ? "groups" : "users";
 
 	return (
 		<>
 			<Margins>
 				<PageHeader
 					actions={
-						<>
-							{permissions.createUser && (
-								<Button
-									onClick={() => {
-										navigate("/users/create");
-									}}
-									startIcon={<PersonAdd />}
-								>
-									Create user
-								</Button>
-							)}
+						<div>
 							{permissions.createGroup && feats.template_rbac && (
 								<Button
 									component={RouterLink}
 									startIcon={<GroupAdd />}
-									to="/groups/create"
+									to="/deployment/groups/create"
 								>
 									Create group
 								</Button>
 							)}
-						</>
+						</div>
 					}
 				>
-					<PageHeaderTitle>Users</PageHeaderTitle>
+					<PageHeaderTitle>Groups</PageHeaderTitle>
 				</PageHeader>
 			</Margins>
 
-			{!showOrganizations && (
-				<Tabs
-					css={{ marginBottom: 40, marginTop: -TAB_PADDING_Y }}
-					active={activeTab}
-				>
-					<Margins>
-						<TabsList>
-							<TabLink to={linkToUsers} value="users">
-								Users
-							</TabLink>
-							<TabLink to="/groups" value="groups">
-								Groups
-							</TabLink>
-						</TabsList>
-					</Margins>
-				</Tabs>
-			)}
-
 			<Margins>
 				<Suspense fallback={<Loader />}>
 					<Outlet />

diff --git a/site/src/router.tsx b/site/src/router.tsx
@@ -342,7 +342,7 @@ const templateRouter = () => {
 	);
 };
 
-const groupsRouter = () => {
+const organizationGroupsRouter = () => {
 	return (
 		<Route path="groups">
 			<Route index element={<OrganizationGroupsPage />} />
@@ -420,7 +420,7 @@ export const router = createBrowserRouter(
 						<Route path=":organization">
 							<Route index element={<OrganizationSettingsPage />} />
 							<Route path="members" element={<OrganizationMembersPage />} />
-							{groupsRouter()}
+							{organizationGroupsRouter()}
 							<Route path="roles">
 								<Route index element={<OrganizationCustomRolesPage />} />
 								<Route path="create" element={<CreateEditRolePage />} />
@@ -473,7 +473,18 @@ export const router = createBrowserRouter(
 
 						<Route path="users" element={<UsersPage />} />
 						<Route path="users/create" element={<CreateUserPage />} />
-						{groupsRouter()}
+						<Route path="groups">
+							<Route element={<UsersLayout />}>
+								<Route index element={<GroupsPage />} />
+							</Route>
+
+							<Route path="create" element={<CreateGroupPage />} />
+							<Route path=":groupName" element={<GroupPage />} />
+							<Route
+								path=":groupName/settings"
+								element={<SettingsGroupPage />}
+							/>
+						</Route>
 					</Route>
 
 					<Route path="/settings" element={<UserSettingsLayout />}>