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

Commit3524cf7

Browse files
committed
Add stories for organization members page
Needed to break it out into a separate view to do this.
1 parenta136151 commit3524cf7

File tree

3 files changed

+308
-202
lines changed

3 files changed

+308
-202
lines changed
Lines changed: 34 additions & 202 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,6 @@
1-
importtype{Interpolation,Theme}from"@emotion/react";
2-
importPersonAddfrom"@mui/icons-material/PersonAdd";
3-
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";
10-
import{typeFC,useState}from"react";
1+
importtype{FC}from"react";
112
import{useMutation,useQuery,useQueryClient}from"react-query";
123
import{useParams}from"react-router-dom";
13-
import{getErrorMessage}from"api/errors";
144
import{
155
addOrganizationMember,
166
organizationMembers,
@@ -19,26 +9,11 @@ import {
199
updateOrganizationMemberRoles,
2010
}from"api/queries/organizations";
2111
import{organizationRoles}from"api/queries/roles";
22-
importtype{User}from"api/typesGenerated";
23-
import{ErrorAlert}from"components/Alert/ErrorAlert";
24-
import{AvatarData}from"components/AvatarData/AvatarData";
25-
import{displayError,displaySuccess}from"components/GlobalSnackbar/utils";
12+
importtype{OrganizationMemberWithUserData,User}from"api/typesGenerated";
2613
import{Loader}from"components/Loader/Loader";
27-
import{
28-
MoreMenu,
29-
MoreMenuTrigger,
30-
MoreMenuContent,
31-
MoreMenuItem,
32-
ThreeDotsButton,
33-
}from"components/MoreMenu/MoreMenu";
34-
import{PageHeader,PageHeaderTitle}from"components/PageHeader/PageHeader";
35-
import{Stack}from"components/Stack/Stack";
36-
import{UserAutocomplete}from"components/UserAutocomplete/UserAutocomplete";
37-
import{UserAvatar}from"components/UserAvatar/UserAvatar";
3814
import{useAuthenticated}from"contexts/auth/RequireAuth";
3915
import{useOrganizationSettings}from"./ManagementSettingsLayout";
40-
import{TableColumnHelpTooltip}from"./UserTable/TableColumnHelpTooltip";
41-
import{UserRoleCell}from"./UserTable/UserRoleCell";
16+
import{OrganizationMembersPageView}from"./OrganizationMembersPageView";
4217

4318
constOrganizationMembersPage:FC=()=>{
4419
constqueryClient=useQueryClient();
@@ -71,182 +46,39 @@ const OrganizationMembersPage: FC = () => {
7146
return<Loader/>;
7247
}
7348

74-
consterror=
75-
membersQuery.error??addMemberMutation.error??removeMemberMutation.error;
76-
constmembers=membersQuery.data;
77-
78-
return(
79-
<div>
80-
<PageHeader>
81-
<PageHeaderTitle>Organization members</PageHeaderTitle>
82-
</PageHeader>
83-
84-
<Stack>
85-
{Boolean(error)&&<ErrorAlerterror={error}/>}
86-
87-
{permissions.editMembers&&(
88-
<AddOrganizationMember
89-
isLoading={addMemberMutation.isLoading}
90-
onSubmit={async(user)=>{
91-
awaitaddMemberMutation.mutateAsync(user.id);
92-
voidmembersQuery.refetch();
93-
}}
94-
/>
95-
)}
96-
97-
<TableContainer>
98-
<Table>
99-
<TableHead>
100-
<TableRow>
101-
<TableCellwidth="50%">User</TableCell>
102-
<TableCellwidth="49%">
103-
<Stackdirection="row"spacing={1}alignItems="center">
104-
<span>Roles</span>
105-
<TableColumnHelpTooltipvariant="roles"/>
106-
</Stack>
107-
</TableCell>
108-
<TableCellwidth="1%"></TableCell>
109-
</TableRow>
110-
</TableHead>
111-
<TableBody>
112-
{members?.map((member)=>(
113-
<TableRowkey={member.user_id}>
114-
<TableCell>
115-
<AvatarData
116-
avatar={
117-
<UserAvatar
118-
username={member.username}
119-
avatarURL={member.avatar_url}
120-
/>
121-
}
122-
title={member.name||member.username}
123-
subtitle={member.email}
124-
/>
125-
</TableCell>
126-
<UserRoleCell
127-
inheritedRoles={member.global_roles}
128-
roles={member.roles}
129-
allAvailableRoles={organizationRolesQuery.data}
130-
oidcRoleSyncEnabled={false}
131-
isLoading={updateMemberRolesMutation.isLoading}
132-
canEditUsers={permissions.editMembers}
133-
onEditRoles={async(newRoleNames)=>{
134-
try{
135-
awaitupdateMemberRolesMutation.mutateAsync({
136-
userId:member.user_id,
137-
roles:newRoleNames,
138-
});
139-
displaySuccess("Roles updated successfully.");
140-
}catch(e){
141-
displayError(
142-
getErrorMessage(e,"Failed to update roles."),
143-
);
144-
}
145-
}}
146-
/>
147-
<TableCell>
148-
{member.user_id!==me.id&&permissions.editMembers&&(
149-
<MoreMenu>
150-
<MoreMenuTrigger>
151-
<ThreeDotsButton/>
152-
</MoreMenuTrigger>
153-
<MoreMenuContent>
154-
<MoreMenuItem
155-
danger
156-
onClick={async()=>{
157-
try{
158-
awaitremoveMemberMutation.mutateAsync(
159-
member.user_id,
160-
);
161-
voidmembersQuery.refetch();
162-
displaySuccess("Member removed.");
163-
}catch(e){
164-
displayError(
165-
getErrorMessage(
166-
e,
167-
"Failed to remove member.",
168-
),
169-
);
170-
}
171-
}}
172-
>
173-
Remove
174-
</MoreMenuItem>
175-
</MoreMenuContent>
176-
</MoreMenu>
177-
)}
178-
</TableCell>
179-
</TableRow>
180-
))}
181-
</TableBody>
182-
</Table>
183-
</TableContainer>
184-
</Stack>
185-
</div>
186-
);
187-
};
188-
189-
exportdefaultOrganizationMembersPage;
190-
191-
interfaceAddOrganizationMemberProps{
192-
isLoading:boolean;
193-
onSubmit:(user:User)=>Promise<void>;
194-
}
195-
196-
constAddOrganizationMember:FC<AddOrganizationMemberProps>=({
197-
isLoading,
198-
onSubmit,
199-
})=>{
200-
const[selectedUser,setSelectedUser]=useState<User|null>(null);
201-
20249
return(
203-
<form
204-
onSubmit={async(e)=>{
205-
e.preventDefault();
206-
207-
if(selectedUser){
208-
try{
209-
awaitonSubmit(selectedUser);
210-
setSelectedUser(null);
211-
}catch(error){
212-
displayError(getErrorMessage(error,"Failed to add member."));
213-
}
214-
}
50+
<OrganizationMembersPageView
51+
allAvailableRoles={organizationRolesQuery.data}
52+
canEditMembers={permissions.editMembers}
53+
error={
54+
membersQuery.error??
55+
addMemberMutation.error??
56+
removeMemberMutation.error??
57+
updateMemberRolesMutation.error
58+
}
59+
isAddingMember={addMemberMutation.isLoading}
60+
isUpdatingMemberRoles={updateMemberRolesMutation.isLoading}
61+
me={me}
62+
members={membersQuery.data}
63+
addMember={async(user:User)=>{
64+
awaitaddMemberMutation.mutateAsync(user.id);
65+
voidmembersQuery.refetch();
21566
}}
216-
>
217-
<Stackdirection="row"alignItems="center"spacing={1}>
218-
<UserAutocomplete
219-
css={styles.autoComplete}
220-
value={selectedUser}
221-
onChange={(newValue)=>{
222-
setSelectedUser(newValue);
223-
}}
224-
/>
225-
226-
<LoadingButton
227-
loadingPosition="start"
228-
disabled={!selectedUser}
229-
type="submit"
230-
startIcon={<PersonAdd/>}
231-
loading={isLoading}
232-
>
233-
Add user
234-
</LoadingButton>
235-
</Stack>
236-
</form>
67+
removeMember={async(member:OrganizationMemberWithUserData)=>{
68+
awaitremoveMemberMutation.mutateAsync(member.user_id);
69+
voidmembersQuery.refetch();
70+
}}
71+
updateMemberRoles={async(
72+
member:OrganizationMemberWithUserData,
73+
newRoles:string[],
74+
)=>{
75+
awaitupdateMemberRolesMutation.mutateAsync({
76+
userId:member.user_id,
77+
roles:newRoles,
78+
});
79+
}}
80+
/>
23781
);
23882
};
23983

240-
conststyles={
241-
role:(theme)=>({
242-
backgroundColor:theme.roles.info.background,
243-
borderColor:theme.roles.info.outline,
244-
}),
245-
globalRole:(theme)=>({
246-
backgroundColor:theme.roles.inactive.background,
247-
borderColor:theme.roles.inactive.outline,
248-
}),
249-
autoComplete:{
250-
width:300,
251-
},
252-
}satisfiesRecord<string,Interpolation<Theme>>;
84+
exportdefaultOrganizationMembersPage;
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{
3+
MockUser,
4+
MockOrganizationMember,
5+
MockOrganizationMember2,
6+
}from"testHelpers/entities";
7+
import{OrganizationMembersPageView}from"./OrganizationMembersPageView";
8+
9+
constmeta:Meta<typeofOrganizationMembersPageView>={
10+
title:"pages/OrganizationMembersPageView",
11+
component:OrganizationMembersPageView,
12+
args:{
13+
canEditMembers:true,
14+
error:undefined,
15+
isAddingMember:false,
16+
isUpdatingMemberRoles:false,
17+
me:MockUser,
18+
members:[MockOrganizationMember,MockOrganizationMember2],
19+
addMember:()=>Promise.resolve(),
20+
removeMember:()=>Promise.resolve(),
21+
updateMemberRoles:()=>Promise.resolve(),
22+
},
23+
};
24+
25+
exportdefaultmeta;
26+
typeStory=StoryObj<typeofOrganizationMembersPageView>;
27+
28+
exportconstDefault:Story={};
29+
30+
exportconstNoMembers:Story={
31+
args:{
32+
members:[],
33+
},
34+
};
35+
36+
exportconstError:Story={
37+
args:{
38+
error:"Something went wrong",
39+
},
40+
};
41+
42+
exportconstNoEdit:Story={
43+
args:{
44+
canEditMembers:false,
45+
},
46+
};
47+
48+
exportconstAddingMember:Story={
49+
args:{
50+
isAddingMember:true,
51+
},
52+
};
53+
54+
exportconstUpdatingMember:Story={
55+
args:{
56+
isUpdatingMemberRoles:true,
57+
},
58+
};

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp