Skip to content

Commit 395fdc8

Browse files
jaaydenhjaaydenh
committed
chore: switch to useId for form ids
1 parent 5779c8d commit 395fdc8

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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy