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

Commita00ac98

Browse files
committed
feat: add page to create and edit custom roles
1 parenta23996b commita00ac98

File tree

6 files changed

+318
-155
lines changed

6 files changed

+318
-155
lines changed

‎site/src/api/api.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -572,6 +572,24 @@ class ApiMethods {
572572
returnresponse.data;
573573
};
574574

575+
patchOrganizationRole=async(
576+
organizationId:string,
577+
role:TypesGen.Role,
578+
):Promise<TypesGen.Role>=>{
579+
constresponse=awaitthis.axios.patch<TypesGen.Role>(
580+
`/api/v2/organizations/${organizationId}/members/roles`,
581+
role,
582+
);
583+
584+
returnresponse.data;
585+
};
586+
587+
deleteOrganizationRole=async(organizationId:string,roleName:string)=>{
588+
awaitthis.axios.delete(
589+
`/api/v2/organizations/${organizationId}/members/roles/${roleName}`,
590+
);
591+
};
592+
575593
addOrganizationMember=async(organizationId:string,userId:string)=>{
576594
constresponse=awaitthis.axios.post<TypesGen.OrganizationMember>(
577595
`/api/v2/organizations/${organizationId}/members/${userId}`,

‎site/src/api/queries/roles.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
1+
importtype{QueryClient}from"react-query";
12
import{API}from"api/api";
3+
importtype{Role}from"api/typesGenerated";
4+
5+
constgetRoleQueryKey=(organizationId:string,roleName:string)=>[
6+
"organization",
7+
organizationId,
8+
"role",
9+
roleName,
10+
];
211

312
exportconstroles=()=>{
413
return{
@@ -13,3 +22,30 @@ export const organizationRoles = (organizationId: string) => {
1322
queryFn:()=>API.getOrganizationRoles(organizationId),
1423
};
1524
};
25+
26+
exportconstpatchOrganizationRole=(
27+
queryClient:QueryClient,
28+
organizationId:string,
29+
)=>{
30+
return{
31+
mutationFn:(request:Role)=>
32+
API.patchOrganizationRole(organizationId,request),
33+
onSuccess:async(updatedRole:Role)=>
34+
awaitqueryClient.invalidateQueries(
35+
getRoleQueryKey(organizationId,updatedRole.name),
36+
),
37+
};
38+
};
39+
40+
exportconstdeleteRole=(
41+
queryClient:QueryClient,
42+
organizationId:string,
43+
)=>{
44+
return{
45+
mutationFn:API.deleteOrganizationRole,
46+
onSuccess:async(_:void,roleName:string)=>
47+
awaitqueryClient.invalidateQueries(
48+
getRoleQueryKey(organizationId,roleName),
49+
),
50+
};
51+
};
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
importtype{FC}from"react";
2+
import{Helmet}from"react-helmet-async";
3+
import{useMutation,useQueryClient}from"react-query";
4+
import{useNavigate,useParams}from"react-router-dom";
5+
import{patchOrganizationRole}from"api/queries/roles";
6+
import{pageTitle}from"utils/page";
7+
importCreateEditRolePageViewfrom"./CreateEditRolePageView";
8+
9+
exportconstCreateGroupPage:FC=()=>{
10+
constqueryClient=useQueryClient();
11+
constnavigate=useNavigate();
12+
const{ organization}=useParams()as{organization:string};
13+
constpatchOrganizationRoleMutation=useMutation(
14+
patchOrganizationRole(queryClient,organization??"default"),
15+
);
16+
17+
return(
18+
<>
19+
<Helmet>
20+
<title>{pageTitle("Create Custom Role")}</title>
21+
</Helmet>
22+
<CreateEditRolePageView
23+
onSubmit={async(data)=>{
24+
constnewRole=awaitpatchOrganizationRoleMutation.mutateAsync(data);
25+
console.log({ newRole});
26+
navigate(`/organizations/${organization}/roles`);
27+
}}
28+
error={patchOrganizationRoleMutation.error}
29+
isLoading={patchOrganizationRoleMutation.isLoading}
30+
/>
31+
</>
32+
);
33+
};
34+
35+
exportdefaultCreateGroupPage;
Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
importtype{Interpolation,Theme}from"@emotion/react";
2+
importTablefrom"@mui/material/Table";
3+
importTableBodyfrom"@mui/material/TableBody";
4+
importTableCellfrom"@mui/material/TableCell";
5+
importTableContainerfrom"@mui/material/TableContainer";
6+
importTableRowfrom"@mui/material/TableRow";
7+
importTextFieldfrom"@mui/material/TextField";
8+
import{useFormik}from"formik";
9+
importtype{FC}from"react";
10+
import{useNavigate}from"react-router-dom";
11+
import*asYupfrom"yup";
12+
import{isApiValidationError}from"api/errors";
13+
import{RBACResourceActions}from"api/rbacresources_gen";
14+
importtype{Role}from"api/typesGenerated";
15+
import{ErrorAlert}from"components/Alert/ErrorAlert";
16+
import{
17+
FormFields,
18+
FormFooter,
19+
FormSection,
20+
HorizontalForm,
21+
}from"components/Form/Form";
22+
import{PageHeader,PageHeaderTitle}from"components/PageHeader/PageHeader";
23+
import{getFormHelpers}from"utils/formUtils";
24+
25+
constvalidationSchema=Yup.object({
26+
name:Yup.string().required().label("Name"),
27+
});
28+
29+
exporttypeCreateEditRolePageViewProps={
30+
onSubmit:(data:Role)=>void;
31+
error?:unknown;
32+
isLoading:boolean;
33+
};
34+
35+
exportconstCreateEditRolePageView:FC<CreateEditRolePageViewProps>=({
36+
onSubmit,
37+
error,
38+
isLoading,
39+
})=>{
40+
constnavigate=useNavigate();
41+
constform=useFormik<Role>({
42+
initialValues:{
43+
name:"",
44+
display_name:"",
45+
site_permissions:[],
46+
organization_permissions:[],
47+
user_permissions:[],
48+
},
49+
validationSchema,
50+
onSubmit,
51+
});
52+
constgetFieldHelpers=getFormHelpers<Role>(form,error);
53+
constonCancel=()=>navigate(-1);
54+
55+
return(
56+
<>
57+
<PageHeadercss={{paddingTop:8}}>
58+
<PageHeaderTitle>Create custom role</PageHeaderTitle>
59+
</PageHeader>
60+
<HorizontalFormonSubmit={form.handleSubmit}>
61+
<FormSection
62+
title="Role settings"
63+
description="Set a name for this role."
64+
>
65+
<FormFields>
66+
{Boolean(error)&&!isApiValidationError(error)&&(
67+
<ErrorAlerterror={error}/>
68+
)}
69+
70+
<TextField
71+
{...getFieldHelpers("name")}
72+
autoFocus
73+
fullWidth
74+
label="Name"
75+
/>
76+
<TextField
77+
{...getFieldHelpers("display_name",{
78+
helperText:"Optional: keep empty to default to the name.",
79+
})}
80+
fullWidth
81+
label="Display Name"
82+
/>
83+
<ActionCheckboxespermissions={[]}></ActionCheckboxes>
84+
</FormFields>
85+
</FormSection>
86+
<FormFooteronCancel={onCancel}isLoading={isLoading}/>
87+
</HorizontalForm>
88+
</>
89+
);
90+
};
91+
92+
interfaceActionCheckboxesProps{
93+
permissions:Permissions[];
94+
}
95+
96+
constActionCheckboxes:FC<ActionCheckboxesProps>=({ permissions})=>{
97+
return(
98+
<TableContainer>
99+
<Table>
100+
<TableBody>
101+
{Object.entries(RBACResourceActions).map(([key,value])=>{
102+
return(
103+
<TableRowkey={key}>
104+
<TableCell>
105+
<likey={key}css={styles.checkBoxes}>
106+
<inputtype="checkbox"/>{key}
107+
<ulcss={styles.checkBoxes}>
108+
{Object.entries(value).map(([key,value])=>{
109+
return(
110+
<likey={key}>
111+
<spancss={styles.actionText}>
112+
<inputtype="checkbox"/>{key}
113+
</span>{" "}
114+
-{" "}
115+
<spancss={styles.actionDescription}>{value}</span>
116+
</li>
117+
);
118+
})}
119+
</ul>
120+
</li>
121+
</TableCell>
122+
</TableRow>
123+
);
124+
})}
125+
</TableBody>
126+
</Table>
127+
</TableContainer>
128+
);
129+
};
130+
131+
conststyles={
132+
rolesDropdown:{
133+
marginBottom:20,
134+
},
135+
checkBoxes:{
136+
margin:0,
137+
listStyleType:"none",
138+
},
139+
actionText:(theme)=>({
140+
color:theme.palette.text.primary,
141+
}),
142+
actionDescription:(theme)=>({
143+
color:theme.palette.text.secondary,
144+
}),
145+
}satisfiesRecord<string,Interpolation<Theme>>;
146+
147+
exportdefaultCreateEditRolePageView;

0 commit comments

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