Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitea1358c

Browse files
authored
chore: update table component and styles (#16541)
- migrate styles to tailwind- migrate to new Table component
1 parentf1c2605 commitea1358c

File tree

3 files changed

+86
-109
lines changed

3 files changed

+86
-109
lines changed
Lines changed: 79 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
1-
importtype{Interpolation,Theme}from"@emotion/react";
21
importPersonAddfrom"@mui/icons-material/PersonAdd";
32
importLoadingButtonfrom"@mui/lab/LoadingButton";
4-
importTablefrom"@mui/material/Table";
5-
importTableBodyfrom"@mui/material/TableBody";
6-
importTableCellfrom"@mui/material/TableCell";
7-
importTableContainerfrom"@mui/material/TableContainer";
8-
importTableHeadfrom"@mui/material/TableHead";
9-
importTableRowfrom"@mui/material/TableRow";
103
import{getErrorMessage}from"api/errors";
11-
importtype{GroupsByUserId}from"api/queries/groups";
124
importtype{
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{typeFC,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-
<TableCellwidth="33%">User</TableCell>
89-
<TableCellwidth="33%">
90-
<Stackdirection="row"spacing={1}alignItems="center">
91-
<span>Roles</span>
92-
<TableColumnHelpTooltipvariant="roles"/>
93-
</Stack>
82+
<Table>
83+
<TableHeader>
84+
<TableRow>
85+
<TableCellwidth="33%">User</TableCell>
86+
<TableCellwidth="33%">
87+
<Stackdirection="row"spacing={1}alignItems="center">
88+
<span>Roles</span>
89+
<TableColumnHelpTooltipvariant="roles"/>
90+
</Stack>
91+
</TableCell>
92+
<TableCellwidth="33%">
93+
<Stackdirection="row"spacing={1}alignItems="center">
94+
<span>Groups</span>
95+
<TableColumnHelpTooltipvariant="groups"/>
96+
</Stack>
97+
</TableCell>
98+
<TableCellwidth="1%"/>
99+
</TableRow>
100+
</TableHeader>
101+
<TableBody>
102+
{members?.map((member)=>(
103+
<TableRowkey={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-
<TableCellwidth="33%">
96-
<Stackdirection="row"spacing={1}alignItems="center">
97-
<span>Groups</span>
98-
<TableColumnHelpTooltipvariant="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+
awaitupdateMemberRoles(member,roles);
126+
displaySuccess("Roles updated successfully.");
127+
}catch(error){
128+
displayError(
129+
getErrorMessage(error,"Failed to update roles."),
130+
);
131+
}
132+
}}
133+
/>
134+
<UserGroupsCelluserGroups={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-
<TableCellwidth="1%"/>
102152
</TableRow>
103-
</TableHead>
104-
<TableBody>
105-
{members?.map((member)=>(
106-
<TableRowkey={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-
awaitupdateMemberRoles(member,roles);
129-
displaySuccess("Roles updated successfully.");
130-
}catch(error){
131-
displayError(
132-
getErrorMessage(error,"Failed to update roles."),
133-
);
134-
}
135-
}}
136-
/>
137-
<UserGroupsCelluserGroups={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
<Stackdirection="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-
conststyles={
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-
}satisfiesRecord<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{typeInterpolation,typeTheme,useTheme}from"@emotion/react";
17-
importStackfrom"@mui/material/Stack";
18-
importTableCellfrom"@mui/material/TableCell";
1917
importTooltipfrom"@mui/material/Tooltip";
2018
importtype{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-
<Stackdirection="row"spacing={1}>
61+
<divclassName="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&&<OverflowRolePillroles={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
importGroupIconfrom"@mui/icons-material/Group";
33
importListfrom"@mui/material/List";
44
importListItemfrom"@mui/material/ListItem";
5-
importTableCellfrom"@mui/material/TableCell";
65
importtype{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+
<divclassName="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)
[8]ページ先頭
©2009-2025 Movatter.jp