chore: update groups page table to shadcn

jaaydenh · jaaydenh · commit bd5761a9c18e · 2025-03-12T20:54:47.000Z
diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -4,12 +4,6 @@ import PersonAdd from "@mui/icons-material/PersonAdd";
 import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
 import LoadingButton from "@mui/lab/LoadingButton";
 import Button from "@mui/material/Button";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
 import { getErrorMessage } from "api/errors";
 import {
 	addMember,
@@ -40,6 +34,14 @@ import {
 } from "components/MoreMenu/MoreMenu";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "components/Table/Table";
 import {
 	PaginationStatus,
 	TableToolbar,
@@ -111,7 +113,6 @@ export const GroupPage: FC = () => {
 				{canUpdateGroup && (
 					<Stack direction="row" spacing={2}>
 						<Button
-							role="button"
 							component={RouterLink}
 							startIcon={<SettingsOutlined />}
 							to="settings"
@@ -160,53 +161,51 @@ export const GroupPage: FC = () => {
 					/>
 				</TableToolbar>
 
-				<TableContainer>
-					<Table>
-						<TableHead>
-							<TableRow>
-								<TableCell width="59%">User</TableCell>
-								<TableCell width="40">Status</TableCell>
-								<TableCell width="1%" />
-							</TableRow>
-						</TableHead>
+				<Table>
+					<TableHeader>
+						<TableRow>
+							<TableHead className="w-2/5">User</TableHead>
+							<TableHead className="w-3/5">Status</TableHead>
+							<TableHead className="w-auto" />
+						</TableRow>
+					</TableHeader>
 
-						<TableBody>
-							{groupData?.members.length === 0 ? (
-								<TableRow>
-									<TableCell colSpan={999}>
-										<EmptyState
-											message="No members yet"
-											description="Add a member using the controls above"
-										/>
-									</TableCell>
-								</TableRow>
-							) : (
-								groupData?.members.map((member) => (
-									<GroupMemberRow
-										member={member}
-										group={groupData}
-										key={member.id}
-										canUpdate={canUpdateGroup}
-										onRemove={async () => {
-											try {
-												await removeMemberMutation.mutateAsync({
-													groupId: groupData.id,
-													userId: member.id,
-												});
-												await groupQuery.refetch();
-												displaySuccess("Member removed successfully.");
-											} catch (error) {
-												displayError(
-													getErrorMessage(error, "Failed to remove member."),
-												);
-											}
-										}}
+					<TableBody>
+						{groupData?.members.length === 0 ? (
+							<TableRow>
+								<TableCell colSpan={999}>
+									<EmptyState
+										message="No members yet"
+										description="Add a member using the controls above"
 									/>
-								))
-							)}
-						</TableBody>
-					</Table>
-				</TableContainer>
+								</TableCell>
+							</TableRow>
+						) : (
+							groupData?.members.map((member) => (
+								<GroupMemberRow
+									member={member}
+									group={groupData}
+									key={member.id}
+									canUpdate={canUpdateGroup}
+									onRemove={async () => {
+										try {
+											await removeMemberMutation.mutateAsync({
+												groupId: groupData.id,
+												userId: member.id,
+											});
+											await groupQuery.refetch();
+											displaySuccess("Member removed successfully.");
+										} catch (error) {
+											displayError(
+												getErrorMessage(error, "Failed to remove member."),
+											);
+										}
+									}}
+								/>
+							))
+						)}
+					</TableBody>
+				</Table>
 			</Stack>
 
 			{groupQuery.data && (
