Skip to content

feat: add combobox for selecting claim field value for group/role idp sync #16459

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Feb 7, 2025
Merged

feat: add combobox for selecting claim field value for group/role idp sync #16459

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d9d4cc0
feat: add combobox using claim field values
jaaydenh Feb 5, 2025
dd2a6ff
chore: update to new table component
jaaydenh Feb 5, 2025
48d8856
fix: fix text
jaaydenh Feb 5, 2025
756bff8
fix: format
jaaydenh Feb 5, 2025
447cad7
chore: cleanup
jaaydenh Feb 7, 2025
4356123
chore: more cleanup
jaaydenh Feb 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: cleanup
  • Loading branch information
@jaaydenh
jaaydenh committed Feb 7, 2025
commit 447cad7d09c4a70c2cb1f55af27f9924ec7b4d37
4 changes: 2 additions & 2 deletions site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,16 @@ import {
} from "components/MultiSelectCombobox/MultiSelectCombobox";
import { Spinner } from "components/Spinner/Spinner";
import { Switch } from "components/Switch/Switch";
import { TableCell, TableRow } from "components/Table/Table";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import { TableCell, TableRow } from "components/Table/Table";
import { useFormik } from "formik";
import { Plus, Trash, TriangleAlert } from "lucide-react";
import { type FC, useId, useState, type KeyboardEventHandler } from "react";
import { type FC, type KeyboardEventHandler, useId, useState } from "react";
import { docs } from "utils/docs";
import { isUUID } from "utils/uuid";
import * as Yup from "yup";
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ import {
type Option,
} from "components/MultiSelectCombobox/MultiSelectCombobox";
import { Spinner } from "components/Spinner/Spinner";
import { TableCell, TableRow } from "components/Table/Table";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import { TableCell, TableRow } from "components/Table/Table";
import { useFormik } from "formik";
import { Plus, Trash, TriangleAlert } from "lucide-react";
import { type FC, type KeyboardEventHandler, useId, useState } from "react";
Expand Down
47 changes: 26 additions & 21 deletions site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { Link } from "components/Link/Link";
import { Paywall } from "components/Paywall/Paywall";
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
import { type FC, useState } from "react";
import { type FC, useEffect, useState } from "react";
import { Helmet } from "react-helmet-async";
import { useMutation, useQueries, useQuery, useQueryClient } from "react-query";
import { useParams, useSearchParams } from "react-router-dom";
Expand All @@ -27,15 +27,15 @@ import IdpSyncPageView from "./IdpSyncPageView";

export const IdpSyncPage: FC = () => {
const queryClient = useQueryClient();
// IdP sync does not have its own entitlement and is based on templace_rbac
const { template_rbac: isIdpSyncEnabled } = useFeatureVisibility();
const { organization: organizationName } = useParams() as {
organization: string;
};
const [groupClaimField, setGroupClaimField] = useState("");
const [roleClaimField, setRoleClaimField] = useState("");
// IdP sync does not have its own entitlement and is based on templace_rbac
const { template_rbac: isIdpSyncEnabled } = useFeatureVisibility();
const { organizations } = useOrganizationSettings();
const organization = organizations?.find((o) => o.name === organizationName);
const [groupField, setGroupField] = useState("");
const [roleField, setRoleField] = useState("");

const [
groupIdpSyncSettingsQuery,
Expand All @@ -48,15 +48,15 @@ export const IdpSyncPage: FC = () => {
...groupIdpSyncSettings(organizationName),
onSuccess: (data: GroupSyncSettings) => {
if (data?.field) {
setGroupClaimField(data.field);
setGroupField(data.field);
}
},
},
{
...roleIdpSyncSettings(organizationName),
onSuccess: (data: RoleSyncSettings) => {
if (data?.field) {
setRoleClaimField(data.field);
setRoleField(data.field);
}
},
},
Expand All @@ -65,12 +65,25 @@ export const IdpSyncPage: FC = () => {
],
});

useEffect(() => {
if (!groupIdpSyncSettingsQuery.data) {
return;
}

setGroupField(groupIdpSyncSettingsQuery.data.field);
}, [groupIdpSyncSettingsQuery.data]);

useEffect(() => {
if (!roleIdpSyncSettingsQuery.data) {
return;
}

setRoleField(roleIdpSyncSettingsQuery.data.field);
}, [roleIdpSyncSettingsQuery.data]);

const [searchParams] = useSearchParams();
const tab = searchParams.get("tab") || "groups";
const field =
tab === "groups"
? groupIdpSyncSettingsQuery.data?.field
: roleIdpSyncSettingsQuery.data?.field;
const field = tab === "groups" ? groupField : roleField;

const fieldValuesQuery = useQuery(
field
Expand Down Expand Up @@ -103,14 +116,6 @@ export const IdpSyncPage: FC = () => {
}
}

const handleGroupSyncFieldChange = (value: string) => {
setGroupClaimField(value);
};

const handleRoleSyncFieldChange = (value: string) => {
setRoleClaimField(value);
};

return (
<>
<Helmet>
Expand Down Expand Up @@ -146,8 +151,8 @@ export const IdpSyncPage: FC = () => {
groupsMap={groupsMap}
roles={rolesQuery.data}
organization={organization}
onGroupSyncFieldChange={handleGroupSyncFieldChange}
onRoleSyncFieldChange={handleRoleSyncFieldChange}
onGroupSyncFieldChange={setGroupField}
onRoleSyncFieldChange={setRoleField}
error={error}
onSubmitGroupSyncSettings={async (data) => {
try {
Expand Down
Loading