Skip to content

Commit 935c460

Browse files
jaaydenhjaaydenh
committed
chore: switch to useId for form ids
1 parent 053299f commit 935c460

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 { type FC, useState } from "react";
39+
import { type FC, useId, useState } from "react";
4040
import { docs } from "utils/docs";
4141
import * as Yup from "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+
const id = useId();
8283

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

104-
const SYNC_FIELD_ID = "sync-field";
105-
const ORGANIZATION_ASSIGN_DEFAULT_ID = "organization-assign-default";
106-
const IDP_ORGANIZATION_NAME_ID = "idp-organization-name";
107-
const CODER_ORG_ID = "coder-org";
108-
109105
return (
110106
<div className="flex flex-col gap-2">
111107
{Boolean(error) && <ErrorAlert error={error} />}
112108
<form onSubmit={form.handleSubmit}>
113109
<fieldset disabled={form.isSubmitting} className="border-none">
114110
<div className="flex flex-row">
115111
<div className="grid items-center gap-1">
116-
<Label className="text-sm" htmlFor={SYNC_FIELD_ID}>
112+
<Label className="text-sm" htmlFor={`${id}-sync-field`}>
117113
Organization sync field
118114
</Label>
119115
<div className="flex flex-row items-center gap-5">
120116
<div className="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
void form.setFieldValue("field", event.target.value);
@@ -140,7 +136,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
140136
</div>
141137
<div className="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
<span className="flex flex-row items-center gap-1">
158-
<Label htmlFor={ORGANIZATION_ASSIGN_DEFAULT_ID}>
154+
<Label htmlFor={`${id}-assign-default-org`}>
159155
Assign Default Organization
160156
</Label>
161157
<AssignDefaultOrgHelpTooltip />
@@ -171,11 +167,11 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
171167
<div className="flex flex-col gap-4">
172168
<div className="flex flex-row pt-8 gap-2 justify-between items-start">
173169
<div className="grid items-center gap-1">
174-
<Label className="text-sm" htmlFor={IDP_ORGANIZATION_NAME_ID}>
170+
<Label className="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
<div className="grid items-center gap-1 flex-1">
187-
<Label className="text-sm" htmlFor={CODER_ORG_ID}>
183+
<Label className="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 { type FC, useState } from "react";
27+
import { type FC, useId, useState } from "react";
2828
import { docs } from "utils/docs";
2929
import * as Yup from "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+
const id = useId();
7677

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

95-
const SYNC_FIELD_ID = "sync-field";
96-
const REGEX_FILTER_ID = "regex-filter";
97-
const AUTO_CREATE_MISSING_GROUPS_ID = "auto-create-missing-groups";
98-
const IDP_GROUP_NAME_ID = "idp-group-name";
99-
const CODER_GROUP_ID = "coder-group";
100-
10196
return (
10297
<form onSubmit={form.handleSubmit}>
10398
<fieldset
@@ -114,14 +109,14 @@ export const IdpGroupSyncForm = ({
114109
<div className="grid items-center gap-3">
115110
<div className="flex flex-row items-center gap-5">
116111
<div className="grid grid-cols-2 gap-2 grid-rows-[20px_auto_20px]">
117-
<Label className="text-sm" htmlFor={SYNC_FIELD_ID}>
112+
<Label className="text-sm" htmlFor={`${id}-sync-field`}>
118113
Group sync field
119114
</Label>
120-
<Label className="text-sm" htmlFor={REGEX_FILTER_ID}>
115+
<Label className="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
void form.setFieldValue("field", event.target.value);
@@ -130,7 +125,7 @@ export const IdpGroupSyncForm = ({
130125
/>
131126
<div className="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
void form.setFieldValue("regex_filter", event.target.value);
@@ -159,7 +154,7 @@ export const IdpGroupSyncForm = ({
159154
<div className="flex flex-row items-center gap-3">
160155
<Spinner size="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
void form.setFieldValue("auto_create_missing_groups", checked);
@@ -168,19 +163,19 @@ export const IdpGroupSyncForm = ({
168163
/>
169164
</Spinner>
170165
<span className="flex flex-row items-center gap-1">
171-
<Label htmlFor={AUTO_CREATE_MISSING_GROUPS_ID}>
166+
<Label htmlFor={`${id}-auto-create-missing-groups`}>
172167
Auto create missing groups
173168
</Label>
174169
<AutoCreateMissingGroupsHelpTooltip />
175170
</span>
176171
</div>
177172
<div className="flex flex-row gap-2 justify-between items-start">
178173
<div className="grid items-center gap-1">
179-
<Label className="text-sm" htmlFor={IDP_GROUP_NAME_ID}>
174+
<Label className="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
<div className="grid items-center gap-1 flex-1">
192-
<Label className="text-sm" htmlFor={CODER_GROUP_ID}>
187+
<Label className="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 { type FC, useState } from "react";
14+
import { type FC, useId, useState } from "react";
1515
import * as Yup from "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+
const id = useId();
5556

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

70-
const SYNC_FIELD_ID = "sync-field";
71-
const IDP_ROLE_NAME_ID = "idp-role-name";
72-
const CODER_ROLE_ID = "coder-role";
73-
7471
return (
7572
<form onSubmit={form.handleSubmit}>
7673
<fieldset
@@ -85,13 +82,13 @@ export const IdpRoleSyncForm = ({
8582
/>
8683
</div>
8784
<div className="grid items-center gap-1">
88-
<Label className="text-sm" htmlFor={SYNC_FIELD_ID}>
85+
<Label className="text-sm" htmlFor={`${id}-sync-field`}>
8986
Role sync field
9087
</Label>
9188
<div className="flex flex-row items-center gap-5">
9289
<div className="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
void form.setFieldValue("field", event.target.value);
@@ -118,11 +115,11 @@ export const IdpRoleSyncForm = ({
118115
</div>
119116
<div className="flex flex-row gap-2 justify-between items-start">
120117
<div className="grid items-center gap-1">
121-
<Label className="text-sm" htmlFor={IDP_ROLE_NAME_ID}>
118+
<Label className="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
<div className="grid items-center gap-1 flex-1">
134-
<Label className="text-sm" htmlFor={CODER_ROLE_ID}>
131+
<Label className="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)