Skip to content

Commit ea1358c

Browse files
jaaydenhjaaydenh
authored
chore: update table component and styles (#16541)
- migrate styles to tailwind - migrate to new Table component
1 parent f1c2605 commit ea1358c

File tree

3 files changed

+86
-109
lines changed

3 files changed

+86
-109
lines changed

‎site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx

Lines changed: 79 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
1-
import type { Interpolation, Theme } from "@emotion/react";
21
import PersonAdd from "@mui/icons-material/PersonAdd";
32
import LoadingButton from "@mui/lab/LoadingButton";
4-
import Table from "@mui/material/Table";
5-
import TableBody from "@mui/material/TableBody";
6-
import TableCell from "@mui/material/TableCell";
7-
import TableContainer from "@mui/material/TableContainer";
8-
import TableHead from "@mui/material/TableHead";
9-
import TableRow from "@mui/material/TableRow";
103
import { getErrorMessage } from "api/errors";
11-
import type { GroupsByUserId } from "api/queries/groups";
124
import type {
135
Group,
146
OrganizationMemberWithUserData,
@@ -28,6 +20,13 @@ import {
2820
} from "components/MoreMenu/MoreMenu";
2921
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
3022
import { Stack } from "components/Stack/Stack";
23+
import {
24+
Table,
25+
TableBody,
26+
TableCell,
27+
TableHeader,
28+
TableRow,
29+
} from "components/Table/Table";
3130
import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
3231
import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell";
3332
import { type FC, useState } from "react";
@@ -80,83 +79,80 @@ export const OrganizationMembersPageView: FC<
8079
onSubmit={addMember}
8180
/>
8281
)}
83-
84-
<TableContainer>
85-
<Table>
86-
<TableHead>
87-
<TableRow>
88-
<TableCell width="33%">User</TableCell>
89-
<TableCell width="33%">
90-
<Stack direction="row" spacing={1} alignItems="center">
91-
<span>Roles</span>
92-
<TableColumnHelpTooltip variant="roles" />
93-
</Stack>
82+
<Table>
83+
<TableHeader>
84+
<TableRow>
85+
<TableCell width="33%">User</TableCell>
86+
<TableCell width="33%">
87+
<Stack direction="row" spacing={1} alignItems="center">
88+
<span>Roles</span>
89+
<TableColumnHelpTooltip variant="roles" />
90+
</Stack>
91+
</TableCell>
92+
<TableCell width="33%">
93+
<Stack direction="row" spacing={1} alignItems="center">
94+
<span>Groups</span>
95+
<TableColumnHelpTooltip variant="groups" />
96+
</Stack>
97+
</TableCell>
98+
<TableCell width="1%" />
99+
</TableRow>
100+
</TableHeader>
101+
<TableBody>
102+
{members?.map((member) => (
103+
<TableRow key={member.user_id} className="align-baseline">
104+
<TableCell>
105+
<AvatarData
106+
avatar={
107+
<Avatar
108+
fallback={member.username}
109+
src={member.avatar_url}
110+
/>
111+
}
112+
title={member.name || member.username}
113+
subtitle={member.email}
114+
/>
94115
</TableCell>
95-
<TableCell width="33%">
96-
<Stack direction="row" spacing={1} alignItems="center">
97-
<span>Groups</span>
98-
<TableColumnHelpTooltip variant="groups" />
99-
</Stack>
116+
<UserRoleCell
117+
inheritedRoles={member.global_roles}
118+
roles={member.roles}
119+
allAvailableRoles={allAvailableRoles}
120+
oidcRoleSyncEnabled={false}
121+
isLoading={isUpdatingMemberRoles}
122+
canEditUsers={canEditMembers}
123+
onEditRoles={async (roles) => {
124+
try {
125+
await updateMemberRoles(member, roles);
126+
displaySuccess("Roles updated successfully.");
127+
} catch (error) {
128+
displayError(
129+
getErrorMessage(error, "Failed to update roles."),
130+
);
131+
}
132+
}}
133+
/>
134+
<UserGroupsCell userGroups={member.groups} />
135+
<TableCell>
136+
{member.user_id !== me.id && canEditMembers && (
137+
<MoreMenu>
138+
<MoreMenuTrigger>
139+
<ThreeDotsButton />
140+
</MoreMenuTrigger>
141+
<MoreMenuContent>
142+
<MoreMenuItem
143+
danger
144+
onClick={() => removeMember(member)}
145+
>
146+
Remove
147+
</MoreMenuItem>
148+
</MoreMenuContent>
149+
</MoreMenu>
150+
)}
100151
</TableCell>
101-
<TableCell width="1%" />
102152
</TableRow>
103-
</TableHead>
104-
<TableBody>
105-
{members?.map((member) => (
106-
<TableRow key={member.user_id}>
107-
<TableCell>
108-
<AvatarData
109-
avatar={
110-
<Avatar
111-
fallback={member.username}
112-
src={member.avatar_url}
113-
/>
114-
}
115-
title={member.name || member.username}
116-
subtitle={member.email}
117-
/>
118-
</TableCell>
119-
<UserRoleCell
120-
inheritedRoles={member.global_roles}
121-
roles={member.roles}
122-
allAvailableRoles={allAvailableRoles}
123-
oidcRoleSyncEnabled={false}
124-
isLoading={isUpdatingMemberRoles}
125-
canEditUsers={canEditMembers}
126-
onEditRoles={async (roles) => {
127-
try {
128-
await updateMemberRoles(member, roles);
129-
displaySuccess("Roles updated successfully.");
130-
} catch (error) {
131-
displayError(
132-
getErrorMessage(error, "Failed to update roles."),
133-
);
134-
}
135-
}}
136-
/>
137-
<UserGroupsCell userGroups={member.groups} />
138-
<TableCell>
139-
{member.user_id !== me.id && canEditMembers && (
140-
<MoreMenu>
141-
<MoreMenuTrigger>
142-
<ThreeDotsButton />
143-
</MoreMenuTrigger>
144-
<MoreMenuContent>
145-
<MoreMenuItem
146-
danger
147-
onClick={() => removeMember(member)}
148-
>
149-
Remove
150-
</MoreMenuItem>
151-
</MoreMenuContent>
152-
</MoreMenu>
153-
)}
154-
</TableCell>
155-
</TableRow>
156-
))}
157-
</TableBody>
158-
</Table>
159-
</TableContainer>
153+
))}
154+
</TableBody>
155+
</Table>
160156
</Stack>
161157
</div>
162158
);
@@ -190,7 +186,7 @@ const AddOrganizationMember: FC<AddOrganizationMemberProps> = ({
190186
>
191187
<Stack direction="row" alignItems="center" spacing={1}>
192188
<UserAutocomplete
193-
css={styles.autoComplete}
189+
className="w-[300px]"
194190
value={selectedUser}
195191
onChange={(newValue) => {
196192
setSelectedUser(newValue);
@@ -210,17 +206,3 @@ const AddOrganizationMember: FC<AddOrganizationMemberProps> = ({
210206
</form>
211207
);
212208
};
213-
214-
const styles = {
215-
role: (theme) => ({
216-
backgroundColor: theme.roles.notice.background,
217-
borderColor: theme.roles.notice.outline,
218-
}),
219-
globalRole: (theme) => ({
220-
backgroundColor: theme.roles.inactive.background,
221-
borderColor: theme.roles.inactive.outline,
222-
}),
223-
autoComplete: {
224-
width: 300,
225-
},
226-
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/OrganizationSettingsPage/UserTable/UserRoleCell.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,10 @@
1414
* users like that, though, know that it will be painful
1515
*/
1616
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
17-
import Stack from "@mui/material/Stack";
18-
import TableCell from "@mui/material/TableCell";
1917
import Tooltip from "@mui/material/Tooltip";
2018
import type { LoginType, SlimRole } from "api/typesGenerated";
2119
import { Pill } from "components/Pill/Pill";
20+
import { TableCell } from "components/Table/Table";
2221
import {
2322
Popover,
2423
PopoverContent,
@@ -59,7 +58,7 @@ export const UserRoleCell: FC<UserRoleCellProps> = ({
5958

6059
return (
6160
<TableCell>
62-
<Stack direction="row" spacing={1}>
61+
<div className="flex flex-row gap-1 items-center">
6362
{canEditUsers && (
6463
<EditRolesButton
6564
roles={sortRolesByAccessLevel(allAvailableRoles ?? [])}
@@ -97,7 +96,7 @@ export const UserRoleCell: FC<UserRoleCellProps> = ({
9796
</Pill>
9897

9998
{extraRoles.length > 0 && <OverflowRolePill roles={extraRoles} />}
100-
</Stack>
99+
</div>
101100
</TableCell>
102101
);
103102
};

‎site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ import { useTheme } from "@emotion/react";
22
import GroupIcon from "@mui/icons-material/Group";
33
import List from "@mui/material/List";
44
import ListItem from "@mui/material/ListItem";
5-
import TableCell from "@mui/material/TableCell";
65
import type { Group } from "api/typesGenerated";
76
import { Avatar } from "components/Avatar/Avatar";
87
import { OverflowY } from "components/OverflowY/OverflowY";
9-
import { Stack } from "components/Stack/Stack";
8+
import { TableCell } from "components/Table/Table";
109
import {
1110
Popover,
1211
PopoverContent,
@@ -40,12 +39,9 @@ export const UserGroupsCell: FC<GroupsCellProps> = ({ userGroups }) => {
4039
color: "inherit",
4140
lineHeight: "1",
4241
}}
42+
type="button"
4343
>
44-
<Stack
45-
spacing={0}
46-
direction="row"
47-
css={{ columnGap: 8, alignItems: "center" }}
48-
>
44+
<div className="flex flex-row gap-2 items-center">
4945
<GroupIcon
5046
css={{
5147
width: "1rem",
@@ -57,7 +53,7 @@ export const UserGroupsCell: FC<GroupsCellProps> = ({ userGroups }) => {
5753
<span>
5854
{userGroups.length} Group{userGroups.length !== 1 && "s"}
5955
</span>
60-
</Stack>
56+
</div>
6157
</button>
6258
</PopoverTrigger>
6359

0 commit comments

Comments
 (0)
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:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy