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"); }); pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: