Skip to content

Commit b8c7b56

Browse files
BrunoQuaresmaBrunoQuaresma
authored
fix(site): fix tabs in the template layout (#10334)
1 parent c4f5905 commit b8c7b56

File tree

3 files changed

+93
-171
lines changed

3 files changed

+93
-171
lines changed

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { ReactNode } from "react";
2+
import { NavLink, NavLinkProps } from "react-router-dom";
3+
import { combineClasses } from "utils/combineClasses";
4+
import { Margins } from "components/Margins/Margins";
5+
import { css } from "@emotion/css";
6+
import { useTheme } from "@mui/material/styles";
7+
8+
export const Tabs = ({ children }: { children: ReactNode }) => {
9+
return (
10+
<div
11+
css={(theme) => ({
12+
borderBottom: `1px solid ${theme.palette.divider}`,
13+
marginBottom: theme.spacing(5),
14+
})}
15+
>
16+
<Margins
17+
css={(theme) => ({
18+
display: "flex",
19+
alignItems: "center",
20+
gap: theme.spacing(0.25),
21+
})}
22+
>
23+
{children}
24+
</Margins>
25+
</div>
26+
);
27+
};
28+
29+
export const TabLink = (props: NavLinkProps) => {
30+
const theme = useTheme();
31+
32+
const baseTabLink = css`
33+
text-decoration: none;
34+
color: ${theme.palette.text.secondary};
35+
font-size: 14px;
36+
display: block;
37+
padding: ${theme.spacing(0, 2, 2)};
38+
39+
&:hover {
40+
color: ${theme.palette.text.primary};
41+
}
42+
`;
43+
44+
const activeTabLink = css`
45+
color: ${theme.palette.text.primary};
46+
position: relative;
47+
48+
&:before {
49+
content: "";
50+
left: 0;
51+
bottom: 0;
52+
height: 2px;
53+
width: 100%;
54+
background: ${theme.palette.secondary.dark};
55+
position: absolute;
56+
}
57+
`;
58+
59+
return (
60+
<NavLink
61+
className={({ isActive }) =>
62+
combineClasses([
63+
baseTabLink,
64+
isActive ? activeTabLink : undefined,
65+
props.className as string,
66+
])
67+
}
68+
{...props}
69+
/>
70+
);
71+
};

‎site/src/components/UsersLayout/UsersLayout.tsx

Lines changed: 6 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,17 @@
11
import Button from "@mui/material/Button";
22
import Link from "@mui/material/Link";
3-
import { makeStyles } from "@mui/styles";
43
import GroupAdd from "@mui/icons-material/GroupAddOutlined";
54
import PersonAdd from "@mui/icons-material/PersonAddOutlined";
65
import { USERS_LINK } from "components/Dashboard/Navbar/NavbarView";
76
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
87
import { useFeatureVisibility } from "hooks/useFeatureVisibility";
98
import { usePermissions } from "hooks/usePermissions";
109
import { FC } from "react";
11-
import {
12-
Link as RouterLink,
13-
NavLink,
14-
Outlet,
15-
useNavigate,
16-
} from "react-router-dom";
17-
import { combineClasses } from "utils/combineClasses";
10+
import { Link as RouterLink, Outlet, useNavigate } from "react-router-dom";
1811
import { Margins } from "components/Margins/Margins";
19-
import { Stack } from "components/Stack/Stack";
12+
import { TabLink, Tabs } from "components/Tabs/Tabs";
2013

2114
export const UsersLayout: FC = () => {
22-
const styles = useStyles();
2315
const { createUser: canCreateUser, createGroup: canCreateGroup } =
2416
usePermissions();
2517
const navigate = useNavigate();
@@ -53,75 +45,14 @@ export const UsersLayout: FC = () => {
5345
</PageHeader>
5446
</Margins>
5547

56-
<div className={styles.tabs}>
57-
<Margins>
58-
<Stack direction="row" spacing={0.25}>
59-
<NavLink
60-
end
61-
to={USERS_LINK}
62-
className={({ isActive }) =>
63-
combineClasses([
64-
styles.tabItem,
65-
isActive ? styles.tabItemActive : undefined,
66-
])
67-
}
68-
>
69-
Users
70-
</NavLink>
71-
<NavLink
72-
to="/groups"
73-
className={({ isActive }) =>
74-
combineClasses([
75-
styles.tabItem,
76-
isActive ? styles.tabItemActive : undefined,
77-
])
78-
}
79-
>
80-
Groups
81-
</NavLink>
82-
</Stack>
83-
</Margins>
84-
</div>
48+
<Tabs>
49+
<TabLink to={USERS_LINK}>Users</TabLink>
50+
<TabLink to="/groups">Groups</TabLink>
51+
</Tabs>
8552

8653
<Margins>
8754
<Outlet />
8855
</Margins>
8956
</>
9057
);
9158
};
92-
93-
export const useStyles = makeStyles((theme) => {
94-
return {
95-
tabs: {
96-
borderBottom: `1px solid ${theme.palette.divider}`,
97-
marginBottom: theme.spacing(5),
98-
},
99-
100-
tabItem: {
101-
textDecoration: "none",
102-
color: theme.palette.text.secondary,
103-
fontSize: 14,
104-
display: "block",
105-
padding: theme.spacing(0, 2, 2),
106-
107-
"&:hover": {
108-
color: theme.palette.text.primary,
109-
},
110-
},
111-
112-
tabItemActive: {
113-
color: theme.palette.text.primary,
114-
position: "relative",
115-
116-
"&:before": {
117-
content: `""`,
118-
left: 0,
119-
bottom: 0,
120-
height: 2,
121-
width: "100%",
122-
background: theme.palette.secondary.dark,
123-
position: "absolute",
124-
},
125-
},
126-
};
127-
});

‎site/src/pages/TemplatePage/TemplateLayout.tsx

Lines changed: 16 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import { css } from "@emotion/css";
21
import { useTheme } from "@emotion/react";
32
import { createContext, type FC, Suspense, useContext } from "react";
43
import { useQuery } from "react-query";
5-
import { NavLink, Outlet, useNavigate, useParams } from "react-router-dom";
4+
import { Outlet, useNavigate, useParams } from "react-router-dom";
65
import type { AuthorizationRequest } from "api/typesGenerated";
76
import {
87
checkAuthorization,
@@ -11,10 +10,10 @@ import {
1110
} from "api/api";
1211
import { ErrorAlert } from "components/Alert/ErrorAlert";
1312
import { Margins } from "components/Margins/Margins";
14-
import { Stack } from "components/Stack/Stack";
1513
import { Loader } from "components/Loader/Loader";
1614
import { useOrganizationId } from "hooks/useOrganizationId";
1715
import { TemplatePageHeader } from "./TemplatePageHeader";
16+
import { TabLink, Tabs } from "components/Tabs/Tabs";
1817

1918
const templatePermissions = (
2019
templateId: string,
@@ -85,34 +84,6 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
8584
return <Loader />;
8685
}
8786

88-
const itemStyles = css`
89-
text-decoration: none;
90-
color: ${theme.palette.text.secondary};
91-
font-size: 14;
92-
display: block;
93-
padding: ${theme.spacing(0, 2, 2)};
94-
95-
&:hover {
96-
color: ${theme.palette.text.primary};
97-
}
98-
`;
99-
100-
const activeItemStyles = css`
101-
${itemStyles}
102-
color: ${theme.palette.text.primary};
103-
position: relative;
104-
105-
&:before {
106-
content: "";
107-
left: 0;
108-
bottom: 0;
109-
height: 2;
110-
width: 100%;
111-
background: ${theme.palette.secondary.dark};
112-
position: absolute;
113-
}
114-
`;
115-
11687
return (
11788
<>
11889
<TemplatePageHeader
@@ -124,71 +95,20 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
12495
}}
12596
/>
12697

127-
<div
128-
css={{
129-
borderBottom: `1px solid ${theme.palette.divider}`,
130-
marginBottom: theme.spacing(5),
131-
}}
132-
>
133-
<Margins>
134-
<Stack direction="row" spacing={0.25}>
135-
<NavLink
136-
end
137-
to={`/templates/${templateName}`}
138-
className={({ isActive }) =>
139-
isActive ? activeItemStyles : itemStyles
140-
}
141-
>
142-
Summary
143-
</NavLink>
144-
<NavLink
145-
end
146-
to={`/templates/${templateName}/docs`}
147-
className={({ isActive }) =>
148-
isActive ? activeItemStyles : itemStyles
149-
}
150-
>
151-
Docs
152-
</NavLink>
153-
{data.permissions.canUpdateTemplate && (
154-
<NavLink
155-
to={`/templates/${templateName}/files`}
156-
className={({ isActive }) =>
157-
isActive ? activeItemStyles : itemStyles
158-
}
159-
>
160-
Source Code
161-
</NavLink>
162-
)}
163-
<NavLink
164-
to={`/templates/${templateName}/versions`}
165-
className={({ isActive }) =>
166-
isActive ? activeItemStyles : itemStyles
167-
}
168-
>
169-
Versions
170-
</NavLink>
171-
<NavLink
172-
to={`/templates/${templateName}/embed`}
173-
className={({ isActive }) =>
174-
isActive ? activeItemStyles : itemStyles
175-
}
176-
>
177-
Embed
178-
</NavLink>
179-
{shouldShowInsights && (
180-
<NavLink
181-
to={`/templates/${templateName}/insights`}
182-
className={({ isActive }) =>
183-
isActive ? activeItemStyles : itemStyles
184-
}
185-
>
186-
Insights
187-
</NavLink>
188-
)}
189-
</Stack>
190-
</Margins>
191-
</div>
98+
<Tabs>
99+
<TabLink end to={`/templates/${templateName}`}>
100+
Summary
101+
</TabLink>
102+
<TabLink to={`/templates/${templateName}/docs`}>Docs</TabLink>
103+
{data.permissions.canUpdateTemplate && (
104+
<TabLink to={`/templates/${templateName}/files`}>Source Code</TabLink>
105+
)}
106+
<TabLink to={`/templates/${templateName}/versions`}>Versions</TabLink>
107+
<TabLink to={`/templates/${templateName}/embed`}>Embed</TabLink>
108+
{shouldShowInsights && (
109+
<TabLink to={`/templates/${templateName}/insights`}>Insights</TabLink>
110+
)}
111+
</Tabs>
192112

193113
<Margins>
194114
<TemplateLayoutContext.Provider value={data}>

0 commit comments

Comments
 (0)