Skip to content

Commit 52f34fd

Browse files
jaaydenhjaaydenh
committed
fix: updates for PR review comments
1 parent 7bec902 commit 52f34fd

File tree

7 files changed

+35
-46
lines changed

7 files changed

+35
-46
lines changed

‎site/src/components/Link/Link.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ export const linkVariants = cva(
99
after:hover:content-[''] after:hover:absolute after:hover:left-0 after:hover:w-full after:hover:h-px after:hover:bg-current after:hover:bottom-px
1010
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
1111
focus-visible:ring-offset-2 focus-visible:ring-offset-surface-primary focus-visible:rounded-sm
12-
visited:text-content-link pl-0.5`, //pl-[2px] adjusts the underline spacing to align with the icon on the right.
12+
visited:text-content-link pl-0.5`, //pl-0.5 adjusts the underline spacing to align with the icon on the right.
1313
{
1414
variants: {
1515
size: {
1616
lg: "text-sm gap-0.5 [&_svg]:size-icon-sm [&_svg]:p-0.5 leading-6",
17-
sm: "text-xs gap-1 [&_svg]:size-icon-xs [&_svg]:p-px leading-[18px]",
17+
sm: "text-xs gap-1 [&_svg]:size-icon-xs [&_svg]:p-px leading-5",
1818
},
1919
},
2020
defaultVariants: {

‎site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -430,6 +430,12 @@ export const MultiSelectCombobox = forwardRef<
430430
return undefined;
431431
};
432432

433+
useEffect(() => {
434+
if (inputRef.current && inputProps?.id) {
435+
inputRef.current.id = inputProps?.id;
436+
}
437+
}, [inputProps?.id]);
438+
433439
const fixedOptions = selected.filter((s) => s.fixed);
434440

435441
return (

‎site/src/components/Tabs/Tabs.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@ export const TabLink: FC<TabLinkProps> = ({ value, ...linkProps }) => {
4747
<Link
4848
{...linkProps}
4949
className={cn(
50-
"text-sm text-content-secondary no-underline font-medium py-2 px-3 hover:text-content-primary rounded-md",
50+
`text-sm text-content-secondary no-underline font-medium py-3 px-1 mr-6 hover:text-content-primary rounded-md
51+
focus-visible:ring-offset-1 focus-visible:ring-offset-surface-primary
52+
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link focus-visible:rounded-sm`,
5153
{
5254
"text-content-primary relative before:absolute before:bg-surface-invert-primary before:left-0 before:w-full before:h-px before:-bottom-px before:content-['']":
5355
isActive,

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
104104
const SYNC_FIELD_ID = "sync-field";
105105
const ORGANIZATION_ASSIGN_DEFAULT_ID = "organization-assign-default";
106106
const IDP_ORGANIZATION_NAME_ID = "idp-organization-name";
107+
const CODER_ORG_ID = "coder-org";
107108

108109
return (
109110
<div className="flex flex-col gap-2">
@@ -183,10 +184,13 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
183184
/>
184185
</div>
185186
<div className="grid items-center gap-1 flex-1">
186-
<Label className="text-sm" htmlFor=":r1d:">
187+
<Label className="text-sm" htmlFor={CODER_ORG_ID}>
187188
Coder organization
188189
</Label>
189190
<MultiSelectCombobox
191+
inputProps={{
192+
id: CODER_ORG_ID,
193+
}}
190194
className="min-w-60 max-w-3xl"
191195
value={coderOrgs}
192196
onChange={setCoderOrgs}
@@ -204,9 +208,8 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
204208
/>
205209
</div>
206210
<div className="grid grid-rows-[28px_auto]">
207-
&nbsp;
211+
<div />
208212
<Button
209-
className="mb-px"
210213
type="submit"
211214
disabled={!idpOrgName || coderOrgs.length === 0}
212215
onClick={async () => {
@@ -233,7 +236,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
233236
<IdpMappingTable isEmpty={organizationMappingCount === 0}>
234237
{form.values.mapping &&
235238
Object.entries(form.values.mapping)
236-
.sort()
239+
.sort(([a], [b]) => a.toLowerCase().localeCompare(b.toLowerCase()))
237240
.map(([idpOrg, organizations]) => (
238241
<OrganizationRow
239242
key={idpOrg}

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ export const IdpGroupSyncForm = ({
9696
const REGEX_FILTER_ID = "regex-filter";
9797
const AUTO_CREATE_MISSING_GROUPS_ID = "auto-create-missing-groups";
9898
const IDP_GROUP_NAME_ID = "idp-group-name";
99+
const CODER_GROUP_ID = "coder-group";
99100

100101
return (
101102
<form onSubmit={form.handleSubmit}>
@@ -116,7 +117,7 @@ export const IdpGroupSyncForm = ({
116117
<Label className="text-sm" htmlFor={SYNC_FIELD_ID}>
117118
Group sync field
118119
</Label>
119-
<Label className="text-sm" htmlFor={SYNC_FIELD_ID}>
120+
<Label className="text-sm" htmlFor={REGEX_FILTER_ID}>
120121
Regex filter
121122
</Label>
122123
<Input
@@ -188,10 +189,13 @@ export const IdpGroupSyncForm = ({
188189
/>
189190
</div>
190191
<div className="grid items-center gap-1 flex-1">
191-
<Label className="text-sm" htmlFor=":r1d:">
192+
<Label className="text-sm" htmlFor={CODER_GROUP_ID}>
192193
Coder group
193194
</Label>
194195
<MultiSelectCombobox
196+
inputProps={{
197+
id: CODER_GROUP_ID,
198+
}}
195199
className="min-w-60 max-w-3xl"
196200
value={coderGroups}
197201
onChange={setCoderGroups}
@@ -209,9 +213,8 @@ export const IdpGroupSyncForm = ({
209213
/>
210214
</div>
211215
<div className="grid grid-rows-[28px_auto]">
212-
&nbsp;
216+
<div />
213217
<Button
214-
className="mb-px"
215218
type="submit"
216219
disabled={!idpGroupName || coderGroups.length === 0}
217220
onClick={async () => {
@@ -240,7 +243,7 @@ export const IdpGroupSyncForm = ({
240243
<IdpMappingTable type="Group" rowCount={groupMappingCount}>
241244
{groupSyncSettings?.mapping &&
242245
Object.entries(groupSyncSettings.mapping)
243-
.sort()
246+
.sort(([a], [b]) => a.toLowerCase().localeCompare(b.toLowerCase()))
244247
.map(([idpGroup, groups]) => (
245248
<GroupRow
246249
key={idpGroup}
@@ -256,10 +259,10 @@ export const IdpGroupSyncForm = ({
256259
<LegacyGroupSyncHeader />
257260
<IdpMappingTable type="Group" rowCount={legacyGroupMappingCount}>
258261
{Object.entries(groupSyncSettings.legacy_group_name_mapping)
259-
.sort()
262+
.sort(([a], [b]) => a.toLowerCase().localeCompare(b.toLowerCase()))
260263
.map(([idpGroup, groupId]) => (
261264
<GroupRow
262-
key={idpGroup}
265+
key={groupId}
263266
idpGroup={idpGroup}
264267
coderGroup={getGroupNames([groupId])}
265268
onDelete={handleDelete}

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

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import Skeleton from "@mui/material/Skeleton";
21
import Table from "@mui/material/Table";
32
import TableBody from "@mui/material/TableBody";
43
import TableCell from "@mui/material/TableCell";
@@ -8,10 +7,6 @@ import TableRow from "@mui/material/TableRow";
87
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
98
import { EmptyState } from "components/EmptyState/EmptyState";
109
import { Link } from "components/Link/Link";
11-
import {
12-
TableLoaderSkeleton,
13-
TableRowSkeleton,
14-
} from "components/TableLoader/TableLoader";
1510
import type { FC } from "react";
1611
import { docs } from "utils/docs";
1712

@@ -26,8 +21,6 @@ export const IdpMappingTable: FC<IdpMappingTableProps> = ({
2621
rowCount,
2722
children,
2823
}) => {
29-
const isLoading = false;
30-
3124
return (
3225
<div className="flex flex-col w-full gap-2">
3326
<TableContainer>
@@ -43,9 +36,6 @@ export const IdpMappingTable: FC<IdpMappingTableProps> = ({
4336
</TableHead>
4437
<TableBody>
4538
<ChooseOne>
46-
<Cond condition={isLoading}>
47-
<TableLoader />
48-
</Cond>
4939
<Cond condition={rowCount === 0}>
5040
<TableRow>
5141
<TableCell colSpan={999}>
@@ -75,21 +65,3 @@ export const IdpMappingTable: FC<IdpMappingTableProps> = ({
7565
</div>
7666
);
7767
};
78-
79-
const TableLoader = () => {
80-
return (
81-
<TableLoaderSkeleton>
82-
<TableRowSkeleton>
83-
<TableCell>
84-
<Skeleton variant="text" width="25%" />
85-
</TableCell>
86-
<TableCell>
87-
<Skeleton variant="text" width="25%" />
88-
</TableCell>
89-
<TableCell>
90-
<Skeleton variant="text" width="25%" />
91-
</TableCell>
92-
</TableRowSkeleton>
93-
</TableLoaderSkeleton>
94-
);
95-
};

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ export const IdpRoleSyncForm = ({
6969

7070
const SYNC_FIELD_ID = "sync-field";
7171
const IDP_ROLE_NAME_ID = "idp-role-name";
72+
const CODER_ROLE_ID = "coder-role";
7273

7374
return (
7475
<form onSubmit={form.handleSubmit}>
@@ -130,10 +131,13 @@ export const IdpRoleSyncForm = ({
130131
/>
131132
</div>
132133
<div className="grid items-center gap-1 flex-1">
133-
<Label className="text-sm" htmlFor=":r1d:">
134+
<Label className="text-sm" htmlFor={CODER_ROLE_ID}>
134135
Coder role
135136
</Label>
136137
<MultiSelectCombobox
138+
inputProps={{
139+
id: CODER_ROLE_ID,
140+
}}
137141
className="min-w-60 max-w-3xl"
138142
value={coderRoles}
139143
onChange={setCoderRoles}
@@ -151,9 +155,8 @@ export const IdpRoleSyncForm = ({
151155
/>
152156
</div>
153157
<div className="grid grid-rows-[28px_auto]">
154-
&nbsp;
158+
<div />
155159
<Button
156-
className="mb-px"
157160
type="submit"
158161
disabled={!idpRoleName || coderRoles.length === 0}
159162
onClick={async () => {
@@ -180,7 +183,7 @@ export const IdpRoleSyncForm = ({
180183
<IdpMappingTable type="Role" rowCount={roleMappingCount}>
181184
{roleSyncSettings?.mapping &&
182185
Object.entries(roleSyncSettings.mapping)
183-
.sort()
186+
.sort(([a], [b]) => a.toLowerCase().localeCompare(b.toLowerCase()))
184187
.map(([idpRole, roles]) => (
185188
<RoleRow
186189
key={idpRole}

0 commit comments

Comments
 (0)