Skip to content

Commit 63cb191

Browse files
jaaydenhjaaydenh
committed
chore: update to new table component
1 parent 33599ce commit 63cb191

File tree

5 files changed

+51
-52
lines changed

5 files changed

+51
-52
lines changed

‎site/src/components/Table/Table.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const TableRow = React.forwardRef<
6868
ref={ref}
6969
className={cn(
7070
"border-0 border-b border-solid border-border transition-colors",
71-
"hover:bg-muted/50 data-[state=selected]:bg-muted",
71+
"data-[state=selected]:bg-muted",
7272
className,
7373
)}
7474
{...props}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,7 @@ const IdpMappingTable: FC<IdpMappingTableProps> = ({ isEmpty, children }) => {
360360
<TableRow>
361361
<TableCell width="45%">IdP organization</TableCell>
362362
<TableCell width="55%">Coder organization</TableCell>
363-
<TableCell width="10%" />
363+
<TableCell width="5%" />
364364
</TableRow>
365365
</TableHeader>
366366
<TableBody>

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import TableCell from "@mui/material/TableCell";
2-
import TableRow from "@mui/material/TableRow";
31
import type {
42
Group,
53
GroupSyncSettings,
@@ -23,6 +21,7 @@ import {
2321
} from "components/MultiSelectCombobox/MultiSelectCombobox";
2422
import { Spinner } from "components/Spinner/Spinner";
2523
import { Switch } from "components/Switch/Switch";
24+
import { TableCell, TableRow } from "components/Table/Table";
2625
import { useFormik } from "formik";
2726
import { Plus, Trash } from "lucide-react";
2827
import { type FC, type KeyboardEventHandler, useId, useState } from "react";
@@ -119,7 +118,9 @@ export const IdpGroupSyncForm = ({
119118
if (
120119
event.key === "Enter" &&
121120
comboInputValue &&
122-
!claimFieldValues?.some((value) => value === comboInputValue.toLowerCase())
121+
!claimFieldValues?.some(
122+
(value) => value === comboInputValue.toLowerCase(),
123+
)
123124
) {
124125
event.preventDefault();
125126
setIdpGroupName(comboInputValue);

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

Lines changed: 41 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import Table from "@mui/material/Table";
2-
import TableBody from "@mui/material/TableBody";
3-
import TableCell from "@mui/material/TableCell";
4-
import TableContainer from "@mui/material/TableContainer";
5-
import TableHead from "@mui/material/TableHead";
6-
import TableRow from "@mui/material/TableRow";
71
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
82
import { EmptyState } from "components/EmptyState/EmptyState";
93
import { Link } from "components/Link/Link";
4+
import {
5+
Table,
6+
TableBody,
7+
TableCell,
8+
TableHeader,
9+
TableRow,
10+
} from "components/Table/Table";
1011
import type { FC } from "react";
1112
import { docs } from "utils/docs";
1213

@@ -22,44 +23,40 @@ export const IdpMappingTable: FC<IdpMappingTableProps> = ({
2223
children,
2324
}) => {
2425
return (
25-
<div className="flex flex-col w-full gap-2">
26-
<TableContainer>
27-
<Table>
28-
<TableHead>
29-
<TableRow>
30-
<TableCell width="45%">IdP {type.toLocaleLowerCase()}</TableCell>
31-
<TableCell width="55%">
32-
Coder {type.toLocaleLowerCase()}
33-
</TableCell>
34-
<TableCell width="10%" />
35-
</TableRow>
36-
</TableHead>
37-
<TableBody>
38-
<ChooseOne>
39-
<Cond condition={rowCount === 0}>
40-
<TableRow>
41-
<TableCell colSpan={999}>
42-
<EmptyState
43-
message={`No ${type.toLocaleLowerCase()} mappings`}
44-
isCompact
45-
cta={
46-
<Link
47-
href={docs(
48-
`/admin/users/idp-sync#${type.toLocaleLowerCase()}-sync`,
49-
)}
50-
>
51-
How to setup IdP {type.toLocaleLowerCase()} sync
52-
</Link>
53-
}
54-
/>
55-
</TableCell>
56-
</TableRow>
57-
</Cond>
58-
<Cond>{children}</Cond>
59-
</ChooseOne>
60-
</TableBody>
61-
</Table>
62-
</TableContainer>
26+
<div className="flex flex-col gap-2">
27+
<Table>
28+
<TableHeader>
29+
<TableRow>
30+
<TableCell width="45%">IdP {type.toLocaleLowerCase()}</TableCell>
31+
<TableCell width="55%">Coder {type.toLocaleLowerCase()}</TableCell>
32+
<TableCell width="5%" />
33+
</TableRow>
34+
</TableHeader>
35+
<TableBody>
36+
<ChooseOne>
37+
<Cond condition={rowCount === 0}>
38+
<TableRow>
39+
<TableCell colSpan={999}>
40+
<EmptyState
41+
message={`No ${type.toLocaleLowerCase()} mappings`}
42+
isCompact
43+
cta={
44+
<Link
45+
href={docs(
46+
`/admin/users/idp-sync#${type.toLocaleLowerCase()}-sync`,
47+
)}
48+
>
49+
How to setup IdP {type.toLocaleLowerCase()} sync
50+
</Link>
51+
}
52+
/>
53+
</TableCell>
54+
</TableRow>
55+
</Cond>
56+
<Cond>{children}</Cond>
57+
</ChooseOne>
58+
</TableBody>
59+
</Table>
6360
<div className="flex justify-end">
6461
<div className="text-content-secondary text-xs">
6562
Showing <strong className="text-content-primary">{rowCount}</strong>{" "}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import TableCell from "@mui/material/TableCell";
2-
import TableRow from "@mui/material/TableRow";
31
import type { Organization, Role, RoleSyncSettings } from "api/typesGenerated";
42
import { Button } from "components/Button/Button";
53
import { Combobox } from "components/Combobox/Combobox";
@@ -10,6 +8,7 @@ import {
108
type Option,
119
} from "components/MultiSelectCombobox/MultiSelectCombobox";
1210
import { Spinner } from "components/Spinner/Spinner";
11+
import { TableCell, TableRow } from "components/Table/Table";
1312
import { useFormik } from "formik";
1413
import { Plus, Trash } from "lucide-react";
1514
import { type FC, type KeyboardEventHandler, useId, useState } from "react";
@@ -92,7 +91,9 @@ export const IdpRoleSyncForm = ({
9291
if (
9392
event.key === "Enter" &&
9493
comboInputValue &&
95-
!claimFieldValues?.some((value) => value === comboInputValue.toLowerCase())
94+
!claimFieldValues?.some(
95+
(value) => value === comboInputValue.toLowerCase(),
96+
)
9697
) {
9798
event.preventDefault();
9899
setIdpRoleName(comboInputValue);

0 commit comments

Comments
 (0)