Feb 26, 2025 · Feb 26, 2025
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx
 <OrganizationMembersPageView
 allAvailableRoles={organizationRolesQuery.data}
 canEditMembers={organizationPermissions.editMembers}
 canViewMembers={organizationPermissions.viewMembers}
 error={
 membersQuery.error??
 organizationRolesQuery.error??
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx
 TableRow,
 } from "components/Table/Table";
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
 import { TriangleAlert } from "lucide-react";
 import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell";
 import { type FC, useState } from "react";
 import { TableColumnHelpTooltip } from "./UserTable/TableColumnHelpTooltip";
 interface OrganizationMembersPageViewProps {
 allAvailableRoles: readonly SlimRole[] | undefined;
 canEditMembers: boolean;
 canViewMembers: boolean;
 error: unknown;
 isAddingMember: boolean;
 isUpdatingMemberRoles: boolean;
 > = ({
 allAvailableRoles,
 canEditMembers,
 canViewMembers,
 error,
 isAddingMember,
 isUpdatingMemberRoles,
 return (
 <div>
 <SettingsHeader title="Members" />
 <Stack>
 <div className="flex flex-col gap-4">
 {Boolean(error) && <ErrorAlert error={error} />}

 {canEditMembers && (
 />
 )}

 {!canViewMembers && (
 <div className="flex flex-row text-content-warning gap-2 items-center text-sm font-medium">
 <TriangleAlert className="size-icon-sm" />
 <p>
 You do not have permission to view members other than yourself.
 </p>
 </div>
 )}

 <Table>
 <TableHeader>
 <TableRow>
 ))}
 </TableBody>
 </Table>
 </Stack>
 </div>
 </div>
 );
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -72,6 +72,7 @@ const OrganizationMembersPage: FC = () => {
		<OrganizationMembersPageView
		allAvailableRoles={organizationRolesQuery.data}
		canEditMembers={organizationPermissions.editMembers}
		canViewMembers={organizationPermissions.viewMembers}
		error={
		membersQuery.error??
		organizationRolesQuery.error??
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -28,6 +28,7 @@ import {
		TableRow,
		} from "components/Table/Table";
		import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
		import { TriangleAlert } from "lucide-react";
		import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell";
		import { type FC, useState } from "react";
		import { TableColumnHelpTooltip } from "./UserTable/TableColumnHelpTooltip";
Expand All		@@ -36,6 +37,7 @@ import { UserRoleCell } from "./UserTable/UserRoleCell";
		interface OrganizationMembersPageViewProps {
		allAvailableRoles: readonly SlimRole[] \| undefined;
		canEditMembers: boolean;
		canViewMembers: boolean;
		error: unknown;
		isAddingMember: boolean;
		isUpdatingMemberRoles: boolean;
Expand All		@@ -58,6 +60,7 @@ export const OrganizationMembersPageView: FC<
		> = ({
		allAvailableRoles,
		canEditMembers,
		canViewMembers,
		error,
		isAddingMember,
		isUpdatingMemberRoles,
Expand All		@@ -70,7 +73,7 @@ export const OrganizationMembersPageView: FC<
		return (
		<div>
		<SettingsHeader title="Members" />
		<Stack>
		<div className="flex flex-col gap-4">
		{Boolean(error) && <ErrorAlert error={error} />}

		{canEditMembers && (
Expand All		@@ -80,6 +83,15 @@ export const OrganizationMembersPageView: FC<
		/>
		)}

		{!canViewMembers && (
		<div className="flex flex-row text-content-warning gap-2 items-center text-sm font-medium">
		<TriangleAlert className="size-icon-sm" />
		<p>
		You do not have permission to view members other than yourself.
		</p>
		</div>
		)}

		<Table>
		<TableHeader>
		<TableRow>
Expand DownExpand Up		@@ -154,7 +166,7 @@ export const OrganizationMembersPageView: FC<
		))}
		</TableBody>
		</Table>
		</Stack>
		</div>
		</div>
		);
		};
Expand Down