Skip to content

Commit 9c99625

Browse files
jaaydenhjaaydenh
committed
chore: styling cleanup
1 parent 863dc9e commit 9c99625

File tree

4 files changed

+64
-129
lines changed

4 files changed

+64
-129
lines changed

‎site/src/components/Tabs/Tabs.tsx

Lines changed: 10 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
21
import { type FC, type HTMLAttributes, createContext, useContext } from "react";
32
import { Link, type LinkProps } from "react-router-dom";
3+
import { cn } from "utils/cn";
44

55
export const TAB_PADDING_Y = 12;
66
export const TAB_PADDING_X = 16;
@@ -14,14 +14,10 @@ const TabsContext = createContext<TabsContextValue | undefined>(undefined);
1414
type TabsProps = HTMLAttributes<HTMLDivElement> & TabsContextValue;
1515

1616
export const Tabs: FC<TabsProps> = ({ active, ...htmlProps }) => {
17-
const theme = useTheme();
18-
1917
return (
2018
<TabsContext.Provider value={{ active }}>
2119
<div
22-
css={{
23-
borderBottom: `1px solid ${theme.palette.divider}`,
24-
}}
20+
className="border-b border-solid border-border border-t-0 border-l-0 border-r-0"
2521
{...htmlProps}
2622
/>
2723
</TabsContext.Provider>
@@ -31,16 +27,7 @@ export const Tabs: FC<TabsProps> = ({ active, ...htmlProps }) => {
3127
type TabsListProps = HTMLAttributes<HTMLDivElement>;
3228

3329
export const TabsList: FC<TabsListProps> = (props) => {
34-
return (
35-
<div
36-
role="tablist"
37-
css={{
38-
display: "flex",
39-
alignItems: "baseline",
40-
}}
41-
{...props}
42-
/>
43-
);
30+
return <div role="tablist" className="flex items-baseline" {...props} />;
4431
};
4532

4633
type TabLinkProps = LinkProps & {
@@ -59,37 +46,13 @@ export const TabLink: FC<TabLinkProps> = ({ value, ...linkProps }) => {
5946
return (
6047
<Link
6148
{...linkProps}
62-
css={[styles.tabLink, isActive ? styles.activeTabLink : ""]}
49+
className={cn(
50+
"text-sm text-content-secondary no-underline font-medium py-2 px-3 hover:text-content-primary rounded-md",
51+
{
52+
"text-content-primary relative before:absolute before:bg-surface-invert-primary before:left-0 before:w-full before:h-px before:-bottom-px before:content-['']":
53+
isActive,
54+
},
55+
)}
6356
/>
6457
);
6558
};
66-
67-
const styles = {
68-
tabLink: (theme) => ({
69-
textDecoration: "none",
70-
color: theme.palette.text.secondary,
71-
fontSize: 14,
72-
display: "block",
73-
padding: `${TAB_PADDING_Y}px ${TAB_PADDING_X}px`,
74-
fontWeight: 500,
75-
lineHeight: "1",
76-
77-
"&:hover": {
78-
color: theme.palette.text.primary,
79-
},
80-
}),
81-
activeTabLink: (theme) => ({
82-
color: theme.palette.text.primary,
83-
position: "relative",
84-
85-
"&:before": {
86-
content: '""',
87-
left: 0,
88-
bottom: -1,
89-
height: 1,
90-
width: "100%",
91-
background: theme.palette.primary.main,
92-
position: "absolute",
93-
},
94-
}),
95-
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncHelpTooltip.tsx

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx

Lines changed: 53 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
2-
import Button from "@mui/material/Button";
31
import { groupsByOrganization } from "api/queries/groups";
4-
import { organizationRoles } from "api/queries/roles";
52
import {
63
groupIdpSyncSettings,
74
roleIdpSyncSettings,
85
} from "api/queries/organizations";
6+
import { organizationRoles } from "api/queries/roles";
97
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
108
import { EmptyState } from "components/EmptyState/EmptyState";
119
import { Paywall } from "components/Paywall/Paywall";
12-
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
10+
import { SquareArrowOutUpRight } from "lucide-react";
1311
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
1412
import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
1513
import type { FC } from "react";
@@ -18,7 +16,6 @@ import { useQueries } from "react-query";
1816
import { useParams } from "react-router-dom";
1917
import { docs } from "utils/docs";
2018
import { pageTitle } from "utils/page";
21-
import { IdpSyncHelpTooltip } from "./IdpSyncHelpTooltip";
2219
import IdpSyncPageView from "./IdpSyncPageView";
2320

2421
export const IdpSyncPage: FC = () => {
@@ -30,15 +27,19 @@ export const IdpSyncPage: FC = () => {
3027
const { organizations } = useOrganizationSettings();
3128
const organization = organizations?.find((o) => o.name === organizationName);
3229

33-
const [groupIdpSyncSettingsQuery, roleIdpSyncSettingsQuery, groupsQuery, rolesQuery] =
34-
useQueries({
35-
queries: [
36-
groupIdpSyncSettings(organizationName),
37-
roleIdpSyncSettings(organizationName),
38-
groupsByOrganization(organizationName),
39-
organizationRoles(organizationName),
40-
],
41-
});
30+
const [
31+
groupIdpSyncSettingsQuery,
32+
roleIdpSyncSettingsQuery,
33+
groupsQuery,
34+
rolesQuery,
35+
] = useQueries({
36+
queries: [
37+
groupIdpSyncSettings(organizationName),
38+
roleIdpSyncSettings(organizationName),
39+
groupsByOrganization(organizationName),
40+
organizationRoles(organizationName),
41+
],
42+
});
4243

4344
if (!organization) {
4445
return <EmptyState message="Organization not found" />;
@@ -62,42 +63,45 @@ export const IdpSyncPage: FC = () => {
6263
<title>{pageTitle("IdP Sync")}</title>
6364
</Helmet>
6465

65-
<div className="flex items-baseline justify-between"
66-
>
67-
<SettingsHeader
68-
title="IdP Sync"
69-
description="Group and role sync mappings (configured using Coder CLI)."
70-
tooltip={<IdpSyncHelpTooltip />}
71-
/>
72-
<Button
73-
startIcon={<LaunchOutlined />}
74-
component="a"
75-
href={docs("/admin/users/idp-sync")}
76-
target="_blank"
77-
>
78-
Setup IdP Sync
79-
</Button>
66+
<div className="flex flex-col gap-12">
67+
<header className="flex flex-row items-baseline justify-between">
68+
<div className="flex flex-col gap-2">
69+
<h1 className="text-3xl m-0">IdP Sync</h1>
70+
<p className="flex flex-row gap-1 text-sm text-content-secondary font-medium m-0">
71+
Automatically assign groups or roles to a user based on their IdP
72+
claims.
73+
<a
74+
href={docs("/admin/users/idp-sync")}
75+
className="flex flex-row text-content-link items-center gap-1 no-underline hover:underline visited:text-content-link"
76+
>
77+
View docs
78+
<SquareArrowOutUpRight size={14} />
79+
</a>
80+
</p>
81+
</div>
82+
{/* <ExportPolicyButton syncSettings={orgSyncSettingsData} /> */}
83+
</header>
84+
<ChooseOne>
85+
<Cond condition={!isIdpSyncEnabled}>
86+
<Paywall
87+
message="IdP Sync"
88+
description="Configure group and role mappings to manage permissions outside of Coder. You need an Premium license to use this feature."
89+
documentationLink={docs("/admin/users/idp-sync")}
90+
/>
91+
</Cond>
92+
<Cond>
93+
<IdpSyncPageView
94+
groupSyncSettings={groupIdpSyncSettingsQuery.data}
95+
roleSyncSettings={roleIdpSyncSettingsQuery.data}
96+
groups={groupsQuery.data}
97+
groupsMap={groupsMap}
98+
roles={rolesQuery.data}
99+
organization={organization}
100+
error={error}
101+
/>
102+
</Cond>
103+
</ChooseOne>
80104
</div>
81-
<ChooseOne>
82-
<Cond condition={!isIdpSyncEnabled}>
83-
<Paywall
84-
message="IdP Sync"
85-
description="Configure group and role mappings to manage permissions outside of Coder. You need an Premium license to use this feature."
86-
documentationLink={docs("/admin/users/idp-sync")}
87-
/>
88-
</Cond>
89-
<Cond>
90-
<IdpSyncPageView
91-
groupSyncSettings={groupIdpSyncSettingsQuery.data}
92-
roleSyncSettings={roleIdpSyncSettingsQuery.data}
93-
groups={groupsQuery.data}
94-
groupsMap={groupsMap}
95-
roles={rolesQuery.data}
96-
organization={organization}
97-
error={error}
98-
/>
99-
</Cond>
100-
</ChooseOne>
101105
</>
102106
);
103107
};

‎site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,8 +176,7 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
176176
showDisabled
177177
/>
178178
</div>
179-
<div
180-
className="flex items-baseline justify-between mb-4">
179+
<div className="flex items-baseline justify-between mb-4">
181180
<TableRowCount count={roleMappingCount} type="roles" />
182181
<ExportPolicyButton
183182
syncSettings={roleSyncSettings}

0 commit comments

Comments
 (0)