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 all commits
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
2 changes: 1 addition & 1 deletion site/src/components/Table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const TableRow = React.forwardRef<
ref={ref}
className={cn(
"border-0 border-b border-solid border-border transition-colors",
"hover:bg-muted/50 data-[state=selected]:bg-muted",
"data-[state=selected]:bg-muted",
className,
)}
{...props}
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -367,7 +367,7 @@ const IdpMappingTable: FC<IdpMappingTableProps> = ({ isEmpty, children }) => {
<TableRow>
<TableCell width="45%">IdP organization</TableCell>
<TableCell width="55%">Coder organization</TableCell>
<TableCell width="10%" />
<TableCell width="5%" />
</TableRow>
</TableHeader>
<TableBody>
Expand Down
59 changes: 48 additions & 11 deletions site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import type {
Group,
GroupSyncSettings,
Organization,
} from "api/typesGenerated";
import { Button } from "components/Button/Button";
import { Combobox } from "components/Combobox/Combobox";
import {
HelpTooltip,
HelpTooltipContent,
Expand All @@ -22,6 +21,7 @@ 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,
Expand All @@ -30,7 +30,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 { docs } from "utils/docs";
import { isUUID } from "utils/uuid";
import * as Yup from "yup";
Expand Down Expand Up @@ -70,6 +70,7 @@ interface IdpGroupSyncFormProps {
legacyGroupMappingCount: number;
organization: Organization;
onSubmit: (data: GroupSyncSettings) => void;
onSyncFieldChange: (value: string) => void;
}

export const IdpGroupSyncForm: FC<IdpGroupSyncFormProps> = ({
Expand All @@ -81,6 +82,7 @@ export const IdpGroupSyncForm: FC<IdpGroupSyncFormProps> = ({
groupsMap,
organization,
onSubmit,
onSyncFieldChange,
}) => {
const form = useFormik<GroupSyncSettings>({
initialValues: {
Expand All @@ -97,6 +99,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 +120,21 @@ 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 +162,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 +222,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 group"
open={open}
onOpenChange={setOpen}
inputValue={comboInputValue}
onInputChange={setComboInputValue}
onKeyDown={handleKeyDown}
onSelect={(value) => {
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
88 changes: 43 additions & 45 deletions site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpMappingTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { EmptyState } from "components/EmptyState/EmptyState";
import { Link } from "components/Link/Link";
import {
Table,
TableBody,
TableCell,
TableHeader,
TableRow,
} from "components/Table/Table";
import type { FC } from "react";
import { docs } from "utils/docs";

Expand All @@ -22,48 +23,45 @@ export const IdpMappingTable: FC<IdpMappingTableProps> = ({
children,
}) => {
return (
<div className="flex flex-col w-full gap-2">
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell width="45%">IdP {type.toLocaleLowerCase()}</TableCell>
<TableCell width="55%">
Coder {type.toLocaleLowerCase()}
</TableCell>
<TableCell width="10%" />
</TableRow>
</TableHead>
<TableBody>
<ChooseOne>
<Cond condition={rowCount === 0}>
<TableRow>
<TableCell colSpan={999}>
<EmptyState
message={`No ${type.toLocaleLowerCase()} mappings`}
isCompact
cta={
<Link
href={docs(
`/admin/users/idp-sync#${type.toLocaleLowerCase()}-sync`,
)}
>
How to setup IdP {type.toLocaleLowerCase()} sync
</Link>
}
/>
</TableCell>
</TableRow>
</Cond>
<Cond>{children}</Cond>
</ChooseOne>
</TableBody>
</Table>
</TableContainer>
<div className="flex flex-col gap-2">
<Table>
<TableHeader>
<TableRow>
<TableCell width="45%">IdP {type.toLocaleLowerCase()}</TableCell>
<TableCell width="55%">Coder {type.toLocaleLowerCase()}</TableCell>
<TableCell width="5%" />
</TableRow>
</TableHeader>
<TableBody>
<ChooseOne>
<Cond condition={rowCount === 0}>
<TableRow>
<TableCell colSpan={999}>
<EmptyState
message={`No ${type.toLocaleLowerCase()} mappings`}
isCompact
cta={
<Link
href={docs(
`/admin/users/idp-sync#${type.toLocaleLowerCase()}-sync`,
)}
>
How to setup IdP {type.toLocaleLowerCase()} sync
</Link>
}
/>
</TableCell>
</TableRow>
</Cond>
<Cond>{children}</Cond>
</ChooseOne>
</TableBody>
</Table>
<div className="flex justify-end">
<div className="text-content-secondary text-xs">
Showing <strong className="text-content-primary">{rowCount}</strong>{" "}
groups
{type.toLocaleLowerCase()}
{(rowCount === 0 || rowCount > 1) && "s"}
</div>
</div>
</div>
Expand Down
59 changes: 48 additions & 11 deletions site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
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 {
MultiSelectCombobox,
type Option,
} from "components/MultiSelectCombobox/MultiSelectCombobox";
import { Spinner } from "components/Spinner/Spinner";
import { TableCell, TableRow } from "components/Table/Table";
import {
Tooltip,
TooltipContent,
Expand All @@ -17,7 +17,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 +53,7 @@ interface IdpRoleSyncFormProps {
organization: Organization;
roles: Role[];
onSubmit: (data: RoleSyncSettings) => void;
onSyncFieldChange: (value: string) => void;
}

export const IdpRoleSyncForm: FC<IdpRoleSyncFormProps> = ({
Expand All @@ -62,6 +63,7 @@ export const IdpRoleSyncForm: FC<IdpRoleSyncFormProps> = ({
organization,
roles,
onSubmit,
onSyncFieldChange,
}) => {
const form = useFormik<RoleSyncSettings>({
initialValues: {
Expand All @@ -75,6 +77,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 +94,21 @@ 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 +133,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 +163,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 role"
open={open}
onOpenChange={setOpen}
inputValue={comboInputValue}
onInputChange={setComboInputValue}
onKeyDown={handleKeyDown}
onSelect={(value) => {
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
Loading
Loading