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

+79-97
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

+3-4
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

+4-8
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)