Skip to content

Commit 9600624

Browse files
aslilacaslilac
committed
this is something
1 parent eedf797 commit 9600624

File tree

5 files changed

+78
-21
lines changed

5 files changed

+78
-21
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
Tooltip,
3333
TooltipContent,
3434
TooltipTrigger,
35+
TooltipProvider,
3536
} from "components/Tooltip/Tooltip";
3637
import { Spinner } from "components/Spinner/Spinner";
3738
import { Switch } from "components/Switch/Switch";
@@ -50,7 +51,6 @@ import { isUUID } from "utils/uuid";
5051
import * as Yup from "yup";
5152
import { OrganizationPills } from "./OrganizationPills";
5253
import { Stack } from "components/Stack/Stack";
53-
import { TooltipProvider } from "@radix-ui/react-tooltip";
5454

5555
interface IdpSyncPageViewProps {
5656
organizationSyncSettings: OrganizationSyncSettings | undefined;

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,15 @@ const groupSyncValidationSchema = Yup.object({
6565
.default({}),
6666
});
6767

68-
export const IdpGroupSyncForm = ({
68+
export const IdpGroupSyncForm: FC<IdpGroupSyncFormProps> = ({
6969
groupSyncSettings,
7070
groupMappingCount,
7171
legacyGroupMappingCount,
7272
groups,
7373
groupsMap,
7474
organization,
7575
onSubmit,
76-
}: IdpGroupSyncFormProps) => {
76+
}) => {
7777
const form = useFormik<GroupSyncSettings>({
7878
initialValues: {
7979
field: groupSyncSettings?.field ?? "",

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

+52-13
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,19 @@ import {
1010
} from "components/MultiSelectCombobox/MultiSelectCombobox";
1111
import { Spinner } from "components/Spinner/Spinner";
1212
import { useFormik } from "formik";
13-
import { Plus, Trash } from "lucide-react";
13+
import { Plus, Trash, TriangleAlert } from "lucide-react";
1414
import { type FC, useId, useState } from "react";
1515
import * as Yup from "yup";
1616
import { ExportPolicyButton } from "./ExportPolicyButton";
1717
import { IdpMappingTable } from "./IdpMappingTable";
1818
import { IdpPillList } from "./IdpPillList";
19-
20-
interface IdpRoleSyncFormProps {
21-
roleSyncSettings: RoleSyncSettings;
22-
roleMappingCount: number;
23-
organization: Organization;
24-
roles: Role[];
25-
onSubmit: (data: RoleSyncSettings) => void;
26-
}
19+
import { Stack } from "components/Stack/Stack";
20+
import {
21+
Tooltip,
22+
TooltipContent,
23+
TooltipTrigger,
24+
TooltipProvider,
25+
} from "components/Tooltip/Tooltip";
2726

2827
const roleSyncValidationSchema = Yup.object({
2928
field: Yup.string().trim(),
@@ -48,13 +47,23 @@ const roleSyncValidationSchema = Yup.object({
4847
.default({}),
4948
});
5049

51-
export const IdpRoleSyncForm = ({
50+
interface IdpRoleSyncFormProps {
51+
roleSyncSettings: RoleSyncSettings;
52+
fieldValues: string[] | undefined;
53+
roleMappingCount: number;
54+
organization: Organization;
55+
roles: Role[];
56+
onSubmit: (data: RoleSyncSettings) => void;
57+
}
58+
59+
export const IdpRoleSyncForm: FC<IdpRoleSyncFormProps> = ({
5260
roleSyncSettings,
61+
fieldValues,
5362
roleMappingCount,
5463
organization,
5564
roles,
5665
onSubmit,
57-
}: IdpRoleSyncFormProps) => {
66+
}) => {
5867
const form = useFormik<RoleSyncSettings>({
5968
initialValues: {
6069
field: roleSyncSettings?.field ?? "",
@@ -210,6 +219,7 @@ export const IdpRoleSyncForm = ({
210219
<RoleRow
211220
key={idpRole}
212221
idpRole={idpRole}
222+
exists={fieldValues?.includes(idpRole)}
213223
coderRoles={roles}
214224
onDelete={handleDelete}
215225
/>
@@ -222,14 +232,43 @@ export const IdpRoleSyncForm = ({
222232

223233
interface RoleRowProps {
224234
idpRole: string;
235+
exists: boolean | undefined;
225236
coderRoles: readonly string[];
226237
onDelete: (idpOrg: string) => void;
227238
}
228239

229-
const RoleRow: FC<RoleRowProps> = ({ idpRole, coderRoles, onDelete }) => {
240+
const RoleRow: FC<RoleRowProps> = ({
241+
idpRole,
242+
exists = true,
243+
coderRoles,
244+
onDelete,
245+
}) => {
230246
return (
231247
<TableRow data-testid={`role-${idpRole}`}>
232-
<TableCell>{idpRole}</TableCell>
248+
<TableCell>
249+
<Stack
250+
direction="row"
251+
alignItems="center"
252+
spacing={1}
253+
className="text-content-primary"
254+
>
255+
{idpRole}
256+
{!exists && (
257+
<TooltipProvider>
258+
<Tooltip>
259+
<TooltipTrigger asChild>
260+
<TriangleAlert className="size-icon-sm cursor-pointer text-content-warning" />
261+
</TooltipTrigger>
262+
<TooltipContent className="p-2 text-xs text-content-secondary max-w-sm">
263+
This value has not be seen in the specified claim field
264+
before. You might want to check your IdP configuration and
265+
ensure that this value is not misspelled.
266+
</TooltipContent>
267+
</Tooltip>
268+
</TooltipProvider>
269+
)}
270+
</Stack>
271+
</TableCell>
233272
<TableCell>
234273
<IdpPillList roles={coderRoles} />
235274
</TableCell>

‎site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx

+18-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { getErrorMessage } from "api/errors";
22
import { groupsByOrganization } from "api/queries/groups";
33
import {
44
groupIdpSyncSettings,
5+
organizationIdpSyncClaimFieldValues,
56
patchGroupSyncSettings,
67
patchRoleSyncSettings,
78
roleIdpSyncSettings,
@@ -17,8 +18,8 @@ import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
1718
import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
1819
import type { FC } from "react";
1920
import { Helmet } from "react-helmet-async";
20-
import { useMutation, useQueries, useQueryClient } from "react-query";
21-
import { useParams } from "react-router-dom";
21+
import { useMutation, useQueries, useQuery, useQueryClient } from "react-query";
22+
import { useParams, useSearchParams } from "react-router-dom";
2223
import { docs } from "utils/docs";
2324
import { pageTitle } from "utils/page";
2425
import IdpSyncPageView from "./IdpSyncPageView";
@@ -47,6 +48,19 @@ export const IdpSyncPage: FC = () => {
4748
],
4849
});
4950

51+
const [searchParams] = useSearchParams();
52+
const tab = searchParams.get("tab") || "groups";
53+
const field =
54+
tab === "groups"
55+
? groupIdpSyncSettingsQuery.data?.field
56+
: roleIdpSyncSettingsQuery.data?.field;
57+
58+
const fieldValuesQuery = useQuery(
59+
field
60+
? organizationIdpSyncClaimFieldValues(organizationName, field)
61+
: { enabled: false },
62+
);
63+
5064
if (!organization) {
5165
return <EmptyState message="Organization not found" />;
5266
}
@@ -99,8 +113,10 @@ export const IdpSyncPage: FC = () => {
99113
</Cond>
100114
<Cond>
101115
<IdpSyncPageView
116+
tab={tab}
102117
groupSyncSettings={groupIdpSyncSettingsQuery.data}
103118
roleSyncSettings={roleIdpSyncSettingsQuery.data}
119+
fieldValues={fieldValuesQuery.data}
104120
groups={groupsQuery.data}
105121
groupsMap={groupsMap}
106122
roles={rolesQuery.data}

‎site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPageView.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
99
import { Loader } from "components/Loader/Loader";
1010
import { TabLink, Tabs, TabsList } from "components/Tabs/Tabs";
1111
import type { FC } from "react";
12-
import { useSearchParams } from "react-router-dom";
1312
import { IdpGroupSyncForm } from "./IdpGroupSyncForm";
1413
import { IdpRoleSyncForm } from "./IdpRoleSyncForm";
1514

1615
interface IdpSyncPageViewProps {
16+
tab: string;
1717
groupSyncSettings: GroupSyncSettings | undefined;
1818
roleSyncSettings: RoleSyncSettings | undefined;
19+
fieldValues: string[] | undefined;
1920
groups: Group[] | undefined;
2021
groupsMap: Map<string, string>;
2122
roles: Role[] | undefined;
@@ -26,8 +27,10 @@ interface IdpSyncPageViewProps {
2627
}
2728

2829
export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
30+
tab
2931
groupSyncSettings,
3032
roleSyncSettings,
33+
fieldValues,
3134
groups,
3235
groupsMap,
3336
roles,
@@ -36,8 +39,6 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
3639
onSubmitGroupSyncSettings,
3740
onSubmitRoleSyncSettings,
3841
}) => {
39-
const [searchParams] = useSearchParams();
40-
const tab = searchParams.get("tab") || "groups";
4142
const groupMappingCount = groupSyncSettings?.mapping
4243
? Object.entries(groupSyncSettings.mapping).length
4344
: 0;
@@ -78,6 +79,7 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
7879
) : (
7980
<IdpRoleSyncForm
8081
roleSyncSettings={roleSyncSettings}
82+
fieldValues={fieldValues}
8183
roleMappingCount={roleMappingCount}
8284
roles={roles || []}
8385
organization={organization}

0 commit comments

Comments
 (0)