Skip to content

Commit dd2a6ff

Browse files
jaaydenhjaaydenh
committed
chore: update to new table component
1 parent d9d4cc0 commit dd2a6ff

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
@@ -367,7 +367,7 @@ const IdpMappingTable: FC<IdpMappingTableProps> = ({ isEmpty, children }) => {
367367
<TableRow>
368368
<TableCell width="45%">IdP organization</TableCell>
369369
<TableCell width="55%">Coder organization</TableCell>
370-
<TableCell width="10%" />
370+
<TableCell width="5%" />
371371
</TableRow>
372372
</TableHeader>
373373
<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,
@@ -29,6 +27,7 @@ import {
2927
TooltipProvider,
3028
TooltipTrigger,
3129
} from "components/Tooltip/Tooltip";
30+
import { TableCell, TableRow } from "components/Table/Table";
3231
import { useFormik } from "formik";
3332
import { Plus, Trash, TriangleAlert } from "lucide-react";
3433
import { type FC, useId, useState, type KeyboardEventHandler } from "react";
@@ -125,7 +124,9 @@ export const IdpGroupSyncForm: FC<IdpGroupSyncFormProps> = ({
125124
if (
126125
event.key === "Enter" &&
127126
comboInputValue &&
128-
!claimFieldValues?.some((value) => value === comboInputValue.toLowerCase())
127+
!claimFieldValues?.some(
128+
(value) => value === comboInputValue.toLowerCase(),
129+
)
129130
) {
130131
event.preventDefault();
131132
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";
@@ -16,6 +14,7 @@ import {
1614
TooltipProvider,
1715
TooltipTrigger,
1816
} from "components/Tooltip/Tooltip";
17+
import { TableCell, TableRow } from "components/Table/Table";
1918
import { useFormik } from "formik";
2019
import { Plus, Trash, TriangleAlert } from "lucide-react";
2120
import { type FC, type KeyboardEventHandler, useId, useState } from "react";
@@ -99,7 +98,9 @@ export const IdpRoleSyncForm: FC<IdpRoleSyncFormProps> = ({
9998
if (
10099
event.key === "Enter" &&
101100
comboInputValue &&
102-
!claimFieldValues?.some((value) => value === comboInputValue.toLowerCase())
101+
!claimFieldValues?.some(
102+
(value) => value === comboInputValue.toLowerCase(),
103+
)
103104
) {
104105
event.preventDefault();
105106
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