From 553bdb877ec76a23a5b6b652a40290b88a397331 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 12 Feb 2025 19:03:46 +0000 Subject: [PATCH] chore: update table component and styles --- .../OrganizationMembersPageView.tsx | 176 ++++++++---------- .../UserTable/UserRoleCell.tsx | 7 +- .../UsersPage/UsersTable/UserGroupsCell.tsx | 12 +- 3 files changed, 86 insertions(+), 109 deletions(-) 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: