8000 feat: add combobox for selecting claim field value for group/role idp sync by jaaydenh · Pull Request #16459 · coder/coder · GitHub
[go: up one dir, main page]
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
Next Next commit
feat: add combobox using claim field values
  • Loading branch information
@jaaydenh
jaaydenh committed Feb 7, 2025
commit d9d4cc0b2c9c3ef3333a3c6448b8a401c7d4e977
54 changes: 45 additions & 9 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 @@ -6,6 +6,7 @@ import type {
Organization,
} from "api/typesGenerated";
import { Button } from "components/Button/Button";
import { Combobox } from "components/Combobox/Combobox";
import {
HelpTooltip,
HelpTooltipContent,
Expand All @@ -30,7 +31,7 @@ import {
} from "components/Tooltip/Tooltip";
import { useFormik } from "formik";
import { Plus, Trash, TriangleAlert } from "lucide-react";
import { type FC, useId, useState } from "react";
import { type FC, useId, useState, type KeyboardEventHandler } from "react";
import { docs } from "utils/docs";
import { isUUID } from "utils/uuid";
import * as Yup from "yup";
Expand Down Expand Up @@ -70,6 +71,7 @@ interface IdpGroupSyncFormProps {
legacyGroupMappingCount: number;
organization: Organization;
onSubmit: (data: GroupSyncSettings) => void;
onSyncFieldChange: (value: string) => void;
}

export const IdpGroupSyncForm: FC<IdpGroupSyncFormProps> = ({
Expand All @@ -81,6 +83,7 @@ export const IdpGroupSyncForm: FC<IdpGroupSyncFormProps> = ({
groupsMap,
organization,
onSubmit,
onSyncFieldChange,
}) => {
const form = useFormik<GroupSyncSettings>({
initialValues: {
Expand All @@ -97,6 +100,8 @@ export const IdpGroupSyncForm: FC<IdpGroupSyncFormProps> = ({
const [idpGroupName, setIdpGroupName] = useState("");
const [coderGroups, setCoderGroups] = useState<Option[]>([]);
const id = useId();
const [comboInputValue, setComboInputValue] = useState("");
const [open, setOpen] = useState(false);

const getGroupNames = (groupIds: readonly string[]) => {
return groupIds.map((groupId) => groupsMap.get(groupId) || groupId);
Expand All @@ -116,6 +121,19 @@ export const IdpGroupSyncForm: FC<IdpGroupSyncFormProps> = ({
form.handleSubmit();
};

const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
if (
event.key === "Enter" &&
comboInputValue &&
!claimFieldValues?.some((value) => value === comboInputValue.toLowerCase())
) {
event.preventDefault();
setIdpGroupName(comboInputValue);
setComboInputValue("");
setOpen(false);
}
};

return (
<form onSubmit={form.handleSubmit}>
<fieldset
Expand Down Expand Up @@ -143,6 +161,7 @@ export const IdpGroupSyncForm: FC<IdpGroupSyncFormProps> = ({
value={form.values.field}
onChange={(event) => {
void form.setFieldValue("field", event.target.value);
onSyncFieldChange(event.target.value);
}}
className="w-72"
/>
Expand Down Expand Up @@ -202,14 +221,31 @@ export const IdpGroupSyncForm: FC<IdpGroupSyncFormProps> = ({
<Label className="text-sm" htmlFor={`${id}-idp-group-name`}>
IdP group name
</Label>
<Input
id={`${id}-idp-group-name`}
value={idpGroupName}
className="w-72"
onChange={(event) => {
setIdpGroupName(event.target.value);
}}
/>
{claimFieldValues ? (
<Combobox
value={idpGroupName}
options={claimFieldValues}
placeholder="Select IdP organization"
open={open}
onOpenChange={setOpen}
inputValue={comboInputValue}
onInputChange={setComboInputValue}
onKeyDown={handleKeyDown}
onSelect={(value: string) => {
setIdpGroupName(value);
setOpen(false);
}}
/>
) : (
<Input
id={`${id}-idp-group-name`}
value={idpGroupName}
className="w-72"
onChange={(event) => {
setIdpGroupName(event.target.value);
}}
/>
)}
</div>
<div className="grid items-center gap-1 flex-1">
<Label className="text-sm" htmlFor={`${id}-coder-group`}>
Expand Down
54 changes: 45 additions & 9 deletions site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import type { Organization, Role, RoleSyncSettings } from "api/typesGenerated";
import { Button } from "components/Button/Button";
import { Combobox } from "components/Combobox/Combobox";
import { Input } from "components/Input/Input";
import { Label } from "components/Label/Label";
import {
Expand All @@ -17,7 +18,7 @@ import {
} from "components/Tooltip/Tooltip";
import { useFormik } from "formik";
import { Plus, Trash, TriangleAlert } from "lucide-react";
import { type FC, useId, useState } from "react";
import { type FC, type KeyboardEventHandler, useId, useState } from "react";
import * as Yup from "yup";
import { ExportPolicyButton } from "./ExportPolicyButton";
import { IdpMappingTable } from "./IdpMappingTable";
Expand Down Expand Up @@ -53,6 +54,7 @@ interface IdpRoleSyncFormProps {
organization: Organization;
roles: Role[];
onSubmit: (data: RoleSyncSettings) => void;
onSyncFieldChange: (value: string) => void;
}

export const IdpRoleSyncForm: FC<IdpRoleSyncFormProps> = ({
Expand All @@ -62,6 +64,7 @@ export const IdpRoleSyncForm: FC<IdpRoleSyncFormProps> = ({
organization,
roles,
onSubmit,
onSyncFieldChange,
}) => {
const form = useFormik<RoleSyncSettings>({
initialValues: {
Expand All @@ -75,6 +78,8 @@ export const IdpRoleSyncForm: FC<IdpRoleSyncFormProps> = ({
const [idpRoleName, setIdpRoleName] = useState("");
const [coderRoles, setCoderRoles] = useState<Option[]>([]);
const id = useId();
const [comboInputValue, setComboInputValue] = useState("");
const [open, setOpen] = useState(false);

const handleDelete = async (idpOrg: string) => {
const newMapping = Object.fromEntries(
Expand All @@ -90,6 +95,19 @@ export const IdpRoleSyncForm: FC<IdpRoleSyncFormProps> = ({
form.handleSubmit();
};

const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
if (
event.key === "Enter" &&
comboInputValue &&
!claimFieldValues?.some((value) => value === comboInputValue.toLowerCase())
) {
event.preventDefault();
setIdpRoleName(comboInputValue);
setComboInputValue("");
setOpen(false);
}
};

return (
<form onSubmit={form.handleSubmit}>
<fieldset
Expand All @@ -114,6 +132,7 @@ export const IdpRoleSyncForm: FC<IdpRoleSyncFormProps> = ({
value={form.values.field}
onChange={(event) => {
void form.setFieldValue("field", event.target.value);
onSyncFieldChange(event.target.value);
}}
className="w-72"
/>
Expand Down Expand Up @@ -143,14 +162,31 @@ export const IdpRoleSyncForm: FC<IdpRoleSyncFormProps> = ({
<Label className="text-sm" htmlFor={`${id}-idp-role-name`}>
IdP role name
</Label>
<Input
id={`${id}-idp-role-name`}
value={idpRoleName}
className="w-72"
onChange={(event) => {
setIdpRoleName(event.target.value);
}}
/>
{claimFieldValues ? (
<Combobox
value={idpRoleName}
options={claimFieldValues}
placeholder="Select IdP organization"
open={open}
onOpenChange={setOpen}
inputValue={comboInputValue}
onInputChange={setComboInputValue}
onKeyDown={handleKeyDown}
onSelect={(value: string) => {
setIdpRoleName(value);
setOpen(false);
}}
/>
) : (
<Input
id={`${id}-idp-role-name`}
value={idpRoleName}
className="w-72"
onChange={(event) => {
setIdpRoleName(event.target.value);
}}
/>
)}
</div>
<div className="grid items-center gap-1 flex-1">
<Label className="text-sm" htmlFor={`${id}-coder-role`}>
Expand Down
33 changes: 30 additions & 3 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 @@ -8,6 +8,7 @@ import {
roleIdpSyncSettings,
} from "api/queries/organizations";
import { organizationRoles } from "api/queries/roles";
import type { GroupSyncSettings, RoleSyncSettings } from "api/typesGenerated";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { EmptyState } from "components/EmptyState/EmptyState";
import { displayError } from "components/GlobalSnackbar/utils";
Expand All @@ -16,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 } from "react";
import { type FC, 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 @@ -29,6 +30,8 @@ export const IdpSyncPage: FC = () => {
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();
Expand All @@ -41,8 +44,22 @@ export const IdpSyncPage: FC = () => {
rolesQuery,
] = useQueries({
queries: [
groupIdpSyncSettings(organizationName),
roleIdpSyncSettings(organizationName),
{
...groupIdpSyncSettings(organizationName),
onSuccess: (data: GroupSyncSettings) => {
if (data?.field) {
setGroupClaimField(data.field);
}
},
},
{
...roleIdpSyncSettings(organizationName),
onSuccess: (data: RoleSyncSettings) => {
if (data?.field) {
setRoleClaimField(data.field);
}
},
},
groupsByOrganization(organizationName),
organizationRoles(organizationName),
],
Expand Down Expand Up @@ -86,6 +103,14 @@ export const IdpSyncPage: FC = () => {
}
}

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

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

return (
<>
<Helmet>
Expand Down Expand Up @@ -121,6 +146,8 @@ export const IdpSyncPage: FC = () => {
groupsMap={groupsMap}
roles={rolesQuery.data}
organization={organization}
onGroupSyncFieldChange={handleGroupSyncFieldChange}
onRoleSyncFieldChange={handleRoleSyncFieldChange}
error={error}
onSubmitGroupSyncSettings={async (data) => {
try {
Expand Down
6 changes: 6 additions & 0 deletions site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ interface IdpSyncPageViewProps {
groupsMap: Map<string, string>;
roles: Role[] | undefined;
organization: Organization;
onGroupSyncFieldChange: (value: string) => void;
onRoleSyncFieldChange: (value: string) => void;
error?: unknown;
onSubmitGroupSyncSettings: (data: GroupSyncSettings) => void;
onSubmitRoleSyncSettings: (data: RoleSyncSettings) => void;
Expand All @@ -35,6 +37,8 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
groupsMap,
roles,
organization,
onGroupSyncFieldChange,
onRoleSyncFieldChange,
error,
onSubmitGroupSyncSettings,
onSubmitRoleSyncSettings,
Expand Down Expand Up @@ -76,6 +80,7 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
groupsMap={groupsMap}
organization={organization}
onSubmit={onSubmitGroupSyncSettings}
onSyncFieldChange={onGroupSyncFieldChange}
/>
) : (
<IdpRoleSyncForm
Expand All @@ -85,6 +90,7 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
roles={roles || []}
organization={organization}
onSubmit={onSubmitRoleSyncSettings}
onSyncFieldChange={onRoleSyncFieldChange}
/>
)}
</div>
Expand Down
0