From e2cdf2206b1353fb5ae2fd88c0c6f41f0d96fd7b Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 12 Mar 2025 00:40:30 +0000 Subject: [PATCH 1/8] chore: migrate to shadcn table --- site/src/pages/GroupsPage/GroupsPageView.tsx | 106 +++++++++---------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index 22ccd35515064..f1d6ae3f00587 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -3,12 +3,6 @@ import AddOutlined from "@mui/icons-material/AddOutlined"; import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight"; import AvatarGroup from "@mui/material/AvatarGroup"; import Skeleton from "@mui/material/Skeleton"; -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 type { Group } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; @@ -17,6 +11,14 @@ import { Button } from "components/Button/Button"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; import { Paywall } from "components/Paywall/Paywall"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "components/Table/Table"; import { TableLoaderSkeleton, TableRowSkeleton, @@ -51,55 +53,53 @@ export const GroupsPageView: FC = ({ /> - - - - - Name - Users - - - - - - - - +
+ + + Name + Users + + + + + + + + - - - - - - - Create group - - - ) - } - /> - - - + + + + + + + Create group + + + ) + } + /> + + + - - {groups?.map((group) => ( - - ))} - - - -
- + + {groups?.map((group) => ( + + ))} + + + + From eb79b33b3280671bf7c8912c177d8c2e8ca635c3 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 12 Mar 2025 18:49:34 +0000 Subject: [PATCH 2/8] chore: migrate to shadcn table --- .../CustomRolesPage/CustomRolesPageView.tsx | 132 +++++++++--------- 1 file changed, 66 insertions(+), 66 deletions(-) diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx index d2eebac62e5f4..893357af217b2 100644 --- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx @@ -3,12 +3,6 @@ import AddIcon from "@mui/icons-material/AddOutlined"; import AddOutlined from "@mui/icons-material/AddOutlined"; import Button from "@mui/material/Button"; import Skeleton from "@mui/material/Skeleton"; -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 type { AssignableRoles, Role } from "api/typesGenerated"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; @@ -21,6 +15,14 @@ import { } from "components/MoreMenu/MoreMenu"; import { Paywall } from "components/Paywall/Paywall"; import { Stack } from "components/Stack/Stack"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "components/Table/Table"; import { TableLoaderSkeleton, TableRowSkeleton, @@ -123,68 +125,66 @@ const RoleTable: FC = ({ const isLoading = roles === undefined; const isEmpty = Boolean(roles && roles.length === 0); return ( - - - - - Name - Permissions - - - - - - - - +
+ + + Name + Permissions + + + + + + + + - - - - } - variant="contained" - > - Create custom role - - ) - } - /> - - - + + + + } + variant="contained" + > + Create custom role + + ) + } + /> + + + - - {roles - ?.sort((a, b) => a.name.localeCompare(b.name)) - .map((role) => ( - onDeleteRole(role)} - /> - ))} - - - -
- + + {roles + ?.sort((a, b) => a.name.localeCompare(b.name)) + .map((role) => ( + onDeleteRole(role)} + /> + ))} + + + + ); }; From 21f77158be6744eff09e13a193ab814bd99fc3e1 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 12 Mar 2025 18:49:45 +0000 Subject: [PATCH 3/8] fix: use tablehead --- .../OrganizationMembersPageView.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx index 743e8a9381e15..6c85f57dd538d 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx @@ -24,6 +24,7 @@ import { Table, TableBody, TableCell, + TableHead, TableHeader, TableRow, } from "components/Table/Table"; @@ -95,20 +96,20 @@ export const OrganizationMembersPageView: FC< - User - + User + Roles - - + + Groups - - + + From bd5761a9c18e317ef5f74082d56fdb0962566595 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 12 Mar 2025 20:54:47 +0000 Subject: [PATCH 4/8] chore: update groups page table to shadcn --- site/src/pages/GroupsPage/GroupPage.tsx | 103 ++++++++++++------------ 1 file changed, 51 insertions(+), 52 deletions(-) diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx index 6c226a1dba9ff..f31ecf877a51d 100644 --- 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 && (
- - - User - Status - - - +
+ + + User + Status + + + - - {groupData?.members.length === 0 ? ( - - - - - - ) : ( - groupData?.members.map((member) => ( - { - 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."), - ); - } - }} + + {groupData?.members.length === 0 ? ( + + + - )) - )} - -
- + + + ) : ( + groupData?.members.map((member) => ( + { + 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."), + ); + } + }} + /> + )) + )} + + {groupQuery.data && ( From ecb2f3ce7fd407a656e24735e9a3d66db9b8869f Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 12 Mar 2025 20:55:25 +0000 Subject: [PATCH 5/8] chore: update users page table to shadcn --- .../pages/UsersPage/UsersTable/UsersTable.tsx | 108 +++++++++--------- .../UsersPage/UsersTable/UsersTableBody.tsx | 6 +- 2 files changed, 55 insertions(+), 59 deletions(-) diff --git a/site/src/pages/UsersPage/UsersTable/UsersTable.tsx b/site/src/pages/UsersPage/UsersTable/UsersTable.tsx index 1f47dd10d3291..b7655f23e3305 100644 --- a/site/src/pages/UsersPage/UsersTable/UsersTable.tsx +++ b/site/src/pages/UsersPage/UsersTable/UsersTable.tsx @@ -1,12 +1,13 @@ -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 type { GroupsByUserId } from "api/queries/groups"; import type * as TypesGen from "api/typesGenerated"; import { Stack } from "components/Stack/Stack"; +import { + Table, + TableBody, + TableHead, + TableHeader, + TableRow, +} from "components/Table/Table"; import type { FC } from "react"; import { TableColumnHelpTooltip } from "../../OrganizationSettingsPage/UserTable/TableColumnHelpTooltip"; import { UsersTableBody } from "./UsersTableBody"; @@ -65,57 +66,50 @@ export const UsersTable: FC = ({ groupsByUserId, }) => { return ( - - - - - {Language.usernameLabel} +
+ + + {Language.usernameLabel} + + + {Language.rolesLabel} + + + + + + {Language.groupsLabel} + + + + {Language.loginTypeLabel} + {Language.statusLabel} + {canEditUsers && } + + - - - {Language.rolesLabel} - - - - - - - {Language.groupsLabel} - - - - - {Language.loginTypeLabel} - {Language.statusLabel} - - {/* 1% is a trick to make the table cell width fit the content */} - {canEditUsers && } - - - - - - -
- + + + + ); }; diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx index 3f8d8b335dba5..7f224f90030ec 100644 --- a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx +++ b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx @@ -6,8 +6,6 @@ import PasswordOutlined from "@mui/icons-material/PasswordOutlined"; import ShieldOutlined from "@mui/icons-material/ShieldOutlined"; import Divider from "@mui/material/Divider"; import Skeleton from "@mui/material/Skeleton"; -import TableCell from "@mui/material/TableCell"; -import TableRow from "@mui/material/TableRow"; import type { GroupsByUserId } from "api/queries/groups"; import type * as TypesGen from "api/typesGenerated"; import { AvatarData } from "components/Avatar/AvatarData"; @@ -23,6 +21,10 @@ import { MoreMenuTrigger, ThreeDotsButton, } from "components/MoreMenu/MoreMenu"; +import { + TableCell, + TableRow, +} from "components/Table/Table"; import { TableLoaderSkeleton, TableRowSkeleton, From 5b100820e87bd9c167ad3c8ac7e6c7097853082f Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 12 Mar 2025 21:01:59 +0000 Subject: [PATCH 6/8] chore: cleanup --- .../IdpOrgSyncPage/IdpOrgSyncPageView.tsx | 7 ++++--- site/src/pages/GroupsPage/GroupsPageView.tsx | 6 +++--- .../IdpSyncPage/IdpMappingTable.tsx | 10 +++++++--- site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx | 5 +---- 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx index 5871cf98f21a5..aa39906f09370 100644 --- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx @@ -34,6 +34,7 @@ import { Table, TableBody, TableCell, + TableHead, TableHeader, TableRow, } from "components/Table/Table"; @@ -365,9 +366,9 @@ const IdpMappingTable: FC = ({ isEmpty, children }) => { - IdP organization - Coder organization - + IdP organization + Coder organization + diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index f1d6ae3f00587..3ca28c31f59bf 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -56,9 +56,9 @@ export const GroupsPageView: FC = ({
- Name - Users - + Name + Users + diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpMappingTable.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpMappingTable.tsx index 07785038f9a73..0a34b59c0cb39 100644 --- a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpMappingTable.tsx +++ b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpMappingTable.tsx @@ -27,9 +27,13 @@ export const IdpMappingTable: FC = ({
- IdP {type.toLocaleLowerCase()} - Coder {type.toLocaleLowerCase()} - + + IdP {type.toLocaleLowerCase()} + + + Coder {type.toLocaleLowerCase()} + + diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx index 7f224f90030ec..8e447b8c05a4e 100644 --- a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx +++ b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx @@ -21,10 +21,7 @@ import { MoreMenuTrigger, ThreeDotsButton, } from "components/MoreMenu/MoreMenu"; -import { - TableCell, - TableRow, -} from "components/Table/Table"; +import { TableCell, TableRow } from "components/Table/Table"; import { TableLoaderSkeleton, TableRowSkeleton, From a442ab31c2488f585d6a29a2edb579ae7d7e7c17 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Thu, 13 Mar 2025 17:47:10 +0000 Subject: [PATCH 7/8] fix: add table height --- .../CustomRolesPage/CustomRolesPageView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx index 893357af217b2..dfbfa5029cbde 100644 --- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx @@ -140,7 +140,7 @@ const RoleTable: FC = ({ - + = ({ const navigate = useNavigate(); return ( - + {role.display_name || role.name} From 6ae5b0f0e01b724b48e3049ac4138181e0760961 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Thu, 13 Mar 2025 20:20:47 +0000 Subject: [PATCH 8/8] fix: fix test --- site/e2e/tests/organizationGroups.spec.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/site/e2e/tests/organizationGroups.spec.ts b/site/e2e/tests/organizationGroups.spec.ts index 6e8aa74a4bf8b..9b3ea986aa580 100644 --- a/site/e2e/tests/organizationGroups.spec.ts +++ b/site/e2e/tests/organizationGroups.spec.ts @@ -105,8 +105,9 @@ test("change quota settings", async ({ page }) => { // Go to settings await login(page, orgUserAdmin); await page.goto(`/organizations/${org.name}/groups/${group.name}`); - await page.getByRole("button", { name: "Settings", exact: true }).click(); - expectUrl(page).toHavePathName( + + await page.getByRole("link", { name: "Settings", exact: true }).click(); + await expectUrl(page).toHavePathName( `/organizations/${org.name}/groups/${group.name}/settings`, ); @@ -115,11 +116,11 @@ test("change quota settings", async ({ page }) => { await page.getByRole("button", { name: /save/i }).click(); // We should get sent back to the group page afterwards - expectUrl(page).toHavePathName( + await expectUrl(page).toHavePathName( `/organizations/${org.name}/groups/${group.name}`, ); // ...and that setting should persist if we go back - await page.getByRole("button", { name: "Settings", exact: true }).click(); + await page.getByRole("link", { name: "Settings", exact: true }).click(); await expect(page.getByLabel("Quota Allowance")).toHaveValue("100"); });