Jan 18, 2025 · Jan 17, 2025 · Jan 18, 2025 · Jan 18, 2025
diff --git a/site/e2e/helpers.ts b/site/e2e/helpers.ts
 * 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.getByRole("button", { name: /save/i }).click();
 await expectUrl(page).toHavePathName(`/groups/${name}`);
 await expectUrl(page).toHavePathName(`/deployment/groups/${name}`);
 return name;
 };

diff --git a/site/src/modules/management/DeploymentSidebarView.tsx b/site/src/modules/management/DeploymentSidebarView.tsx
 {permissions.viewAllUsers && (
 <SidebarNavItem href="/deployment/users">Users</SidebarNavItem>
 )}
 {permissions.viewAnyGroup && (
 <SidebarNavItem href="/deployment/groups">Groups</SidebarNavItem>
 )}
 {permissions.viewNotificationTemplate && (
 <SidebarNavItem href="/deployment/notifications">
 <div className="flex flex-row items-center gap-2">
diff --git a/site/src/pages/GroupsPage/CreateGroupPage.tsx b/site/src/pages/GroupsPage/CreateGroupPage.tsx
 <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
 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
 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
 canCreateGroup && (
 <Button
 component={RouterLink}
 to="/groups/create"
 to="/deployment/groups/create"
 startIcon={<AddOutlined />}
 variant="contained"
 >

 <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
 const navigate = useNavigate();

 const navigateToGroup = () => {
 navigate(`/groups/${groupName}`);
 navigate(`/deployment/groups/${groupName}`);
 };

 const helmet = (
 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
 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
 );
 };

 constgroupsRouter = () => {
 constorganizationGroupsRouter = () => {
 return (
 <Route path="groups">
 <Route index element={<OrganizationGroupsPage />} />

 <Route path=":organization" element={<OrganizationSidebarLayout />}>
 <Route index element={<OrganizationMembersPage />} />
 {groupsRouter()}
 {organizationGroupsRouter()}
 <Route path="roles">
 <Route index element={<OrganizationCustomRolesPage />} />
 <Route path="create" element={<CreateEditRolePage />} />

 <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 />}>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -293,13 +293,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.getByRole("button", { name: /save/i }).click();
		await expectUrl(page).toHavePathName(`/groups/${name}`);
		await expectUrl(page).toHavePathName(`/deployment/groups/${name}`);
		return name;
		};

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -99,6 +99,9 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
		{permissions.viewAllUsers && (
		<SidebarNavItem href="/deployment/users">Users</SidebarNavItem>
		)}
		{permissions.viewAnyGroup && (
		<SidebarNavItem href="/deployment/groups">Groups</SidebarNavItem>
		)}
		{permissions.viewNotificationTemplate && (
		<SidebarNavItem href="/deployment/notifications">
		<div className="flex flex-row items-center gap-2">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -50,7 +50,7 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
		initialTouched,
		});
		const getFieldHelpers = getFormHelpers<CreateGroupRequest>(form, error);
		const onCancel = () => navigate("/groups");
		const onCancel = () => navigate("/deployment/groups");

		return (
		<Margins>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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."));
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -80,7 +80,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
		canCreateGroup && (
		<Button
		component={RouterLink}
		to="/groups/create"
		to="/deployment/groups/create"
		startIcon={<AddOutlined />}
		variant="contained"
		>
Expand All		@@ -95,7 +95,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({

		<Cond>
		{groups?.map((group) => {
		const groupPageLink = `/groups/${group.name}`;
		const groupPageLink = `/deployment/groups/${group.name}`;

		return (
		<TableRow
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,7 +18,7 @@ export const SettingsGroupPage: FC = () => {
		const navigate = useNavigate();

		const navigateToGroup = () => {
		navigate(`/groups/${groupName}`);
		navigate(`/deployment/groups/${groupName}`);
		};

		const helmet = (
Expand DownExpand Up		@@ -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"));
		}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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 />
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -353,7 +353,7 @@ const templateRouter = () => {
		);
		};

		constgroupsRouter = () => {
		constorganizationGroupsRouter = () => {
		return (
		<Route path="groups">
		<Route index element={<OrganizationGroupsPage />} />
Expand DownExpand Up		@@ -433,7 +433,7 @@ export const router = createBrowserRouter(

		<Route path=":organization" element={<OrganizationSidebarLayout />}>
		<Route index element={<OrganizationMembersPage />} />
		{groupsRouter()}
		{organizationGroupsRouter()}
		<Route path="roles">
		<Route index element={<OrganizationCustomRolesPage />} />
		<Route path="create" element={<CreateEditRolePage />} />
Expand DownExpand Up		@@ -488,7 +488,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 />}>
Expand Down