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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy