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

Commit395fdc8

Browse files
committed
chore: switch to useId for form ids
1 parent5779c8d commit395fdc8

File tree

3 files changed

+30
-42
lines changed

3 files changed

+30
-42
lines changed

‎site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import { Spinner } from "components/Spinner/Spinner";
3636
import{Switch}from"components/Switch/Switch";
3737
import{useFormik}from"formik";
3838
import{Plus,SquareArrowOutUpRight,Trash}from"lucide-react";
39-
import{typeFC,useState}from"react";
39+
import{typeFC,useId,useState}from"react";
4040
import{docs}from"utils/docs";
4141
import*asYupfrom"yup";
4242
import{OrganizationPills}from"./OrganizationPills";
@@ -79,6 +79,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
7979
?Object.entries(form.values.mapping).length
8080
:0;
8181
const[isDialogOpen,setIsDialogOpen]=useState(false);
82+
constid=useId();
8283

8384
constgetOrgNames=(orgIds:readonlystring[])=>{
8485
returnorgIds.map(
@@ -101,25 +102,20 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
101102
form.handleSubmit();
102103
};
103104

104-
constSYNC_FIELD_ID="sync-field";
105-
constORGANIZATION_ASSIGN_DEFAULT_ID="organization-assign-default";
106-
constIDP_ORGANIZATION_NAME_ID="idp-organization-name";
107-
constCODER_ORG_ID="coder-org";
108-
109105
return(
110106
<divclassName="flex flex-col gap-2">
111107
{Boolean(error)&&<ErrorAlerterror={error}/>}
112108
<formonSubmit={form.handleSubmit}>
113109
<fieldsetdisabled={form.isSubmitting}className="border-none">
114110
<divclassName="flex flex-row">
115111
<divclassName="grid items-center gap-1">
116-
<LabelclassName="text-sm"htmlFor={SYNC_FIELD_ID}>
112+
<LabelclassName="text-sm"htmlFor={`${id}-sync-field`}>
117113
Organization sync field
118114
</Label>
119115
<divclassName="flex flex-row items-center gap-5">
120116
<divclassName="flex flex-row gap-2 w-72">
121117
<Input
122-
id={SYNC_FIELD_ID}
118+
id={`${id}-sync-field`}
123119
value={form.values.field}
124120
onChange={async(event)=>{
125121
voidform.setFieldValue("field",event.target.value);
@@ -140,7 +136,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
140136
</div>
141137
<divclassName="flex flex-row items-center gap-3">
142138
<Switch
143-
id={ORGANIZATION_ASSIGN_DEFAULT_ID}
139+
id={`${id}-assign-default-org`}
144140
checked={form.values.organization_assign_default}
145141
onCheckedChange={async(checked)=>{
146142
if(!checked){
@@ -155,7 +151,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
155151
}}
156152
/>
157153
<spanclassName="flex flex-row items-center gap-1">
158-
<LabelhtmlFor={ORGANIZATION_ASSIGN_DEFAULT_ID}>
154+
<LabelhtmlFor={`${id}-assign-default-org`}>
159155
Assign Default Organization
160156
</Label>
161157
<AssignDefaultOrgHelpTooltip/>
@@ -171,11 +167,11 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
171167
<divclassName="flex flex-col gap-4">
172168
<divclassName="flex flex-row pt-8 gap-2 justify-between items-start">
173169
<divclassName="grid items-center gap-1">
174-
<LabelclassName="text-sm"htmlFor={IDP_ORGANIZATION_NAME_ID}>
170+
<LabelclassName="text-sm"htmlFor={`${id}-idp-org-name`}>
175171
IdP organization name
176172
</Label>
177173
<Input
178-
id={IDP_ORGANIZATION_NAME_ID}
174+
id={`${id}-idp-org-name`}
179175
value={idpOrgName}
180176
className="min-w-72 w-72"
181177
onChange={(event)=>{
@@ -184,12 +180,12 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
184180
/>
185181
</div>
186182
<divclassName="grid items-center gap-1 flex-1">
187-
<LabelclassName="text-sm"htmlFor={CODER_ORG_ID}>
183+
<LabelclassName="text-sm"htmlFor={`${id}-coder-org`}>
188184
Coder organization
189185
</Label>
190186
<MultiSelectCombobox
191187
inputProps={{
192-
id:CODER_ORG_ID,
188+
id:`${id}-coder-org`,
193189
}}
194190
className="min-w-60 max-w-3xl"
195191
value={coderOrgs}

‎site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { Spinner } from "components/Spinner/Spinner";
2424
import{Switch}from"components/Switch/Switch";
2525
import{useFormik}from"formik";
2626
import{Plus,Trash}from"lucide-react";
27-
import{typeFC,useState}from"react";
27+
import{typeFC,useId,useState}from"react";
2828
import{docs}from"utils/docs";
2929
import*asYupfrom"yup";
3030
import{ExportPolicyButton}from"./ExportPolicyButton";
@@ -73,6 +73,7 @@ export const IdpGroupSyncForm = ({
7373
});
7474
const[idpGroupName,setIdpGroupName]=useState("");
7575
const[coderGroups,setCoderGroups]=useState<Option[]>([]);
76+
constid=useId();
7677

7778
constgetGroupNames=(groupIds:readonlystring[])=>{
7879
returngroupIds.map((groupId)=>groupsMap.get(groupId)||groupId);
@@ -92,12 +93,6 @@ export const IdpGroupSyncForm = ({
9293
form.handleSubmit();
9394
};
9495

95-
constSYNC_FIELD_ID="sync-field";
96-
constREGEX_FILTER_ID="regex-filter";
97-
constAUTO_CREATE_MISSING_GROUPS_ID="auto-create-missing-groups";
98-
constIDP_GROUP_NAME_ID="idp-group-name";
99-
constCODER_GROUP_ID="coder-group";
100-
10196
return(
10297
<formonSubmit={form.handleSubmit}>
10398
<fieldset
@@ -114,14 +109,14 @@ export const IdpGroupSyncForm = ({
114109
<divclassName="grid items-center gap-3">
115110
<divclassName="flex flex-row items-center gap-5">
116111
<divclassName="grid grid-cols-2 gap-2 grid-rows-[20px_auto_20px]">
117-
<LabelclassName="text-sm"htmlFor={SYNC_FIELD_ID}>
112+
<LabelclassName="text-sm"htmlFor={`${id}-sync-field`}>
118113
Group sync field
119114
</Label>
120-
<LabelclassName="text-sm"htmlFor={REGEX_FILTER_ID}>
115+
<LabelclassName="text-sm"htmlFor={`${id}-regex-filter`}>
121116
Regex filter
122117
</Label>
123118
<Input
124-
id={SYNC_FIELD_ID}
119+
id={`${id}-sync-field`}
125120
value={form.values.field}
126121
onChange={async(event)=>{
127122
voidform.setFieldValue("field",event.target.value);
@@ -130,7 +125,7 @@ export const IdpGroupSyncForm = ({
130125
/>
131126
<divclassName="flex flex-row gap-2">
132127
<Input
133-
id={REGEX_FILTER_ID}
128+
id={`${id}-regex-filter`}
134129
value={form.values.regex_filter??""}
135130
onChange={async(event)=>{
136131
voidform.setFieldValue("regex_filter",event.target.value);
@@ -159,7 +154,7 @@ export const IdpGroupSyncForm = ({
159154
<divclassName="flex flex-row items-center gap-3">
160155
<Spinnersize="sm"loading={form.isSubmitting}className="w-9">
161156
<Switch
162-
id={AUTO_CREATE_MISSING_GROUPS_ID}
157+
id={`${id}-auto-create-missing-groups`}
163158
checked={form.values.auto_create_missing_groups}
164159
onCheckedChange={async(checked)=>{
165160
voidform.setFieldValue("auto_create_missing_groups",checked);
@@ -168,19 +163,19 @@ export const IdpGroupSyncForm = ({
168163
/>
169164
</Spinner>
170165
<spanclassName="flex flex-row items-center gap-1">
171-
<LabelhtmlFor={AUTO_CREATE_MISSING_GROUPS_ID}>
166+
<LabelhtmlFor={`${id}-auto-create-missing-groups`}>
172167
Auto create missing groups
173168
</Label>
174169
<AutoCreateMissingGroupsHelpTooltip/>
175170
</span>
176171
</div>
177172
<divclassName="flex flex-row gap-2 justify-between items-start">
178173
<divclassName="grid items-center gap-1">
179-
<LabelclassName="text-sm"htmlFor={IDP_GROUP_NAME_ID}>
174+
<LabelclassName="text-sm"htmlFor={`${id}-idp-group-name`}>
180175
IdP group name
181176
</Label>
182177
<Input
183-
id={IDP_GROUP_NAME_ID}
178+
id={`${id}-idp-group-name`}
184179
value={idpGroupName}
185180
className="min-w-72 w-72"
186181
onChange={(event)=>{
@@ -189,12 +184,12 @@ export const IdpGroupSyncForm = ({
189184
/>
190185
</div>
191186
<divclassName="grid items-center gap-1 flex-1">
192-
<LabelclassName="text-sm"htmlFor={CODER_GROUP_ID}>
187+
<LabelclassName="text-sm"htmlFor={`${id}-coder-group`}>
193188
Coder group
194189
</Label>
195190
<MultiSelectCombobox
196191
inputProps={{
197-
id:CODER_GROUP_ID,
192+
id:`${id}-coder-group`,
198193
}}
199194
className="min-w-60 max-w-3xl"
200195
value={coderGroups}

‎site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
import{Spinner}from"components/Spinner/Spinner";
1212
import{useFormik}from"formik";
1313
import{Plus,Trash}from"lucide-react";
14-
import{typeFC,useState}from"react";
14+
import{typeFC,useId,useState}from"react";
1515
import*asYupfrom"yup";
1616
import{ExportPolicyButton}from"./ExportPolicyButton";
1717
import{IdpMappingTable}from"./IdpMappingTable";
@@ -52,6 +52,7 @@ export const IdpRoleSyncForm = ({
5252
});
5353
const[idpRoleName,setIdpRoleName]=useState("");
5454
const[coderRoles,setCoderRoles]=useState<Option[]>([]);
55+
constid=useId();
5556

5657
consthandleDelete=async(idpOrg:string)=>{
5758
constnewMapping=Object.fromEntries(
@@ -67,10 +68,6 @@ export const IdpRoleSyncForm = ({
6768
form.handleSubmit();
6869
};
6970

70-
constSYNC_FIELD_ID="sync-field";
71-
constIDP_ROLE_NAME_ID="idp-role-name";
72-
constCODER_ROLE_ID="coder-role";
73-
7471
return(
7572
<formonSubmit={form.handleSubmit}>
7673
<fieldset
@@ -85,13 +82,13 @@ export const IdpRoleSyncForm = ({
8582
/>
8683
</div>
8784
<divclassName="grid items-center gap-1">
88-
<LabelclassName="text-sm"htmlFor={SYNC_FIELD_ID}>
85+
<LabelclassName="text-sm"htmlFor={`${id}-sync-field`}>
8986
Role sync field
9087
</Label>
9188
<divclassName="flex flex-row items-center gap-5">
9289
<divclassName="flex flex-row gap-2 w-72">
9390
<Input
94-
id={SYNC_FIELD_ID}
91+
id={`${id}-sync-field`}
9592
value={form.values.field}
9693
onChange={async(event)=>{
9794
voidform.setFieldValue("field",event.target.value);
@@ -118,11 +115,11 @@ export const IdpRoleSyncForm = ({
118115
</div>
119116
<divclassName="flex flex-row gap-2 justify-between items-start">
120117
<divclassName="grid items-center gap-1">
121-
<LabelclassName="text-sm"htmlFor={IDP_ROLE_NAME_ID}>
118+
<LabelclassName="text-sm"htmlFor={`${id}-idp-role-name`}>
122119
IdP role name
123120
</Label>
124121
<Input
125-
id={IDP_ROLE_NAME_ID}
122+
id={`${id}-idp-role-name`}
126123
value={idpRoleName}
127124
className="min-w-72 w-72"
128125
onChange={(event)=>{
@@ -131,12 +128,12 @@ export const IdpRoleSyncForm = ({
131128
/>
132129
</div>
133130
<divclassName="grid items-center gap-1 flex-1">
134-
<LabelclassName="text-sm"htmlFor={CODER_ROLE_ID}>
131+
<LabelclassName="text-sm"htmlFor={`${id}-coder-role`}>
135132
Coder role
136133
</Label>
137134
<MultiSelectCombobox
138135
inputProps={{
139-
id:CODER_ROLE_ID,
136+
id:`${id}-coder-role`,
140137
}}
141138
className="min-w-60 max-w-3xl"
142139
value={coderRoles}

0 commit comments

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