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

Commitea151c2

Browse files
committed
feat: add page to create and edit custom roles
1 parent48095e3 commitea151c2

File tree

6 files changed

+321
-160
lines changed

6 files changed

+321
-160
lines changed

‎site/src/api/api.ts

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -187,8 +187,7 @@ export const watchBuildLogsByTemplateVersionId = (
187187

188188
constproto=location.protocol==="https:" ?"wss:" :"ws:";
189189
constsocket=newWebSocket(
190-
`${proto}//${
191-
location.host
190+
`${proto}//${location.host
192191
}/api/v2/templateversions/${versionId}/logs?${searchParams.toString()}`,
193192
);
194193

@@ -270,8 +269,7 @@ export const watchBuildLogsByBuildId = (
270269
}
271270
constproto=location.protocol==="https:" ?"wss:" :"ws:";
272271
constsocket=newWebSocket(
273-
`${proto}//${
274-
location.host
272+
`${proto}//${location.host
275273
}/api/v2/workspacebuilds/${buildId}/logs?${searchParams.toString()}`,
276274
);
277275
socket.binaryType="blob";
@@ -384,7 +382,7 @@ export class MissingBuildParameters extends Error {
384382
* lexical scope.
385383
*/
386384
classApiMethods{
387-
constructor(protectedreadonlyaxios:AxiosInstance){}
385+
constructor(protectedreadonlyaxios:AxiosInstance){}
388386

389387
login=async(
390388
email:string,
@@ -590,6 +588,24 @@ class ApiMethods {
590588
returnresponse.data;
591589
};
592590

591+
patchOrganizationRole=async(
592+
organizationId:string,
593+
role:TypesGen.Role,
594+
):Promise<TypesGen.Role>=>{
595+
constresponse=awaitthis.axios.patch<TypesGen.Role>(
596+
`/api/v2/organizations/${organizationId}/members/roles`,
597+
role,
598+
);
599+
600+
returnresponse.data;
601+
};
602+
603+
deleteOrganizationRole=async(organizationId:string,roleName:string)=>{
604+
awaitthis.axios.delete(
605+
`/api/v2/organizations/${organizationId}/members/roles/${roleName}`,
606+
);
607+
};
608+
593609
/**
594610
*@param organization Can be the organization's ID or name
595611
*/

‎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