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: update to new table component
  • Loading branch information
@jaaydenh
jaaydenh committed Feb 7, 2025
commit dd2a6fffe7ee4359613768589e001724b48969b1
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
7 changes: 4 additions & 3 deletions site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import type {
Group,
GroupSyncSettings,
Expand Down Expand Up @@ -29,6 +27,7 @@ import {
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";
Expand Down Expand Up @@ -125,7 +124,9 @@ export const IdpGroupSyncForm: FC<IdpGroupSyncFormProps> = ({
if (
event.key === "Enter" &&
comboInputValue &&
!claimFieldValues?.some((value) => value === comboInputValue.toLowerCase())
!claimFieldValues?.some(
(value) => value === comboInputValue.toLowerCase(),
)
) {
event.preventDefault();
setIdpGroupName(comboInputValue);
Expand Down
85 changes: 41 additions & 44 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,44 +23,40 @@ 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>{" "}
Expand Down
7 changes: 4 additions & 3 deletions site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
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";
Expand All @@ -16,6 +14,7 @@ import {
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 Expand Up @@ -99,7 +98,9 @@ export const IdpRoleSyncForm: FC<IdpRoleSyncFormProps> = ({
if (
event.key === "Enter" &&
comboInputValue &&
!claimFieldValues?.some((value) => value === comboInputValue.toLowerCase())
!claimFieldValues?.some(
(value) => value === comboInputValue.toLowerCase(),
)
) {
event.preventDefault();
setIdpRoleName(comboInputValue);
Expand Down