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"); }); 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/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 && ( diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index 22ccd35515064..3ca28c31f59bf 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) => ( + + ))} + + + +
diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx index d2eebac62e5f4..dfbfa5029cbde 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)} + /> + ))} + + + + ); }; @@ -204,7 +204,7 @@ const RoleRow: FC = ({ const navigate = useNavigate(); return ( - + {role.display_name || role.name} 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/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 - - + + 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..8e447b8c05a4e 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,7 @@ import { MoreMenuTrigger, ThreeDotsButton, } from "components/MoreMenu/MoreMenu"; +import { TableCell, TableRow } from "components/Table/Table"; import { TableLoaderSkeleton, TableRowSkeleton,