diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx index 1cc009e1f4de7..72737a92c3ebe 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx @@ -1,14 +1,6 @@ -import type { Interpolation, Theme } from "@emotion/react"; import PersonAdd from "@mui/icons-material/PersonAdd"; import LoadingButton from "@mui/lab/LoadingButton"; -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 type { GroupsByUserId } from "api/queries/groups"; import type { Group, OrganizationMemberWithUserData, @@ -28,6 +20,13 @@ import { } from "components/MoreMenu/MoreMenu"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; +import { + Table, + TableBody, + TableCell, + TableHeader, + TableRow, +} from "components/Table/Table"; import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell"; import { type FC, useState } from "react"; @@ -80,83 +79,80 @@ export const OrganizationMembersPageView: FC< onSubmit={addMember} /> )} - - - - - - User - - - Roles - - +

+ + + User + + + Roles + + + + + + Groups + + + + + + + + {members?.map((member) => ( + + + + } + title={member.name || member.username} + subtitle={member.email} + /> - - - Groups - - + { + try { + await updateMemberRoles(member, roles); + displaySuccess("Roles updated successfully."); + } catch (error) { + displayError( + getErrorMessage(error, "Failed to update roles."), + ); + } + }} + /> + + + {member.user_id !== me.id && canEditMembers && ( + + + + + + removeMember(member)} + > + Remove + + + + )} - - - - {members?.map((member) => ( - - - - } - title={member.name || member.username} - subtitle={member.email} - /> - - { - try { - await updateMemberRoles(member, roles); - displaySuccess("Roles updated successfully."); - } catch (error) { - displayError( - getErrorMessage(error, "Failed to update roles."), - ); - } - }} - /> - - - {member.user_id !== me.id && canEditMembers && ( - - - - - - removeMember(member)} - > - Remove - - - - )} - - - ))} - -

- + ))} + + ); @@ -190,7 +186,7 @@ const AddOrganizationMember: FC = ({ > { setSelectedUser(newValue); @@ -210,17 +206,3 @@ const AddOrganizationMember: FC = ({ ); }; - -const styles = { - role: (theme) => ({ - backgroundColor: theme.roles.notice.background, - borderColor: theme.roles.notice.outline, - }), - globalRole: (theme) => ({ - backgroundColor: theme.roles.inactive.background, - borderColor: theme.roles.inactive.outline, - }), - autoComplete: { - width: 300, - }, -} satisfies Record>; diff --git a/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx b/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx index 88f66af485960..4c350f6ffb5be 100644 --- a/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx +++ b/site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx @@ -14,11 +14,10 @@ * users like that, though, know that it will be painful */ import { type Interpolation, type Theme, useTheme } from "@emotion/react"; -import Stack from "@mui/material/Stack"; -import TableCell from "@mui/material/TableCell"; import Tooltip from "@mui/material/Tooltip"; import type { LoginType, SlimRole } from "api/typesGenerated"; import { Pill } from "components/Pill/Pill"; +import { TableCell } from "components/Table/Table"; import { Popover, PopoverContent, @@ -59,7 +58,7 @@ export const UserRoleCell: FC = ({ return ( - +

{canEditUsers && ( = ({ {extraRoles.length > 0 && } - +

); }; diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx index 00f135abb2bdc..c7c4586c0ec51 100644 --- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx +++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx @@ -2,11 +2,10 @@ import { useTheme } from "@emotion/react"; import GroupIcon from "@mui/icons-material/Group"; import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; -import TableCell from "@mui/material/TableCell"; import type { Group } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { OverflowY } from "components/OverflowY/OverflowY"; -import { Stack } from "components/Stack/Stack"; +import { TableCell } from "components/Table/Table"; import { Popover, PopoverContent, @@ -40,12 +39,9 @@ export const UserGroupsCell: FC = ({ userGroups }) => { color: "inherit", lineHeight: "1", }} + type="button" > - +

= ({ userGroups }) => { {userGroups.length} Group{userGroups.length !== 1 && "s"} - +

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: