Skip to content

Commit 997e0d3

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Add base notifications components
1 parent fc282e7 commit 997e0d3

File tree

3 files changed

+108
-4
lines changed

3 files changed

+108
-4
lines changed

‎site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import type { Interpolation, Theme } from "@emotion/react";
2+
import EmailIcon from "@mui/icons-material/EmailOutlined";
3+
import Card from "@mui/material/Card";
4+
import Divider from "@mui/material/Divider";
5+
import List from "@mui/material/List";
6+
import ListItem from "@mui/material/ListItem";
7+
import ListItemIcon from "@mui/material/ListItemIcon";
8+
import ListItemText, { listItemTextClasses } from "@mui/material/ListItemText";
9+
import Switch from "@mui/material/Switch";
10+
import type { FC } from "react";
11+
import { Section } from "../Section";
12+
13+
export const NotificationsPage: FC = () => {
14+
return (
15+
<Section
16+
title="Notifications"
17+
description="Configure notifications. Some may be disabled by the deployment administrator."
18+
layout="fluid"
19+
>
20+
<Card variant="outlined" css={{ background: "transparent" }}>
21+
<List>
22+
<ListItem css={styles.listHeader}>
23+
<ListItemIcon>
24+
<Switch size="small" />
25+
</ListItemIcon>
26+
<ListItemText
27+
css={styles.listItemText}
28+
primary="Workspace events"
29+
/>
30+
</ListItem>
31+
<ListItem>
32+
<ListItemIcon>
33+
<Switch size="small" />
34+
</ListItemIcon>
35+
<ListItemText
36+
css={styles.listItemText}
37+
primary="Dormancy"
38+
secondary="When a workspace is marked as dormant"
39+
/>
40+
<ListItemIcon css={styles.listItemEndIcon}>
41+
<EmailIcon />
42+
</ListItemIcon>
43+
</ListItem>
44+
<Divider />
45+
<ListItem>
46+
<ListItemIcon>
47+
<Switch size="small" />
48+
</ListItemIcon>
49+
<ListItemText
50+
css={styles.listItemText}
51+
primary="Deletion"
52+
secondary="When a workspace is marked for deletion"
53+
/>
54+
<ListItemIcon css={styles.listItemEndIcon}>
55+
<EmailIcon />
56+
</ListItemIcon>
57+
</ListItem>
58+
<Divider />
59+
<ListItem>
60+
<ListItemIcon>
61+
<Switch size="small" />
62+
</ListItemIcon>
63+
<ListItemText
64+
css={styles.listItemText}
65+
primary="Build failure"
66+
secondary="When a workspace fails to build"
67+
/>
68+
<ListItemIcon css={styles.listItemEndIcon}>
69+
<EmailIcon />
70+
</ListItemIcon>
71+
</ListItem>
72+
</List>
73+
</Card>
74+
</Section>
75+
);
76+
};
77+
78+
export default NotificationsPage;
79+
80+
const styles = {
81+
listHeader: (theme) => ({
82+
background: theme.palette.background.paper,
83+
borderBottom: `1px solid ${theme.palette.divider}`,
84+
}),
85+
listItemText: {
86+
[`& .${listItemTextClasses.primary}`]: {
87+
fontSize: 14,
88+
fontWeight: 500,
89+
},
90+
[`& .${listItemTextClasses.secondary}`]: {
91+
fontSize: 14,
92+
},
93+
},
94+
listItemEndIcon: (theme) => ({
95+
minWidth: 0,
96+
fontSize: 20,
97+
color: theme.palette.text.secondary,
98+
99+
"& svg": {
100+
fontSize: "inherit",
101+
},
102+
}),
103+
} as Record<string, Interpolation<Theme>>;

‎site/src/pages/UserSettingsPage/Sidebar.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import AppearanceIcon from "@mui/icons-material/Brush";
22
import ScheduleIcon from "@mui/icons-material/EditCalendarOutlined";
33
import FingerprintOutlinedIcon from "@mui/icons-material/FingerprintOutlined";
44
import SecurityIcon from "@mui/icons-material/LockOutlined";
5+
import NotificationsIcon from "@mui/icons-material/NotificationsNoneOutlined";
56
import AccountIcon from "@mui/icons-material/Person";
67
import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined";
78
import type { FC } from "react";
@@ -56,6 +57,9 @@ export const Sidebar: FC<SidebarProps> = ({ user }) => {
5657
<SidebarNavItem href="tokens" icon={VpnKeyOutlined}>
5758
Tokens
5859
</SidebarNavItem>
60+
<SidebarNavItem href="notifications" icon={NotificationsIcon}>
61+
Notifications
62+
</SidebarNavItem>
5963
</BaseSidebar>
6064
);
6165
};

‎site/src/router.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -265,10 +265,6 @@ const ProvisionerDaemonsHealthPage = lazy(
265265
const UserNotificationsPage = lazy(
266266
() => import("./pages/UserSettingsPage/NotificationsPage/NotificationsPage"),
267267
);
268-
const DeployNotificationsPage = lazy(
269-
() =>
270-
import("./pages/DeploySettingsPage/NotificationsPage/NotificationsPage"),
271-
);
272268

273269
const RoutesWithSuspense = () => {
274270
return (
@@ -439,6 +435,7 @@ export const router = createBrowserRouter(
439435
<Route index element={<TokensPage />} />
440436
<Route path="new" element={<CreateTokenPage />} />
441437
</Route>
438+
<Route path="notifications" element={<UserNotificationsPage />} />
442439
</Route>
443440

444441
{/* In order for the 404 page to work properly the routes that start with

0 commit comments

Comments
 (0)